Bagaimana untuk membina aplikasi JavaScript tindanan penuh menggunakan React dan Express-tutorial js-php.cn

Bagaimana untuk membina aplikasi JavaScript tindanan penuh menggunakan React dan Express

PHPz

Lepaskan： 2023-09-26 13:09:03

asal

1335 orang telah melayarinya

Bagaimana untuk membina aplikasi JavaScript tindanan penuh menggunakan React dan Express

Cara membina aplikasi JavaScript tindanan penuh menggunakan React dan Express

Pengenalan:
React dan Express kini merupakan rangka kerja JavaScript yang sangat popular, yang digunakan untuk membina aplikasi bahagian hadapan dan belakang. Artikel ini akan memperkenalkan cara menggunakan React dan Express untuk membina aplikasi JavaScript tindanan penuh. Kami akan menerangkan langkah demi langkah cara membina aplikasi TodoList yang mudah dan memberikan contoh kod khusus.

1. Persediaan
Sebelum kita mula, kita perlu menyediakan beberapa alatan dan persekitaran yang diperlukan:

Node.js dan npm: Pastikan Node.js dan npm (pengurus pakej Node.js) telah dipasang, Anda boleh menyemak sama ada ia telah berjaya dipasang melalui baris arahan, seperti yang ditunjukkan di bawah:
```
node -v
npm -v
```
Salin selepas log masuk
Buat folder projek: Cipta folder baharu dalam direktori kerja anda untuk menyimpan kod aplikasi tindanan penuh kami.

2. Persediaan Backend

Mulakan projek: Buka baris arahan dalam folder projek dan laksanakan arahan berikut untuk memulakan projek Node.js baharu:
```
npm init -y
```
Salin selepas log masuk
Ini akan mencipta pakej lalai Fail .json digunakan untuk merekodkan maklumat berkaitan projek dan pakej bergantung. package.json文件，用来记录项目的相关信息和依赖包。
安装Express和其他依赖：在命令行中执行以下命令来安装Express和其他需要的依赖：
```
npm install express body-parser cors --save
```
Salin selepas log masuk
这里我们安装了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}`);
});

Salin selepas log masuk

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

Salin selepas log masuk

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

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

三、前端搭建

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

Salin selepas log masuk

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

启动React应用：在项目文件夹下打开命令行，进入client
Pasang Express dan dependensi lain: Jalankan arahan berikut dalam baris arahan untuk memasang dependensi Express dan lain-lain yang diperlukan:

npm start

Salin selepas log masuk

Di sini kami memasang Express, body-parser dan cors untuk mengendalikan permintaan HTTP dan permintaan merentas domain .

Buat pelayan Express: Buat fail JavaScript baharu dalam direktori akar folder projek, bernama server.js. Buka server.js dan tambah kandungan berikut: 🎜🎜rrreee🎜Kod ini mula-mula memperkenalkan pakej pergantungan yang diperlukan, kemudian mencipta contoh Express dan menyediakan beberapa perisian tengah. Akhir sekali, kami mendengar pada port yang ditentukan (lalai ialah 5000). 🎜

server.js

todos

Pelayan adalah berjalan pada port XXXX gesaan menunjukkan bahawa pelayan telah berjaya dimulakan. 🎜🎜🎜🎜3. Pembinaan bahagian hadapan🎜🎜🎜🎜Buat aplikasi React: Kembali ke folder projek dan laksanakan arahan berikut pada baris arahan untuk mencipta aplikasi React baharu: 🎜rrreee🎜Ini akan mencipta React baharu aplikasi di bawah folder projek Folder baharu bernama client akan digunakan untuk menyimpan kod aplikasi bahagian hadapan React kami. 🎜🎜🎜Edit komponen React: Buka fail client/src/App.js yang baru anda buat dan gantikan kod di dalamnya dengan kandungan berikut: 🎜🎜rrreee🎜Kod ini mentakrifkan komponen fungsi ReactApp, yang digunakan untuk memaparkan senarai tugasan. Komponen menggunakan dua React Hooks, useState dan useEffect, untuk mengendalikan keadaan komponen dan kesan sampingan. Kami menggunakan fungsi fetch untuk menghantar permintaan HTTP dan mendapatkan data. 🎜

client

Atas ialah kandungan terperinci Bagaimana untuk membina aplikasi JavaScript tindanan penuh menggunakan React dan Express. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!