Comment créer une application JavaScript full-stack à l'aide de React et Express-js tutoriel-php.cn

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

PHPz

Libérer： 2023-09-26 13:09:03

original

1386 Les gens l'ont consulté

Comment créer une application JavaScript full-stack à laide 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 :

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
```
Copier après la connexion
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

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
```
Copier après la connexion
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文件，用来记录项目的相关信息和依赖包。
安装Express和其他依赖：在命令行中执行以下命令来安装Express和其他需要的依赖：
```
npm install express body-parser cors --save
```
Copier après la connexion
这里我们安装了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}`);
});

Copier après la connexion

这段代码首先引入了需要的依赖包，然后创建了一个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);
});

Copier après la connexion

这段代码定义了两个路由：一个用于获取所有的todo项，一个用于添加新的todo项。我们使用一个简单的数组todos来存储所有的todo项。

启动服务器：在命令行中执行以下命令来启动Express服务器：
```
node server.js
```
Copier après la connexion
如果一切正常，你将会在命令行中看到Server is running on port XXXX的提示，表示服务器已成功启动。

三、前端搭建

创建React应用：回到项目文件夹，在命令行中执行以下命令来创建一个新的React应用：
```
npx create-react-app client
```
Copier après la connexion
这将会在项目文件夹下创建一个名为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;

Copier après la connexion

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

启动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

Copier après la connexion

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). 🎜

server.js

todos

Le serveur est exécuté sur le port XXXX

client

client/src/App.js

useState

useEffect

fetch

client

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!