概述

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

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

回忆：Vue有vue-loader -> .vue文件里写<template><script><style>，通过vue-loader编程一个构造选项。

React有JSX,那么是不是用 jsx-loader 就可以了呢？实际上 jsx-loader 被 babel-loader 取代了，而 babel-loader 被 webpack 内置了。

使用JSX

• 方法一：CDN（永远不要在生产环境下使用，效率太低（引入+转译））

  • 引入babelmin.js
  • 把<script>改成<script type="text/babel">
  • babel会自动进行转译，示例
  • 这种方式似乎不支持src

• 方法二：webpack+babel-loader（新手跳过）

• 方法三：使用 create-react-app

  最简便的就是使用 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语法。