1.react脚手架安装

yarn add create-react-app -g //全局安装react脚手架

create-react-app my-app //安装react最基本开发环境需要的第三方依赖

cd my-app //进入项目

yarn start  //运行项目

2.页面划分

assets 存放静态资源如css、font、img文件
common 存放公共文件
components 存放 react jsx文件
router 存放路由相关配置文件
services 存放相关网络请求
store 存放 react action具体执行方法
utils 存放封装的工具函数
views 存放页面组件

3.配置路径别名

yarn add @craco/craco
新建一个craco.config.js文件

const path = require("path");
const resolve = dir => path.resolve(__dirname, dir)
module.exports = {
  webpack: {
alias: {
  "@": resolve("src"),
  "components": resolve("src/components")
}
  }
}

4.配置路由

yarn add react-router-dom
yarn add react-router-config
//在router目录下新建index入口文件

const routers = [{
path: '/',
exact: true,
component: 组件
}];
export default routers

//在APP.js文件
import {renderRoutes} from 'react-router-config'
//设置路由界面位置显示
{renderRoutes(routers)}
<NavLink to={"/"}>首页 //</NavLink>跳转页面

5.设置样式

yarn add styled-components

//对应组件的文件夹下面新建一个style.js文件导出对应的样式
//在对应组件下面引用导出的并且替换对应的HTML标签
//减少多个样式文件之间的冲突
import styled from 'styled-components';
export const HeaderWrapper = styled.div` /*  此处可以设置样式               */`

6.使用ant-design

yarn add antd //使用antd
yarn add @ant-design/icons //使用antd图标

//在css文件下导入
@import "~antd/dist/antd.css";

7使用Redux及中间件

yarn add redux react-redux react-thunk

注意：

import  {Fragment} from 'react';
如果不想页面渲染div或其他元素可以使用Fragment标签替代

react项目导入背景图片显示background-image: url([object Module])
直接在导入图片的路径后面加上.default
background-image: url(${require('@/assets/img/sprite_01.png').default});