ReactJS - 安裝

本章解釋如何在您的機器上安裝 React 庫及其相關工具。在進行安裝之前，讓我們先驗證一下先決條件。

React 為開發者提供了 CLI 工具，可以加快基於 React 的 Web 應用的建立、開發和部署速度。React CLI 工具依賴於 Node.js，必須安裝在您的系統中。希望您已經在您的機器上安裝了 Node.js。我們可以使用以下命令進行檢查：

node --version

您可以看到您可能安裝的 Nodejs 版本。對我來說，它顯示如下：

v14.2.0

如果Nodejs沒有安裝，您可以訪問https://nodejs.org/en/download/.下載並安裝。

工具鏈

為了開發輕量級功能，例如表單驗證、模態對話方塊等，React 庫可以直接透過內容分發網路 (CDN) 包含到 Web 應用中。這類似於在 Web 應用中使用 jQuery 庫。對於中等規模到大型應用，建議將應用編寫為多個檔案，然後使用 webpack、parcel、rollup 等捆綁器在部署程式碼之前編譯和捆綁應用。

React 工具鏈有助於建立、構建、執行和部署 React 應用。React 工具鏈基本上提供了一個啟動專案模板，其中包含引導應用所需的所有必要程式碼。

一些流行的用於開發 React 應用的工具鏈包括：

Create React App - 面向 SPA 的工具鏈
Next.js - 面向伺服器端渲染的工具鏈
Gatsby - 面向靜態內容的工具鏈

開發 React 應用所需的工具包括：

serve，一個靜態伺服器，用於在開發過程中提供我們的應用
Babel 編譯器
Create React App CLI

讓我們在本節學習上述工具的基礎知識以及如何在本章中安裝它們。

serve 靜態伺服器

serve是一個輕量級的 Web 伺服器。它提供靜態站點和單頁應用。它載入速度快，記憶體消耗少。它可以用來提供 React 應用。讓我們使用系統中的npm包管理器安裝該工具。

npm install serve -g

讓我們建立一個簡單的靜態站點，並使用serve應用提供該應用。

開啟命令提示符並轉到您的工作區。

cd /go/to/your/workspace

建立一個新資料夾，static_site，並將目錄更改為新建立的資料夾。

mkdir static_site 
cd static_site

接下來，使用您喜歡的 html 編輯器在資料夾內建立一個簡單的網頁。

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>Static website</title> 
   </head> 
   <body> 
      <div><h1>Hello!</h1></div> 
   </body> 
</html>

接下來，執行serve命令。

serve .

我們還可以提供單個檔案index.html，而不是整個資料夾。

serve ./index.html

接下來，開啟瀏覽器並在位址列中輸入https://:5000，然後按 Enter。serve 應用將提供我們的網頁，如下所示。

serve 將使用預設埠 5000 提供應用。如果該埠不可用，它將選擇一個隨機埠並指定它。

│ Serving!                                     │   
   │                                              │ 
   │ - Local: https://:57311              │ 
   │ - On Your Network: http://192.168.56.1:57311 │ 
   │                                              │ 
   │ This port was picked because 5000 is in use. │ 
   │                                              │ 
   │ Copied local address to clipboard!

Babel 編譯器

Babel 是一個 JavaScript 編譯器，它將許多 JavaScript 變體 (es2015、es6 等) 編譯成所有瀏覽器都支援的標準 JavaScript 程式碼。React 使用 JSX，這是 JavaScript 的擴充套件，用於設計使用者介面程式碼。Babel 用於將 JSX 程式碼編譯成 JavaScript 程式碼。

要安裝 Babel 及其 React 伴侶，請執行以下命令：

npm install babel-cli@6 babel-preset-react-app@3 -g
... 
... 
+ babel-cli@6.26.0 
+ babel-preset-react-app@3.1.2 
updated 2 packages in 8.685s

Babel 幫助我們使用下一代高階 JavaScript 語法編寫應用。

Create React App 工具鏈

Create React App 是一個現代化的 CLI 工具，用於建立單頁 React 應用。它是 React 社群支援的標準工具。它也處理 babel 編譯器。讓我們在本地系統中安裝Create React App。

> npm install -g create-react-app
+ create-react-app@4.0.1 
added 6 packages from 4 contributors, removed 37 packages and updated 12 packages in 4.693s

更新工具鏈

React Create App 工具鏈使用 react-scripts 包來構建和執行應用。一旦我們開始使用該應用，我們就可以隨時使用npm包管理器將 react-script 更新到最新版本。

npm install react-scripts@latest

使用 React 工具鏈的優點

React 工具鏈開箱即用地提供了許多功能。使用 React 工具鏈的一些優點包括：

預定義和標準的應用結構。
針對不同型別應用的現成專案模板。
包含開發 Web 伺服器。
輕鬆包含第三方 React 元件。
預設設定用於測試應用。

列印頁面