React中的JSX

目录

1. JSX 的基本使用

1.1 createElement() 的问题

1.2 JSX 简介

1.3 使用步骤

1.4 小结 ：

1.5 思考： 为什么脚手架中可以使用JSX 语法？

1.6 注意点

2. JSX 中使用 JavaScript 表达式

2.1 嵌入 JS 表达式

2.2 注意点

3. JSX 的条件渲染 

4. JSX 的列表渲染 

5. JSX 的样式处理

1.行内样式 —— style

2.类名 —— className（推荐）

JSX总结： 总结

---

 

1. JSX 的基本使用

1.1 createElement() 的问题

1. 繁琐不简洁。

2. 不直观，无法一眼看出所描述的 结 构。

3. 不优雅，用户体验不爽。

 

 

1.2 JSX 简介

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

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

JSX 是 React 的核心内容。 

 

1.3 使用步骤

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

// 使用 JSX 语法，创建 react 元素：

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

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

// 渲染创建好的React元素

ReactDOM.render(title, root)

 

1.4 小结 ：

1. 推荐使 用 JSX 语法创 建 React 元素

2. 写 JSX 就跟写 HTML 一样，更加直观 、 友好

3. JSX 语法更能体现