• 高效：模擬Doument Object Model，減少DOM交互 (速度快)
• 靈活：可以與已知的庫配合使用
• 聲明式： 幫助開發(fā)者直觀的創(chuàng)建UI
• 組件化：把相似的代碼通過封裝成組件進(jìn)行復(fù)用

官網(wǎng)

官方網(wǎng)站： https://reactjs.org/

中文網(wǎng)站： https://doc.react-china.org/

腳手架初始化項(xiàng)目（方便，穩(wěn)定）

• 執(zhí)行初始化命令：

  #保證Node版本>=6
  npm install -g create-react-app
  create-react-app my-app
  
  cd my-app
  npm start
  ## 如果npm版本5.2.0+，可以使用npx進(jìn)行初始化
  npx create-react-app my-app
  
  cd my-app
  npm start
  
  #或者使用yarn
  npm install -g yarn
  yarn global add create-react-app
  create-react-app my-app
  

配置鏡像地址

• 查看當(dāng)前鏡像配置：

  npm config list

  npm config get registry

• 設(shè)置當(dāng)前鏡像地址

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

  分發(fā)主要是給別人用的

  npm config set disturl https://npm.taobao.org/dist

配置端口

在package.json的scripts下配置

"start": "SET PORT=3456 & react-scripts start"

React開發(fā)環(huán)境初始化 SPA

• react ：React開發(fā)必備庫
• react-dom：gweb開發(fā)時(shí)使用的庫，用于虛擬DOM，移動開發(fā)使用ReactNative

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props){
    //函數(shù)名與標(biāo)簽名大小寫需要相同
    return (<div> {props.name}{props.email}</div>)
}

ReactDOM.render(<Hello name='title' email='abc@cc.com'>hello</Hello>, document.getElementById('root'));

• 生命周期常用的函數(shù)

  componentDidMount：組件已掛載， 進(jìn)行一些初始化操作

  componentWillUnmount： 組件將要卸載，進(jìn)行回收操作，清理任務(wù)