React 是一个旨在构建高效、灵活的用户界面的 JavaScript 库。而 Express.js 是一个基于 Node.js 平台的 Web 开发框架。Webpack 是一个模块打包工具，它可以将多个模块打包成一个文件。在本文中，我们将探讨如何使用 Express.js 和 Webpack 构建 React 应用程序。
前置知识
在学习本文之前，你需要掌握以下知识：
- 基本的 HTML、CSS 和 JavaScript
- React 库的基本用法
- Node.js 和 npm 的基本用法
项目初始化
首先，我们需要创建一个新的项目目录，并在其中初始化一个 npm 项目。
----- ------------ -- ------------ --- ---- --
接下来，我们需要安装必要的依赖项。
--- ------- ------- ------- ----------- ---------------------- ---------------------- ----- --------- ------------ ----------- ----------------- ------------------- ----------
express是我们使用的 Web 框架。webpack、webpack-cli、webpack-dev-middleware和webpack-hot-middleware是我们使用的 Webpack 工具。react和react-dom是我们使用的 React 库。babel-loader、@babel/core、@babel/preset-env和@babel/preset-react是我们使用的 Babel 工具。
配置文件
接下来，我们需要创建一些配置文件。
webpack.config.js
我们要创建一个 webpack.config.js 文件，用于配置 Webpack。
----- ---- - ----------------
----- ------- - -------------------
----- ----------------- - -------------------------------
-------------- - -
----- --------------
------ -
--------------------------------------------
----------------------- ------ -----------
--
------- -
----- ----------------------- --------
--------- ------------
----------- ---
--
-------- -------------------------------
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
--
-
----- ---------
---- ---------------- -------------
-
-
--
-------- -
--- -------------------------------------
--- -------------------
--------- ----------------------- --------- -------------
--
-
--这个配置文件指定了入口、输出、模块规则和插件。我们在这里使用了 webpack-hot-middleware 和 webpack-dev-middleware，它们可以让我们在开发过程中快速地重新加载代码。
.babelrc
我们要创建一个 .babelrc 文件，用于配置 Babel。
- ---------- --------------------- ---------------------- -
这个文件指定了我们使用的 Babel 预设。
.gitignore
我们要创建一个 .gitignore 文件，用于忽略某些文件。
------------- -----
这个文件指定了我们要忽略的文件夹。
目录结构
我们的项目目录结构如下：
------------- --- ----- --- ------------- --- ------- - --- ---------- --- ---- - --- ------ - --- -------- --- -------- --- ---------- --- ------------ --- -----------------
dist文件夹用于存放打包后的文件。public文件夹用于存放静态文件。src文件夹用于存放源代码。
编写代码
现在，我们可以开始编写代码了。
public/index.html
我们要创建一个 public/index.html 文件，用于指定我们的 HTML 模板。
--------- -----
------
------
----- --------------- --
--------- ----- -----------
-------
------
---- ----------------
------- --------------------------
-------
-------这个文件指定了我们的页面结构，并引用了我们打包后的 JavaScript 文件。
src/App.js
我们要创建一个 src/App.js 文件，用于编写 React 组件。
------ ----- ---- -------- -------- ----- - ------ ---------- ------------ - ------ ------- ----
这个文件定义了一个简单的 React 组件，它只是返回一个 h1 标签。
src/index.js
我们要创建一个 src/index.js 文件，用于渲染 React 组件。
------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- -------------------- --- ---------------------------------
这个文件使用 ReactDOM.render() 方法将 App 组件渲染到 root 元素中。
启动应用程序
现在，我们可以启动我们的应用程序了。
package.json
我们需要在 package.json 文件中添加一些脚本。
-
------- ---------------
---------- --------
---------- -
-------- ------------------- -------- ----------------- ------ ----------- --------
-------- -------- -------- ----------------- ------ -----------
--
------------------ -
-------------- ----------
-------------------- ----------
---------------------- ----------
--------------- ---------
------------- ---------
---------- ----------
---------------------- ---------
-------- ----------
------------ ----------
--------------- ---------
---------- ----------
-------------- ---------
------------------------- ---------
--------------------- ---------
------------------------- ---------
-
-这个文件指定了我们的依赖项和脚本。我们在这里添加了 start 和 build 脚本，用于启动开发服务器和打包应用程序。
启动开发服务器
我们可以使用以下命令启动开发服务器。
--- --- -----
这个命令会自动打开我们的应用程序，并在代码更改时重新加载。
打包应用程序
我们可以使用以下命令打包应用程序。
--- --- -----
这个命令会将我们的应用程序打包到 dist 文件夹中。
总结
在本文中，我们学习了如何使用 Express.js 和 Webpack 构建 React 应用程序。我们创建了一些配置文件和目录结构，并编写了一些代码。最后，我们启动了开发服务器并打包了应用程序。这些知识可以帮助你更好地理解如何构建 React 应用程序，并为你的开发工作提供指导。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65fbcdd9d10417a22275ece0