《React JSX》

我们之前使用React，需要React.createElement，创建一个虚拟dom，这样使代码看起来很复杂。能不能像Vue一样简洁呢？

使用JSX。JSX就是JS的扩展版。使用JSX语法就可以把代码变得简洁，同时达到同样的效果。

使用JSX可以通过cdn引入，自己配置，但是这两种很难。

最简便的就是使用create react app这个工具

之前我们已经用它创建过一个React项目了，它的用法和@vue/cli类似。先全局安装，然后创建项目，cd进入项目。使用yarn start开发。

我们先写一个React函数组件，App.js

import React from "react";

const App = () => {
  return （
    <div>我是App组件</div>;
    ）
};

export default App;

注意这是JS文件，在JS里写html是不合法的。但是这里为什么可以呢？因为create react app这个工具会自动把JS当成JSX。JSX语法就是App是一个函数，return 一个element。它可以不写React.createElement()这么麻烦，可以直接以html标签的形式写。把内容或子元素也是直接包在里边。

所以这个<div>就相当于React.createElement()，所以要在组件里import React。如果不这样做就会报错。

//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root"));

然后在index.js里引入App组件，使用ReactDOM 渲染，这里可以调用函数App()，但是我们更经常以组件的形式渲染，写成<App />

使用JSX的注意事项

1. className

   如果要写class属性，要写成className<div className="red"></div>因为它会被转译成React.createElement('div',{className:'red'})

2. 插入变量和函数

   都要用{}包起来，标签里的所有JS代码都要用{}包起来。

   如：{n} 表示变量n； 如果想表示一个对象，也要用{}把对象包起来，如{{name:'li'}}

3. 组件里，习惯在return 后加一个()，把东西包在里边。

总结

React里的JSX类似于Vue里的vue-loader。vue-loader可以做到把.vue文件里的三个标签变成构造选项。

JSX也可以通过直接写标签的形式，等同于React.createElement() JSX-loader被集成在了babel-loader里，它又被webpack内置了，所以.js文件默认使用JSX语法。