如果你是一名前端开发人员，并且想要快速使用 React 技术堆栈搭建一个全栈应用，那么 create-react-app-fullstack 这个 npm 包可能正好是你需要的。本文将会介绍这个 npm 包的使用方法，同时协助你快速构建一个全栈应用。
什么是 create-react-app-fullstack
create-react-app-fullstack 是基于 create-react-app 的扩展版本，它为使用 React 技术堆栈搭建完整服务器端和客户端应用程序提供了一种快速简便的方法。
这个 npm 包默认构建了一整套完整的技术堆栈，包括但不限于 React、Express、MongoDB 和 Bootstrap 等。这些组件元素已经被预先安装在项目中，因此你可以直接开始构建自己的业务逻辑。此外，create-react-app-fullstack 还提供了一个名为 "api" 的目录，可以用于开发 Express API，并将其与 React App 联系在一起。
使用 create-react-app-fullstack
为了使用 create-react-app-fullstack，你需要先在你的本地环境中安装 Node.js 和 NPM（如果你还没有安装的话）。安装完成后，在你喜欢的开发环境（如 VS Code，WebStorm 等）上开启一个空白项目，并且在终端或命令提示符中键入以下命令：
npx create-react-app-fullstack
这个命令将会在你的项目中下载所需的依赖项并初始化一个名为 "client" 的文件夹 (存储 React / Redux 代码)，以及一个名为 "server" 的文件夹（存储 Express 代码和 API 路由）。默认的数据库是 MongoDB，因此你需要确保本地存在它，并通过 mongod 命令在本地启动它。（这部分可以略过）
接下来，切换到 "client" 文件夹，键入以下命令以启动 React 应用程序：
npm start
然后打开一个新的终端窗口，切换到 "server" 文件夹，并且通过以下方式启动服务器：
npm start
到此为止，你的全栈应用程序已经建立成功，并可以访问 http://localhost:3000 中的 React 应用程序以及 http://localhost:9000/api 中的 Express API 路由。
示例代码
为便于理解，本文介绍了一个简单的 ToDo List 应用程序的代码示例。首先在 "client/src" 文件夹中创建一个名为 "Todo.js" 的文件，用于展示 ToDO 列表：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ---- ------- --------------- -
-------- -
----- - -------- - - -----------
------ -
-----
-------- ---------
----
-------------------- -- -
------ -
--- --------------
-----------
-----
--
---
-----
------
--
-
-
----- --------------- - ------- -- -
------ -
--------- ---------------------------
--
--
------ ------- -------------------------------在 "client/src" 中创建一个名为 "TodoInput.js" 的文件，它将用于创建新的 ToDo 项：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------- - ---- -------------------------
----- --------- ------- --------------- -
------------------ -
-------------
---------- - - ----------- -- --
-
-------- - ------- -- -
--------------- ----------- ------------------ ---
--
-------- - ------- -- -
-----------------------
----- - ---------- - - -----------
-------------------------------
--------------- ----------- -- ---
--
-------- -
----- - ---------- - - -----------
------ -
----- -------------------------
------ ----------- ------------------ ------------------------ --
------- ----------------- -------------
-------
--
-
-
----- ------------------ - ---------- -- -
------ -
-------- ------ -- ------------------------
--
--
------ ------- ------------- -------------------------------接下来，创建 Redux 动作和减速器以及API。
在 "client/src/actions" 文件夹下，新建一个名为 "todoActions.js" 的文件。它包含两个动作：
-- -------------------- ---- -------
------ ----- ------- - ------ -- -
------ -
----- -----------
----- - --- ----------- ---- --
--
--
------ ----- ---------- - -- -- -
------ ---------- -- -
-------------------
----------- -- -----------
------------- -- -
---------- ----- -------------- ----- ----- ---
---
--
--在 "client/src/reducers" 文件夹下，创建一个名为 "todoReducer.js" 的文件，用于减速到监听/处理上述 Redux 动作：
-- -------------------- ---- -------
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- ----------- -
----- - ---- - - -------
----- ----------- - ------------------- ------
------ - --------- --------- ----------- --
-
---- -------------- -
----- - ---- - - -------
------ - --------- --------- ---- --
-
--------
------ ------
-
--
------ ------- ------------现在，在 "server/routes/api/todos.js" 中创建一个 Express API。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ----------------- ----- ----- - - - --- -- ----- ---- ----- -- - --- -- ----- ------- ------- ------ -- - --- -- ----- ------- ----- --------- -- -- --------------- ----- ---- -- - ---------------- --- -------------- - -------
最后，在 "server/index.js" 文件中将以上所有内容连接起来：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ---------- - ------------------------------
----- --- - ----------
---------------------------- --------- ---- ----
------------------------
--------------------- ------------
-- --------------------- --- ------------- -
----------------------------------------
------------ ----- ---- -- -
------------------------------------ --------- -------- ---------------
---
-
----- ---- - ---------------- -- -----
---------------- -- -- -
------------------- --------- -- ----------
---现在你可以启动应用程序并查看它在 http://localhost:3000 上效果。
结论
create-react-app-fullstack 是一种快速简便的方法，可以轻松地搭建 React 技术堆栈的全栈应用程序。此外，在整个应用程序中默认包含对 Redux、Express、MongoDB 和 Bootstrap 的支持，使它成为使用 React 的开发者创建完整业务逻辑的理想选择。当你需要构建一个如此全面的应用程序时，create-react-app-fullstack 可以使你的开发过程更加便捷。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057bff81e8991b448ebaee