JavaScript >> Javascript 文檔 >  >> Node.js

如何使用 Node 後端創建 React 應用程序:完整指南

連接到 Node 後端的 React 前端是您想要構建的任何應用程序的堅如磐石的組合。

本指南旨在幫助您盡可能輕鬆地使用 React 創建全棧項目。

讓我們看看如何使用 React 和 Node 從頭開始設置整個項目並將其部署到 Web。

您需要的工具

  1. 確保您的計算機上安裝了 Node 和 NPM。您可以在 nodejs.org 下載這兩個文件(NPM 包含在您的 Node 安裝中)
  2. 使用您選擇的代碼編輯器。我正在使用並且個人會推薦使用 VSCode。您可以在 code.visualstudio.com 下載 VSCode。
  3. 確保您的計算機上安裝了 Git。這是使用 Heroku 部署我們的應用程序所必需的。您可以在 git-scm.com 上獲得它
  4. 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、找到理想工作並掌控未來的內幕信息:


點擊此處在打開時收到通知


Tutorial JavaScript 教程
  1. 與 Redux 反應?簡單的! - #explianLikeIm5

  2. for(var key in object) Javascript 內的條件語句

  3. JavaScript——從回調到異步/等待

  4. 將 VueJS 應用程序遷移到 Vuex

  5. JavaScript 中的 Let 與 Var

  6. 如何在 React 中更改鼠標事件的文本

  7. Angular 中的架構

  1. 如何獲取 onclick 調用對象?

  2. JavaScript 關聯數組

  3. 使用 Formik 構建更簡單的 React 表單

  4. PhpStorm 中的代碼片段

  5. 如何從 Web 應用上下文調用 Service Worker

  6. 網絡組裝

  7. 使用 Blender 和 React 從桌面 3d 應用程序到 Web 3d 應用程序

  1. 在 Web 應用程序中使用輸入數字字段時要小心

  2. 具有 4x100% 燈塔分數的 SPA — 第 3 部分:天氣預報應用程序

  3. 帶有電子郵件的靈活節點身份驗證樣板。

  4. 如何在帶有樣式組件的 React Native 中使用全局字體和顏色