在现代 Web 开发中，单页应用程序（Single Page Application，SPA）已经成为了主流。SPA 可以提供更加流畅的用户体验，同时也可以更好地支持移动设备。React 和 Redux 是目前最流行的前端开发框架之一，本文将介绍如何使用 React 和 Redux 开发一个简单的单页应用程序。
准备工作
在开始编写应用程序之前，需要安装 Node.js 和 npm。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，而 npm 是 Node.js 的包管理器。可以从 Node.js 官网（https://nodejs.org/）下载安装包，安装完成后可以通过命令行验证是否成功安装：
node -v npm -v
安装完成后，可以使用 npm 安装 React 和 Redux：
npm install react redux
创建应用程序
在开始编写应用程序之前，需要确定应用程序的结构。在本文中，我们将创建一个简单的待办事项应用程序。应用程序包含两个页面：待办事项列表和添加待办事项。我们将使用 React Router 来管理路由。
首先，创建一个名为 todo-app 的目录，并进入该目录：
mkdir todo-app cd todo-app
然后，使用 npm 初始化项目：
npm init
按照提示输入项目信息，完成后会生成一个 package.json 文件。
接下来，安装必要的依赖：
npm install react react-dom react-router-dom redux react-redux
创建项目的目录结构如下：
-- -------------------- ---- ------- --------- -- ------------- -- ---- - -- ----------- - - -- ---------- - - -- ------- - - -- ----------- - -- ------ - - -- -------------- - - -- --------------- - -- --------- - - -- -------- - -- ------ - -- -------- -- ------------
其中，src 目录包含了应用程序的源代码，components 目录包含了可复用的组件，pages 目录包含了页面组件，reducers 目录包含了 Redux 的 reducer。
编写组件
我们先从编写组件开始。在 src/components 目录下，创建三个组件文件：Todo.js、TodoList.js 和 AddTodo.js。这些组件分别用于显示单个待办事项、待办事项列表和添加待办事项。
Todo.js 组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ---- - -- ---- -- -- -
-----
---------------------
-------------------------
------
--
------ ------- -----TodoList.js 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---- ---- ---------
----- -------- - -- ----- -- -- -
-----
--------------- -- -
----- ------------- ----------- --
---
------
--
------ ------- ---------AddTodo.js 组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
----- ------- - -- -------- -- -- -
----- ------- --------- - -------------
----- ------------- --------------- - -------------
----- ------------ - - -- -
-------------------
---------- ------ ----------- ---
-------------
-------------------
--
------ -
----- ------------------------
-------
------
------ ----------- ------------- ----------- -- ------------------------- --
--------
-------
------------
--------- ------------------- ----------- -- ------------------------------- --
--------
------- ----------------- -------------
-------
--
--
------ ------- --------编写页面组件
在 src/pages 目录下，创建两个页面组件文件：TodoListPage.js 和 AddTodoPage.js。这些页面组件用于渲染页面，包含了相应的路由信息。
TodoListPage.js 页面组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ -------- ---- -------------------------
------ - ---------- - ---- --------------
----- ------------ ------- --------------- -
------------------- -
------------------------
-
-------- -
----- - ----- - - -----------
------ -
-----
-------- ---------
--------- ------------- --
------
--
-
-
----- --------------- - ----- -- --
------ ------------
---
------ ------- ------------------------ - ---------- -----------------AddTodoPage.js 页面组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ ------- ---- ------------------------
------ - ------- - ---- --------------
----- ----------- - -- -------- ------- -- -- -
----- ------------ - ---- -- -
--------------
------------------
--
------ -
-----
------- ---------
-------- ----------------------- --
------
--
--
------ ------- ------------- - ------- ----------------编写 Redux reducer
在 src/reducers 目录下，创建 index.js 文件，编写 Redux 的 reducer。
-- -------------------- ---- -------
------ - --------------- - ---- --------
----- ----------- - --------------
----- -------- - -----------
------ ----- ---------- - -- -- --
----- ------------
---
------ ----- ------- - ---- -- --
----- ---------
-------- -----
---
----- ------------ - ------ - --- ------- -- -
------ ------------- -
---- ------------
------ -
- --- -- ------ ----- --- ------------ ------------ -- --
- --- -- ------ ----- --- ------------ ------------ -- --
- --- -- ------ ----- --- ------------ ------------ -- --
--
---- ---------
------ ---------- - ------------------ --- ------------ - - ---
--------
------ ------
-
--
------ ------- -----------------
------ -------------
---编写应用程序
在 src 目录下，创建 App.js 文件，编写应用程序的根组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------- -- ------- ------ ---- - ---- -------------------
------ ------------ ---- -----------------------
------ ----------- ---- ----------------------
----- --- - -- -- -
--------
-----
-----
----
----
----- ----------- -----------
-----
----
----- ------------- -----------
-----
-----
------
------ ----- -------- ------------------------ --
------ ----------- ----------------------- --
------
---------
--
------ ------- ----在 src 目录下，创建 index.js 文件，渲染根组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ -------- ---- -------------
------ --- ---- --------
----- ----- - ----------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--最后，在 index.html 文件中添加一个 div：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- -----------
-------
------
---- ----------------
------- ------------------------------
-------
-------运行应用程序
在命令行中执行以下命令，编译应用程序：
npm run build
然后，在浏览器中打开 index.html 文件，即可看到应用程序界面。在待办事项列表页面中，将显示三个默认的待办事项。在添加待办事项页面中，可以添加新的待办事项。添加完成后，将自动跳转到待办事项列表页面，新添加的待办事项将显示在列表中。
总结
本文介绍了如何使用 React 和 Redux 开发一个简单的单页应用程序。通过本文的学习，可以了解 React 和 Redux 的基本用法，以及如何创建组件、页面和 reducer。同时，本文还介绍了如何使用 React Router 管理路由，以及如何使用 npm 管理依赖。
完整代码可在以下链接中找到：https://github.com/LucyBot-Inc/react-redux-todo-app。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6562a150d2f5e1655dc74912