react项目初始化

安装脚手架

    cnpm i -g create-react-app

创建项目

    npx create-react-app projectName

    npx create-react-app my-app --template typescript

取消eslint

    npm run eject 暴露出配置

    找到webpack.config，搜索eslint，定位到new ESLintPlugin，注释掉

antd库

        按需导入

        cnpm i antd react-app-rewired customize-cra babel-plugin-import  安装依赖

        在根目录新建config-overrides.js，内容为

            module.exports = override(

                      fixBabelImports("import", {

                      libraryName: "antd",

                      libraryDirectory: "es",

                      style: "css",

              })

          )

        修改package.json文件中的启动命令scripts

                "start": "react-app-rewired start",

                "build": "react-app-rewired build",

                "test": "react-app-rewired test",

                "eject": "react-app-rewired eject"

    全局导入

        cnpm i antd --save

        在根组件css中引入@import '~antd/dist/antd.css';

        在组件中使用

配置scss

        cnpm install node-sass -D    安装node-sass

        cnpm install sass-loader node-sass --save-dev    css作用域所需依赖

        找到webpack.config.js下的rules下的oneof数组，新增如下

                {

                test:/\.scss$/,

                loaders: ['style-loader', 'css-loader', 'sass-loader']

              }

        将css命名为name.module.scss

        通过import styles from '定义的名称'引入

        在组件中通过styles.className使用

配置router

    npm install -S react-router  安装路由

    cnpm install --save react-router react-router-dom  安装相关依赖

    新建pages文件夹，将每一个page当作一个组件在app.js中引入

    在src目录下新建routes文件，新建index作为根路由

        let routes = [{

            path:'',

            component:'',

            routes:[]

        }]

        export default routes

    找到app.js,引入并遍历生成路由

        import {BrowserRouter as Router} from react-router-dom 引入路由组件

        import routes from './routes/index'

        将Router作为app的顶级父元素

        使用map遍历生产router

            {

                routes.map((v,i)=>{

                    return <Route path={v.path} component={props=>{

                        return <v.component {...props} routes={v.routes}></v.component>

                    }} key={i}></Route>

                })

            }

配置redux（redux使用）

    在src目录下新建store文件夹

    在store下新增index.js,创建全局数据容器store，该文件将被组件引用并注入到组件的state

        import { createStore } from 'redux'

        import reducer from './reducer'

        const store = createStore(reducer)

        export default store

    在store下新增reducer.js，这是store的操作文件

        import {ADD_ONE_ITEM} from './actionTypes'

        const defaultState = {

           inputVal:"2",

        }

        export default (state=defaultState,action)=>{

            if(action.type==ADD_ONE_ITEM){

                const newState = JSON.parse(JSON.stringify(state))

                newState.inputVal = action.value

                return newState

            }

            return state

        }

    在store下新增actionTypes.js，这里统一管理者所有的store指令类型

        export const ADD_ONE_ITEM= 'add-one-item'

    在store下新增actionCreators.js,这里统一管理所有的指令集action

        import {ADD_ONE_ITEM} from './actionTypes'

        export const addOneItem = (value)=>({

            type:ADD_ONE_ITEM,

            value

        })

    在组件中使用

        import {addOneItem} from './store/actionCreators'  引入action指令集

        this.state = store.getState()  在constructor中注入store给组件的state

        store.subscribe(()=>{this.setState(store.getState())})  在constructor中订阅store变化

        store.dispatch(addOneItem(1))    通过dispatch更新store

配置axios

    import axios from 'axios'

    React.Component.prototype.axios = axios

配置rem

    下载依赖

        npm i lib-flexible --save

        npm i sass-loader node-sass --save-dev

        npm i postcss-px2rem --save

    找到node_modules/react-scripts/config/webpack.config.js，引入postcss-px2rem

        顶部新增 const px2rem = require('postcss-px2rem')

        找到getStyleLoaders，在plugins数组中新增px2rem({remUnit:75})    《75是假设设计稿750》

    在入口文件index.js中引入

        import 'lib-flexible'