JSX语法

什么是JSX语法：就是符合 xml 规范的 JS 语法；（语法格式相对来说，要比HTML严谨很多）

1. 如何启用 jsx 语法？
　安装 `babel` 插件

- 运行`cnpm i babel-core babel-loader babel-plugin-transform-runtime -D`
- 运行`cnpm i babel-preset-env babel-preset-stage-0 -D`

安装能够识别转换jsx语法的包 `babel-preset-react`

- 运行`cnpm i babel-preset-react -D`

添加 `.babelrc` 配置文件

JSON
{
"presets": ["env", "stage-0", "react"],
"plugins": ["transform-runtime"]
}

添加babel-loader配置项：

javascript
module: { //要打包的第三方模块
    rules: [
        { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
}

2. jsx 语法的本质：并不是直接把 jsx 渲染到页面上，而是 内部先转换成了 createElement 形式，再渲染的；

3. 在 jsx 中混合写入 js 表达式：在 jsx 语法中，要把 JS代码写到 `{ }` 中

+ 渲染数字
+ 渲染字符串
+ 渲染布尔值
+ 为属性绑定值
+ 渲染jsx元素
+ 渲染jsx元素数组
+ 将普通字符串数组，转为jsx数组并渲染到页面上【两种方案】

const array=['Embrace' ,'Lavender']
方案1 forEach
const nameArr=[]
array.forEach(item=>{
    const temp=<h5>{item}</h5>
    nameArr.puse(temp)
})
再在render中引用{nameArr}

方案2 map 直接在render中引用
{array.map(item=>{
    return <h5>{item}</h5>
})}
即可

4. 在 jsx 中 写注释：推荐使用`{ /* 这是注释 */ }`

5. 为 jsx 中的元素添加class类名：需要使用`className` 来替代 `class`；`htmlFor`替换label的`for`属性

6. 在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；

7. 在 jsx 语法中，标签必须 成对出现，如果是单标签，则必须自闭和！

8.React 中样式。规定使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>我们一起走过的路</h1>,
    document.getElementById('example')
);

> 当 编译引擎，在编译JSX代码的时候，如果遇到了`<`那么就把它当作 HTML代码去编译，如果遇到了 `{}` 就把 花括号内部的代码当作 普通JS代码去编译；