react项目构建

安装react脚手架

• 安装node：https://nodejs.org/zh-cn/
  -查看node版本：node --version
• 安装npm：node安装后自动安装npm
  -查看npm版本：npm --version
  -运行依赖：--save
  -开发依赖：-dev
  -全局安装：-g
  -查询全局安装过的包：npm list -g --depth 0
  -查询项目安装过的包：npm list --depth 0
• 安装包：
  -全局安装react脚手架库：
  npm install -g create-react-app

初始化项目

• 创建react项目：create-react-app react-app

//初始化创建自动生成的文件夹、文件
react-app
	|--.git---git版本控制
	|--node_modules---第三方依赖模块文件夹
	|--public
	|--src------------源码文件夹（删掉里面内容自己构建）
		|--components-----------------react组件文件夹
			|--app.jsx-----------------react组件文件
			|--mycomponent.jsx-----------------react组件文件
		|--views-----------------react-router组件文件夹
			|--app.jsx-----------------react组件文件
			|--mycomponent.jsx-----------------react组件文件
		|--containers-----------------react-redux组件文件夹
			|--app.jsx-----------------react组件文件
			|--mycomponent.jsx-----------------react组件文件
		|--rudex-----------------redux组件文件夹
			|--app.jsx-----------------react组件文件
			|--mycomponent.jsx-----------------react组件文件
		|--index.js-------------------应用入口js
	|--.gitignore------git版本控制需要忽略文件的配置文件
	|--package.json----应用包配置文件（包含标识、依赖、运行等）
	|--package-lock.json----安装时应用包配置文件（包含标识、依赖、运行等）
	|--README.md-------应用描述说明的readme文件

构建项目

1.拆分组件：拆分界面,抽取组件
2.实现静态组件：使用组件实现静态页面效果
3.实现动态组件：
① 动态显示初始化：数据初始化状态数据、传递属性数据
② 交互功能：绑定事件监听, 并处理、更新state

import

//引入第三方模块
import React from 'react';
import ReactDOM from 'react-dom';
//引入自定义组件
import App from './component/app';
import MyComponent from './component/mycomponent';
import * as actions from './redux/actions'
//引入样式
import './cssname.css'
//引入图片
import logo from './logo.svg';

传输数据

<mycomponent dataname={data} funcname={this.functionname}/>

传输数据类型指定

-项目安装包：
npm install --save prop-types

//引入prop-types模块
import PropTypes from 'prop-types';
//在组件class外部使用
MyComponent.propTypes ={
  dataname:PropTypes.array.isRequired,
  funcname:PropTypes.func.isRequired
}
//在组件class内部使用
static propTypes ={
  dataname:PropTypes.array.isRequired,
  funcname:PropTypes.func.isRequired
}

接收数据

this.props.dataname
this.props.funcname

非受控组件

//使用
const msg=this.inputmsg.value
//虚拟DOM标签内
ref={input=>this.inputmsg=input}

受控组件

//设置状态
state={
msg:""
}
//使用
const {msg}=this.state
//改变状态
handleChange=(event)=>{
const msg=event.target.value;
this.setState({msg})
}
//虚拟DOM标签内
value={this.state.msg} onChange={this.handleChange}

react-router

-项目安装包：
npm install --save react-router-dom

import {BrowserRouter} from 'react-router-dom'
<BrowserRouter><app /></BrowserRouter>
import {NavLink,Switch,Route,Redirect} from 'react-router-dom'
<NavLink to='router1'>router1</NavLink>
<NavLink to='router2'>router2</NavLink>
<Switch>
  <Route path='/router1' component={Router1} />
  <Route path='/router2' component={Router2} />
  <Redirect to='/router1' />
</Switch>

redux

-项目安装包：
npm install --save redux

//index.js
import {createStore} from 'redux'
import counter from './reducers/reducer'
const store = createStore(counter)
function render(){
  ReactDOM.render(<App store={store}/>,document.getElementById("root"));
}
render()
store.subscribe(render)
//抽取一个store.js
import {createStore} from 'redux'
import counter from './reducers/reducer'
const store = createStore(counter)
export default store

//reducer.js
export default function counter(state = 0, action) {
  switch (action.type){
  case 'increment': return state+action.data
  }
}

//app.js,获取状态中的值，相当于this.state
const count=this.props.store.getState()

//app.js,更新状态，相当于this.setState()
this.props.store.dispatch({type:'increment',data:selectcount})
//{type:'increment',data:selectcount}抽取为actions.js
export const increment=(selectcount)=>({type:'increment',data:selectcount})
//'increment'抽取为actions-types.js
export const INCREMENT='increment'

react-redux

-项目安装包：
npm install --save react-redux

import {Provider} from 'react-redux';
ReactDOM.render(<Provider store={store}><App/></Provider>,document.getElementById("root"));

import {connect} from 'react-redux';
//不能直接暴露class
static propTypes ={
  count:PropTypes.number.isRequired,
  increment:PropTypes.func.isRequired
}
//app.js,获取状态中的值，相当于this.state
const {count}=this.props
//app.js,更新状态，相当于this.setState()
this.props.increment(selectcount)
//需要这样暴露class
export default connect(
  state=>({count:state}),
  {increment,decrement}
)(App)

redux异步中间件

-项目安装包：
npm install --save redux-thunk

运行、打包

• 运行react项目：
  -cd react-app
  -npm run start启动项目，在 http://localhost:3000查看项目运行
• 打包react项目：
  -npm run build项目打包，生成一个build文件夹

调试

• chrome安装React Developer Tools开发者工具：http://www.cnplugins.com/
• chrome安装chrome redux调试插件：http://www.cnplugins.com/
  -项目安装包：
  npm install --save-dev redux-devtools-extension

那些年犯过的低级错误

React.Component{}//写成了React.component()

<MyComponent>//写成了<myComponet>