• JSX基本語(yǔ)法
  JSX的官方定義是類(lèi)XML語(yǔ)法的ECMAScript的擴(kuò)展。
• XML基本語(yǔ)法
  使用類(lèi)XML語(yǔ)法好處之一是標(biāo)簽可以互相嵌套，而且我們可以像HTML一樣清晰的看到DOM樹(shù)的層狀結(jié)構(gòu)和屬性。

const List = () => {
<div>
      <Title>this is title</Title>
      <ul>
        <li>item</li>
      </ul>
</div>
  }

可以看到寫(xiě)上面組件的過(guò)程就想寫(xiě)HTML一樣，只不過(guò)被包裹在JavaScript的方法中。但是需要注意：
1. 定義標(biāo)簽的時(shí)候只能被一個(gè)標(biāo)簽包裹。即一個(gè)組件最外層必須只能有一個(gè)標(biāo)簽進(jìn)行包裹著。
2. 標(biāo)簽一定要閉合。react的語(yǔ)法比較嚴(yán)謹(jǐn)，所有的標(biāo)簽都需要閉合，不管是單標(biāo)簽還是雙標(biāo)簽。

• 元素類(lèi)型
  之前我們說(shuō)過(guò)兩種不同的元素類(lèi)型，一種是組件元素，一種是DOM元素。
  組件元素的首字母一般情況下是大寫(xiě)，DOM元素的首字母是小寫(xiě)狀態(tài)。不管是組件元素還是DOM元素，他們都有自己的屬性。但是值得注意的是class和for，因?yàn)樵贘avaScript中這兩個(gè)都是關(guān)鍵詞所以有其他的進(jìn)行替代:
  class -- className
  for -- htmlFor
  在組件元素中的屬性完全可以根據(jù)自己的需要進(jìn)行自定義屬性，也可以理解這些自定義屬性是這些組件的一些參數(shù)或者接口。

const Header = (title, children) => {
 <h2 title={title}>{children}</h2>
}
//我們給Header加一個(gè)title屬性，那么調(diào)用的時(shí)候：
<Header title='hello'>hello</Header>

• React組件
  關(guān)于組件這個(gè)概念我們可以分兩種思考：
  1. 一種是狹義上的ui組件，僅僅圍繞這交互動(dòng)作上的抽象，例如tab，Dropzone等，僅僅通過(guò)操作DOM和樣式來(lái)控制。
  2. 另外一種是帶有業(yè)務(wù)和數(shù)據(jù)的ui組件的組合，這類(lèi)注重的是數(shù)據(jù)和界面的交互。

在react中，通過(guò)自定義元素的方式實(shí)現(xiàn)了組件化，然而react的本質(zhì)是關(guān)注元素的構(gòu)成，react組件即為組件元素。組件元素被描述為純粹的JSON對(duì)象，這樣也就意味著可以使用方法或者類(lèi)來(lái)進(jìn)行構(gòu)建這個(gè)組件元素。
react組件主要由三個(gè)部分組成，屬性，狀態(tài)，生命周期。react組件可以接受屬性參數(shù)，也可以有自身的狀態(tài)，對(duì)比自身的狀態(tài)和收到的屬性參數(shù)，然后觸發(fā)生命周期方法，最后渲染。
總結(jié)一下：
1. react渲染的過(guò)程中包括了模板的概念，即所謂的JSX.
2. react組件的實(shí)現(xiàn)均是在方法和類(lèi)中。
3. react遵循es6中模塊的概念。
可見(jiàn)react還是是JavaScript的基礎(chǔ)上進(jìn)行大量封裝，把HTML結(jié)構(gòu)徹底引入到JavaScript中。

• react組件構(gòu)造方法
  react的組件基本上可以分為以下三種方式組成，由組件的構(gòu)建方式，組件內(nèi)屬性狀態(tài)和生命周期方法組成。官方提供了三種構(gòu)建組件的方式
  1. React.createClass
  2. ES6 class
  3. 無(wú)狀態(tài)函數(shù)

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. 無(wú)狀態(tài)函數(shù)
function Button({color='blue', text='confirm'}) {
    return (
        <button disabled className={`btn btn-${color}`}>
            <em>{text}</em>
        </button>
    )
}
無(wú)狀態(tài)函數(shù)只傳入props和context兩個(gè)參數(shù)，也就是說(shuō)它不存在state，也沒(méi)有生命周期方法，組件本身即前兩種React方法中的render方法。

無(wú)狀態(tài)方法不像之前兩種方法會(huì)在調(diào)用的時(shí)候創(chuàng)造實(shí)例，它在創(chuàng)建時(shí)始終保持了一個(gè)實(shí)例。