react项目初始化常用

• 安装与开库

npm install -g create-react-app
create-react-app edu-client
cd edu-client

清理文件

 

 

• 安装proptypes

yarn add prop-types

 

• 安装router

yarn add react-router-dom

App.js使用的地方可以添加

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

• 添加ant designer

yarn add antd

 

高级配置，对 create-react-app 的默认配置进行自定义，比如主题等等

yarn add @craco/craco

 

修改启动命令。修改 package.json 里的 scripts 属性

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
},

 

然后在项目根目录创建一个 craco.config.js 用于修改默认配置。

/* craco.config.js */
module.exports = {
  // ...
};

创建src/App.less，在App.js中使用

在App.less中引入antd.less

@import '~antd/dist/antd.less';

安装 craco-less 并修改 craco.config.js ，利用了 less-loader 的 modifyVars 来进行主题配置

yarn add craco-less

craco.config.js文件改写

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          modifyVars: { '@primary-color': '#1DA57A' },
          javascriptEnabled: true,
        },
      },
    },
  ],
};

 

修改App.js文件，yarn start 测试效果

import React from 'react';
import './App.less';
import { Button } from 'antd';
import './App.less';
function App() {
  return (
    <div className="App">
      <Button type="primary">Button</Button>
    </div>
  );
}
export default App;

 

可以看到一个变化成绿颜色的按钮，表示成功。

 

• 拷贝cssreset.css，favicon.ico文件到public，修改index.html文件中的网站信息，引入cssreset.css

创建常用文件夹

 

 

 

• 消息订阅

yarn add pubsub-js

 

 

• 安装网络请求库 axios

拷贝之前封装axios的库文件到api目录下

yarn add axios

 

 

 

• react-redux （redux-saga 替换掉 redux-thunk）

yarn add redux redux-saga react-redux

 

react-redux 基于redux-saga使用 简化代码

 

• index.js改造

// 1. 引入Provider组件
import { Provider } from 'react-redux'
import store from './store/index'

ReactDOM.render(
    <Provider store={store} >
        <App />
    </Provider>,
  document.getElementById('root')
);

• 组件改造

// 引入
import {connect} from 'react-redux'
import {
    getDelFinishedTodoAction,
    getIsCheckedAllAction
} from "../store/actionCreators";


const mapStateToProps = (state) => {
    return {
        todos: state.todos,
        finishedCount: state.finishedCount
    }
}

const mapDispatchToProps = (dispatch)=> {
    return {
        clearAllFinished(){
            const action = getDelFinishedTodoAction();
            dispatch(action);
        },

        checkAll(flag){
            const action = getIsCheckedAllAction(flag);
            dispatch(action);
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Footer);

// export default connect(mapStateToProps, mapDispatchToProps)(App);
// 将state dispatch 连接到 组件的props中去
//如果不需要 就使用Null
//export default connect(null, mapDispatchToProps)(App);

 

 

• 跨域

yarn add http-proxy-middleware

 

新建setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        '/baidu_api',
        createProxyMiddleware({
            target: 'http://api.map.baidu.com',
            changeOrigin: true,
            pathRewrite: {
                '^/baidu_api': '/'
            }
        })
    );
};

• 统计图

yarn add echarts echarts-for-react

 

• md5

yarn add blueimp-md5

 

• 本地缓存 store 可以自动解决兼容性问题 local storage 和 session storage

https://github.com/marcuswestin/store.js

yarn add store

 

• 富文本

https://www.yuque.com/braft-editor/be/lzwpnr

# 使用npm安装
npm install braft-editor --save

# 使用yarn安装
yarn add braft-editor

 

 

• 动画过度

yarn add rc-tween-one