如何安裝 React

如何在開發電腦上安裝 React

你該如何安裝 React？

React 是一個函式庫，所以說「安裝」可能聽起來有點奇怪。也許「設置」是一個更好的詞，但你懂得概念。

有多種方式可以設置 React，以便在你的應用程式或網站中使用。

在網頁中直接載入 React

最簡單的方法是將 React 的 JavaScript 檔案直接添加到網頁中。當你的 React 應用程式與現有頁面上的元素互動時，而不是控制整個導航方面時，這是最佳選擇。

在這種情況下，你需要在 body 標籤的末尾添加兩個 script 標籤：

<html>
 ...
 <body>
 ...
 <script
 src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js"
 crossorigin
 ></script>
 <script
 src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"
 crossorigin
 ></script>
 </body>
</html>

在連結中的 16.7.0-alpha.2 版本表示當前最新版本的 16.7 alpha（在撰寫本文時）。請將其更改為可用的最新 React 版本。

在這裡，我們載入了 React 和 React DOM 兩個庫。為什麼會有兩個庫呢？因為 React 完全獨立於瀏覽器，可以在瀏覽器之外使用（例如，在 React Native 上使用於移動設備）。因此需要 React DOM 來添加瀏覽器的包裝。

在這些標籤之後，你可以載入使用 React 的 JavaScript 檔案，或者甚至在 script 標籤中內嵌 JavaScript：

<script src="app.js"></script>

<!-- or -->

<script>
 //我的應用程式
</script>

使用 JSX 需要多一個步驟：載入 Babel

<script src="https://unpkg.com/[[email protected]](/cdn-cgi/l/email-protection)/babel.min.js"></script>

並將你的檔案以特殊的 text/babel MIME 類型載入：

<script src="app.js" type="text/babel"></script>

現在，你可以在 app.js 文件中添加 JSX：

const Button = () => {
 return <button>點我！</button>
}

ReactDOM.render(<Button />, document.getElementById('root'))

在這個簡單的 Glitch 範例中檢查：https://glitch.com/edit/#!/react-example-inline-jsx?path=script.js

以這種方式開始使用 script 標籤有助於快速建立原型，並使得可以快速入門，而不必設置複雜的工作流程。

使用 create-react-app

create-react-app 是一個旨在讓你在最短時間內掌握 React 的項目，與任何需要超越單頁的 React 應用程式相契合。

首先使用 npx，這是一種在不安裝 Node.js 的情況下下載和執行 Node.js 命令的簡單方法。npx 隨 npm（自 5.2 版以來）一起提供，如果你還沒有安裝 npm，現在可以從 https://nodejs.org（npm 隨 Node 一同安裝）進行安裝。

如果不確定你的 npm 版本，執行 npm -v 檢查是否需要更新。

提示：如果你對終端機的使用不熟悉，請參考我的 OSX 終端機教程：https://flaviocopes.com/macos-terminal/，該教程也適用於 Linux。對於 Windows，目前我尚無教程，但可以向 Google 尋求幫助。

當你運行 npx create-react-app <app-name> 時，npx 將下載最新版本的 create-react-app，並執行它，然後從系統中刪除。這很方便，因為你的系統中永遠不會有過時的版本，每次運行時，都會得到最新且最好的可用程式碼。

那麼，我們開始吧：

npx create-react-app todolist

當它完成執行時，如下所示：

create-react-app 在你指定的文件夾（在這個例子中是 todolist）中創建了文件結構，並初始化了一個 Git 倉庫。

它還在 package.json 檔案中添加了一些命令，所以你可以立即進入該文件夾，運行 npm start 啟動應用程式。

除了 npm start，create-react-app 還添加了其他一些命令：

npm run build：將 React 應用程式文件構建到 build 文件夾中，準備部署到服務器上
npm test：使用 Jest 運行測試套件
npm eject：退出 create-react-app

退出操作是指 create-react-app 已經為你完成了足夠的工作，但你希望做比它允許的事情更多。

由於 create-react-app 是一組共同約定和有限的選項，所以在某些情況下，你的需求可能需要一些超出 create-react-app 能力的獨特配置。

退出操作是不可逆的。你的應用程式目錄中會出現兩個新的文件夾，config 和 scripts。它們包含配置內容，現在你可以開始編輯它們。

如果你已經安裝了一個舊版本的 React 的 React 應用程式，首先在應用中添加 console.log(React.version)，然後運行 yarn add [[email protected]](/cdn-cgi/l/email-protection) 來檢查版本，yarn 將提示你更新（選擇最新可用版本）。然後重複運行 yarn add [[email protected]](/cdn-cgi/l/email-protection)（將“16.7”更改為當前最新版本的 React）。

CodeSandbox

一種無需安裝即可獲得 create-react-app 結構的簡單方法是前往 https://codesandbox.io/s，並選擇“React”。

CodeSandbox 是一種在本地無需安裝就可以開始 React 項目的絕佳方式。

Codepen

另一種優秀的解決方案是 Codepen。

你可以使用這個 Codepen 初始項目，它已預先配置了 React，並支援 Hooks：https://codepen.io/flaviocopes/pen/VqeaxB

Codepen 中的“pens”非常適合具有單個 JavaScript 文件的快速項目，而“projects”非常適合具有多個文件的項目，尤其是在構建 React 應用程式時。

需要注意的一點是，在 Codepen 中由於其內部工作方式，你不能使用常規的 ES 模組 import 語法，而是需要使用：

const { useState } = React

而不是：

import { useState } from 'react'

在網頁中直接載入 React#

使用 create-react-app#

CodeSandbox#

Codepen#

在網頁中直接載入 React

使用 create-react-app

CodeSandbox

Codepen