react常用命令

一,npm与yarn 都能安装脚手架,如果没有yarn,全局执行命令行安装

    npm install -g yarn
1. 查看版本:   yarn --version
2. yarn 淘宝源安装，分别复制粘贴以下代码行到黑窗口运行即可

     yarn config set registry https://registry.npm.taobao.org -g
     yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

二, 安装react脚手架
step1:全局安装：npm i -g create-react-app
step2:切换到想创项目的目录，使用命令：create-react-app hello-react

如果下载不动先npm cache clean --force再npm install,多试几次

step3:安装成功后进入项目文件夹：cd xxxx
step4:启动项目:yarn start   或者npm start

三. 使用 npm 或 yarn 安装

$ npm install bonree-design --save

$ yarn add bonree-design

 四. 路由安装
       npm install react-router --save 安装路由
       npm install react-router-dom --save 安装路由dom
      安装完成后 import 引入就行了

 四. 配置代理

       安装依赖：yarn add http-proxy-middleware
       安装完成后 import 引入就行了

        http-proxy-middleware 低版本导致无法启动项目
           低版本 http-proxy-middleware
           高版本 http-proxy-middleware
               低版本 http-proxy-middleware
               // 此时的低版本可以直接使用中间件的导出值使用,但高版本会因此打不开项目
               const proxy = require("http-proxy-middleware");
               module.exports = function (app) {
                 app.use(
                   proxy("/api", {
                   target: " http://192.168.1.57:9527",//
                    changeOrigin: true
                    })
                 );
               };
   
       高版本 http-proxy-middleware
       // 此时的高版本需要拿到原来低版本导出值的子属性  createProxyMiddleware
      const proxy = require("http-proxy-middleware");
      module.exports = function (app) {
         app.use(
               proxy.createProxyMiddleware("/api", {
              target: " http://192.168.1.57:9527",//
              changeOrigin: true
          })
         );
      };

六. 使用绝对路径   

在 React 项目中，当页面层级变多时，使用相对路径会使引入文件变得相当麻烦。

比如会遇到这种情况： ../../../../store/xxx.js

所以我在项目中因为此原因要设置绝对路径。

同时绝对路径还有其他好处

代码清晰、简洁
由于是绝对路径，可以直接复制代码到其他层级使用，相对路径则要切换引用路径
移动文件到其他地方，省去更新路径的步骤。（移动路径 VS code 可以直接帮你修改引用，但其他 IDE 可能就不行了）
我是用的编码工具是 VS Code，具体实现如下。

在项目的根目录创建一个 jsconfig.json 文件，文件内容如下
{
    "compilerOptions": {
        "baseUrl": "src"
    },
    "include": [
        "src"
    ]
}
 

七. 等待中