初识React(day3)

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第3天，点击查看活动详情

上一篇文章我们介绍了如何使用React脚手架初始化项目并且实现了Hello world的展示，接下来哦我们将会介绍React中的重要内容：JSX的使用

JSX的基本使用：

1. JSX简介：JSX是JavaScript XML的简写，表示在JavaScript代码中写XML（HTML）格式的代码。
2. JSX优势：声明式语法更加直观,与HTML结构相同，降低了学习的成本，提高了开发的效率
3. JSX是React的核心内容
4. JSX的使用步骤

• 使用JSX语法创建React元素

//使用JSX语法，创建React元素
const title = <h1>Hello JSX</h1>

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

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

5. 推荐使用JSX语法创建React元素
6. 写JSX就和写HTML一样，更加直观和友好
7. JSX语法更能体现React的声明式特点（描述UI长什么样子）

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

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

JSX使用的一些注意点：

1. React元素的属性名必须使用驼峰命名法来命名
2. 特殊属性名：class=>className,for=>htmlFor,tabindex=>tabIndex
3. 没有子节点的react元素可以使用/>结束
4. 推荐使用小括号包裹JSX，从而避免JS中的自动插入分号的陷阱，示例如下所示：

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

以上就是JSX的基本使用了。