如何安裝React

如何在開發計算機上安裝React

你如何安裝React?

React是一個庫,所以說安裝聽起來可能有點怪異。可能是設置是一個更好的詞,但您會明白這一點。

有多種方法可以設置React,以便可以在您的應用程序或網站上使用它。

直接在網頁中加載React

最簡單的方法是將React JavaScript文件直接添加到頁面中。當您的React應用程序將與單個頁面上存在的元素進行交互而不實際控制整個導航方面時,這是最好的方法。

在這種情況下,您將2個腳本標籤添加到body標籤:

<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鏈接中的版本指向最新的Alpha 16.7(在撰寫本文時),該版本提供了Hooks。請將其更改為可用的最新版本的React。

在這裡,我們加載了React和React DOM。為什麼要2個庫?因為React是100%獨立於瀏覽器的,並且可以在瀏覽器之外使用(例如,在具有React Native的移動設備上)。因此,需要React DOM為瀏覽器添加包裝器。

在這些標籤之後,您可以加載使用React的JavaScript文件,甚至可以在script標籤:

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

<!-- or -->

<script> //my app </script>

使用JSX您需要一個額外的步驟:加載巴別塔

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

並用特殊的腳本加載腳本text/babelMIME類型:

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

現在,您可以在您的app.js文件中添加JSX:

const Button = () => {
  return <button>Click me!</button>
}

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

看看這個簡單的Glitch示例:https://glitch.com/edit/#!/react-example-inline-jsx?path=script.js

從這種方式開始,使用腳本標籤非常適合構建原型,並且無需設置複雜的工作流程即可快速入門。

使用create-react-app

create-react-app是一個旨在讓您立即使用React的項目,任何需要超出單個頁面的React應用都會發現create-react-app滿足了這一需求。

您首先使用npx,這是無需安裝即可下載和執行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在這種情況下),並初始化了一個吉特資料庫。

它還在package.json文件,因此您可以通過進入文件夾並運行來立即啟動應用程序npm start

此外npm startcreate-react-app添加了一些其他命令:

  • npm run build:在以下位置構建React應用程序文件build文件夾,準備部署到服務器
  • npm test:使用以下命令運行測試套件笑話
  • npm eject:從彈出create-react-app

頂出是決定create-react-app已經為您做了足夠的事情,但是您想做的事情超出其允許的範圍。

自從create-react-app是一組通用的分母慣例和數量有限的選項,很可能在某些時候您的需求將需要一些獨特的東西,而這些東西已經超出了create-react-app

彈出時,您會失去自動更新的能力,但在巴別塔Webpack配置。

彈出時,動作是不可逆的。您將在應用程序目錄中獲得2個新文件夾,configscripts。這些包含配置-現在您可以開始編輯它們。

如果您已經使用較舊版本的React安裝了React應用,請首先通過添加以下內容檢查版本console.log(React.version)在您的應用中,然後您可以通過運行yarn add [email protected],然後yarn將提示您進行更新(選擇可用的最新版本)。重複yarn add [email protected](將“ 16.7”更改為當前最新版本的React)

CodeSandbox

一種簡單的方法create-react-app結構,不安裝它,是去https://codesandbox.io/s然後選擇“反應”。

CodeSandbox是啟動React項目的好方法,而無需在本地安裝它。

代筆

另一個很棒的解決方案是代筆

您可以使用已經預先配置了React並支持Hooks的Codepen入門項目:https://codepen.io/flaviocopes/pen/VqeaxB

Codepen“筆”非常適合具有一個JavaScript文件的快速項目,而“ projects”則適合具有多個文件的項目,例如在構建React應用程序時將使用最多的項目。

需要注意的一件事是,在Codepen中,由於其內部工作方式,您無需使用常規的ES模塊import語法,例如導入useState, 你用

const { useState } = React

並不是

import { useState } from 'react'

免費下載我的反應手冊


更多反應教程: