如何使用 Node 後端創建 React 應用程序:完整指南
連接到 Node 後端的 React 前端是您想要構建的任何應用程序的堅如磐石的組合。
本指南旨在幫助您盡可能輕鬆地使用 React 創建全棧項目。
讓我們看看如何使用 React 和 Node 從頭開始設置整個項目並將其部署到 Web。
您需要的工具
- 確保您的計算機上安裝了 Node 和 NPM。您可以在 nodejs.org 下載這兩個文件(NPM 包含在您的 Node 安裝中)
- 使用您選擇的代碼編輯器。我正在使用並且個人會推薦使用 VSCode。您可以在 code.visualstudio.com 下載 VSCode。
- 確保您的計算機上安裝了 Git。這是使用 Heroku 部署我們的應用程序所必需的。您可以在 git-scm.com 上獲得它
- heroku.com 上的帳戶。我們將使用 Heroku 將我們的應用完全免費地發佈到網絡上。
第 1 步:創建 Node (Express) 後端
首先為您的項目創建一個文件夾,名為 react-node-app
(例如)。
然後,將該文件夾拖到代碼編輯器中。
要創建我們的 Node 項目,請在終端中運行以下命令:
npm init -y
這將創建一個 package.json 文件,它允許我們跟踪所有應用腳本並管理我們的 Node 應用所需的任何依賴項。
我們的服務器代碼將位於同名文件夾中:server
.讓我們創建那個文件夾。
在其中,我們將放置一個文件,我們將在其中運行我們的服務器:index.js
如果沒有提供端口作為環境變量(Heroku 將在我們部署應用程序時設置此值),我們將使用 Express 為我們創建在端口 3001 上運行的簡單 Web 服務器。
// server/index.js
const express = require("express");
const PORT = process.env.PORT || 3001;
const app = express();
app.listen(PORT, () => {
console.log(`Server listening on ${PORT}`);
});
然後在我們的終端中,我們將安裝 Express 作為依賴項來使用它:
npm i express
然後在 package.json 中創建一個腳本,當我們使用 npm start
運行它時,它將啟動我們的 Web 服務器 :
// server/package.json
...
"scripts": {
"start": "node server/index.js"
},
...
最後,我們可以通過在終端中運行 npm start 來使用此腳本運行我們的應用程序,我們應該看到它在端口 3001 上運行:
npm start
> node server/index.js
Server listening on 3001
步驟 2:創建 API 端點
我們希望將我們的 Node 和 Express 服務器用作 API,以便它可以為我們的 React 應用程序提供數據、更改該數據或執行一些只有服務器才能執行的其他操作。
在我們的例子中,我們將簡單地向我們的 React 應用程序發送一條消息,上面寫著“來自服務器的你好!”在 JSON 對像中。
下面的代碼為路由 /api 創建一個端點。
如果我們的 React 應用程序對該路由發出 GET 請求,我們會響應(使用 res
,代表響應)與我們的 JSON 數據:
// server/index.js
...
app.get("/api", (req, res) => {
res.json({ message: "Hello from server!" });
});
app.listen(PORT, () => {
console.log(`Server listening on ${PORT}`);
});
注意:確保將其放在 app.listen
上方 函數。
由於我們已經對 Node 代碼進行了更改,因此我們需要重新啟動我們的服務器。
為此,請在終端中按 Command/Ctrl + C 結束您的啟動腳本。然後通過運行 npm start
重新啟動它 再次。
為了測試這一點,我們可以簡單地訪問 http://localhost:3001/api
在我們的瀏覽器中查看我們的消息:
第三步:創建你的 React 前端
創建後端后,讓我們轉到前端。
打開另一個終端選項卡並使用 create-react-app 創建一個名為 client
的新 React 項目 :
npx create-react-app client
之後,我們將擁有一個安裝了所有依賴項的 React 應用程序。
我們唯一要做的改變是添加一個名為 proxy
的屬性 到我們的 package.json 文件。
這將允許我們向我們的 Node 服務器發出請求,而無需在每次向它發出網絡請求時提供它正在運行的源 (http://localhost:3001):
// client/package.json
...
"proxy": "http://localhost:3001",
...
然後我們可以通過運行它的啟動腳本來啟動我們的 React 應用程序,這與我們的 Node 服務器相同。首先確保 cd
進入新創建的客戶端文件夾。
之後,將在 localhost:3000
上啟動 :
cd client
npm start
Compiled successfully!
You can now view client in the browser.
Local: http://localhost:3000
第 4 步:從 React 向 Node 發出 HTTP 請求
現在我們有了一個可以工作的 React 應用程序,我們想用它來與我們的 API 交互。
讓我們看看如何從我們之前創建的 /api 端點獲取數據。
為此,我們可以前往 App.js
src
中的組件 文件夾並使用 useEffect 發出 HTTP 請求。
我們將使用 Fetch API 向我們發出一個簡單的 GET 請求,然後將我們的數據以 JSON 形式返回。
一旦我們將數據返回給我們,我們將獲取 message 屬性(以獲取我們從服務器發送的問候語),然後將其放入名為 data
的狀態變量中 .
如果我們有它,這將允許我們在我們的頁面中顯示該消息。我們在 JSX 中使用條件來表示如果我們的數據還沒有,則顯示文本“正在加載...”。
// client/src/App.js
import React from "react";
import logo from "./logo.svg";
import "./App.css";
function App() {
const [data, setData] = React.useState(null);
React.useEffect(() => {
fetch("/api")
.then((res) => res.json())
.then((data) => setData(data.message));
}, []);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>{!data ? "Loading..." : data}</p>
</header>
</div>
);
}
export default App;
第 5 步:使用 Heroku 將您的應用部署到網絡
最後,讓我們將我們的應用程序部署到網絡上。
首先,在我們的客戶端文件夾中,確保刪除由 create-react-app 自動初始化的 Git 存儲庫。
這對於部署我們的應用程序至關重要,因為我們將在項目的根文件夾中設置一個 Git 存儲庫 (react-node-app
),不在 client
中 :
cd client
rm -rf .git
當我們部署時,我們的 Node 後端和 React 前端都將在同一個域(即 mycoolapp.herokuapp.com)上提供服務。
我們看到我們的請求是如何被我們的 Node API 處理的,所以我們需要編寫一些代碼來在我們的用戶請求時顯示我們的 React 應用程序(例如,當我們進入應用程序的主頁時)。
我們可以在 server/index.js
中執行此操作 通過添加以下代碼:
const path = require('path');
const express = require('express');
...
// Have Node serve the files for our built React app
app.use(express.static(path.resolve(__dirname, '../client/build')));
// Handle GET requests to /api route
app.get("/api", (req, res) => {
res.json({ message: "Hello from server!" });
});
// All other GET requests not handled before will return our React app
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});
此代碼將首先允許 Node 使用 express.static
訪問我們構建的 React 項目 靜態文件的函數。
如果一個 GET 請求沒有被我們的 /api 路由處理,我們的服務器將發送回我們的 React 應用程序。
此代碼允許將我們的 React 和 Node 應用程序一起部署在同一個域中。
然後,我們可以通過添加 build
告訴我們的 Node 應用程序如何做到這一點 將腳本添加到我們的服務器 package.json 文件中,該文件為生產構建我們的 React 應用程序:
// server/package.json
...
"scripts": {
"start": "node server/index.js",
"build": "cd client && npm install && npm run build"
},
...
我還建議提供一個名為“engines”的字段,您可以在其中指定用於構建項目的 Node 版本。這將用於部署。
您可以通過運行 node -v
獲取您的 Node 版本 您可以將結果放入“引擎”(即 14.15.4)中:
// server/package.json
"engines": {
"node": "your-node-version"
}
之後,我們就可以使用 Heroku 進行部署了,因此請確保您在 Heroku.com 上擁有一個帳戶。
登錄並查看儀表板後,您將選擇新建> 創建新應用並提供唯一的應用名稱。
之後,您需要在您的計算機上安裝 Heroku CLI,這樣您就可以在使用 Git 進行任何更改時部署您的應用程序。我們可以通過運行安裝 CLI:
sudo npm i -g heroku
安裝完成後,您將使用 heroku login
通過 CLI 登錄 Heroku 命令:
heroku login
Press any key to login to Heroku
登錄後,只需在“部署”選項卡中按照我們創建的應用程序的部署說明進行操作即可。
以下四個命令將為我們的項目初始化一個新的 Git 存儲庫,將我們的文件添加到其中,提交它們,並為 Heroku 添加一個 Git 遠程。
git init
heroku git:remote -a insert-your-app-name-here
git add .
git commit -am "Deploy app to Heroku"
然後最後一步是通過推送我們剛剛添加的 Heroku Git 遠程來發布我們的應用程序:
git push heroku master
恭喜!我們的全棧 React 和 Node 應用已經上線!
當您想對您的應用程序進行更改(並部署它們)時,您只需使用 git 添加文件,提交它們,然後推送到我們的 Heroku 遠程:
git add .
git commit -m "my commit message"
git push heroku master
喜歡這篇文章嗎?加入 React 訓練營
React 訓練營 將學習 React 所需的所有知識打包成一個綜合包,包括視頻、備忘單和特殊獎勵。
獲取數百名開發人員已經用來掌握 React、找到理想工作並掌控未來的內幕信息:
點擊此處在打開時收到通知