So erstellen Sie eine Full-Stack-JavaScript-Anwendung mit React und Express

So erstellen Sie eine Full-Stack-JavaScript-Anwendung mit React und Express

Einführung:
React und Express sind derzeit sehr beliebte JavaScript-Frameworks, die zum Erstellen von Front-End- bzw. Back-End-Anwendungen verwendet werden. In diesem Artikel wird erläutert, wie Sie mit React und Express eine Full-Stack-JavaScript-Anwendung erstellen. Wir erklären Ihnen Schritt für Schritt, wie Sie eine einfache TodoList-Anwendung erstellen und stellen konkrete Codebeispiele bereit.

1. Vorbereitung
Bevor wir beginnen, müssen wir einige notwendige Tools und Umgebung vorbereiten:

1. Node.js und npm: Stellen Sie sicher, dass Node.js und npm (Node.js-Paketmanager) installiert wurden Sie können über die Befehlszeile überprüfen, ob sie erfolgreich installiert wurden, wie unten gezeigt:

   node -v
   npm -v

2. Projektordner erstellen: Erstellen Sie einen neuen Ordner in Ihrem Arbeitsverzeichnis, um unseren Full-Stack-Anwendungscode zu speichern.

2. Backend-Setup

1. Initialisieren Sie das Projekt: Öffnen Sie die Befehlszeile im Projektordner und führen Sie den folgenden Befehl aus, um ein neues Node.js-Projekt zu initialisieren:

   npm init -y

   Dadurch wird ein Standard--Paket erstellt Die Datei .json wird zum Aufzeichnen projektbezogener Informationen und abhängiger Pakete verwendet. package.json文件，用来记录项目的相关信息和依赖包。

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

   npm install express body-parser cors --save

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

3. 创建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）。

4. 添加路由和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项。

5. 启动服务器：在命令行中执行以下命令来启动Express服务器：

   node server.js

   如果一切正常，你将会在命令行中看到Server is running on port XXXX的提示，表示服务器已成功启动。

三、前端搭建

1. 创建React应用：回到项目文件夹，在命令行中执行以下命令来创建一个新的React应用：

   npx create-react-app client

   这将会在项目文件夹下创建一个名为client的新文件夹，用来存放我们的React前端应用代码。

2. 编辑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 id="Todo-List">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请求和获取数据。

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

   Express und andere Abhängigkeiten installieren: Führen Sie den folgenden Befehl in der Befehlszeile aus, um Express und andere erforderliche Abhängigkeiten zu installieren:

npm start

Hier haben wir Express, Body-Parser und Cors installiert, um HTTP-Anfragen und domänenübergreifende Anfragen zu verarbeiten.

Express-Server erstellen: Erstellen Sie eine neue JavaScript-Datei im Stammverzeichnis des Projektordners mit dem Namen server.js. Öffnen Sie server.js und fügen Sie den folgenden Inhalt hinzu: 🎜🎜rrreee🎜Dieser Code führt zunächst die erforderlichen Abhängigkeitspakete ein, erstellt dann eine Express-Instanz und richtet etwas Middleware ein. Abschließend überwachen wir den angegebenen Port (Standard ist 5000). 🎜

🎜Routing und API hinzufügen: Bearbeiten Sie server.js weiter und fügen Sie den folgenden Inhalt unterhalb des vorhandenen Codes hinzu: 🎜🎜rrreee🎜Dieser Code definiert zwei Routen: Eine wird verwendet um alle Aufgabenelemente abzurufen, und eines wird zum Hinzufügen neuer Aufgabenelemente verwendet. Wir verwenden ein einfaches Array todos, um alle Aufgabenelemente zu speichern. 🎜
🎜🎜Starten Sie den Server: Führen Sie den folgenden Befehl in der Befehlszeile aus, um den Express-Server zu starten: 🎜rrreee🎜Wenn alles gut geht, sehen Sie in der Befehlszeile, dass Server ist Die Eingabeaufforderung „running on port XXXX“ zeigt an, dass der Server erfolgreich gestartet wurde. 🎜🎜🎜🎜3. Front-End-Konstruktion🎜🎜🎜🎜Erstellen Sie eine React-Anwendung: Gehen Sie zurück zum Projektordner und führen Sie den folgenden Befehl in der Befehlszeile aus, um eine neue React-Anwendung zu erstellen: 🎜rrreee🎜Dadurch wird eine neue React-Anwendung erstellt Anwendung im Projektordner. Ein neuer Ordner mit dem Namen client wird zum Speichern unseres React-Frontend-Anwendungscodes verwendet. 🎜🎜🎜React-Komponente bearbeiten: Öffnen Sie die soeben erstellte Datei client/src/App.js und ersetzen Sie den Code darin durch den folgenden Inhalt: 🎜🎜rrreee🎜Dieser Code definiert eine React-FunktionskomponenteApp, der zur Anzeige der ToDo-Liste verwendet wird. Die Komponente verwendet zwei React Hooks, useState und useEffect, um den Status und die Nebenwirkungen der Komponente zu verarbeiten. Wir verwenden die Funktion fetch, um HTTP-Anfragen zu senden und Daten abzurufen. 🎜
🎜🎜Starten Sie die React-Anwendung: Öffnen Sie die Befehlszeile unter dem Projektordner, geben Sie den Ordner client ein und führen Sie den folgenden Befehl aus, um den React-Entwicklungsserver zu starten: 🎜 rrreee🎜Wenn alles in Ordnung ist, wird im Browser eine einfache TodoList-Anwendung angezeigt, und Sie können neue Aufgabenelemente hinzufügen. 🎜🎜🎜🎜Fazit: 🎜Durch die Schritte in diesem Artikel haben wir mit React und Express erfolgreich eine einfache Full-Stack-JavaScript-Anwendung erstellt. Sie können die Funktionalität der Anwendung je nach Bedarf weiter erweitern, z. B. um Bearbeitungs- und Löschfunktionen oder die Nutzung einer Datenbank zur Datenspeicherung. Durch die Full-Stack-Entwicklung können wir die Vorteile von Front-End- und Back-End-Technologien gleichzeitig voll ausschöpfen und die Entwicklungseffizienz verbessern. Ich hoffe, dass dieser Artikel für Sie hilfreich ist. 🎜

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Full-Stack-JavaScript-Anwendung mit React und Express. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!