如何利用React和Express搭建全栈JavaScript应用
引言：
React和Express是目前非常流行的JavaScript框架，它们分别用于构建前端和后端应用。本文将介绍如何结合使用React和Express来搭建一个全栈JavaScript应用。我们将逐步讲解如何搭建一个简单的TodoList应用，同时提供具体的代码示例。
一、准备工作
在开始之前，我们需要准备一些必要的工具和环境：
Node.js和npm：确保已经安装了Node.js和npm（Node.js的包管理器），可以通过命令行检查它们是否已经安装成功，如下所示：
立即学习“Java免费学习笔记（深入）”；
node -vnpm -v
登录后复制创建项目文件夹：在你的工作目录下创建一个新的文件夹，用来存放我们的全栈应用代码。
二、后端搭建
初始化项目：在项目文件夹下打开命令行，执行以下命令来初始化一个新的Node.js项目：
npm init -y
登录后复制
这将会创建一个默认的package.json文件，用来记录项目的相关信息和依赖包。
安装Express和其他依赖：在命令行中执行以下命令来安装Express和其他需要的依赖：
npm install express body-parser cors --save
登录后复制
这里我们安装了Express、body-parser和cors，用来处理HTTP请求和跨域请求。
创建Express服务器：在项目文件夹的根目录下创建一个新的JavaScript文件，命名为server.js。打开server.js，并添加以下内容：
const express = require('express');const bodyParser = require('body-parser');const cors = require('cors');const app = express();app.use(bodyParser.urlencoded({ extended: false }));app.use(bodyParser.json());app.use(cors());const PORT = process.env.PORT || 5000;app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`);});
登录后复制
这段代码首先引入了需要的依赖包，然后创建了一个Express实例并设置了一些中间件。最后，我们监听指定的端口（默认是5000）。
添加路由和API：继续编辑server.js，在已有的代码下方添加以下内容：
let todos = [];app.get('/api/todos', (req, res) => { res.json(todos);});app.post('/api/todos', (req, res) => { const { todo } = req.body; todos.push(todo); res.json(todos);});
登录后复制
这段代码定义了两个路由：一个用于获取所有的todo项，一个用于添加新的todo项。我们使用一个简单的数组todos来存储所有的todo项。
启动服务器：在命令行中执行以下命令来启动Express服务器：
node server.js
登录后复制
如果一切正常，你将会在命令行中看到Server is running on port XXXX的提示，表示服务器已成功启动。
三、前端搭建
创建React应用：回到项目文件夹，在命令行中执行以下命令来创建一个新的React应用：
npx create-react-app client
登录后复制
这将会在项目文件夹下创建一个名为client的新文件夹，用来存放我们的React前端应用代码。
编辑React组件：打开刚刚创建的client/src/App.js文件，将其中的代码替换为以下内容：
import React, { useState, useEffect } from "react";function App() { const [todos, setTodos] = useState([]); const [newTodo, setNewTodo] = useState(""); useEffect(() => { fetch("/api/todos") .then(res => res.json()) .then(data => setTodos(data)); }, []); const handleInputChange = e => { setNewTodo(e.target.value); }; const handleSubmit = e => { e.preventDefault(); const todo = { todo: newTodo }; fetch("/api/todos", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(todo) }) .then(res => res.json()) .then(data => setTodos(data)) .catch(err => console.log(err)); setNewTodo(""); }; return ( Todo List
{todos.map((todo, index) => ( - {todo}
))}
);}export default App;
登录后复制
这段代码定义了一个React函数组件App，它用来展示todo列表。组件中使用了useState和useEffect两个React的Hook来处理组件的状态和副作用。我们通过fetch函数来发送HTTP请求和获取数据。
启动React应用：在项目文件夹下打开命令行，进入client文件夹，并执行以下命令来启动React开发服务器：
npm start
登录后复制
如果一切正常，你将会在浏览器中看到一个简单的TodoList应用，你可以添加新的todo项。
结束语：
通过本文的步骤，我们成功地结合使用React和Express搭建了一个简单的全栈JavaScript应用。你可以根据自己的需求进一步扩展应用的功能，比如添加编辑和删除功能，或者使用数据库来存储数据。全栈开发能够让我们同时充分发挥前后端技术的优势，提高开发效率，希望本文对你有所帮助。
以上就是如何利用React和Express搭建全栈JavaScript应用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2689643.html
