大家好，我是若川。持續組織了6個月源碼共讀活動，感興趣的可以點此加我微信 ruochuan12?參與，每周大家一起學習200行左右的源碼，共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》?包含20余篇源碼文章。歷史面試系列

React 前端與 Node 后端相配合，對于你想創建的任何應用程序來說都是一個堅如磐石的組合。

本指南旨在幫助你用 React 盡可能容易地創建一個全棧項目。讓我們看看如何使用 React 和 Node 從頭開始創建一個完整的項目，并將其部署到網絡上。

你需要的工具

• 確保 Node 和 NPM 已經安裝在你的電腦上。你可以在這個網站下載這兩樣東西：nodejs.org（NPM 包含在你安裝的 Node 中，不需要另外安裝)。

• 使用你選擇的代碼編輯器。我正在使用并且個人推薦使用 VSCode。你可以在這個網站下載 VSCode：code.visualstudio.com。

• 確保你的電腦上安裝了 Git。這對于用 Heroku 部署我們的應用程序是必要的。你可以在這個網站上下載：git-scm.com。

• 一個在 heroku.com 的賬號。我們將使用 Heroku 將應用程序完全免費地發布到網上。

第一步：創建你的 Node（Express）后端

首先為你的項目創建一個文件夾，命名為react-node-app（示例名稱）。

然后，將該文件夾拖入你的代碼編輯器。

為了創建我們的 Node 項目，在你的終端運行以下命令：

npm?init?-y

這將創建一個 package.json 文件，使我們能夠跟蹤所有的應用程序腳本，并管理我們的 Node 應用程序需要的任何依賴。

我們的服務器代碼將放在一個同名的文件夾中：server。讓我們來創建這個文件夾。

在這個文件夾中，我們將放置一個文件，從這個文件中運行服務。index.js。

我們將使用 Express 創建一個簡單的 Web 服務器，如果環境變量PORT沒有給定值，則運行在 3001 端口（Heroku 將在我們部署應用程序時設置這個值）。

//?server/index.jsconst?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.jsServer?listening?on?3001

第二步：創建一個 API

我們想把我們的 Node 和 Express 服務器作為一個 API，這樣它就可以給 React 應用提供數據，改變這些數據，或者做一些其他只有服務才能做的操作。

在這個例子中，我們將簡單地給 React 應用發送一個 JSON 對象中的 "Hello from server!"消息。

下面的代碼為路由/api創建了一個 endpoint。

如果我們的 React 應用向該路由發出一個 GET 請求，我們就會用 JSON 數據進行響應（使用res，代表響應）。

//?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 創建一個新的 React 項目，名稱為client。

npx?create-react-app?client

之后，我們將擁有一個安裝了所有依賴項的 React 應用。

我們要做的唯一改變是在 package.json 文件中添加一個名為proxy的屬性（client文件夾下的 package.json 文件）。

這將允許我們向 Node 服務器發出請求，而不必在每次向它發出網絡請求時提供它所運行的原點（http://localhost:3001）。

//?client/package.json...
"proxy":?"http://localhost:3001",
...

然后我們可以通過運行它的啟動腳本來啟動 React 應用，這和我們的 Node 服務器一樣。首先確保cd進入新創建的client文件夾。

之后，將在localhost:3000上啟動（其實啟動兩個 Node 的進程，一個是 React 開發使用，一個是 Express 開發使用）。

cd?client
npm?startCompiled?successfully!You?can?now?view?client?in?the?browser.Local:????????????http://localhost:3000

第四步：從 React 向 Node 發出 HTTP 請求

現在我們有了一個工作的 React 應用，我們想用它來與我們的 API 進行交互。

讓我們看看如何從我們之前創建的/apiendpoint 獲取數據。

要做到這一點，我們可以前往src文件夾中的App.js組件，使用useEffect進行 HTTP 請求。

我們將使用 Fetch API 向后端發出一個簡單的 GET 請求，然后將我們的數據以 JSON 格式返回。

一旦我們得到了返回的數據，我們將得到消息屬性（抓取從服務器發送的問候語），然后把它放在一個叫做data的狀態變量中。

這將使我們能夠在頁面中顯示該消息，如果我們有的話。我們在 JSX 中使用一個條件，如果數據還沒有，就顯示文本 Loading...。

//?client/src/App.jsimport?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;

用 Heroku 將你的應用程序部署到網上

