React脚手架项目搭建流程

1.安装脚手架创建react项目

• 全局安装react脚手架

cnpm install create-react-app -g 

• 创建react项目

create-react-app xxxx//项目名称 

• 相关命令

npm start //项目启动
npm build //项目打包
//在暴露隐藏配置文件前现在本地git仓库保存一次
git add .
git commit -m 'first commit'
npm run eject //将隐藏的配置文件暴露出来

2.环境配置

• 自定义端口号
  在 /scripts/start.js 搜索 PORT，然后更改所需配置的端口号即可
• @ 别名 /config/webpack.config.js 里找到 resolve.alias添加

"@":path.resolve(__dirname,'../src')//一般定位到src目录

• favicon制作 找免费在线制作网站，地址：在线制作网站下载 32*32的尺寸。
• sass安装 只用安装 node-sass 这个包即可。
  cnpm install node-sass -S
• 安装loadable，实现代码拆分
  cnpm install @loadable/component -S
  在使用代码拆分前先导入：

import loadable from '@loadable/component' //将loadable模块导入进来
const TodoList = loadable(()=>import('./component/TodoList'))//使用方法

• 本地配置代理解决跨域问题
  安装 cnpm install http-proxy-middleware -D 新建代理文件 src/setupProxy.js(注一定要放在scr文件夹目录下)添加以下代码：

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://xxx.com',   // 目标服务器
      changeOrigin: true
    })
  );
};

• axios安装封装

 cnpm install axios -S 

封装参照axios文档封装即可，在请求拦截器加入常用的token即可，代码如下：

config.headers.Authorization = localStorage.getItem('token') || ''

响应拦截器配置根据自己要请求的数据结构自己配置

3.redux使用

• 安装

cnpm install redux -S
cnpm install readux-thunk -S //中间件thunk安装解决action异步问题

• 定义reducer

// 定义reducer需要两个参数，分别是当前需要被共享的state、用于改变state的action信号
// action={type, payload}，type用于指明你想做什么，payload指明你想得到的结果。
//type一般要设置一个actionType文件来保存和管理，用常量保存,按需引入
const initState={
	msg:''
}
function reducer(state={}, action) {
  switch(action.type) {
    case '1':
      // 先深复制，再修改
      return state
    case '2':
      return state
    default:
      return state
  }
}

actionType文件

export const TODO_ADD='TODO_ADD'
......

深复制的方法：

1.assign方法
let newState=Object.assign({},state);
2.ES6...语法合并
let newState={...state}
//这2种只适合一层对象的深复制，当嵌套多个对象是不适合，最好使用第三种
3.先转换成字符串再转换成对象
let newState=JSON.parse(Json.stringify(state))

• 在src/store/index.js创建store管理合并reducer文件并抛出来

import { createStore, combineReducers，applyMiddleware } from 'redux'
import thunk from 'react-thunk'
// 创建store，必须要传第一个参数是reducer，它是一个纯函数，其作用是用来改变store的

import reducer1 from './reducers/r1'
import reducer2 from './reducers/r2'

const reducer = combineReducers({
reducer1:redcer1,
reducer2:reducer2
})
const store = createStore(reducer,applyMiddleware(thunk))
export default store

• 在App.js中进行上下文关联

import { Provider } from 'react-redux'
import store from '@/store'
//用Provider标签将app包起来
return(
  <Provider store={store}>
  <app/>
  </Provider>
)

• 在页面组件中使用store

import { connect } from 'react-redux'//引入connect
function mapStateToProps(store){
  return {
    msg: store.todo.msg//todo为定义的reducer名
  }
}
// 把actions中方法，放在当前组件的props
function mapActionToProps(dispatch) {
  return {
    changeMsg: ()=>{
      // 派发一个action到reducer去
      console.log('changeMsg')
    }
  }
}
export default connect(mapStateToProps,mapActionToProps)(Home)//将connect当成一个类似的高阶组件使用,Home为当前组件

4.路由的使用

• 安装

cnpm install react-router-dom -S

在app.js中引入使用：

import {HashRouter,BrowserRouter} from 'react-router-dom'看情况使用Hash或者Brow
export default class App extends React.Component {
  render() {
    return (
    //用其将主组件包裹起来
      <HashRouter>
        <Provider store={store}>
          <Layout />
        </Provider>
      </HashRouter>
    )
  }
}

• NavLink和Link的使用

import {NavLink,Link} from 'react-router-dom'
//NavLink带选项卡切换高亮设置,通过 activeClassName、activeStyle属性 设置，Link不具备视情况使用
export default class Sider extends React.Component {
  render() {
    return(
      <div className='sider'>
       	<NavLink activeClassName="active" activeStyle={{color: '#fff'} to='/home'><NavLink/>
       	<Link to='/todo'></Link>
      </div>
    )
  }
}

• Route和Switch.Redirect使用

import {Route,Switch,Redirect} from 'react-router-dom'
export default class Content extends React.Component {
  render() {
    return(
      <div className='qf-content'>
        <Switch>
          <Route path='/home' component=Home>
          <Redirect from='/*' to='/home' />
        </Switch>
      </div>
    )
  }
}