随着 JavaScript 技术的持续发展，越来越多的开发者开始关注全栈 JavaScript 的概念。而 Node.js 和 React 这两个强大的技术框架，恰好可以帮助我们构建全栈 JavaScript 应用。本文将详细介绍如何使用 Node.js 和 React 构建全栈 JavaScript 应用，包括环境搭建、前后端分离、数据管理等内容。
环境搭建
在开始构建全栈 JavaScript 应用之前，必须先搭建相应的开发环境。具体而言，我们需要安装 Node.js、npm 和 react-create-app 等工具。
- 安装 Node.js
Node.js 是一种在服务器端运行 JavaScript 代码的开源、跨平台的运行环境。它可以让我们在浏览器外部运行 JavaScript 代码，从而实现后端服务器的搭建。安装 Node.js 相当简单，你只需要在官方网站（https://nodejs.org/en/）下载安装包，然后按照指示进行安装即可。
$ node -v v12.18.0
- 安装 npm
npm（Node Package Manager）是 Node.js 自带的包管理工具。它可以管理我们项目中需要的第三方库、插件等资源。要安装 npm，只需要在终端中输入以下命令即可。
$ npm -v 6.14.4
- 安装 react-create-app
react-create-app 是一个官方提供的用于创建 React 应用的命令行工具，它可以快速地创建一个基于 React 的前端项目模板。通过运行以下命令安装 react-create-app：
$ npm install -g create-react-app create-react-app -V
至此，我们的开发环境就搭建完成了，下面让我们开始构建全栈 JavaScript 应用。
前后端分离
首先，我们需要将前端和后端分离，这是一种促进团队协作和代码可维护性的良好实践。在这种情况下，前端和后端将独立进行开发，并通过 API 接口进行通信。
对于后端，我们可以使用 Node.js 框架 Express，来轻松地创建一个 RESTful API 服务。下面是一个示例代码，用于创建一个使用 Express 框架的 Node.js 服务器，监听端口 3001。
// javascriptcn.com code example
const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const cors = require("cors");
// 解析请求正文中的 JSON 数据
app.use(bodyParser.json());
// 允许跨域请求
app.use(cors());
const posts = [
{ id: 1, title: "Post 1", content: "Content 1" },
{ id: 2, title: "Post 2", content: "Content 2" },
{ id: 3, title: "Post 3", content: "Content 3" },
];
// 获取所有文章列表
app.get("/api/posts", (req, res) => {
res.send(posts);
});
// 根据 id 获取文章内容
app.get("/api/posts/:id", (req, res) => {
const postId = parseInt(req.params.id);
const post = posts.find((p) => p.id === postId);
if (post) {
res.send(post);
} else {
res.status(404).send({ message: "Post not found" });
}
});
app.listen(3001, () => {
console.log("Server is listening on port 3001");
});然后，我们可以使用 React 来创建一个前端应用，用于消费后端 API 并展示数据。下面是一个示例代码，用于展示从后端服务器获取到的文章列表。
// javascriptcn.com code example
import React, { useState, useEffect } from "react";
function PostList() {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch("http://localhost:3001/api/posts")
.then((res) => res.json())
.then((data) => setPosts(data));
}, []);
return (
<ul>
{posts.map((post) => (
<li key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
</li>
))}
</ul>
);
}
export default PostList;数据管理
最后，我们需要考虑如何管理数据。对于这一点，我们可以使用 Redux，这是一个用于管理应用程序状态的流行 JavaScript 库。Redux 可以让我们统一管理应用程序的状态，从而使我们的应用程序更加可维护和可预测。
下面是一个示例代码，用于展示如何使用 Redux 来管理前端应用程序的状态。在这个示例中，我们将创建一个名为 posts 的 Redux store，用于管理所有文章的状态。
// javascriptcn.com code example
import { createStore } from "redux";
const initialState = {
posts: [],
};
function reducer(state = initialState, action) {
switch (action.type) {
case "FETCH_POSTS_SUCCESS":
return Object.assign({}, state, { posts: action.posts });
default:
return state;
}
}
const store = createStore(reducer);
export default store;我们也需要创建一个 action 来触发对应的 store 修改。
function fetchPostsSuccess(posts) {
return { type: "FETCH_POSTS_SUCCESS", posts };
}然后在前端展示数据时，我们可以通过 Redux store 获取到状态并进行渲染。下面是一个示例代码，用于展示如何使用 Redux store 来渲染文章列表。
// javascriptcn.com code example
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { fetchPostsSuccess } from "../actions/postsActions";
function PostList() {
const posts = useSelector((state) => state.posts);
const dispatch = useDispatch();
useEffect(() => {
fetch("http://localhost:3001/api/posts")
.then((res) => res.json())
.then((data) => dispatch(fetchPostsSuccess(data)));
}, [dispatch]);
return (
<ul>
{posts.map((post) => (
<li key={post.id}>
<h2>{post.title}</h2>
<p>{post.content}</p>
</li>
))}
</ul>
);
}
export default PostList;结论
通过本文的介绍，我们已经了解了如何使用 Node.js 和 React 构建全栈 JavaScript 应用，并实现了前后端分离、数据管理等关键内容。当然，这只是一个示例模型，实现单一的与 API 通信以及数据管理。
实际开发中，前后端分离、代码管理会更加复杂，但是我们可以借助现有的技术和工具，如 RESTful API、GraphQL 等实现前后端的协同开发，并使用 Git、Webpack、Babel 等工具让代码更加高效和可维护。
最后，希望本文能够对你有所帮助，祝你在构建全栈 JavaScript 应用的过程中顺顺利利，欢迎大家多多交流学习！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672df9feeedcc8a97c869885