1.JSX的基本使用

1.1 createElement()的问题

1. 繁琐不简洁。
2. 不直观。
3. 不优雅，体验感不佳。

1.2 使用步骤

1. 使用JSX语法创建react元素

const title = <h1>Hello JSX</h1>

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

ReactDOM.render(title,root)

• 为什么脚手架中可以使用JSX语法？ 虽然JSX不是标准的ECMAScript语法，但create-react-app脚手架中已经有了可以编译的babel包，所以无需特别配置。

1.2 注意点

1. React元素的属性名使用驼峰命名法。
2. 特殊属性名：class->className、for->htmlFor、tabindex->tabIndex。
3. 没有子节点的React元素可以用/>结束。
4. 推荐：使用小括号包裹JSX，从而避免JS中的自动插入分号陷进。

2.JSX中使用JavaScript表达式

嵌入JS表达式

• 数据存储在JS中
• 语法：{JavaScript表达式}
• 注意：语法中是单大括号，不是双大括号

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

3.JSX的条件渲染

• 场景：loading效果
• 条件渲染：根据条件渲染特定的JSX结构
• 可以使用if/else或三元运算符或逻辑与运算符来实现

4.JSX的列表渲染

• 如果要渲染一组数据，应该使用数组的map()方法
• 注意：渲染列表时应该添加key属性，key属性的值要保证唯一
• 原则：map()遍历谁，就给谁添加key属性
• 注意：尽量避免使用索引号作为key

const songs = [
   {id: 1,name: '吃'},
   {id: 2,name: '喝'},
   {id: 3,name: '玩'},
]

const list = (
  <ul>
    {songs.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
)

5.JSX的样式处理

1. 行内样式---style

<h1 style={{color: 'red',backgroundColor: 'skyblue'}}>
   JSX的样式处理
</h1>

2. 类名---className(推荐)

<h1 className="title">
   JSX的样式处理
</h1>

• React完全利用JS语言自身的能力来编写UI，而不是造轮子增强HTML功能。