React

• 高效：模拟Doument Object Model，减少DOM交互 (速度快)
• 灵活：可以与已知的库配合使用
• 声明式： 帮助开发者直观的创建UI
• 组件化：把相似的代码通过封装成组件进行复用

官网

官方网站： https://reactjs.org/

中文网站： https://doc.react-china.org/

脚手架初始化项目（方便，稳定）

• 执行初始化命令：

  #保证Node版本>=6
  npm install -g create-react-app
  create-react-app my-app
  
  cd my-app
  npm start
  ## 如果npm版本5.2.0+，可以使用npx进行初始化
  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
  

配置镜像地址

• 查看当前镜像配置：

  npm config list

  npm config get registry

• 设置当前镜像地址

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

  分发主要是给别人用的

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

配置端口

在package.json的scripts下配置

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

React开发环境初始化 SPA

• react ：React开发必备库
• react-dom：gweb开发时使用的库，用于虚拟DOM，移动开发使用ReactNative

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props){
    //函数名与标签名大小写需要相同
    return (<div> {props.name}{props.email}</div>)
}

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

• 生命周期常用的函数

  componentDidMount：组件已挂载， 进行一些初始化操作

  componentWillUnmount： 组件将要卸载，进行回收操作，清理任务