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

一、启用JSX语法

  • 浏览器目前还不支持 ES6 模块，比如这种ES6语法在浏览器和node中都不被支持 import fs from 'fs'，为了现在就能使用，我们可以使用转码器(ES6—>ES5)，也可以使用Browserify。
  • 知名度比较大的转码器有Traceur和babel，babel将ES6代码编译为大多数浏览器（包括IE9）支持的ES5代码。Browserify可以让我们遵循CommonJS规范书写代码，然后经过包装在浏览器中使用。
  1. 安装 babel 插件
    • 运行npm i babel-core@6.26.3 babel-loader@7.1.5 babel-plugin-transform-runtime --save-dev
    • 运行npm i babel-preset-env babel-preset-stage-0 --save-dev
  2. 安装能够识别转换jsx语法的包 babel-preset-react
    • 运行npm i babel-preset-react -D

  3. 添加 .babelrc 配置文件

    1. {
    2. "presets": ["env", "stage-0", "react"],
    3. "plugins": ["transform-runtime"]
    4. }

  4. 添加babel-loader配置项：

    1. module: { //要打包的第三方模块
    2.  rules: [
    3.    { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }
    4.  ]
    5. }
  1. # 在main.js中使用JSX语法 
  2. const mydiv2 = <div><h1>哈哈</h1></div>;
  3. ReactDOM.render(mydiv2, document.getElementById('app'))
  5. #webstrom中JSX语法报错：
  6. Languages & Frameworks > JavaScript设置为JSX Harmony

二、JSX语法

JSX语法的本质：并不是直接把 jsx 渲染到页面上，而是内部通过 createElement 再渲染到页面；
在 jsx 中混合写入 js 表达式：在 jsx 语法中，要把 JS代码写到 { } 中

  1.              <br />**注意点：**
  1. 在 JSX 中 写注释：推荐使用{ / 这是注释 / }
  2. 为 JSX 中的htmlFor替换label的for属性
  3. 在 JSX 创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
  4. 在 JSX 语法中，标签必须成对出现，如果是单标签，则必须自闭和！ ```javascript // 1. 导入包 import React from ‘react’ import ReactDOM from ‘react-dom’

//2. JSX中使用数值、字符串、bool、数组等信息 let a = 10 let str = ‘你好，中国’ let boo = false let title = ‘999’ const h1 =

红火火恍恍惚惚

const arr = [

这是h2

,

这是h3

] const arrStr = [‘毛利兰’, ‘柯南’, ‘小五郎’, ‘灰原哀’]

// 定义一个空数组，将来用来存放 名称 标签【方案1】 const nameArr = [] // 注意： React 中，需要把 key 添加给 被 forEach 或 map 或 for 循环直接控制的元素 arrStr.forEach(item => { const temp =

{item}
nameArr.push(temp) })

// 数组的 map 方法, map 中必须写 return / const result = arrStr.map(item => { return item + ‘~~’ }) console.log(result) /

// 3. 调用 render 函数渲染 JSX XML 比 HTML 严格多了 // 在JSX要使用JS，则需要把 JS 代码写到 {} 中 ReactDOM.render(

{a + 2}
{str}
{boo ? ‘条件为真’ : ‘条件为假’}

这是p标签

{h1}
{/ {arr} /} { // 这是注释，你看不见我 }
{nameArr}
{arrStr.map(item =>

{item}

)}

, document.getElementById(‘app’))

```