反應(yīng)靈活，可用于各種項目。您可以使用它創(chuàng)建新的應(yīng)用程序，但您也可以逐漸將其引入現(xiàn)有的代碼庫，而無需重寫。

以下是幾種開始的方法：

• 試試React

• 創(chuàng)建一個新應(yīng)用程序

• 將反應(yīng)添加到現(xiàn)有的應(yīng)用程序

嘗試反應(yīng)

如果你只是想玩弄React，你可以使用CodePen。嘗試從此Hello World示例代碼開始。你不需要安裝任何東西; 您可以修改代碼并查看它是否有效。

如果您更喜歡使用自己的文本編輯器，還可以下載此HTML文件，對其進(jìn)行編輯，然后在瀏覽器中從本地文件系統(tǒng)打開它。它的運(yùn)行時代碼轉(zhuǎn)換很慢，所以不要在生產(chǎn)環(huán)境中使用它。

如果您想將其用于完整應(yīng)用程序，可以采用兩種流行的方式開始使用React：使用Create React App或?qū)⑵涮砑拥浆F(xiàn)有應(yīng)用程序。

創(chuàng)建新的應(yīng)用程序

創(chuàng)建React App是開始構(gòu)建新的React單頁應(yīng)用程序的最佳方式。它設(shè)置了您的開發(fā)環(huán)境，以便您可以使用最新的JavaScript功能，提供良好的開發(fā)人員體驗，并優(yōu)化您的應(yīng)用程序的生產(chǎn)。你需要在你的機(jī)器上有Node> = 6。

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

如果你有NPM 5.2.0+安裝，你可以使用NPX代替。

npx create-react-app my-app

cd my-app
npm start

創(chuàng)建React App不處理后端邏輯或數(shù)據(jù)庫; 它只是創(chuàng)建一個前端構(gòu)建管道，所以你可以將它用于任何你想要的后端。它使用諸如Babel和webpack之類的構(gòu)建工具，但是使用零配置。

當(dāng)您準(zhǔn)備部署到生產(chǎn)環(huán)境時，運(yùn)行npm run build將在build文件夾中創(chuàng)建應(yīng)用程序的優(yōu)化版本。您可以從README和用戶指南中了解有關(guān)創(chuàng)建React應(yīng)用程序的更多信息。

將反應(yīng)添加到現(xiàn)有的應(yīng)用程序

你不需要重寫你的應(yīng)用程序來開始使用React。

我們建議將React添加到應(yīng)用程序的一小部分中，例如單個小部件，以便您可以查看它是否適合您的用例。

雖然可以在沒有構(gòu)建管道的情況下使用React，但我們建議將其設(shè)置為可以提高生產(chǎn)力?，F(xiàn)代構(gòu)建管道通常由以下部分組成：

• 包管理器，如紗或NPM。它可讓您充分利用第三方軟件包的龐大生態(tài)系統(tǒng)，并輕松安裝或更新它們。

• 捆綁，如的WebPack或Browserify。它允許您編寫模塊化代碼，并將它們組合在一起成為小包，以優(yōu)化加載時間。

• 像Babel這樣的編譯器。它可以讓你編寫在舊版瀏覽器中仍然可用的現(xiàn)代JavaScript代碼。

安裝React

注意：   安裝完成后，我們強(qiáng)烈建議設(shè)置生產(chǎn)構(gòu)建過程以確保您在生產(chǎn)中使用快速版本的React。

我們建議使用Yarn或npm來管理前端依賴項。如果您對包管理員不熟悉，那么Yarn文檔是開始使用的好地方。

要安裝Yarn React，請運(yùn)行：

yarn init
yarn add react react-dom

要使用npm安裝React，請運(yùn)行：

npm init
npm install --save react react-dom

Yarn和npm都從npm注冊表下載軟件包。

啟用ES6和JSX

我們建議使用React with Babel讓您在JavaScript代碼中使用ES6和JSX。ES6是一組現(xiàn)代化的JavaScript特性，可以使開發(fā)變得更加簡單，JSX是對與React很好地配合的JavaScript語言的擴(kuò)展。

在巴別塔安裝說明解釋如何在許多不同的構(gòu)建環(huán)境配置通天塔。確保你在你的配置中安裝babel-preset-react并babel-preset-env啟用它們，你很好。.babelrc

Hello World與ES6和JSX

我們建議使用像webpack或Browserify這樣的打包程序，以便您可以編寫模塊化代碼并將它們捆綁在一起，以便優(yōu)化加載時間。

最小的React示例如下所示：

import React from 'react';import ReactDOM from 'react-dom';ReactDOM.render(  <h1>Hello, world!</h1>,
  document.getElementById('root'));

此代碼呈現(xiàn)為ID為的DOM元素root，因此您需要<div id="root"></div>HTML文件中的某處。

同樣，您可以在現(xiàn)有應(yīng)用程序內(nèi)的某個DOM元素內(nèi)部渲染一個React組件，該應(yīng)用程序使用任何其他JavaScript UI庫編寫。

了解有關(guān)將React與現(xiàn)有代碼集成的更多信息。

開發(fā)和生產(chǎn)版本

默認(rèn)情況下，React包含許多有用的警告。這些警告在開發(fā)中非常有用。

但是，他們使React的開發(fā)版本變得更大更慢，因此您應(yīng)該在部署應(yīng)用程序時使用生產(chǎn)版本。

了解如何判斷您的網(wǎng)站是否提供正確版本的React，以及如何最有效地配置生產(chǎn)構(gòu)建過程：

• 使用創(chuàng)建React App創(chuàng)建生產(chǎn)版本

• 使用單個文件構(gòu)建創(chuàng)建生產(chǎn)版本

• 使用brunch創(chuàng)建生產(chǎn)版本

• 使用Browserify創(chuàng)建生產(chǎn)版本

• 使用匯總創(chuàng)建生產(chǎn)版本

• 使用webpack創(chuàng)建生產(chǎn)版本

使用CDN

如果你不希望使用NPM來管理客戶端軟件包時，react和react-dom故宮的包還提供了在單個文件的分發(fā)umd文件夾，這是一個CDN托管：

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

以上版本僅用于開發(fā)，不適合生產(chǎn)?？s小和優(yōu)化的React生產(chǎn)版本可在以下網(wǎng)址獲得：

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

要加載的特定版本react和react-dom，替換16用的版本號。

如果您使用Bower，則可以通過react軟件包獲取React 。

為什么crossorigin屬性？

如果您從CDN提供React，我們建議保留crossorigin屬性設(shè)置：

<script crossorigin src="..."></script>

我們還建議驗證您使用的CDN是否設(shè)置了Access-Control-Allow-Origin: *HTTP標(biāo)頭：

這可以在React 16及更高版本中提供更好的錯誤處理體驗。