Comment créer une application JavaScript full-stack à l'aide de React et Express

Comment créer une application JavaScript full-stack à l'aide de React et Express

Introduction :
React et Express sont actuellement des frameworks JavaScript très populaires, qui sont utilisés respectivement pour créer des applications front-end et back-end. Cet article explique comment utiliser React et Express pour créer une application JavaScript full-stack. Nous expliquerons étape par étape comment créer une application TodoList simple et fournirons des exemples de code spécifiques.

1. Préparation
Avant de commencer, nous devons préparer certains outils et environnements nécessaires :

1. Node.js et npm : assurez-vous que Node.js et npm (gestionnaire de packages Node.js) ont été installés, vous Vous pouvez vérifier s'ils ont été installés avec succès via la ligne de commande, comme indiqué ci-dessous :

   node -v
   npm -v

2. Créer un dossier de projet : créez un nouveau dossier dans votre répertoire de travail pour stocker notre code d'application full-stack.

2. Configuration du backend

1. Initialisez le projet : ouvrez la ligne de commande dans le dossier du projet et exécutez la commande suivante pour initialiser un nouveau projet Node.js :

   npm init -y

   Cela créera un par défaut pour le package. Le fichier .json est utilisé pour enregistrer les informations relatives au projet et les packages dépendants. 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>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

   Installer Express et autres dépendances : exécutez la commande suivante dans la ligne de commande pour installer Express et les autres dépendances requises :

npm start

Ici, nous avons installé Express, body-parser et cors pour gérer les requêtes HTTP et les requêtes inter-domaines.

Créer un serveur Express : Créez un nouveau fichier JavaScript dans le répertoire racine du dossier du projet, nommé server.js. Ouvrez server.js et ajoutez le contenu suivant : 🎜🎜rrreee🎜Ce code présente d'abord les packages de dépendances requis, puis crée une instance Express et configure un middleware. Enfin, nous écoutons sur le port spécifié (la valeur par défaut est 5000). 🎜

🎜Ajouter le routage et l'API : Continuez à éditer server.js et ajoutez le contenu suivant sous le code existant : 🎜🎜rrreee🎜Ce code définit deux routes : L'une est utilisée pour obtenir tous les éléments de tâche, et l'un d'entre eux est utilisé pour ajouter de nouveaux éléments de tâche. Nous utilisons un simple tableau todos pour stocker tous les éléments de tâche. 🎜
🎜🎜Démarrez le serveur : Exécutez la commande suivante dans la ligne de commande pour démarrer le serveur Express : 🎜rrreee🎜Si tout se passe bien, vous verrez dans la ligne de commande que Le serveur est exécuté sur le port XXXX indique que le serveur a été démarré avec succès. 🎜🎜🎜🎜3. Construction front-end🎜🎜🎜🎜Créez une application React : retournez dans le dossier du projet et exécutez la commande suivante sur la ligne de commande pour créer une nouvelle application React : 🎜rrreee🎜Cela créera un nouveau React application sous le dossier du projet Un nouveau dossier nommé client sera utilisé pour stocker notre code d'application frontale React. 🎜🎜🎜Modifier le composant React : ouvrez le fichier client/src/App.js que vous venez de créer et remplacez le code qu'il contient par le contenu suivant : 🎜🎜rrreee🎜Ce code définit un composant de fonction ReactApp, qui permet d'afficher la liste de tâches. Le composant utilise deux React Hooks, useState et useEffect, pour gérer l'état et les effets secondaires du composant. Nous utilisons la fonction fetch pour envoyer des requêtes HTTP et obtenir des données. 🎜
🎜🎜Démarrez l'application React : ouvrez la ligne de commande sous le dossier du projet, entrez le dossier client et exécutez la commande suivante pour démarrer le serveur de développement React : 🎜 rrreee🎜Si tout va bien, vous verrez une simple application TodoList dans le navigateur et vous pourrez ajouter de nouveaux éléments de tâche. 🎜🎜🎜🎜Conclusion : 🎜Grâce aux étapes de cet article, nous avons réussi à créer une application JavaScript full-stack simple en utilisant ensemble React et Express. Vous pouvez étendre davantage les fonctionnalités de l'application en fonction de vos besoins, comme l'ajout de fonctions d'édition et de suppression, ou l'utilisation d'une base de données pour stocker des données. Le développement full-stack nous permet de tirer pleinement parti des avantages des technologies front-end et back-end et d'améliorer l'efficacité du développement. J'espère que cet article vous sera utile. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!