React 是一个旨在构建高效、灵活的用户界面的 JavaScript 库。而 Express.js 是一个基于 Node.js 平台的 Web 开发框架。Webpack 是一个模块打包工具，它可以将多个模块打包成一个文件。在本文中，我们将探讨如何使用 Express.js 和 Webpack 构建 React 应用程序。
前置知识
在学习本文之前，你需要掌握以下知识：
- 基本的 HTML、CSS 和 JavaScript
- React 库的基本用法
- Node.js 和 npm 的基本用法
项目初始化
首先，我们需要创建一个新的项目目录，并在其中初始化一个 npm 项目。
mkdir my-react-app cd my-react-app npm init -y
接下来，我们需要安装必要的依赖项。
npm install express webpack webpack-cli webpack-dev-middleware webpack-hot-middleware react react-dom babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
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。
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
这个文件指定了我们使用的 Babel 预设。
.gitignore
我们要创建一个 .gitignore 文件，用于忽略某些文件。
node_modules/ dist/
这个文件指定了我们要忽略的文件夹。
目录结构
我们的项目目录结构如下：
-- -------------------- ---- ------- ------------- --- ----- --- ------------- --- ------- - --- ---------- --- ---- - --- ------ - --- -------- --- -------- --- ---------- --- ------------ --- -----------------展开代码
dist文件夹用于存放打包后的文件。public文件夹用于存放静态文件。src文件夹用于存放源代码。
编写代码
现在，我们可以开始编写代码了。
public/index.html
我们要创建一个 public/index.html 文件，用于指定我们的 HTML 模板。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- --------------- -- --------- ----- ----------- ------- ------ ---- ---------------- ------- -------------------------- ------- -------展开代码
这个文件指定了我们的页面结构，并引用了我们打包后的 JavaScript 文件。
src/App.js
我们要创建一个 src/App.js 文件，用于编写 React 组件。
import React from 'react'; function App() { return <h1>Hello, World!</h1>; } export default App;
这个文件定义了一个简单的 React 组件，它只是返回一个 h1 标签。
src/index.js
我们要创建一个 src/index.js 文件，用于渲染 React 组件。
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
这个文件使用 ReactDOM.render() 方法将 App 组件渲染到 root 元素中。
启动应用程序
现在，我们可以启动我们的应用程序了。
package.json
我们需要在 package.json 文件中添加一些脚本。
-- -------------------- ---- ------- - ------- --------------- ---------- -------- ---------- - -------- ------------------- -------- ----------------- ------ ----------- -------- -------- -------- -------- ----------------- ------ ----------- -- ------------------ - -------------- ---------- -------------------- ---------- ---------------------- ---------- --------------- --------- ------------- --------- ---------- ---------- ---------------------- --------- -------- ---------- ------------ ---------- --------------- --------- ---------- ---------- -------------- --------- ------------------------- --------- --------------------- --------- ------------------------- --------- - -展开代码
这个文件指定了我们的依赖项和脚本。我们在这里添加了 start 和 build 脚本，用于启动开发服务器和打包应用程序。
启动开发服务器
我们可以使用以下命令启动开发服务器。
npm run start这个命令会自动打开我们的应用程序，并在代码更改时重新加载。
打包应用程序
我们可以使用以下命令打包应用程序。
npm run build这个命令会将我们的应用程序打包到 dist 文件夹中。
总结
在本文中，我们学习了如何使用 Express.js 和 Webpack 构建 React 应用程序。我们创建了一些配置文件和目录结构，并编写了一些代码。最后，我们启动了开发服务器并打包了应用程序。这些知识可以帮助你更好地理解如何构建 React 应用程序，并为你的开发工作提供指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fbcdd9d10417a22275ece0
