使用webpack实现从0到1搭建一个react项目

穿件一个project文件夹用vscode或者其他编辑器打开，接着使用 npm init 初始化一个项目，初始化完成之后会有一个package.json文件。

npm i react react-dom

安装命令：

npm i webpack@4.32.2 webpack-cli@2.0.9 webpack-dev-server@3.0.0

安装成功之后，会出现node_modules和pack-lock.json包

node_modules文件夹webpack相关的包依赖，pack-lock是对包依赖的描述

安装babel编译ES6语法

npm i @babel/core@7.12.3 babel-loader@8.1.0 @babel/preset-react@7.12.1

安装loader编译css文件

npm i css-loader@5.0.0 style-loader@2.0.0

安装plugins打包HTML模板

注意：在安装@babel/coreh和@babel/preset-react这两个包时要安装大小相同的包

npm i html-webpack-plugin@4.5.0

先创建一个public文件夹，在该文件夹下面新建index.html

在根目录下新建src文件夹，在src文件夹下新建index.js作为入口文件，新建index.css用于编写样式

1.在cmd下输入“npm install create-react-app yarn -g”

2.在指定项目目录下输入 create-react-app your_project_name 

例如“create-react-app react_test” （注意项目名称不能有大写字母）

安装完成之后提示如下图所示

3.切换到刚刚安装时创建的文件夹，输入“yarn start”测试安装是否成功，安装成功则会调成一个页面

4.切换到刚刚安装时创建的文件夹，输入“ yarn add antd --save”安装antdesign

打开package.json可以看到antd已成功安装

此时，我们可以在编辑器中打开项目文件夹（此处是vs code），可以清晰的看到create-react-app的生成目录：

此时，系统已经为我们生成了基础的页面（也就是App.js中的组件所展现出来的）

在目录文件夹下运行“yarn start”命令，基础页面也就是react的logo等，此时的页面长这样：

然后我们就可以在render中引入新的组件渲染我们需要的页面了。例如：

此处我们通过import从antd中按需导入了Button组件，然后在render中渲染，运行“yarn start”指令得到如下页面：

可以看到页面中新增了一个button，至此基础的开发就是这样了，其他需要的组件，需要调整的样式可自行添加。

介绍

主要是使用 React 和 TypeScript 以及 Ant Design Pro 开发中后台项目，那么就会有人问“可不可开发前台”，回答是“可以”；Ant Design 是蚂蚁金服的UI框架，发展历程可以说是从 saga-redux ->dva ->umi ->ant design ，说 ant design 是 react 的最佳实践确实是名副其实；其中我最喜欢或者说是 dva 最显著的地方就是修缮了 redux 的不足之处。

搭建

安装 cnpm，yarn，tyarn

```

npm i -g cnpm --registry=https://registry.npm.taobao.orgcnpm i yarn -gyarn global add tyarn

```

2.  Ant Design Pro 立足于 umijs 、dva，需要安装 umi

```

yarn global add umi

```

3.  创建 Ant Design Pro 项目（先创建test文件夹）

```

mkdir test

cd test

yarn create umi （这里选择 ant design pro ->typescript ->simple）tyarn

yarn start

```

+ config

    - config.ts  路由设计

    - proxy.ts  代理（打包后无效）

+ mock          模拟数据

+ src

    - assets    放一些静态资源文件（png，svg等）

    - component  主要放全局组件

    - layouts    权限、token获取

    - models    详细内容见dva，换言之是redux （interface、数据交互）

    - pages      页面

    - serives    请求（get,post）

    - utils      放一些公用方法

/* 以上为本人对ant design pro各个模块的理解，不足之处还请指教 */

举个栗子（dva）

TypeScript 最突出的就是类型注解，其目的就是减少对类型的试错，从而达到优化

/**  * 假设你现在要做一个博客网站，现在你要搭建的是你的博客首页 * 1. 现在你的 page 已经写好了（src/home/index.tsx和src/home/index.less） * 2. 你的后端接口也已经写好了，提供的接口就是 home (GET) * 3. 你也已经在 config/proxy.ts 中写好了代理，代理名 api **/

现在你需要创建一个 src/services/home.ts 去对接后台的接口。

import request from '@/utils/request'// ant design pro 自带（无须修改，每次请求自动携带 token）interfaceHomeParams{currentPage:numberpageSize:number}exportasyncfunctionqueryGetMyHomeData(payload:HomeParams){returnrequest(`/api/home`,{method:'GET',params:{// 填写你需要传给后端的字段...payload,}/**        * 如果是 POST 请求，请将 params 修改成 data        **/})}

接下来，你需要创建一个 src/models/home.ts 去调用上面那个接口 （详细教程看 dva），我这是临时起意边想边写的（俗称瞎编乱造）。

import{queryGetMyHomeData}from'@/services/home'import{Effect,Reducer}from'umi'exportinterfaceDataItem{// 暂且假设后端回给你的只有（ID、博客标题、发布日期(毫秒数)、摘要）id:numbertitle:stringcreatedDate:numberbrief:string}// state 对应的类型（接口）exportinterfaceHomeState{currentPage:numberdata:Array<DataItem>}exportinterfaceHomeModelType{namespace:string// 说好听点叫做 "命名空间"state:HomeState// 就是 stateeffects:{// effects 里面的可以调用 reducers 里面的getData:Effect,changePage:Effect,}reducers:{setData:Reducer<HomeState>,setPage:Reducer<HomeState>,}}constHomeModel={namespace:'home',state:{currentPage:1,data:[],},effects:{*getData({payload},{call,put}){constres=yieldcall(queryGetMyHomeData,payload)// payload 要对应 queryGetMyHomeData 的形参，否则另当别论constarr=Array.isArray(res.data)?res.data:[]// 我这里假设返回的 res.data 就是我们所需要的数据yieldput({// 将数据放到 state 里面type:'setData',payload:{data:arr,}})},*changePage({payload},{call,put}){yieldput({type:'setPage',payload})// yield take( 'setPage/@@end' )    // 阻塞等待完成再往下执行，当然我们这里并不存在一步造成的问题yieldput({type:'getData',payload})},},reducers:{setData(state,{payload}){return{...state,...payload,}},setPage(state,{payload}){return{...state,...payload,}},}}exportdefaultHomeModel

让 src/pages/home/index.tsx 去 connect HomeModel

importReact,{useEffect}from'react'import{connect,Dispatch}from'umi'import{HomeState}from'@/models/home'interfaceHomeProps{dispatch:Dispatchhome:HomeState}constHome:React.FC<HomeProps>=(props)=>{// 拿到的内容可以直接使用const{dispatch,home:{currentPage,data,}}=props// 获取数据，或者说是初始化数据useEffect(()=>{dispatch({type:'home/getData',payload:{currentPage,pageSize:8,}})},[])// 页码改变事件functionpageChange(page){/**        * page的修改是两个 *** 作        * 1. 修改 page        * 2. 获取数据        * 3. 如果面临异步问题（我们这里用阻塞）-- 这里不存在此问题        **/dispatch({type:'home/changePage',payload:{currentPage:page,pageSize:8,}})}return(// ... 这里我就省略不写了)}exportdefaultconnect(home:HomeState=>home)(Home)

还有一点要 提醒 ，effects 里面的 和 reducers 里面的函数名不能一样。

有关于 Dva 对 Redux 的修改，见下图

---