chap1

1.react 宣告式，元件方法改變介面，diff區域性重新整理無繫結，可作為V層與其他技術棧搭配

2.redux js容器 狀態管理 單一資料來源state被存在物件樹中，state只能通過setstate方法改變，純函式更新state

3.前後端採用統一的Universal渲染，載入速度快，利於seo

4.babel js編譯工具es6->es5

5.webpack 前端資源打包和模組管理

chap2

run in node

1.編寫元件

元件只有一個render函式時可以直接寫為無狀態函式

import  React from 'react';

export default class App extends React.Component{

render(){

</h1>hello</h1>

}

}

改寫為

import React from 'react';

export default function App(){

return <h1>hello</h1>

}

這裡export dfeault 是方便其他模組匯入import App from './App';否則要寫為import {App} from './App';

2.nodejs中使用renderToString方法渲染元件成字串

server.js中

import {renderToString} from 'react-dom/server';

import App from './App';

const HTML = renderToString(<App />);

console.log(HTML);

3.執行 使用 es2015和JSX時，需要使用babel進行編譯

測試環境中使用babel的內建工具require hook來執行babel，原理是在require上放個hook，每次呼叫require時就會先進行編譯和執行，因為效能原因，只會在測試環境中進行

how to use require hook

3.1 npm install babel-register --save-dev   //這裡可以在packages.json中檢視對應安裝步驟

3.2 入口檔案頂部使用 require('babel-register');

3.3 安裝es2015 react :   npm install --save-dev babel-preset-es2015 babel-preset-react

3.4 新增.bashrc 啟用es2015和react的預設  {"preset":['es2015','react']}

3.5 npm start 執行

注意：

1.安裝 node npm @latest

  sudo npm config set registry https://registry.npm.taobao.org

  sudo npm config list

  sudo npm install n -g

  sudo n install [email protected] -g

  2.安裝

  npm install --save-dev react 

  npm install --save-dev react-dom