React 是一款高效、灵活且强大的 JavaScript 库，已经成为多数前端开发者的首选框架。但是，如果想要使用 React 开发一款完整的应用程序，就需要使用一些工具和框架，其中包括 Express.js 和 Webpack。本文将详细介绍如何使用这些工具和框架构建一款 React 应用程序。
准备工作
在开始之前，需要先安装 Node.js 和 npm。安装完成之后，可以使用 npm 安装需要用到的工具和框架，包括 Express 和 React：
npm install express react react-dom
同时，还需要安装 Webpack 和 Babel，用于打包和编译 React 代码：
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
创建 Express 应用程序
首先，需要创建一个 Express 应用程序。在项目根目录下创建一个名为 app.js 的文件，并添加以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- ---- - ----- -------------------------------- ------------ ----- ---- -- - ---------------------- - -------------------- --- ---------------- -- -- - -------------------- --- --------- -- -------------------------- ---
这段代码创建了一个 Express 应用程序，监听 3000 端口，并且将静态文件目录设置为 dist。当访问网站根目录时，会返回 dist/index.html 文件。
创建 React 应用程序
接下来，需要创建一个 React 应用程序。在项目根目录下创建一个名为 index.js 的文件，并添加以下代码：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));这段代码渲染了一个名为 App 的组件，并将其插入到 root 元素中。
然后，在项目根目录下创建一个名为 App.js 的文件，用于定义 App 组件。添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ----- -
------ -
-----
---------- -----------
------
--
-
------ ------- ----这段代码定义了一个简单的 App 组件，用于渲染一个标题。
配置 Webpack
接下来，需要配置 Webpack。在项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
----- --------------
------ -------------
------- -
--------- ------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
-
-
-
--这段代码配置了 Webpack 的入口文件为 index.js，输出文件为 dist/bundle.js。同时，配置了将 React 代码编译为 ES5 代码，以兼容更多的浏览器。
还需要创建一个 index.html 文件，用于加载 Webpack 输出的 bundle.js 文件。在 dist 文件夹下创建一个名为 index.html 的文件，并添加以下代码：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------ ----------- ------- ------ ---- ---------------- ------- ------------------------- ------- -------
这段代码定义了一个包含 root 元素的 HTML 文件，并加载了 Webpack 输出的 bundle.js 文件。
运行应用程序
完成以上步骤之后，可以使用以下命令构建和运行应用程序：
npx webpack --watch & node app.js
这条命令使用 webpack 命令构建 React 应用程序，并使用 node 命令运行 Express 应用程序。其中 --watch 参数表示开启 Webpack 的监听模式，可以自动重新构建代码。
现在，访问 http://localhost:3000，应该可以看到一个包含 “Hello, world!” 标题的网页。
总结
使用 Express.js 和 Webpack 构建 React 应用程序需要一些准备工作和配置，但是这种方式可以让开发者更加灵活和高效地开发 React 应用程序。本文介绍了如何使用 Express.js 和 Webpack 构建 React 应用程序，并提供了示例代码和配置，希望对学习和使用 React 的开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f9353ff6b2d6eab30c6265