react：JSX
什么是react?
用于构建用户界面的JavaScript库。
什么是JSX？
React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点：
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。
我们先看下以下代码：
const element =<h1>Hello, React!</h1>;
这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML，它被称为 JSX， 一种 JavaScript 的语法扩展。我们推荐在 React 中使用 JSX 来描述用户界面。JSX 是在 JavaScript 内部实现的。
我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。
说了这么多，接下来我们来具体地去使用JSX！
创建项目
第一步，通过脚手架的命令“npx create-react-app hello-jsx”来创建一个react项目。
第二步，进入“hello-jsx”文件夹执行“npm start”命令，启动项目，当浏览器出现以下界面说明我们创建成功了！
Hello，JSX
每学习一门技术，我们总是会习惯性地打印“Hello，World”，这次也不例外。首先我们在项目的src文件夹下找到index.js文件，把里面全部删掉，编写我们的代码。
1、导入react
import React from 'react'
import ReactDOM from 'react-dom'
2、使用JSX创建react元素
const title = (<h1 className="title">hello JSX</h1>)
3、渲染react元素
ReactDOM.render(title, document.getElementById('root'))
ok，编写完成，是不是比react写的代码简单得多了，完整代码如图所示
打开浏览器检验效果！
JavaScript表达式
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。
1、我们创建一个变量name
const name = 'JSX'
2、在创建react元素的时候，我们用花括号{}接收。
const title = (<h1 className="title">hello {name}</h1>)
完整代码如图所示。
条件渲染
我们可以使用if语句、三元运算表达式和“&&”用来做条件渲染，由于if和三元运算差不多，这里只写三元运算表达式和“&&”。
1、创建一个变量
const isLoading = true
2、创建一个函数
const loadData = () => {
return isLoading ? (<div>loading...</div>) : (<div>数据加载完成</div>)
}
3、使用JSX创建react元素
const title = (<h1 className='title'>条件渲染：{loadData()}</h1>)
4、渲染react元素
ReactDOM.render(title, document.getElementById('root'))
完整代码如图所示。
“&&”也可以实现同样的效果，写法如下所示。
const loadData = () => {
return isLoading && (<div>loading...</div>)
}
列表渲染
1、创建列表
const plays = [
{id: 1, name : "打球"},
{id: 2, name : "跳舞"},
{id: 3, name : "唱歌"},
]
2、使用JSX创建react元素
const list = (
<ul>
{plays.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
)
3、渲染react元素
ReactDOM.render(list, document.getElementById('root'))
完整代码如图所示。
设置样式
1、引入外部css文件
import './index.css'
2、创建react元素
const title = (<h1 className="title">hello JSX</h1>)
3、渲染react元素
ReactDOM.render(title, document.getElementById('root'))
完整代码如图所示。
ok，在本文我们学习了如何用JSX实现一些简单的应用，包括：
javaScript表达式
条件渲染
列表渲染
设置样式
写在最后
好兄弟可以点赞并关注我的公众号“javaAnswer”，全部都是干货。
