React技術棧

React 是目前最熱門的前端架構。 Facebook 公司2013年推出 現在最好的社區支援和生態圈 大量的第三方工具

React 的優點 組件模式：代碼複用和團隊分工 虛擬 DOM：效能優勢 移動端支援：跨終端 React 的缺點 學習曲線較陡峭 全新的一套概念，與其他所有架構截然不同 只有採用它的整個技術棧，才能發揮最大威力

總結：React 非常先進和強大，但是學習和實現成本都不低 JSX 文法

React 使用 JSX 文法，JavaScript 代碼中可以寫 HTML 程式碼。

let myTitle = <h1>Hello, world!</h1>;

JSX 文法解釋

（1）JSX 文法的最外層，只能有一個節點。

// 錯誤let myTitle = <p>Hello</p><p>World</p>;

（2）JSX 文法中可以插入 JavaScript 代碼，使用大括弧。

let myTitle = <p>{'Hello ' + 'World'}</p>

Babel 轉碼器

JavaScript 引擎（包括瀏覽器和 Node）都不認識 JSX，需要首先使用 Babel 轉碼，然後才能運行。

<script src="react.js"></script><script src="react-dom.js"></script><script src="babel.min.js"></script><script type="text/babel">  // ** Our code goes here! **</script>

React 需要載入兩個庫：React 和 React-DOM，前者是 React 的核心庫，後者是 React 的 DOM 適配庫。

Babel 用來在瀏覽器轉換 JSX 文法，如果伺服器已經轉好了，瀏覽器就不需要載入這個庫。 課堂練習：JSX 文法

瀏覽器開啟demos/jsx-demo/index.html，按照《操作說明》，完成練習。

ReactDOM.render(  <span>Hello World!</span>,  document.getElementById('example'));

樣本：React 組件

React 允許使用者定義自己的組件，插入網頁。

瀏覽器開啟demos/react-component-demo/index1.html，按照《操作說明》，仔細查看源碼。

class MyTitle extends React.Component {  render() {    return <h1>Hello World</h1>;  }};ReactDOM.render(  <MyTitle/>,  document.getElementById('example'));

課堂練習：組件的參數

組件可以從外部傳入參數，內部使用this.props擷取參數。

開啟demos/react-component-demo/index2.html，按照《操作說明》，完成練習。

class MyTitle extends React.Component {  render() {    return <h1      style={{color: this.props.color}}    >Hello World</h1>;  }};<MyTitle color="red" />,

樣本：組件的狀態

組件往往會有內部狀態，使用this.state表示。

瀏覽器開啟demos/react-component-demo/index3.html，按照《操作說明》，仔細查看源碼。

課堂練習：React 組件實戰

瀏覽器開啟demos/react-component-demo/index4.html，按照《操作說明》，完成練習。 組件的生命週期

React 為組件的不同生命階段，提供了近十個鉤子方法。 componentWillMount()：組件載入前調用 componentDidMount()：組件載入後調用 componentWillUpdate(): 組件更新前調用 componentDidUpdate(): 組件更新後調用 componentWillUnmount()：組件卸載前調用 componentWillReceiveProps()：組件接受新的參數時調用

我們可以利用這些鉤子，自動完成一些操作。 課堂練習：組件的生命週期

組件可以通過 Ajax 請求，從伺服器擷取資料。Ajax 請求一般在componentDidMount方法裡面發出。

componentDidMount() {  const url = '...';  $.getJSON(url)    .done()    .fail();}

開啟demos/react-lifecycle-demo/index.html，按照《操作說明》，完成練習。 React 組件庫

React 的一大優勢，就是網上有很多已經寫好的組件庫，可以使用。

React-Bootstrap：https://react-bootstrap.github.io/

樣本：ReCharts

ReCharts 是一個 React 圖表組件庫。http://recharts.org/

瀏覽器開啟demos/recharts-demo/index.html，按照《操作說明》，仔細查看源碼，體會 JSX 文法對錶達複雜組件的優勢。

<LineChart width={1000} height={400} data={data}>  <XAxis dataKey="name"/>  <YAxis/>  <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>  <Line type="monotone" dataKey="uv" stroke="#8884d8" />  <Line type="monotone" dataKey="pv" stroke="#82ca9d" /></LineChart>

React 的核心思想

View 是 State 的輸出。

view = f(state)