安裝 React
React 可以被靈活地運用在各種項目中秩贰。你可以用它創(chuàng)建新的應(yīng)用程序，也可以逐漸地將其添加到現(xiàn)有的代碼庫中矮燎，而無需重寫毡证。
嘗試 React
如果你只是想簡單嘗試下 React，可以使用 CodePen. 首先試試這個 Hello World 示例代碼恢筝。你不需要安裝任何東西哀卫，還能簡單修改下代碼使其生效。
如果你喜歡使用自己的文本編輯器撬槽，你還可以 <a href="/react/downloads/single-file-example.html" download="hello.html">下載此 HTML 文件</a> 進行編輯, 然后在本地瀏覽器中打開此改。它會執(zhí)行緩慢的運行時代碼轉(zhuǎn)換，所以不要在生產(chǎn)環(huán)境中使用侄柔。
如果你想在一個完整的項目中使用 React共啃，一般有兩種方式：創(chuàng)建 React 應(yīng)用或添加 React 到現(xiàn)有應(yīng)用占调。
創(chuàng)建新應(yīng)用
Create React App 是開始構(gòu)建新的 React 單頁面應(yīng)用的最佳途徑。 它可以幫你配置開發(fā)環(huán)境移剪，以便你可以使用最新的 JavaScript 特性究珊，還能提供很棒的開發(fā)體驗，并為生產(chǎn)環(huán)境優(yōu)化你的應(yīng)用
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
Create React App 并不處理后端邏輯和數(shù)據(jù)庫纵苛，它只會創(chuàng)建一個前端的構(gòu)建管道剿涮，所以可以和任何后端搭配使用。它可以使用 Babel 和 Webpack 這樣的配置工具攻人，也可以零配置使用取试。
當(dāng)你準(zhǔn)備好將其部署到生產(chǎn)環(huán)境中時，運行 npm run build 將會在 build 文件夾中創(chuàng)建一個優(yōu)化好的應(yīng)用贝椿。你可以從 README 和 用戶指南 中了解更多信息想括。
添加 React 到現(xiàn)有應(yīng)用
你不需要為了使用 React 重寫你的應(yīng)用。
我們建議你將 React 添加到應(yīng)用的一小部分中烙博，比如單個小部件瑟蜈，以便你看它是否適用于你的情況。
雖然 React 可以在沒有構(gòu)建管道的情況下使用 渣窜，但是為了更高效我是還建議你使用它铺根，現(xiàn)代的構(gòu)建管道通常包括:
- 包管理器，比如 Yarn 或 npm乔宿。它可以讓你使用龐大的第三方軟件包生態(tài)系統(tǒng)位迂，還能很方便的安裝或升級。
- 構(gòu)建器详瑞，比如 webpack 或 Browserify掂林。它允許你編寫模塊化代碼并且壓縮文件以優(yōu)化加載時間。
- 編譯器 比如 Babel坝橡。它可以讓包含新特性的代碼運行在舊版瀏覽器上泻帮。
安裝
Note:
一旦安裝 React，我們強烈建議你將它配置為生產(chǎn)構(gòu)建程序 计寇，以確保你在生產(chǎn)環(huán)境中使用最新版本的 React锣杂。
我們建議使用 Yarn 或 npm 來管理前端的依賴關(guān)系, 如果你還未使用過包管理器，閱讀 Yarn 文檔 以快速入門番宁。
使用 Yarn 安裝 React：
yarn init
yarn add react react-dom
使用 npm 安裝 React：
npm init
npm install --save react react-dom
Yarn 和 npm 都會從 npm 倉庫 下載軟件包元莫。
使用 ES6 和 JSX
我們推薦使用 Babel 以便你在 JavaScript 中使用 ES6 和 JSX，ES6 擁有一系列 JavaScript 新特性的標(biāo)準(zhǔn)蝶押，能使你的開發(fā)更簡單踱蠢。JSX 是與 React 搭配使用的 JavaScript 語言的擴展。
Babel 安裝說明 說明了如何在多種不同的環(huán)境中配置 Babel播聪，確保你已經(jīng)安裝了babel-preset-react 和 babel-preset-es2015 并且在 .babelrc configuration 配置文件中啟用它們, 到這里就準(zhǔn)備就緒了朽基。
在 Hello Wrorld 中使用 ES6 的 JSX
我們建議你使用像 webpack 或 Browserify 這樣的構(gòu)建工具布隔，以便于編寫模塊代碼并將其壓縮，優(yōu)化加載時間稼虎。
下面是最基本的 React 示例：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
這段代碼會將其渲染入一個 ID 為 root 的 DOM 元素衅檀，所以在你的 HTML 文件中需要有 <div id="root"></div>。
類似以上霎俩，你可以在任何由其他 JavaScript UI 庫編輯的現(xiàn)有應(yīng)用中哀军，將 React 渲染進一個 DOM 元素。
了解有關(guān)將 React 與現(xiàn)有代碼集成的更多信息打却。
開發(fā)和生產(chǎn)版本
默認(rèn)情況下杉适，React 會包含很多有用的警告，這些警告在開發(fā)中非常有用柳击。
然而猿推，這些警告使開發(fā)版本的 React 體積過大并且運行過慢，所以你應(yīng)該在部署應(yīng)用時使用生產(chǎn)版本
了解如何判斷你的網(wǎng)頁是否運行了合適的 React 版本, 以及如何有效的配置生產(chǎn)構(gòu)建程序：
- 使用 Create React App 構(gòu)建應(yīng)用
- 使用獨立文件構(gòu)建應(yīng)用
- 使用 Brunch 構(gòu)建應(yīng)用
- 使用 Browserify 構(gòu)建應(yīng)用
- 使用 Rollup 構(gòu)建應(yīng)用
- 使用 Webpack 構(gòu)建應(yīng)用
使用 CDN
如果你不想使用 npm 來管理軟件包捌肴，'react' 和 'react-dom' npm 軟件包同樣提供了托管在 CDN 上的獨立文件蹬叭。
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
以上版本僅用于開發(fā)，不適合生產(chǎn)状知。壓縮優(yōu)化的生產(chǎn)版本如下：
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
如果想要加載指定版本的 react 和 react-dom秽五，用版本號替換 15。
如果你在使用 Bower饥悴，可以通過 react 包來使用 React坦喘。
Hello World
嘗試 React 最簡單的方法是使用 CodePen上的Hello World例子。如果你不想安裝任何東西西设，可以在瀏覽器中打開它瓣铣，然后跟著嘗試我們接下來的例子。如果你更愿意使用本地開發(fā)環(huán)境贷揽，可以查看完整代碼示例 坯沪。
一個最簡單的React例子如下:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
它渲染了一個 "Hello, world!" 的標(biāo)題。
