JSX的基本使用

JSX的基本使用

JSX 是 JavaScript XML 的简写，表示在 JavaScript 代码中写 XML ( HTML）格式的代码

优势：声明式语法更加直观、与 HTML 结构相同，降低了学习成本、提升开发效率

使用步骤

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

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

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

ReactDom.render(title, root)

---

为什么脚手架中可以使用JSX语法?

1. JSX 不是标准的 ECMAScript 语法，它是 ECMAScript 的语法扩展。
2. 需要使用 babel 编译处理后，才能在浏览器环境中使用。
3. create-react-app 脚手架中已经默认有该配置，无需手动配置。
4. 编译 JSX 的包为 @bable/preset-react

---

嵌入 JS 表达式

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

import React from "react";
import ReactDOM from "react-dom";

// JSX中使用 JavaScript 表达式
const name = 'Jack'
const title =(
  <h1 className="title">
    Hello, { name }
  </h1>
) 
// 渲染 react 元素
ReactDOM.render(title, document.getElementById('root'))

---

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>
)

---

JSX 的样式处理

1. 行内样式——style

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

2. 类名——className 【推荐】

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

---

JSX 总结

1. JSX是React的核心内容。
2. JSX表示在JS代码中写HTML结构，是React声明式的体现。
3. 使用JSX配合嵌入的JS表达式、条件渲染、列表渲染，可以描述任意UI结构。
4. 推荐使用className的方式给JSX添加样式。
5. React完全利用JS语言自身的能力来编写Ul，而不是造轮子增强HTML功能。