如何利用React和Express搭建全棧JavaScript應(yīng)用
引言：
React和Express是目前非常流行的JavaScript框架，它們分別用于構(gòu)建前端和后端應(yīng)用。本文將介紹如何結(jié)合使用React和Express來搭建一個(gè)全棧JavaScript應(yīng)用。我們將逐步講解如何搭建一個(gè)簡單的TodoList應(yīng)用，同時(shí)提供具體的代碼示例。
一、準(zhǔn)備工作
在開始之前，我們需要準(zhǔn)備一些必要的工具和環(huán)境：
Node.js和npm：確保已經(jīng)安裝了Node.js和npm（Node.js的包管理器），可以通過命令行檢查它們是否已經(jīng)安裝成功，如下所示：
node -v npm -v
登錄后復(fù)制創(chuàng)建項(xiàng)目文件夾：在你的工作目錄下創(chuàng)建一個(gè)新的文件夾，用來存放我們的全棧應(yīng)用代碼。
二、后端搭建
初始化項(xiàng)目：在項(xiàng)目文件夾下打開命令行，執(zhí)行以下命令來初始化一個(gè)新的Node.js項(xiàng)目：
npm init -y
登錄后復(fù)制
這將會(huì)創(chuàng)建一個(gè)默認(rèn)的package.json文件，用來記錄項(xiàng)目的相關(guān)信息和依賴包。
安裝Express和其他依賴：在命令行中執(zhí)行以下命令來安裝Express和其他需要的依賴：
npm install express body-parser cors --save
登錄后復(fù)制
這里我們安裝了Express、body-parser和cors，用來處理HTTP請求和跨域請求。
創(chuàng)建Express服務(wù)器：在項(xiàng)目文件夾的根目錄下創(chuàng)建一個(gè)新的JavaScript文件，命名為server.js。打開server.js，并添加以下內(nèi)容：
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}`);
});
登錄后復(fù)制
這段代碼首先引入了需要的依賴包，然后創(chuàng)建了一個(gè)Express實(shí)例并設(shè)置了一些中間件。最后，我們監(jiān)聽指定的端口（默認(rèn)是5000）。
- 添加路由和API：繼續(xù)編輯
server.js，在已有的代碼下方添加以下內(nèi)容：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);
});
登錄后復(fù)制
這段代碼定義了兩個(gè)路由：一個(gè)用于獲取所有的todo項(xiàng)，一個(gè)用于添加新的todo項(xiàng)。我們使用一個(gè)簡單的數(shù)組todos來存儲(chǔ)所有的todo項(xiàng)。
啟動(dòng)服務(wù)器：在命令行中執(zhí)行以下命令來啟動(dòng)Express服務(wù)器：
node server.js
登錄后復(fù)制
如果一切正常，你將會(huì)在命令行中看到Server is running on port XXXX的提示，表示服務(wù)器已成功啟動(dòng)。
三、前端搭建
創(chuàng)建React應(yīng)用：回到項(xiàng)目文件夾，在命令行中執(zhí)行以下命令來創(chuàng)建一個(gè)新的React應(yīng)用：
npx create-react-app client
登錄后復(fù)制
這將會(huì)在項(xiàng)目文件夾下創(chuàng)建一個(gè)名為client的新文件夾，用來存放我們的React前端應(yīng)用代碼。
編輯React組件：打開剛剛創(chuàng)建的client/src/App.js文件，將其中的代碼替換為以下內(nèi)容：
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;
登錄后復(fù)制
這段代碼定義了一個(gè)React函數(shù)組件App，它用來展示todo列表。組件中使用了useState和useEffect兩個(gè)React的Hook來處理組件的狀態(tài)和副作用。我們通過fetch函數(shù)來發(fā)送HTTP請求和獲取數(shù)據(jù)。
啟動(dòng)React應(yīng)用：在項(xiàng)目文件夾下打開命令行，進(jìn)入client文件夾，并執(zhí)行以下命令來啟動(dòng)React開發(fā)服務(wù)器：
npm start
登錄后復(fù)制
如果一切正常，你將會(huì)在瀏覽器中看到一個(gè)簡單的TodoList應(yīng)用，你可以添加新的todo項(xiàng)。
結(jié)束語：
通過本文的步驟，我們成功地結(jié)合使用React和Express搭建了一個(gè)簡單的全棧JavaScript應(yīng)用。你可以根據(jù)自己的需求進(jìn)一步擴(kuò)展應(yīng)用的功能，比如添加編輯和刪除功能，或者使用數(shù)據(jù)庫來存儲(chǔ)數(shù)據(jù)。全棧開發(fā)能夠讓我們同時(shí)充分發(fā)揮前后端技術(shù)的優(yōu)勢，提高開發(fā)效率，希望本文對你有所幫助。
以上就是如何利用React和Express搭建全棧JavaScript應(yīng)用的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
