【譯】如何鏈接 React 和 Node，Express

原文： How to create a React frontend and a Node/Express backend and connect them
做者：João Henrique
譯者：博軒

在本文中，我將引導你建立一個簡單的 React 應用，以及一個簡單的 Node/Express API，並將二者相互鏈接。

我不會詳細介紹本文中提到的任何技術，可是我會留下連接，以便你想了解更多信息。

您能夠在我爲本教程製做的代碼庫中找到源碼。

譯註：嚶嚶嚶，我也寫了Demo的... client-react-001 ， api-node-001

這裏的目標是爲您提供有關如何設置和鏈接前端客戶端和後端API的實用指南。

在咱們開始以前，確保您的機器上已經安裝了 Node.js

建立項目主目錄

在終端，導航到你要保存項目的目錄。如今爲您的項目建立一個新目錄並導航到它：

mkdir my_awesome_project
cd my_awesome_project

建立一個 React 應用

這個過程很是簡單。

咱們將使用 Facebook 的 create-react-app 來... 你猜對了，簡單的建立一個名爲 client 的應用程序：

npx create-react-app client
cd client
npm start

讓咱們看看這裏作了什麼：

1.使用 npm 的 npx 建立一個 React 應用，並將其命名爲 client。
2.cd （更改目錄）到客戶端目錄中。
3.啓動了應用程序。

在瀏覽器中，訪問：http://localhost:3000/

若是一切正常，您將看到 React 歡迎頁面。恭喜！這意味着您如今在本地計算機上運行了一個基本的 React 應用程序。是否是很簡單？

要中止您的 React 應用程序，只需在終端按下 Ctrl + c 便可。

建立一個 Express 應用

好的，這將與前一個示例一樣簡單。不要忘記回到項目的根文件夾。

咱們將使用 Express Application Generator 快速生成應用的框架，並將其命名爲 api ：

npx express-generator api
cd api
npm install
npm start

讓咱們看看這裏作了什麼：

1.使用 npm 的 npx 在全局安裝 express-generator 。
2.使用 express-generator 快速建立一個 express 應用，並將其命名爲 ： api。
3.進入 API 目錄。
4.安裝全部依賴項。
5.啓動應用。

在瀏覽器中，訪問：http://localhost:3000/

若是一切正常，您將看到 Express 歡迎頁面。恭喜！這意味着您如今在本地計算機上運行了一個基本的 Express 應用程序。是否是很簡單？

要中止您的 Express 應用程序，只需在終端按下 Ctrl + c 便可。

在 Express 中配置新的路由

好啦，接下來就是動手時間。是時候打開你最喜歡的代碼編輯器（我正在使用 VS Code）並導航到你的項目文件夾。

若是您將 React應用 命名爲 client，Express應用 命名爲 api，你講找到兩個主要文件夾：client 和 api。

1.在 api 目錄中，打開 bin/www 並將第15行的端口號由 3000 改成 9000。咱們將同時運行兩個應用程序，這樣作能夠避免問題。修改結果以下：

// my_awesome_project/api/bin/www
var port = normalizePort(process.env.PORT || '9000');

2.在 api/routes 上，建立一個 testAPI.js 文件並粘貼以下代碼：

var express = require(「express」);
var router = express.Router();

router.get(「/」, function(req, res, next) {
    res.send(「API is working properly」);
});

module.exports = router;

3.在 api/app.js 文件中，在第24行插入新路由：

app.use("/testAPI", testAPIRouter);

4.並在第9行引入新的路由文件

var testAPIRouter = require("./routes/testAPI");

5.恭喜您！您已經建立了新的路由。

若是您啓動 api 應用程序（在終端中，導航到 api 目錄，輸入 npm start），並在瀏覽器中訪問 http://localhost:9000/testAPI ，您將看到如下消息：API is working properly 。

譯註：可使用 npm 模塊 forever來守護你的進程，方便你以後在其餘機器上部署服務。

將 React Client 鏈接到 Express API

1.讓咱們使用代碼編輯器打開 client 目錄，編輯 app.js 。

2.我將會使用 Fetch API 從 api 模塊獲取數據。在 Class 聲明以後，render 方法以前粘貼以下代碼：

constructor(props) {
    super(props);
    this.state = { apiResponse: "" };
}

callAPI() {
    fetch("http://localhost:9000/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));
}

componentWillMount() {
    this.callAPI();
}

3.在 render 方法中，你會找到一個 <p> 標籤。讓咱們用它來展現 API 的內容。

<p className="App-intro">;{this.state.apiResponse}</p>

這是，該文件展現以下：

讓咱們看看這裏作了什麼：
1.在第6到9行，咱們插入了一個初始化默認狀態的構造函數。
2.在第11到16行，咱們插入了方法 callAPI()，它將從API獲取數據，並存儲在this.state.apiResponse上。
3.在第18行到第20行，咱們插入了一個名爲 componentDidMount() 的 react 生命週期方法，該方法將在組件安裝後執行 callAPI() 方法。
4.最後，在第29行，我使用 <p> 標籤在咱們的客戶端頁面上顯示一個段落，其中包含咱們從 API 獲取的文本。

有沒有搞錯！！CORS ？

到這裏，咱們差很少完成了。當咱們啓動應用程序（client 和 API），訪問 http://localhost:3000/ ， 發現並無看到預期的結果。若是你打開 chrome 開發者工具，您將在控制檯找到緣由：

Failed to load http://localhost:9000/testAPI: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘ http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

這很好解決。咱們只須要在咱們的API中添加CORS容許跨域請求。有關 CORS ，咱們能夠查看上面的連接瞭解更多信息。

1.在終端中導航到 api 目錄，並安裝 CORS 依賴。

npm install --save cors

2.打開 my_awesome_project/api/app.js 文件，添加以下代碼：

var cors = require("cors");
...
app.use(cors());

API app.js 文件最終應該是這樣的：

乾的漂亮。咱們完成了！！

如今使用 npm start 啓動兩個應用 client 和 API。

訪問 http://localhost:3000/ 你會看到以下內容：

固然，這個項目的代碼不會不少，但倒是全棧項目的開始。你能夠在這個倉庫中，找到項目的全部代碼。

接下來，我會補充一些教程，好比將它鏈接到 MongoDB 數據庫，甚至是在 Docker 容器中運行它。

譯註：這是我部署的 應用地址，下一篇我也會翻譯吧。

就像個人一位好友對我說到：

Be Strong and Code On!!!

...別忘了今天也是美好的一天😘

本文已經聯繫原文做者，並受權翻譯，轉載請保留原文連接