- JSX基本语法
JSX的官方定义是类XML语法的ECMAScript的扩展。 - XML基本语法
使用类XML语法好处之一是标签可以互相嵌套，而且我们可以像HTML一样清晰的看到DOM树的层状结构和属性。
const List = () => {
<div>
<Title>this is title</Title>
<ul>
<li>item</li>
</ul>
</div>
}
可以看到写上面组件的过程就想写HTML一样，只不过被包裹在JavaScript的方法中。但是需要注意：
1. 定义标签的时候只能被一个标签包裹。即一个组件最外层必须只能有一个标签进行包裹着。
2. 标签一定要闭合。react的语法比较严谨，所有的标签都需要闭合，不管是单标签还是双标签。
- 元素类型
之前我们说过两种不同的元素类型，一种是组件元素，一种是DOM元素。
组件元素的首字母一般情况下是大写，DOM元素的首字母是小写状态。不管是组件元素还是DOM元素，他们都有自己的属性。但是值得注意的是class和for，因为在JavaScript中这两个都是关键词所以有其他的进行替代:
class -- className
for -- htmlFor
在组件元素中的属性完全可以根据自己的需要进行自定义属性，也可以理解这些自定义属性是这些组件的一些参数或者接口。
const Header = (title, children) => {
<h2 title={title}>{children}</h2>
}
//我们给Header加一个title属性，那么调用的时候：
<Header title='hello'>hello</Header>
- React组件
关于组件这个概念我们可以分两种思考：
1. 一种是狭义上的ui组件，仅仅围绕这交互动作上的抽象，例如tab，Dropzone等，仅仅通过操作DOM和样式来控制。
2. 另外一种是带有业务和数据的ui组件的组合，这类注重的是数据和界面的交互。
在react中，通过自定义元素的方式实现了组件化，然而react的本质是关注元素的构成，react组件即为组件元素。组件元素被描述为纯粹的JSON对象，这样也就意味着可以使用方法或者类来进行构建这个组件元素。
react组件主要由三个部分组成，属性，状态，生命周期。react组件可以接受属性参数，也可以有自身的状态，对比自身的状态和收到的属性参数，然后触发生命周期方法，最后渲染。
总结一下：
1. react渲染的过程中包括了模板的概念，即所谓的JSX.
2. react组件的实现均是在方法和类中。
3. react遵循es6中模块的概念。
可见react还是是JavaScript的基础上进行大量封装，把HTML结构彻底引入到JavaScript中。
- react组件构造方法
react的组件基本上可以分为以下三种方式组成，由组件的构建方式，组件内属性状态和生命周期方法组成。官方提供了三种构建组件的方式- React.createClass
- ES6 class
- 无状态函数
1.React.createClass
const Button = React.createClass({
getDefaultProps(){
return {
color: 'blue',
text: 'hello world'
}
},
render(){
const {color, text} = this.props
return (
<button className={`btn btn-${color}`}>
<em>{text}</em>
<button>
)
}
})
2. ES6 classes
import React, {Component} from 'react'
class Button extends Component{
constructor(props) {
super(props)
}
static defaultProps = {
color: 'blue',
text: 'confirm'
}
render() {
return (
<button className="`btn btn-${color}`">
<em>{text}</em>
</button>
)
}
}
3. 无状态函数
function Button({color='blue', text='confirm'}) {
return (
<button disabled className={`btn btn-${color}`}>
<em>{text}</em>
</button>
)
}
无状态函数只传入props和context两个参数，也就是说它不存在state，也没有生命周期方法，组件本身即前两种React方法中的render方法。
无状态方法不像之前两种方法会在调用的时候创造实例，它在创建时始终保持了一个实例。
