在前端开发过程中，我们经常使用 React 和 Express 进行 web 应用程序的开发。使用 create-express-react 这个 npm 包可以帮助我们快速创建一个集成了 Express 和 React 的 web 应用程序。
安装
创建一个基于 Express 和 React 的 web 应用程序，我们需要安装 create-express-react 包。
npm i create-express-react
使用
安装完成后，我们可以使用它来创建一个新的项目：
npx create-express-react my-app cd my-app npm start
npm start 启动了一个本地开发服务器，您的应用程序现在可以从 http://localhost:3000/ 访问。
程序结构
创建完一个新的项目后，这个项目的目录结构会是这样的：
-- -------------------- ---- -------
------
--- ------------
--- -----------------
--- ------
- --- -----------
- --- ----------
- --- -----------
--- ---------
--- ---
--- ------
--- -----------
--- ---------
--- --------
--- --------
--- -------------这个项目的前端部分使用了 Create React App 自带的结构，而它的后端部分则会被放在 src/server 目录下。
后端开发
我们可以在 src/server/index.js 中编写 Express 后端代码。Express 服务器默认监听 8000 端口，可以在这里修改端口。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- ---- ----------- --- ----- ---- - ---------------- -- ----- ---------------- -- -- - ---------------------- -- ---- ---------- ---
前端开发
前端开发的代码在 src/App.js 中。您可以在这里编写您的 React 组件。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
-------- ----- -
----- ------ -------- - -------------
------------ -- -
------------------
----------- -- -----------
------------ -- -----------------------
-- ----
------ -
-----
---------------
------
--
-
------ ------- ----在这个例子中，我们首先使用 useState 和 useEffect 钩子定义一个 state 变量（data），并且在页面渲染时使用 fetch 方法向服务器请求数据。得到数据后，我们使用 setData 更新了 state 变量，并且在页面上渲染这个数据。
示例代码
您可以访问 https://github.com/create-express-react/demo 来查看一个完整的使用 create-express-react 包创建的示例代码。
结束语
create-express-react 包可以帮助我们快速创建一个集成了 Express 和 React 的 web 应用程序，并且其使用方法也十分简单。不过要注意的是，在使用之前需要先掌握好基本的 React 和 Express 开发技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005665781e8991b448e27be