创建react项目流程

Gitee创建项目
一、创建仓库(点击克隆复制链接)
Git Bash Here
第一步：git clone 仓库链接
第二步：cd 仓库名称
第三步：node -v(确认node版本)
第四步：npx creact-react-app 项目名称 (创建项目)
第五步：git add --all        git commit -m ''        git push
第六步：cd 项目名称
第七步：yarn eject

二、打开项目
替换script
"scripts": {
        "build-css": "node-sass-chokidar src/ -o src/",
        "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive  --use-polling --polling-interval 1000",
        "start-js": "node scripts/start.js",
        "start": "npm-run-all -p watch-css start-js",
        "build-js": "node scripts/build.js",
        "build": "npm-run-all build-css build-js",
        "test": "node scripts/test.js --env=jsdom"
},

三、安装sass
yarn add node-sass-chokidar
yarn add npm-run-all

四、基础操作
1.在src下新建文件夹styles
2.styles里新建index.scss
3.在index.js 里将`import "./index.css"`改成`import "./styles/index.css"`
4.启动项目 index.css自动生成

五、打包yarn build 
- 在src平级创建一个.env文件
【
      GENERATE_SOURCEMAP=false
      PUBLIC_URL=./
】

 六、代理(开发联调方式)
- 在src下创建一个setupProxy.js文件
- yarn add http-proxy-middleware
- 根据接口链接写出对应代码
- 在需要跨域的jsx文件中引入unit.js，使用对应所需要求的方法

七、Route
- yarn add react-router-dom
- 在src下新增一个Router.js文件
- 修改index.js部分代码
- 在App.js中写入
【
      import Home from './view/home';
      <Route exact path="/" component={Home} />
      {/* exact：精准匹配，严格模式 */}
      {/* path:自定义的url */}
      {/* component:自定义页面关联的jsx文件页面 */}
      <Redirect to='/'/>
      {/* Redirect:非法url，要跳到哪个位置 */}
】
- 创建jsx页面
【
      <NavLink exact to="/">首页</NavLink>
      <NavLink to="/form">表单</NavLink>
      <Link to='/'>首页</Link>
      <Link to='/about'>关于</Link>
      两种方法的区别：NavLink自带active
】

八、mobx
- 安装
   yarn add mobx   yarn add mobx-react
- 在src下新建一个名字为store的文件夹 新建文件
- 文件中
【
      import {observable, computed, action, autorun,runInAction} from 'mobx';
      class Store {
         @observable name='小洋';
          //相当于 this.state={name:'小洋'} 可以被读取，也可以被修改
          constructor(){
             makeObservable(this)
          }
          @action setName=(text)=>{
              this.name=text;
          }
          //相当于 this.setState({name:text})
      }
      export default Store;
】
- 在Router.js中添加代码
【
      import { Provider } from 'mobx-react';
      import { observable, useStrict ,autorun} from 'mobx';
      import App from './App.js';
      import firstStore from './store/first';
      const stores = {
        first: new firstStore(),
      };
      <Provider {...stores}>
          <App/>
      </Provider>
】

注意：这时会出现报错，解决方法如下
- yarn add @babel/plugin-proposal-decorators
- yarn add @babel/plugin-proposal-class-properties
- 在package.json中添加代码
【
      "presets": [
              ["react-app"],
              ["@babel/preset-react"]
          ],
          "plugins": [
              ["@babel/plugin-proposal-decorators", {"legacy": true }],
              ["@babel/plugin-proposal-class-properties", { "loose" : true }]
      ]
】

这时错误就会消失，随后在进行如下步骤
- jsx文件中
【
      引入import {observer,inject} from 'mobx-react';
      再导入所需要的模块
      @withRouter
      @inject('first')
      @observer//让页面变成响应式，能读取和操作store
】

九、redux
- 安装
yarn add react-redux redux
- 入口注入
router.js注入   import {Provider} from 'react-redux';   import store from ‘./Store.js’;
- 引入 小state 合并生成store.js 引入reducer  combineReducers合并整合多个reducer
再进行 createStore() createStore(reducer,applyMiddleware(thunk))
第一参数 reducer (纯函数，返回新的state)
第二个参数 state 初始化值 null
第三个 中间件
- 对应页面的小store(编写_store.js)
reducer纯函数
state+action生成新的state
action (定义了state，操作state，相当于setState) 
- actions 修改state(数据初始化，操作方法)
- actionsTypes.js
- reducer.js 生成新的state 计算
- 页面中引入
import {connect} from ‘react-redux’;
export default connect(mapStateToProps,mapDispatchToProps)(View);