react-jsx语法

JSX语法

1. 如要要使用 JSX 语法，必须先运行 cnpm i babel-preset-react -D，然后再 .babelrc 中添加 语法配置；

babelrc配置

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

webpack中配置

module: {
    rules: [
      { test: /.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[name]_[local]-[hash:5]'] }, // 通过 为 css-loader 添加 modules 参数，启用 CSS 的模块化
      { test: /.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /.(png|gif|bmp|jpg)$/, use: 'url-loader?limit=5000' },
      { test: /.jsx?$/, use: 'babel-loader', exclude: /node_modules/ }
    ]
  }

2. JSX语法的本质：还是以 React.createElement 的形式来实现的，并没有直接把 用户写的 HTML代码，渲染到页面上；
3. 如果要在 JSX 语法内部，书写 JS 代码了，那么，所有的JS代码，必须写到 {} 内部；
4. 当 编译引擎，在编译JSX代码的时候，如果遇到了<那么就把它当作 HTML代码去编译，如果遇到了 {} 就把 花括号内部的代码当作 普通JS代码去编译；
5. 在{}内部，可以写任何符合JS规范的代码；
6. 在JSX中，如果要为元素添加class属性了，那么，必须写成className，因为 class在ES6中是一个关键字；和class类似，label标签的 for 属性需要替换为 htmlFor.
7. 在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
8. 如果要写注释了，注释必须放到 {} 内部

var myH1 = React.createElement('h1', null, '这是一个大大的H1')
var myDiv = React.createElement('div', { title: 'this is a div', id: 'mydiv' }, '这是一个div', myH1)

由于，React官方，发现，如果直接让用户手写 JS 代码创建元素，用户会疯掉的，然后，用户就开始寻找新的前端框架了，于是，
React 官方，就提出了一套 JSX 语法规范，能够让我们在 JS 文件中，书写类似于 HTML 那样的代码，快速定义虚拟DOM结构；
问题： JSX（符合 XML 规范的 JS 语法）的原理是什么？？？
注意： 千万要记住，哪怕你在 JS 中可以写 JSX 语法了，但是，JSX内部在运行的时候，也是先把 类似于HTML 这样的标签代码，
转换为了 React.createElement 的形式；
也就是说：哪怕我们写了 JSX 这样的标签，也并不是直接把 我们的 HTML 标签渲染到页面上，而是先转换成 React.createElement 这样的JS代码，再渲染到页面中；（JSX是一个对程序员友好的语法糖）

如果要直接使用 JSX 语法，需要先安装相关的 语法转换工具
运行 cnpm i babel-preset-react -D

var mytitle = '这是使用变量定义的 tilte 值'

var arr = []
for (var i = 0; i < 10; i++) {
  var p = <p className="myp" key={i}>但是，你知道它的本质吗？？？</p>
  arr.push(p)
}
var mydiv = <div>
  这是使用 jsx 语法创建的div元素
  <h1 title={mytitle + 'aaaaa'}>哈哈哈，JSX真好用啊</h1>
  <p className="myp">但是，你知道它的本质吗？？？</p>
  <label htmlFor=""></label>

  {arr}

  /* 这是多行注释，你肯定看不到我 */
  { 
    // zheshi zhushi 
  }

  { /* 这是注释 */ }
  {/* 1234 */}
/* 注释也必须用{}括起来*/
</div>


ReactDOM.render(myDiv,document.getElementById('app'))

// var name = 'zs'
// var age = 20
var person = {
  name: 'ls',
  age: 22,
  gender: '男',
  address: '北京'
}

// 注意： ReactDOM.render() 方法的第二个参数，和vue不一样，不接受 "#app" 这样的字符串，而是需要传递一个 原生的 DOM 对象
ReactDOM.render(<div>
  {/* <Hello name={person.name} age={person.age} gender={person.gender} address={person.address}></Hello> */}

  <Hello {...person}></Hello>
</div>, document.getElementById('app'))

// 注意：这里 ...Obj  语法，是 ES6中的属性扩散， 表示，把这个对象上的所有属性，展开了，放到这个位置