JSX语法

提到JSX，我们肯定想知道什么是JSX，有什么特点？
JSX就是javascript和XML结合的一种格式，React发明了JSX，利用HTML语法来创建虚拟DOM， 当遇到<,JSX就当做html解析，遇到{，就当做javascript解析。

JSX的优点

• JSX执行更快，因为它在编译javascript后进行了优化。
• 类型是安全的的
• 使用JSX编写模板更加简单快速。

使用JSX
JSX看起来类似于HTML

ReactDOM.render(    <h1></h1>,    document.getElementById("root"))

我们可以在以上代码中嵌套多个HTML,需要使用一个div包裹它

render(    <div>        <h1>好好努力</h1>        <p>爱恨情仇</p>        <h2>风华雪月</h2>    </div>,    document.getElementById("root"));

实例中的p元素添加了自定义属性，data-time，添加自定义属性需要data-属性

render(    <div>        <h1>好好努力</h1>        <p data-time="DATA">爱恨情仇</p>        <h2>风华雪月</h2>    </div>,    document.getElementById("root"));

独立文件
JSX文件可以放在一个独立文件上，比如idex.js
代码如下

//index.jsimport "../css/reset.css";import "../css/common.css";import React,{ Component } from "react";import { render } from "react-dom";render(    <div>        <h1>好好努力</h1>        <p data-time="like">爱恨情仇</p>        <h2>风华雪月</h2>    </div>,    document.getElementById("root"));

import React,{ Component } from "react";import { render } from "react-dom";

上面这两行是在webpack中的写法，不懂的，可以去学习一下webpack
这里就不做介绍了。
JavaScript表达式
我们可以在JSX中使用表达式，必须放在{}中，实例如下

var arr = 1;render(    <div>        <h1>{arr}</h1>    </div>,    document.getElementById("root"));

结果如下：

1

var arr = [1,3,4,5];render(    <div>        <h1>{arr}</h1>    </div>,    document.getElementById("root"));

结果如下

1345

如果arr不用大括号{}包裹起来的话，那就只能输出arr了，而不是数组的内容

var arr = [1,3,4,5];render(    <div>        <h1>arr</h1>    </div>,    document.getElementById("root"));

结果如下：

arr

在JSX中不能使用if，else语句，但可以使用（三目运算）表达式来代替，
在下面代码中如果i为1的话，浏览器就会输出true

var i = 1;render(    <div>        <h1>{ i=1 ? 'true':'false' }</h1>    </div>,    document.getElementById("root"));

结果如下：

true

React推荐使用内联样式，我们可以使用camelCase语法来设置内联式，React会在指定元素数字后自动添加px，以下实例演示了h1元素添加myStyle内联样式

var myStyle = {    fontSize: 22,    background: '#f99'}render(    <div>        <h1 style={myStyle}>喜欢我就点我哦</h1>    </div>,    document.getElementById("root"));

如果加px也可以，但是不要忘记引号哦

var myStyle = {    fontSize: '22px',    background: '#f99'}render(    <div>        <h1 style={myStyle}>喜欢我就点我哦</h1>    </div>,    document.getElementById("root"));

注释
注释需要写在花括号中，如下

render(    <div>        <h1 style={myStyle}>喜欢我就点我哦</h1>        {/*我在深圳等你*/}    </div>,    document.getElementById("root"));

{/*我在深圳等你*/}

这种写法是JSX的语法，所以一定要写在JSX内部。

在外边这样写注释，还是有所不同哦.

render(    /*喜欢我吗？*/    <div>        <h1 style={myStyle}>喜欢我就点我哦</h1>        {/*我在深圳等你*/}    </div>,    document.getElementById("root"));

如果这样写，会出现什么情况呢？

render(    /*喜欢我吗？*/    <div>        <h1 style={myStyle}>喜欢我就点我哦</h1>        /*我在深圳等你*/    </div>,    document.getElementById("root"));

结果会输出原文

喜欢我就点我哦/*我在深圳等你*/

数组
JSX允许在模板中插入数组，数组会自动展开所有成员

var arr = [    "你若在我心上，情敌三千又何妨？",    "我若在你心上，负了天下有怎样？"]render(    <div>        <h1>{arr}</h1>    </div>,    document.getElementById("root"));

输出结果如下

你若在我心上，情敌三千又何妨？我若在你心上，负了天下有怎样？

HTML和React组件
react可以渲染HTML标签和React组件
要渲染HTML标签，只需要在JSX中使用小写的标签名

var myDiv = <div />render(    <myDiv />,    document.getElementById("root"));

要渲染React组件，需要大写组件名。

import React,{ Component } from "react";import { render } from "react-dom";class Main extends Component{    render(){        return(            <div>            </div>        )    }}render(    <Main />,    document.getElementById("root"));

react以大小写的约定来区分本地组件的类和HTML标签

注意:
由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。