前言

今天我们一起看一看react中JSX的基本使用，以及如何在JSX中使用JavaScript表达式吧。一起来围观JSX书写的代码都有哪些优点~

---

一、JSX基本使用

1. 为什么使用JSX？

• 繁琐不简洁
• 不直观，无法一眼看出所描述的结构

React.createElement( 
  'div',
  null, 
  React.createElement('h1', null, ‘购物列表'), 
  React.createElement(
    'ul',
    null,
    React.createElement('li', null, ‘华为'), 
    React.createElement('li', null, ‘iPhone')
 )
)

2. JSX简介

• JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写XML（HTML）格式的代码
• 优势：声明式语法更加直观、与HTML结构相同，降低了学习成本、提升开发效率
• JSX 是 React 的核心内容

3. 使用步骤

• 使用JSX语法创建react元素

// 使用 JSX 语法，创建 react 元素：
const el = <h1>Hello JSX</h1>

• 使用 ReactDOM.render() 方法渲染 react 元素到页面中

// 渲染创建好的React元素
ReactDOM.render(el,root)

4. 注意点

• React元素的属性名使用驼峰命名法： tabindex -> tabIndex
• 特殊属性名：class -> className、for -> htmlFor
• 在React中所有标签都要闭合 />，无论你是不是自闭和标签
• 推荐：使用小括号包裹 JSX ，从而避免 JS 中的自动插入分号陷阱

// 使用小括号包裹 JSX 
const dv = (
  <div>Helo JSX</div>
)

二、JSX 中使用JavaScript表达式

1. 嵌入JS表达式

语法：{ JavaScript表达式 } 代码如下（示例）：

const name = 'Jack'
const dv = (
  <div>你好，我叫：{name}</div>
)

2. 注意点

• 单大括号中可以是任意的JavaScript表达式 正确：{1}、{1+1}、{‘a’}、 { 1>0 ?‘真’:‘假’ }、{[1,2,3]} 、 {[<div>1</div>, <div>2</div>, <div>3</div>]} 简单记忆：基本类型和基本类型之间的运算，除此之外， {sayHi()}、{另外一个JSX}

• 单大括号中不能出现语句(例如：if/for等) 错误：{if(1>0){}}、{for(let i=0;i<10;i++){}}

• JS对象一般只会出现在style属性中 错误：{{name:'rose'}} 正确：conts Home = <div style={{color:'red'}}>

---

总结

Lifeless, faultless.