react腳手架創建一個項目

react創建一個項目的基本步驟

1.需要有node的運行環境，如果沒有node請先安裝 官網：https://nodejs.org/en/     （推薦使用穩定版本，不建議使用最新版本）

2.安裝react腳手架    create-react-app -g   （-g  全局安裝，i是insall 的簡寫方式） 

npm insall create-react-app  -g   或者   npm i create-react-app  -g 

3. 推薦是用cnpm來安裝   如果未安裝 請安裝  npm i cnpm -g   全局安裝一下    (npm服務器在國外，cnpm是國內淘寶鏡像，相對快一些，丟包率也相對小)

npm i cnpm -g   //-g全局安裝

4.用react腳手架創建一個項目 （這里 ‘my-react-app’ 是你需要創建的項目名稱，自己定義）

create-react-app  my-react-app

5.創建好了之后  cd 到新建的項目名稱     npm start 啟動項目

cd  my-react-app   // 進入到項目目錄

npm  start    // 啟動項目

6.執行npm run eject   釋放隱藏的封裝的腳本文件

npm run eject   //釋放隱藏腳本文件

7.如果在執行第6條的時候會報錯 可以提交一下git倉庫

git init
git add .
git commit -m 'first commit'    //first commit  是自己寫的注釋信息
npm run eject

8.現在可以配置和集成一些需要的第三方插件(這里-D 和 -S的區別   -D開發環境所需要的依賴，-S是生產環境所需要的依賴    -g是全局安裝在本地計算機)

cnpm i react-router-dom -S    //路由  

cnpm i node-sass --save-dev      

cnpm i sass-loader --save-dev

cnpm i  axios  -S   

cnpm install redux -S    // 安裝  redux  狀態管理

cnpm i  antd  -S    //安裝 antd UI組件庫

9.修改添加配置

修改默認端口號    /scripts/start.js 搜索 PORT     //  

const DEFAULT_PORT = parseInt(process.env.PORT, 10) ||3000;    //3000就是默認的端口號   修改成想要的端口號即可

配置 @ 別名    /config/webpack.config.js 里找到 resolve.alias

'@':path.resolve(__dirname,'../src')         // 給@符號配置一個絕對路徑的標識符

https://create-react-app.dev/docs/proxying-api-requests-in-development  react代理的做法，（參考react腳手架文檔  按文檔為主）

安裝 cnpm install http-proxy-middleware -D

新建代理文件 src/setupProxy.js

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

把這些都配置好 就足夠開發需求啦 ！！！