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

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

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

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

1. Node.js和npm：確保已經安裝了Node .js和npm（Node.js的套件管理器），可以透過命令列檢查它們是否已經安裝成功，如下所示：

   node -v
   npm -v

2. #建立專案資料夾：在你的工作目錄下建立一個新的資料夾，用來存放我們的全端應用程式碼。

二、後端建置

1. 初始化專案：在專案資料夾下開啟命令列，執行下列命令來初始化新的Node.js項目：

   npm init -y

   這將會建立一個預設的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資料夾，並執行下列命令啟動React開發伺服器：

   npm start

   如果一切正常，你將會在瀏覽器中看到一個簡單的TodoList應用，你可以新增新的todo項目。

結束語：
透過本文的步驟，我們成功地結合使用React和Express建構了一個簡單的全端JavaScript應用程式。你可以根據自己的需求進一步擴展應用的功能，例如新增編輯和刪除功能，或是使用資料庫來儲存資料。全端開發能讓我們同時充分發揮前後端技術的優勢，提升開發效率，希望這篇文章對你有幫助。

以上是如何利用React和Express搭建全端JavaScript應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！