在现代 Web 开发中，单页应用程序（Single Page Application，SPA）已经成为了一种常见的开发方式。SPA 可以在不刷新页面的情况下动态更新内容，提高了用户体验和应用性能。在 SPA 开发中，React、Redux 和 Webpack4 是三个非常重要的工具。本文将详细介绍如何使用这三个工具构建一个简单的 SPA。
准备工作
在开始之前，需要安装 Node.js 和 npm。可以在 Node.js 官网下载安装包进行安装。
安装完成后，可以使用 npm 安装 React、Redux 和 Webpack4：
npm install react react-dom redux react-redux webpack webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react redux-thunk
创建项目
首先，创建一个新的项目文件夹，并在该文件夹中创建一个 package.json 文件：
mkdir my-spa cd my-spa npm init -y
在 package.json 文件中添加以下内容：
-- -------------------- ---- -------
-
------- ---------
---------- --------
-------------- --- -----
---------- -
-------- ------------------- ------ ----------- --------
-------- -------- ------ -----------
--
--------------- -
-------- -----------
------------ -----------
-------- ---------
-------------- ---------
-------------- --------
--
------------------ -
---------- ----------
-------------- ----------
--------------------- ----------
--------------- ---------
-------------- ----------
-------------------- ----------
---------------------- ---------
-
-这里添加了 start 和 build 两个脚本，分别用于开发和生产环境。dependencies 中添加了 React、Redux、React-Redux 和 Redux-Thunk，devDependencies 中添加了 Webpack 和 Babel 相关的依赖。
配置 Webpack
接下来，创建一个 webpack.config.js 文件，用于配置 Webpack：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- ------------
----------- ---
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
-
-
--
---------- -
------------ -------------------- --------
--------- -----
----- ----
-
--这里配置了入口文件为 ./src/index.js，输出文件为 ./dist/bundle.js。使用了 Babel 和 Webpack 的相关配置，以及设置了开发服务器的端口号为 9000。
编写代码
在 src 目录下创建 index.html 和 index.js 文件：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- ----------- ------- ------ ---- ---------------- ------- ------------------------- ------- -------
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------ --------------- - ---- --------
------ - -------- - ---- --------------
------ ----- ---- --------------
------ ------- ---- -------------
------ --- ---- -------------------
----- ----- - -------------------- ------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--这里使用了 React、ReactDOM、Redux、React-Redux 和 Redux-Thunk。创建了一个 Redux store，并将其传递给了 Provider 组件。App 组件是 SPA 的主要组件。
在 src/components 目录下创建 App.js 文件：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- - -- -- -
------ -
-----
---------- -----------
------
--
--
------ ------- ----这里只是简单地返回了一个包含 h1 标签的 div 元素。
在 src/reducers 目录下创建 index.js 文件：
-- -------------------- ---- -------
----- ------------ - ---
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
--------
------ ------
-
--
------ ------- --------这里只是简单地返回了一个空对象。
运行项目
现在可以运行项目了。在命令行中运行：
npm start
然后在浏览器中打开 http://localhost:9000，就可以看到 SPA 的页面了。
总结
本文介绍了如何使用 React、Redux 和 Webpack4 构建一个简单的 SPA。在实际开发中，还需要考虑许多其他因素，例如路由、样式、网络请求等。但是本文提供了一个良好的起点，可以帮助读者快速入门 SPA 开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65da916a1886fbafa47cb598