React 使用 ES6 和 JSX
在 react 中可以使用传统的 js 语法，也可以使用 ES6 的类将松散的结构组件进行封装，这样可以项目组件化。
使用 ES6 类
每一个 react 的组件都是一个 React.Componet 的 ES6 类，所以需要继承 Component类 。例如，现在我们要写一个 Hello 的组件，使用这个组件输出一个 hello world 的标题。可以这样做：
<body>
<div id="example"></div>
<script type="text/babel">
class Hello extends React.Component {
render() {
return (
<div>
<h1>hello world</h1>
</div>
)
}
}
ReactDOM.render(
<div><span>test</span></div>,
document.getElementById('example')
);
</script>
</body>这样如果要使用这个组件直接在需要的地方写上这个类的标签就好：
ReactDOM.render(
<div>
<span>test</span>
<Hello />
</div>,
document.getElementById('example')
);在使用这个标签的时候，很多时候，需要根据很多情况给这个标签传一些参数，让这个标签可以根据传递的参数进行一些判断或者输出。 这个时候需要使用 props 这个变量。在类中使用这个变量相当于使用父类的这个变量，具体可以看到 React 源码中的这条语句:
readonly props: Readonly<P> & Readonly<{ children?: ReactNode }>;所以在使用的时候，应该这样写: this.props
class Hello extends React.Component {
render() {
return (
<div>
<h1>hello world</h1>
<p>{this.props.text}</p>
</div>
)
}
}这样在标签中使用 text 这个属性的时候，就可以将 text 属性的内容显示在下面的 p 标签中了。
ReactDOM.render(
<div>
<span>test</span>
<Hello text="this is test react"/>
</div>,
document.getElementById('example')
);使用 JSX
在react中，使用了JSX代替了传统的JavaScript。 怎么说 JSX 呢，JSX 就是 HTML 和 JS 和混合版，JSX 会将一个包裹好的 HTML 元素当做变量类型。
const text = <h1>hello</h1>这样的标签语法就称为 JSX，这样的一个标签元素也可以做为 React 中的 ReactNode 类型。在 JSX 中可以使用 JS 的表达式。例如：
const text = <h1>hello, {1+2}</h1>这里的显示结果为 hello，3 。而 JAX 文件中不能使用 if else 语句，只能使用表达式，所以三元运算符是可以使用的。
对于一个 JSX ，我们也可以将这个 JSX 写成在独立的 js 文件中，使用的时候引入。也可以在工程化组件化中，写成一个 .jsx 文件， import 后使用。