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.js
import "../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 来做对应的属性。