最后，讓我們把應用程序部署到網絡上。

首先，在我們的client文件夾中，確保刪除由 create-react-app 自動初始化的 Git repo（rm -rf .git, .git 是隱藏文件夾，不能直接看到）。

這對部署我們的應用程序至關重要，因為我們要在項目的根文件夾（react-node-app）中建立 Git repo，而不是在client中。

cd?client
rm?-rf?.git

當我們部署時，Node 后端和 React 前端都將在同一個域名（即 mycoolapp.herokuapp.com）提供服務。

我們看到請求是如何被 Node API 處理的，所以我們需要寫一些代碼，當我們的 React 應用被用戶請求時（例如，當我們進入應用的主頁時）顯示 React 應用。

我們可以在server/index.js中加入以下代碼來完成這個工作。

//?server/index.js
const?path?=?require('path');
const?express?=?require('express');...//?讓?Node?為我們創建的?React?應用提供文件
app.use(express.static(path.resolve(__dirname,?'../client/build')));//?處理對/api?的?GET?請求
app.get("/api",?(req,?res)?=>?{res.json({?message:?"Hello?from?server!"?});
});//?所有之前未被處理的?GET?請求將返回我們的?React?app
app.get('*',?(req,?res)?=>?{res.sendFile(path.resolve(__dirname,?'../client/build',?'index.html'));
});

這段代碼將首先允許 Node 使用express.static函數來訪問我們創建的 React 項目的靜態文件。

如果有一個 GET 請求進來，而這個請求沒有被我們的/api路由處理后，我們的服務器將用 React 應用來響應。

這段代碼允許我們的 React 和 Node 應用一起部署在同一個域名。

然后我們可以告訴 Node App 如何做，在我們的服務器 package.json 文件中添加一個build腳本，為生產創建我們的 React 應用。

//?server/package.json...
"scripts":?{"start":?"node?server/index.js","build":?"cd?client?&&?npm?install?&&?npm?run?build"},
...

我還建議提供一個名為engines的字段，在這里你要指定你用來創建項目的 Node 版本。這將被用于部署。

你可以通過運行node -v來獲得你的 Node 版本，你可以把結果放在engines中（例如14.15.4）。

//?server/package.json"engines":?{"node":?"your-node-version"
}

在這之后，我們準備使用 Heroku 進行部署，所以請確保你在 Heroku.com 有一個賬戶。

當你登錄并查看你的儀表板（dashboard），你將選擇新建（New）>創建新的應用程序（Create New App），并提供一個唯一的應用程序名稱。

sudo?npm?i?-g?heroku

當安裝完畢，你將通過 CLI 使用heroku login命令登錄到 Heroku。

heroku?loginPress?any?key?to?login?to?Heroku

登錄后，只需在 "Deploy "選項卡中為我們創建的應用程序遵循部署說明。

以下四個命令將為我們的項目初始化一個新的 Git repo，將我們的文件添加到其中，提交它們，并為 Heroku 添加一個 Git 遠程。

git?init
heroku?git:remote?-a?insert-your-app-name-here
git?add?.
git?commit?-am?"Deploy?app?to?Heroku"

然后，最后一步是通過推送我們剛剛添加的 Heroku Git 遠程地址（heroku git:remote -a insert-your-app-name-here），來發布我們的應用程序。

git?push?heroku?master

恭喜！我們的全棧式 React 和 Node 應用已經上線。🎉

當你想對你的應用程序進行修改時（并進行部署），你只需要用 Git 來添加你的文件（git add），提交它們（git commit），然后推送到我們的 Heroku 遠程（git push）。

git?add?.
git?commit?-m?"my?commit?message"
git?push?heroku?master

想用 React 創建像 YouTube 這樣的真實世界的應用程序嗎？以上就是方法。

在每個月的月底，我將發布一個獨家課程，準確地告訴你如何復現從頭到尾用 React 創建一個完整的應用程序。

想在下一個課程出現時得到通知嗎？在這里加入等候名單。

---

原文鏈接：https://www.freecodecamp.org/news/how-to-create-a-react-app-with-a-node-backend-the-complete-guide/

作者：Reed Barger

譯者：luojiyin

·················?若川簡介?·················

你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助3000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。

識別上方二維碼加我微信、拉你進源碼共讀群

今日話題

略。分享、收藏、點贊、在看我的文章就是對我最大的支持~