如何利用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請求和跨域請求。
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）。
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前端應用程式碼。
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請求和取得資料。
啟動React應用程式：在專案資料夾下開啟命令列，進入client資料夾，並執行下列命令啟動React開發伺服器：
npm start
如果一切正常，你將會在瀏覽器中看到一個簡單的TodoList應用，你可以新增新的todo項目。
結束語：
透過本文的步驟，我們成功地結合使用React和Express建構了一個簡單的全端JavaScript應用程式。你可以根據自己的需求進一步擴展應用的功能，例如新增編輯和刪除功能，或是使用資料庫來儲存資料。全端開發能讓我們同時充分發揮前後端技術的優勢，提升開發效率，希望這篇文章對你有幫助。
以上是如何利用React和Express搭建全端JavaScript應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
