随着 React 技术在前端开发中的广泛应用，越来越多的开发者开始使用 React 来构建自己的项目。但是，要搭建一个完整的 React 项目需要配置很多工具和插件，这对于初学者来说是一件比较困难的事情。
本文将介绍如何从零开始搭建一个 React 项目，并配置 Webpack4、Babel7、ESLint 和 Redux。我们将详细讲解每个工具和插件的作用以及如何进行配置，希望能够对初学者有所帮助。
1. 创建项目
首先，我们需要创建一个空的项目目录，并使用 npm 初始化该项目：
mkdir react-project cd react-project npm init -y
2. 安装依赖
接下来，我们需要安装一些依赖，包括 React、ReactDOM、Webpack、Babel、ESLint 和 Redux：
npm install react react-dom webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react redux react-redux --save-dev
其中，我们安装了以下依赖：
react和react-dom：React 的核心库和 DOM 操作库；webpack和webpack-cli：打包工具；babel-loader、@babel/core、@babel/preset-env和@babel/preset-react：Babel 的核心库和插件，用于将 ES6+ 和 JSX 语法转换为浏览器可识别的语法；eslint、eslint-config-airbnb、eslint-plugin-import、eslint-plugin-jsx-a11y和eslint-plugin-react：代码检查工具，用于规范代码风格；redux和react-redux：Redux 的核心库和 React 绑定库。
3. 配置 Webpack
接下来，我们需要配置 Webpack。Webpack 是一个模块化打包工具，用于将多个模块打包成一个文件。
首先，在项目根目录下创建一个 webpack.config.js 文件，并添加以下内容：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
--
--
--
--
--
--在上面的配置中，我们指定了入口文件为 src/index.js，输出文件为 dist/bundle.js。同时，我们使用了 babel-loader 来将 ES6+ 和 JSX 语法转换为浏览器可识别的语法。
4. 配置 Babel
接下来，我们需要配置 Babel。Babel 是一个 JavaScript 编译器，用于将 ES6+ 和 JSX 语法转换为浏览器可识别的语法。
在项目根目录下创建一个 .babelrc 文件，并添加以下内容：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}在上面的配置中，我们指定了使用 @babel/preset-env 和 @babel/preset-react 来转换语法。
5. 配置 ESLint
接下来，我们需要配置 ESLint。ESLint 是一个代码检查工具，用于规范代码风格。
在项目根目录下创建一个 .eslintrc.json 文件，并添加以下内容：
-- -------------------- ---- -------
-
---------- ---------- ----------------------------
---------- ---------- ----------- ---------
-------- -
------------------------------- --- - ------------- ------- ------- ---
------------------------------------ --------- - ------------------ ---- --
--
------ -
---------- -----
------- -----
------ ----
-
-在上面的配置中，我们指定了使用 airbnb 和 plugin:react/recommended 来规范代码风格。同时，我们还添加了一些自定义规则，如允许在 .js 和 .jsx 文件中使用 JSX 语法，禁止使用未安装的依赖等。
6. 配置 Redux
最后，我们需要配置 Redux。Redux 是一个状态管理工具，用于管理应用的状态。
首先，在 src 目录下创建一个 store 目录，并在该目录下创建一个 index.js 文件，添加以下内容：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - ---
-------- ----------------- - ------------- ------- -
------ ------------- -
--------
------ ------
-
-
----- ----- - -------------------------
------ ------- ------在上面的代码中，我们定义了一个空的 initialState 和一个 rootReducer 函数，用于管理应用的状态。同时，我们使用 createStore 函数创建了一个全局的 store 对象，并将其导出。
接下来，在 src 目录下创建一个 index.js 文件，添加以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
----------------
--------- --------------
---- --
------------
--------------------------------
--在上面的代码中，我们使用 Provider 组件将全局的 store 对象注入到应用中，并渲染了一个 App 组件。
7. 编写示例代码
最后，我们来编写一些示例代码。
在 src 目录下创建一个 App.js 文件，添加以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
-------- ---------- -
------ -
-----
---------- ------------------
------- --------------------------------- -------------
------
--
-
-------- ---------------------- -
------ -
----- -----------
--
-
-------- ---------------------------- -
------ -
----------- -- -- ---------- ----- -------------- ----- ------- ---
--
-
------ ------- ------------------------ -------------------------在上面的代码中，我们定义了一个 App 组件，并使用 connect 函数将其与全局的 store 对象连接起来。同时，我们还定义了一个 mapStateToProps 函数和一个 mapDispatchToProps 函数，用于将 store 中的状态映射到组件的属性中，并将组件的行为映射到 store 的操作中。
最后，在 src 目录下创建一个 index.js 文件，添加以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- --------
----------------
--------- --------------
---- --
------------
--------------------------------
--在上面的代码中，我们使用 Provider 组件将全局的 store 对象注入到应用中，并渲染了一个 App 组件。
8. 运行项目
最后，我们可以使用以下命令来运行项目：
npx webpack --mode development
该命令将会打包所有的模块，并生成一个 dist/bundle.js 文件。
在浏览器中打开 index.html 文件，即可看到渲染后的页面。
总结
通过本文的介绍，我们学习了如何从零开始搭建一个 React 项目，并配置了 Webpack4、Babel7、ESLint 和 Redux。我们详细讲解了每个工具和插件的作用以及如何进行配置，并编写了一些示例代码。希望本文能够对初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c1a790add4f0e0ffba7ee2