使用JSX

在js文件中，默认不能写类似HTML的标记，否则会打包失败
可以使用 babel 来转换这些JS中的标签，将标签转换为虚拟DOM对象 React.createElement
注意：在js中混合写入类似于 HTML 的语法，叫做JSX语法；符合XML规范的JS

配置babel

一、安装babel插件

• npm i babel-core babel-loader babel-plugin-transform-runtime -D
• npm i babel-preset-env babel-preset-stage-0 -D

二、安装能够识别转换JSX语法的包

• npm i babel-preset-react -D

三、在webpack.config.js中添加对babel插件的引用

//webpack 默认只能打包处理.js后缀名类型的文件，
//像.png .vue 无法主动处理
//所以要配置第三方的loader；
//所有第三方模块的配置规则放入module
module: {
    rules: [
        {
            test: /\.js|jsx$/,
            use: 'babel-loader',
            exclude: /node_modules/ //排除项目，必须,是正则不是字符串
        }
    ]
}

四、在项目根目录文件夹中，添加babel配置文件.babelrc，注意这个文件名有个rc不是单独的babel

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

源代码

JSX语法

在jsx中混合写入js表达式

• 在 JSX 控制的区域内（HTML代码），要把js代码写到{}中
• jsx代码中的HTML标签必须遵循XML规范，<hr/>标签需要闭合，必须是小写

渲染类型

• 渲染数字
• 渲染字符串
• 渲染布尔值：{true}不会在页面渲染，但不是报错；{true.toString}会渲染出true;三目运算{true?'真':'假'}可以渲染出真
• 为属性绑定值：<p title = {title}>p标签</p>不要写双引号
• 渲染jsx元素：let h1 = <h1>this is h1 tag</h1>；{h1}渲染出h1标签；h1渲染出h1字符串
• 数组let arrStr = ['一', '二', '三']，用{arrStr}渲染没有问题
• 渲染jsx元素数组：

let arr = [
    <h2>这是h2</h2>,
    <h3>这是h3</h3>
]
ReactDOM.render(<div>{arr}</div>, document.getElementById('app'))
//Warning: Each child in an array or iterator should have a unique "key" prop.

• 将普通字符串数组转为jsx数组并渲染到页面上（两种方案）

在jsx外部手动循环

let arrStr = ['一', '二', '三']

let nameArr = [];

arrStr.forEach(item => {
    let temp = <h5>{item}</h5>
    nameArr.push(temp)
})

ReactDOM.render(<div>
        {nameArr}
    </div>, document.getElementById('app'))
//Warning: Each child in an array or iterator should have a unique "key" prop.

jxs在内部循环

let arrStr = ['一', '二', '三']

ReactDOM.render(<div>
        {arrStr.map(item => <h5>{item}</h5>)}
    </div>, document.getElementById('app'))
//Warning: Each child in an array or iterator should have a unique "key" prop.