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:

1. 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

2. Buat folder projek: Cipta folder baharu dalam direktori kerja anda untuk menyimpan kod aplikasi tindanan penuh kami.

2. Persediaan Backend

1. Mulakan projek: Buka baris arahan dalam folder projek dan laksanakan arahan berikut untuk memulakan projek Node.js baharu:

   npm init -y

   Ini akan mencipta pakej lalai Fail .json digunakan untuk merekodkan maklumat berkaitan projek dan pakej bergantung. 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

   Pasang Express dan dependensi lain: Jalankan arahan berikut dalam baris arahan untuk memasang dependensi Express dan lain-lain yang diperlukan:

npm start

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

🎜Tambah penghalaan dan API: Teruskan mengedit server.js dan tambah kandungan berikut di bawah kod sedia ada: 🎜🎜rrreee🎜Kod ini mentakrifkan dua laluan : Satu digunakan untuk mendapatkan semua item todo, dan satu digunakan untuk menambah item todo baharu. Kami menggunakan tatasusunan mudah todos untuk menyimpan semua item todo. 🎜
🎜🎜Mulakan pelayan: Jalankan arahan berikut dalam baris arahan untuk memulakan pelayan Ekspres: 🎜rrreee🎜Jika semuanya berjalan lancar, anda akan melihat dalam baris arahan bahawa 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. 🎜
🎜🎜Mulakan aplikasi React: Buka baris arahan di bawah folder projek, masukkan folder client dan laksanakan arahan berikut untuk memulakan pelayan pembangunan React: 🎜 rrreee🎜Jika Semuanya baik-baik saja, anda akan melihat aplikasi TodoList mudah dalam penyemak imbas, dan anda boleh menambah item todo baharu. 🎜🎜🎜🎜Kesimpulan: 🎜Melalui langkah dalam artikel ini, kami berjaya membina aplikasi JavaScript tindanan penuh yang ringkas menggunakan React dan Express bersama-sama. Anda boleh melanjutkan lagi fungsi aplikasi mengikut keperluan anda, seperti menambah fungsi penyuntingan dan pemadaman, atau menggunakan pangkalan data untuk menyimpan data. Pembangunan tindanan penuh membolehkan kami memberikan permainan penuh kepada kelebihan teknologi bahagian hadapan dan bahagian belakang pada masa yang sama dan meningkatkan kecekapan pembangunan saya harap artikel ini akan membantu anda. 🎜

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!