背景
平常写React都是通过create-react-app、umi、next.js等框架初始化项目，用这些工具的好处就是上手快、不用自己配置，缺点是不了解webpack、babel、typescript等库的使用和配置，不清楚React项目是怎样运行的，最后可能导致自己都搭不起来项目。
本文详细介绍了搭建react项目的库、步骤、配置、集成各种开发工具等，重点在如何搭建react项目、了解项目运行原理。
基础库
搭建项目用到的库如下：
- react
- react-dom
- webpack
- webpack-dev-server
- webpack-cli
- @babel/cli
- @babel/core
- @babel/preset-env
- @babel/preset-react
- typescript
- ts-loader
- babel-load
- css-loader
- less-loader
- style-loader
- html-webpack-plugin
- react-router-dom
- react-redux
- @reduxjs/toolkit
- antd
基于以上库就可以搭建一个较为完整的React项目。
搭建基础项目
搭建React项目最关键的一步就是先把基础项目搭好，然后再把路由、数据管理工具、ui库、typescript等集成进来。
- 首先初始化项目。新建文件夹react-web，在文件夹下运行命令：
npm init
然后一路回车，项目就可以初始化成功了。此时项目只有一个package.json文件，结构如下：
- 下载react、react-dom。执行命令：
npm i react react-dom
新建src文件夹、index.js文件、App.js文件。完成后，文件结构如下：
新建public文件夹、index.html文件：
- 下载babel。babel是javascript编辑器，作用如下：
- 负责把ES6、ES7等高版本js编译成低版本js，供浏览器运行。
- 负责把react语法（jsx）编译成js。
babel详细使用请看文档。执行命令：
npm i @babel/core @babel/cli @babel/preset-env @babel/preset-react --save-dev
安装完成后添加babel配置文件。在根目录下添加.babelrc文件，内容如下：
- 集成webpack。webpack是一个现代JavaScript应用程序的静态模块打包器，现代前端应用很多都是用webpack打包，webpack详细使用请看文档。webpack-dev-server用来搭建一个本地服务，可以热加载前端项目，详细请看文档。
执行以下命令：
npm i webpack webpack-dev-server webpack-cli --save-dev
除此之外，webpack集成babel还需要babel-loader，加载html文件还需要插件html-webpack-plugin：
npm i babel-loader html-webpack-plugin --save-dev
安装完成后添加webpack配置。在根目录下新建webpack.config.js文件，内容如下：
在package.json里配置打包脚本：
然后执行命令：
npm run build
项目开始打包，生成bundle.js、index.html文件，结构如下：
浏览器打开index.html文件：
至此webpack简易版配置已经完成。接下来配置热加载功能，下载webpack-dev-server：
npm i webpack-dev-server --save-dev
在package.json添加脚本：
执行命令：
npm run start
项目在3000端口启动，启动后会自动打开浏览器窗口。热加载配置完成，文件修改保存后浏览器直接展示出来。
到此react项目简化版搭建完成。后续继续集成其他工具库即可。
使用ts
ts对比js最大的特点就是多了类型检查。推荐前端语言使用ts。接下来介绍在webpack中配置ts。
- 安装typescript、ts-loader。typescript是ts编辑器，把ts代码编译成js，详细请看文档。ts-loader是让webpack识别.ts/.tsx文件，调用编译器编译，详细看文档。
npm i typescript ts-loader --save-dev
安装react、react-dom类型库：
npm i @types/react @types/react-dom --save-dev
- 添加ts配置文件，ts配置文件详细请看文档。在根目录下添加tsconfig.json：
- 修改webpack配置：
- 把.js后缀改为.ts/tsx后缀：
启动项目，正常运行。ts集成成功。
路由
项目中路由是必不可少的。本节简单介绍路由如何使用，详细使用请看文档。
- 安装库：
npm install react-router-dom@6
- 修改index.tsx文件，使用BrowserRouter标签包裹跟标签：
- 使用路由。新建Home.tsx、About.tsx组件如下：
然后在App.tsx文件中引用：
启动项目，就可以使用路由了：
至此，路由配置已完成。
使用redux
对于大型项目来说，数据管理工具也是必不可少的。我们简单介绍redux、react-redux的使用，详细请看文档。这里使用的是@reduxjs/toolkit库，相比redux库使用方法有很大区别，想用redux库的请自行查看redux文档。
- 下载包：
npm i @reduxjs/toolkit react-redux
- 新建store.ts、countSlice.ts文件：
修改index.tsx文件，用Provider标签包裹跟组件：
添加Counter.tsx组件：
修改App.tsx组件，添加Counter路由：
进入counter页面，就可以使用redux了：
到此redux简易配置完成。
UI库
本项目选择antd作为UI库。antd官方文档
- 下载antd：
npm i antd
使用antd还需要引用其样式文件，因此还需要下载css-loader、style-loader。
npm i style-loader css-loader -D
修改webpack配置，添加style-loader、css-loader。
- 使用antd：
在入口文件处引用css样式文件：
在组件中使用即可：
效果如下：
更多组件请查看antd官方文档。
本地开发跨域问题
解决方案：
- 后端配置跨域资源共享
- 前端配置代理
这里介绍前端如何配置代理。在webpack.config.js文件中配置proxy：
配置后，前端请求就会被代理到8080端口，解决跨域问题。
后面会持续更新如何使用css、less等内容。
到此，一个react项目搭建完成。调整一下文件目录，新建page、components、service等文件夹，再集成一些库比如axios、Mockjs等，就是一个完整的前端项目。 本文用到的库单独拎出来都可以写篇文章讲叙其用法，这里只是简单介绍，作为入门。
因文章篇幅有限，本文介绍到此为止，如有错误，欢迎指正。下面列一些前端常用的库：
