如何利用React和Express搭建全端JavaScript應用-js教程-PHP中文網

如何利用React和Express搭建全端JavaScript應用

PHPz

發布： 2023-09-26 13:09:03

原創

1391 人瀏覽過

如何利用React和Express搭建全端JavaScript應用

如何利用React和Express來建立全端JavaScript應用程式

#引言：
React和Express是目前非常流行的JavaScript框架，它們分別用於建構前端和後端應用。本文將介紹如何結合使用React和Express來建構一個全端JavaScript應用程式。我們將逐步講解如何搭建一個簡單的TodoList應用，同時提供具體的程式碼範例。

一、準備工作
在開始之前，我們需要準備一些必要的工具和環境：

Node.js和npm：確保已經安裝了Node .js和npm（Node.js的套件管理器），可以透過命令列檢查它們是否已經安裝成功，如下所示：
```
node -v
npm -v
```
登入後複製
#建立專案資料夾：在你的工作目錄下建立一個新的資料夾，用來存放我們的全端應用程式碼。

二、後端建置

初始化專案：在專案資料夾下開啟命令列，執行下列命令來初始化新的Node.js項目：
```
npm init -y
```
登入後複製
這將會建立一個預設的package.json文件，用來記錄專案的相關資訊和依賴套件。
安裝Express和其他依賴：在命令列中執行以下命令來安裝Express和其他需要的依賴：
```
npm install express body-parser cors --save
```
登入後複製
這裡我們安裝了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}`);
});

登入後複製

這段程式碼首先引入了需要的依賴套件，然後建立了一個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);
});

登入後複製

這段程式碼定義了兩個路由：一個用於取得所有的todo項，一個用於新增新的todo項。我們使用一個簡單的陣列todos來儲存所有的todo項。

啟動伺服器：在命令列中執行以下命令來啟動Express伺服器：
```
node server.js
```
登入後複製
如果一切正常，你將會在命令列中看到 Server is running on port XXXX的提示，表示伺服器已成功啟動。

三、前端搭建

建立React應用程式：回到專案資料夾，在命令列中執行以下指令來建立一個新的React應用程式：
```
npx create-react-app client
```
登入後複製
這將會在專案資料夾下建立一個名為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;

登入後複製

這段程式碼定義了一個React函數元件App，它用來展示todo列表。元件中使用了useState和useEffect兩個React的Hook來處理元件的狀態和副作用。我們透過fetch函數來發送HTTP請求和取得資料。