React 是一个广泛使用的前端框架，它具备高效的 UI 渲染和数据流控制能力，被广泛应用于各种 Web 网站和应用程序中。而 Express.js 是一个基于 Node.js 的 Web 服务器框架，被广泛应用于构建 RESTful API 和 Web 应用程序。本文将指导您如何使用这两个强大的技术构建全栈应用程序。
前置技术准备
在开始本教程前，需要您具备以下技能：
- 了解 React 基础知识和使用方法。
- 了解 Node.js 和 Express.js 的基础知识和使用方法。
- 了解基础的 HTML、CSS 和 JavaScript 知识。
如果您还未掌握上述技能，建议先学习相关知识再来阅读本教程。
步骤一：创建项目
首先，我们需要创建一个新的项目，使用 create-react-app 命令行工具创建一个新的 React 项目。具体步骤如下：
npx create-react-app my-app cd my-app npm start
使用 create-react-app 命令行工具创建新项目，进入项目目录，运行 npm start 命令，我们就可以看到项目启动的页面。现在，我们已经完成了一个最基本的 React 项目的创建。
接着，我们需要在项目根目录下创建一个新的文件夹 server，在 server 文件夹下创建一个新的 index.js 文件。这个文件将会是我们的 Express.js 服务器的核心代码。具体步骤如下：
mkdir server cd server touch index.js
现在，我们已经准备好了项目的基本文件结构。接下来，我们将进入到具体的编程实践中。
步骤二：编写前端代码
在这一步中，我们将编写前端 React 代码，并将其连接到后端服务器。具体步骤如下：
在项目根目录下找到
src/App.js文件。这个文件是我们最主要的 React 组件。在
src/App.js文件中添加如下代码：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- -------
------ ----- ---- -------
-------- ----- -
----- --------- ----------- - ------------
------------ -- -
----- --------- - ----- -- -- -
----- ------ - ----- -----------------
-----------------------
-
-----------
-- ---
------ -
---- ----------------
------------------
------
-
-
------ ------- ---代码说明：
- 这段代码导入了 React 组件库、
useState和useEffect钩子以及axios库（用于发送 HTTP 请求）。 - 组件使用了 React Hook 钩子使
message变量具有状态。 useEffect钩子用于在组件渲染时异步获取数据。- 后端服务器的 API 都位于
/api路径下。使用axios库发出 GET 请求以获取/api路径的数据。然后用setMessage函数更新message变量。
- 接着，我们需要在
src/index.js文件中添加如下代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ -------- ---- -----------
------ --- ---- -------
----------------
------------------
---- --
--------------------
-------------------------------
-这段代码渲染了 <App /> 组件并将其嵌入到了 DOM 上。这里不需要我们更改任何内容。
现在我们已经完成了前端代码的编写。接下来我们将继续构建我们的后端服务器。
步骤三：编写后端代码
在这一步中，我们将编写后端的 Express.js 服务器代码。我们需要在 server/index.js 文件中添加如下代码：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- --- - --------- ----- ---- - ---------------- -- ---- ----- ---- - - -------- ------ ---- --- -------- - --------------- ----- ---- -- - -------------- -- ---------------- -- -- - ------------------- --------- -- ---- --------- --
代码说明:
- 这段代码初始化了一个新的 Express 应用程序，并将其绑定在 5000 端口上（如果环境变量中存在端口信息，则会使用环境变量中的端口号）。
data对象包含了我们在前端代码中需要显示的字符串。app.get('/api', ...)代码块指定了 Express 应用程序路由 /api 的处理程序。在处理程序函数中，我们向客户端发送了一个 JSON 格式的message属性。app.listen()函数用于启动服务器并监听来自客户端的请求。它还打印了服务器端口号的信息。
完成了这一步之后，我们已经可以在浏览器中预览效果。
步骤四：启动服务器
在配置完前端和后端代码后，我们可以通过在根目录下执行以下命令来同时启动前端和后端服务器：
npm run dev
其中 npm run dev 命令定义在 package.json 文件中，用于运行两个并行的命令：npm start（启动前端服务器）和 npm run server（启动后端服务器）。
现在，在浏览器中打开 http://localhost:3000，您应该可以看到来自服务器的消息。
总结
在本教程中，我们使用了 React 和 Express.js 这两个技术构建了一个全栈应用程序。我们了解了前端和后端之间的交互方式，并学习了如何使用 Axios 库发送 HTTP 请求。我们还学习了如何配置 React 和 Express.js 服务器并让它们一起工作。
如果您对本教程中没有包含的主题和概念有疑问，建议您查阅 React 和 Express.js 的官方文档，以帮助你更好地理解和应用这两个技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b5200968c7c53b0aae100