首页 > 文章 > web前端 > 如何利用React和Express搭建全栈JavaScript应用

如何利用React和Express搭建全栈JavaScript应用

PHPz原创: 2023-09-26 13:09:031383浏览

引言：
React和Express是目前非常流行的JavaScript框架，它们分别用于构建前端和后端应用。本文将介绍如何结合使用React和Express来搭建一个全栈JavaScript应用。我们将逐步讲解如何搭建一个简单的TodoList应用，同时提供具体的代码示例。

一、准备工作
在开始之前，我们需要准备一些必要的工具和环境：

Node.js和npm：确保已经安装了Node.js和npm（Node.js的包管理器），可以通过命令行检查它们是否已经安装成功，如下所示：
```
node -v
npm -v
```
创建项目文件夹：在你的工作目录下创建一个新的文件夹，用来存放我们的全栈应用代码。

二、后端搭建

初始化项目：在项目文件夹下打开命令行，执行以下命令来初始化一个新的Node.js项目：
```
npm init -y
```
这将会创建一个默认的package.json文件，用来记录项目的相关信息和依赖包。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 (
    <div>
      <h1>Todo List</h1>
      <form onSubmit={handleSubmit}>
        <input value={newTodo} onChange={handleInputChange} />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

这段代码定义了一个React函数组件App，它用来展示todo列表。组件中使用了useState和useEffect两个React的Hook来处理组件的状态和副作用。我们通过fetch函数来发送HTTP请求和获取数据。

启动React应用：在项目文件夹下打开命令行，进入client

安装Express和其他依赖：在命令行中执行以下命令来安装Express和其他需要的依赖：

npm start

这里我们安装了Express、body-parser和cors，用来处理HTTP请求和跨域请求。

创建Express服务器：在项目文件夹的根目录下创建一个新的JavaScript文件，命名为server.js。打开server.js，并添加以下内容：🎜🎜rrreee🎜这段代码首先引入了需要的依赖包，然后创建了一个Express实例并设置了一些中间件。最后，我们监听指定的端口（默认是5000）。🎜

server.js

todos

Server is running on port XXXX

client

client/src/App.js

App

useState

useEffect

fetch

client

以上是如何利用React和Express搭建全栈JavaScript应用的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript 中间件 json npm express 栈 JS 数据库 http

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何利用React和AWS Lambda搭建无服务的后端应用下一篇：如何在 React Query 中实现数据库的分区并行查询？

查看更多