在本教程中，我们将使用 Express.js 和 React 构建一个简单的 Todo 应用。我们将学习如何使用这两个工具来构建一个完整的 Web 应用程序，从而加深对前端开发的理解。
前置条件
在开始本教程之前，您需要具备以下知识和技能：
- 基本的 HTML、CSS 和 JavaScript 知识
- Node.js 的基本知识
- 熟悉 npm 包管理器
安装 Express.js
我们将首先安装 Express.js。在命令行中输入以下命令：
npm install express --save
这将安装 Express.js 并将其添加到您的项目依赖项中。
创建 Express.js 应用程序
接下来，我们将创建一个简单的 Express.js 应用程序。在您的项目根目录下创建一个名为 app.js 的文件，并在其中添加以下代码：
const express = require('express'); const app = express(); app.listen(3000, () => { console.log('Server started on port 3000'); });
这将创建一个 Express.js 应用程序并将其监听在端口 3000 上。现在，如果您在命令行中运行 node app.js，您应该会看到输出 Server started on port 3000。
添加路由
现在我们将添加一些路由来处理我们的 Todo 应用程序。在 app.js 文件中添加以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ----------------- ----- ---- -- - -------------- ------- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---展开代码
这将创建两个路由：根路由 / 和 /todos。当您访问根路由时，您将看到输出 Hello World!，而访问 /todos 路由时，您将看到输出 Todo List。
安装 React
接下来，我们将安装 React。在命令行中输入以下命令：
npm install react react-dom --save
这将安装 React 和 React DOM 并将其添加到您的项目依赖项中。
创建 React 组件
现在我们将创建一个简单的 React 组件来显示 Todo 列表。在您的项目根目录下创建一个名为 index.js 的文件，并在其中添加以下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ----- --- - -- -- - ------ - ----- -------- --------- ---- -------- ------ -------- ------ -------- ------ ----- ------ -- -- -------------------- --- ---------------------------------展开代码
这将创建一个简单的 React 组件，它将显示一个标题和一个 Todo 列表。我们将在下一步中将其与 Express.js 应用程序集成。
集成 React 和 Express.js
现在我们将把我们的 React 组件与 Express.js 应用程序集成。在 app.js 文件中添加以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ---------------------------------- ------------ ----- ---- -- - ---------------------- - --------------- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---展开代码
这将向我们的应用程序添加一个静态文件夹 public，并将根路由更改为发送一个 HTML 文件。接下来，在您的项目根目录下创建一个名为 index.html 的文件，并在其中添加以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------- ----------- ------- ------ ---- ---------------- ------- ------------------------- ------- -------展开代码
这将为我们的 React 组件提供一个容器，并在底部添加一个指向我们的 JavaScript 文件 bundle.js 的脚本标记。接下来，在命令行中输入以下命令来安装必要的依赖项：
npm install webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev
这将安装 Webpack 和 Babel 并将其添加到您的项目依赖项中。接下来，在项目根目录下创建一个名为 webpack.config.js 的文件，并添加以下代码：
-- -------------------- ---- ------- -------------- - - ------ ------------- ------- - ----- --------- - ---------- --------- ------------ -- ------- - ------ - - ----- -------- -------- --------------- ---- - ------- --------------- -------- - -------- --------------------- ----------------------- -- -- -- -- -- --展开代码
这将配置 Webpack 和 Babel，以便它们可以将我们的 JavaScript 文件转换为可在浏览器中运行的代码。最后，在命令行中输入以下命令来构建我们的应用程序：
npx webpack这将构建我们的应用程序并将其输出到 public/bundle.js 文件中。现在，如果您在命令行中运行 node app.js，您应该会看到一个包含 Todo 列表的网页。
结论
在本教程中，我们学习了如何使用 Express.js 和 React 构建一个简单的 Todo 应用程序。我们了解了如何创建 Express.js 应用程序、添加路由并集成 React。我们还学习了如何使用 Webpack 和 Babel 将我们的 JavaScript 代码转换为可在浏览器中运行的代码。希望这个教程对您有所帮助，并能够加深您对前端开发的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6741368ad40a3cb159e9bf26
