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
      })
    );
  };

把这些都配置好 就足够开发需求啦 ！！！