react项目创建流程

react项目创建流程

ls 产看项目内文件

cd + name 进入文件

1. 先创建一给git 仓库 ( 设置模板 必须 选择 Readme文件 勾选 )
2. git clone ( 克隆项目 )
3. npx create-react-app ' name ' 创建react项目
4. git 4步 -- git pull - - git add -all -- git commit -m ' ' -- git push origin master 提交到git上
5. cd name 进入项目
6. yarn eject 开启高级模式

7. 替换packge.json 文件里的 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"

   },

8. 安装 sass yarn add node-sass-chokidar 和 yarn add npm-run-all
9. src 下创建style文件夹 并新建index.scss文件
10. 进入index.js 更改css地址 改成cass/index.scss
11. 启动 项目 yarn start

12. 添加 proxy 代理 文件 并且必须 下载
    yarn add http-proxy-middleware

    proxy 代理配置
       /* 示例 
      app.use(
     // ↓ 2级目录根地址
     '/api2', createProxyMiddleware({
       target: 'http://api.bdplus.cn/', //根目录 thhp到 .cm 或 .com 结束
       changeOrigin: true, //是否跨域
     })
      );
    
     */

13. 加入Router

    1. 下载 yarn add react-router-dom

    2. src 下创建router.js 文件

       import React from 'react';
       import { BrowserRouter, HashRouter, Link, Switch } from 'react-router-dom';
       
       import App from './App.js';
       
       const Router = () => (
         // 官方切换 组件
         <BrowserRouter>
           <App />
         </BrowserRouter>
       )
       export default Router

    3. 修改 index.js 文件 把App.js 改成 Router.js

        import React from 'react';
        import ReactDOM from 'react-dom';
        import './style/index.scss';
        import Router from './router.js';//这里
        import reportWebVitals from './reportWebVitals';
    
        ReactDOM.render(
          <React.StrictMode>
            <Router /> //这里
          </React.StrictMode>,
          document.getElementById('root')
        );
    
        // If you want to start measuring performance in your app, pass a function
        // to log results (for example: reportWebVitals(console.log))
        // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
        reportWebVitals();
    

    4. 把 App.js 改成一个类组件 用来存放 路线

        
      import React, { Component, Suspense, lazy, Fragment } from 'react';
    
      import { Route, Router, Switch, withRouter } from 'react-router-dom';
      /*
       Api 简介
       Route : 用来配置路由线路
       
       Switch : 只显示匹配到的第一个
      */
    
      /*
        引入方法一
        import Home from './views/home'；
    
        引入方法二
        const Home = lazy(()=>import('./View/Home'))
      */
      const Home = lazy(() => import('./View/Home'))
    
      class App extends Component {
        render() {
          return (
            <Suspense fallback="dd">
              <Switch>
                <Route exact path='/' component={Home} />
              </Switch>
            </Suspense>
    
          )
        }
      }
    
    
      export default App;
    

14. env文件