作为react的特殊语法，和虚拟dom密切相关。

react项目中我们会看到这样的代码，其中参数一就是jsx对象。（参数二是绑定的节点）

ReactDOM.render(<h1>hello react</h1>, document.getElementById('root'));

JSX

JSX 即 JavaScript XML

JSX语法

jsx对象类似于html或xml语法，但是单个jsx对象只能有一个根标签，而且jsx对象结构会被babel解析成js对象再被浏览器执行。

    let jsx = (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
    )

我们在<>中写标签构建jsx对象，在{}中写js代码，所以{}中写jsx是可以的，但是反之不行（js必须在{内}）。

    <div className="App">
      {arr}
    </div>
    
    <div>
      {<div>{arr}</div>}
    </div>

css内联样式

我们可以在jsx对象中写css内联样式，属性名字和dom操作中一样将破折号去除采用小驼峰命名法。

const Son1 = (prop) => {
    let style={
        fontSize:100,
        color:'red'
    }
    return (
    //js代码使用必须{}
        <div style={style}>
            {prop.name}
        </div>
    );
}

react是推荐使用内联样式的，其次我们注意到数值是默认转变为px单位。

jsx注释

因为jsx本身并不是html而是js环境，所以不支持html的注释方式。而js的注释方式也必须是在js环境内，因为jsx对象内部不能直接写js注释，需要先{}起来。

<div style={style}>
    {prop.name}
    {/* <div></div> */}
</div>

条件和循环语句

因为没有v-if这种指令，所以对于判断通过是使用三目运算符完成。而for语句则是通过数组和数组方法代替。

除了三木运算符，我们可以灵活使用其他运算符的特点进行条件处理：比如||和&&

//i > 0就执行后面的代码，否则不执行。
{i > 0 && <div className="box"></div>}

数组使用

前面说到了数组在循环中的使用，这里我们直接使用数组：

    let arr = [1,2,3,4,5,6,7]
    return (
        <div style={style}>
            {arr}
        </div>
    );

通过数组方法完成更加具体的循环使用：

//if+for效果
    {arr.filter(x=>x>3)}
//for+template效果
    {arr.map(x=><h3>{x}</h3>)}

我们完全也可以在jsx代码外使用if和for语句完成jsx对象结构的拼接和修饰。

.jsx文件

不能被浏览器识别并运行的文件，需要同通过webpack进行转译。

.jsx文件和.js本质语法上没有区别，或则说jsx能够在js代码中更好书写jsx语法，编辑器提示更加友好。

.jsx文件完全可以当作js来写。

JSX特点

react项目中并不一定要适用jsx，我们使用jsx是因为其具备的多种特点或优势：

jsx代码执行快，react底层对jsx编译有优化。
格式简单，编写快捷。
兼容任意标签名和标签属性。
用于创建react虚拟dom。
<>识别为标签或组件，{}识别为js代码，分别进行解析编译。
jsx需要预编译成js，通过babel.js完成转译，通常设置type = "text/babel"。

jsx是语法糖

作为react的重要一部分，jsx是一种语法糖，我们可以在babel网站进行查看，我们用react框架的内置函数可以完成同样的效果：

考点

return 后的jsx对象为什么要带小括号

jsx如果开始标签和return在同一行则可以不要小括号，同样编译运行无误，但是没有小括号的同时jsx对象的开始标签又换行与return不再一行，则编译器会自动给return添加;所以会报错。

  return 
    <div className="App">
      {arr}
    </div>
///等效于
  return ;
    <div className="App">
      {arr}
    </div>

写篇文章攻克React——（3）JSX语法

JSX