个人随笔记录仅为个人笔记。

记录使用react脚手架create-react-app的使用配置以及使用中出现的问题和解决方法。

使用的方法，以我自己写的博客后台为例。

1.使用前准备

安装

全局安装create-react-app npm i create-react-app -g
使用create-react-app初始化项目create-react-app blog-admin-react
cd 进入目标项目根目录,然后npm run start ，访问http://localhost:3000/

2.基础讲解

自带的安装有且只有一些基础的包.查看package.json

"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"

react核心包版本16.12(在16.8开始已经可以使用hook新特性)

react-dom版本16.12

react-scripts就是create-react-app的版本

其余的都有自己搞.后面会介绍常用的开发包安装

删除src下所有的文件.清空

创建component通用组件(不在区分状态组件和非状态组件。采用hook写法)

创建views文件(与vue文件保持一起，主要页面组件在这个下面)

创建assets(静态资源文件)

3.路径上使用@别名

增加别名。实在是不想看到react中的../../../../../../... 首先需要安装react-app-rewired customize-cra 这两个 npm i react-app-rewired customize-cra 修改package.json启动项

原来是

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
}

修改为

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
}

然后在根目录创建一个config-overrides.js的文件加入下面代码

config-overrides.js

const { override, addWebpackAlias } = require("customize-cra");
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, ".", dir);
}
module.exports = override(
  // 配置路径别名
  addWebpackAlias({
    "@": resolve("src")
  })
);

已经可以愉快的使用@别名了。 juejin.cn/post/684490…参考了配置(怀念vue-cli的日子-.-.)

4.安装antd，按需引入

你不按需引入那就是没有灵魂的使用antd

安装babel-plugin-import 和vue的element-ui差不多操作

npm i babel-plugin-import antd

还是需要自定义配置的社区解决方案 react-app-rewired customize-cra 上面已经安装了 config-overrides.js代码预览

const { override, addWebpackAlias, fixBabelImports } = require("customize-cra");
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, ".", dir);
}
module.exports = override(
  // 配置路径别名
  addWebpackAlias({
    "@": resolve("src")
  }),
  // 按需引入antd配置
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css"
  })
);

按需引入后，就不用了引入antd的css了。直接按需引入组件使用即可(真香,这也是优化的一个点。避免首屏加载过多)

5.安装路由

npm i react-router-dom react的路由和vue的路由还是有很大区别的。后面出一篇文章专门做总结。

6.配置一下axios

个人习惯的配置在src下面创建request文件夹

文件列表

-src
    -request
        axios_config.js //这是axios的配置文件，包括响应和请求的提前解析
        base_config.js  //包括开发环境，生产环境，图片前缀地址的常量配置。
        http.js //这里主要的http业务请求。如果你的项目够大，你还可以继续模块化划分

base_config.js

// 这里主要配置一些硬编码// 接口请求地址
let BASE_URL;
// 图片前缀 
// const BASE_URL_IMG;
// 习惯于区分两个环境不同的打包和开发URL,随意切换。
// process.env.NODE_ENV   production/development可以判断当前的环境
if (process.env.NODE_ENV === "development") {
  BASE_URL = "//127.0.0.1:7001";
} else {
  BASE_URL = "//127.0.0.1:7001";
  // 生产打包环境。就是npm run build之后的请求地址
}

export { BASE_URL };

上面用的到的process.env是node内置的对象。而对应的process.env.NODE_ENV则是create-react-app给你设置好的。process.env.NODE_ENV 开发人员无法覆盖.

运行npm run start 时 'development'
运行npm run build 时 'production'
运行npm run test 时 'test' 自定义的话:你可以根目录下创建
.env 使用于所有环境
.env.development 适用于开发环境
.env.production 适用于生产环境
.env.test 适用于测试环境 www.html.cn/create-reac…参考官方文档

axios_config.js

// 配置axios的拦截器。通用配置
import axios from "axios";
// 1.创建一个实例.实例上就有所有
const instance = axios.create();
// 2.请求拦截器
instance.interceptors.request.use(
  config => {
    // TODO.如果要加token，可以在这统一配置
    // const token = localStorage.getItem("token");
    // if (token) {
    //   config.headers.common["Authorization"] = token;
    // }
    // return config;
    // 这里没有配置。直接返回就行
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 3.响应拦截器
instance.interceptors.response.use(
  res => {
    //因为接受到的数据默认会在最外层包一层http状态数据。在这里就判断后剥离
    // 判定和后端协商这里的状态值是多少,我的是200
    if (res.status === 200) {
      return Promise.resolve(res.data);
    } else {
      // 这里是后端返回的自定义状态。看和后端协商是什么
      return Promise.resolve(res);
    }
  },
  error => {
    // TODO 这里可以加入异常处理，例如弹出一个错误，跳转去往首页登录
    return Promise.reject(error);
  }
);
// 将axios暴露出去
export default instance;

http.js // 所有的请求归于这个文件.引入基础配置后的axios的实例.

import axios from "./axios";
import { BASE_URL } from "./base_config";
// 这里统一分发请求
export default {
  /**
   * 获取文章类型的接口
   * @method get
   * /getArticleType
   */
  getArticleType: () => {
    return axios({
      url: `${BASE_URL}/getArticleType`,
      method: "get"
    });
  }
  
  /**
   * 通过指定id获取文章
   * @method get
   * /getArticleById/${id}
   */
  getArticleById: id => {
    return axios({
      url: `${BASE_URL}/getArticleById/${id}`,
      method: "get"
    });
  },
};

在需要的地方引入这个模块，然后掉用方法就行。在vue中可以直接挂在在vue实例的原型上。

React脚手架(create-react-app)

个人随笔记录 仅为个人笔记。