# JSX语法 ## 为什么要使用JSX 我们发现在工作中如果全部按照上面的方式去书写网页的结构，那么书写方式全部都是`React.createElement('h1', null, '这是一个大大的H1')`这样去做。反而会增加许多的麻烦。React也为我们考虑了这个事情，所以它提供了JSX语法糖，可以化简我们的代码。 ## 配置 如要要使用 JSX 语法，必须先运行 `cnpm i babel-preset-react -D`，然后再 `.babelrc` 中添加 语法配置； ## JSX语法的本质： 使用JSX，其它它内部还是以 `React.createElement `的形式来实现的，并没有直接把 用户写的 HTML代码，渲染到页面上； ## JSX中书写JS 如果要在 JSX 语法内部，书写 JS 代码了，那么，所有的JS代码，必须写到 {} 内部； ### 原理 ： 当 编译引擎，在编译JSX代码的时候，如果遇到了`<`那么就把它当作 HTML代码去编译，如果遇到了 `{}` 就把 花括号内部的代码当作 普通JS代码去编译； ### JSX中的注意事项 在{}内部，可以写任何符合JS规范的代码；但是也要注意一些例外。 * 在JSX中，如果要为元素添加`class`属性了，那么，必须写成`className`，因为 `class`在ES6中是一个关键字；和`class`类似，label标签的 `for` 属性需要替换为 `htmlFor`. * 在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹； * 如果要写注释了，注释必须放到 {} 内部。单行注释要记得换行。多行注释则不需要。而且这个问题不需要大家格外注意。因为有快捷键 `ctrl+?`可以快速实现 `{/**/}`多行注释。 ## 对比 可以将上一章节中的基础语法例子改为JSX例子 <iframe width="100%" height="300" src="//jsrun.net/ZFyKp/embedded/all/light" allowfullscreen="allowfullscreen" frameborder="0"></iframe> ``` import React from 'react' import ReactDOM from 'react-dom' var myH1 = React.createElement('h1', null, '这是一个大大的H1') var myDiv = React.createElement('div', { title: 'this is a div', id: 'mydiv' }, '这是一个div', myH1) ReactDOM.render(myDiv, document.getElementById('app')) ``` ``` import React from 'react' import ReactDOM from 'react-dom' var num = 1; var myDiv = <div title="this is div" id="mydiv" className="abc"> 这是一个div { //这是注释 } {/*这是注释*/} {num} <label htmlFor="box">label</label> <h1>这是一个大大的H1</h1> </div> ReactDOM.render(myDiv, document.getElementById('app')) ``` ## 总结 JSX化简了React的api-React.createElement()函数。我们可以像书写html一样书写结构。 JSX中书写JS，要写在{}内部。 JSX中书写注释 也只能书写JS的注释 那么要写在{}中。单行注释 要注意换行。多行注释可以通过ctrl+? JSX中有一些例外的 class类句要写成className，lable标签的for属性要写成htmlFor