安裝 · React中文

# 安裝 React 是靈活的，可以廣泛的應用在項目中。你可以創建新的應用，但是也可以逐步引入它到一個已有的代碼庫中，而不是重寫。 ## 嘗試 React 如果你只是感興趣嘗試一下 React，可以使用 CodePen。從這個[ Hello World 示例代碼](http://codepen.io/gaearon/pen/rrpgNB?editors=0010) 開始。并不需要安裝什么；只需要修改代碼并查看它們如何工作。如果你希望使用自己的文本編輯器，也可以下載這個[ HTML 文件](https://facebook.github.io/react/downloads/single-file-example.html)，編輯它，并從一個本地文件系統中用瀏覽器打開它。這會進行一個緩慢的運行時代碼轉換，所以不要在產品中使用它。 ## 創建一個單頁應用 [Create React App](http://github.com/facebookincubator/create-react-app) 是最好的方式來構建一個新的 React 單頁應用。它設置你的開發環境，所以你可以使用最新的 JavaScript 特性，提供一個更好的開發體驗，并對產品化來優化你的 app 。 ~~~ npm install -g create-react-app create-react-app hello-world cd hello-world npm start ~~~ 創建 React App 并不處理后臺邏輯或者數據庫；它只會創建一個前端流水線，所以你可以配合任何你想要的后臺技術使用。它在底層使用了 [webpack](https://webpack.js.org/)、[Babel](http://babeljs.io/) 和 [ESLint](http://eslint.org/)，但是會為你配置它們。 ## 增加 React 到已有應用開始使用 React，你并不需要重寫已有應用。我們建議添加 React 到應用中的一個小部分，比如一個獨立的 widget，所以你可以看到它在你的用例中是否正常運行。雖然 React 可以不經過一個構建流水線來使用（[參考](https://facebook.github.io/react/docs/react-without-es6.html)），但是我們建議設置它可以更具生產力。一個典型的現代構建流水線包括：一個包管理器，比如 [Yarn](https://yarnpkg.com/) 或者 [npm](https://www.npmjs.com/) 。它可以使你從一個廣泛的第三方包的生態系統中獲益，而且簡便的安裝或者更新它們。一個打包機，比如 [webpack](https://webpack.github.io/) 或者 [Browserify](http://browserify.org/) 。它使你編寫模塊化代碼，并包裝進小的包來優化加載時間。一個編譯器，比如 [Babel](http://babeljs.io/) 。它使你在老舊的瀏覽器中仍然可以編寫現代的 JavaScript 代碼。 ### 安裝 React 我們建議使用 Yarn 或者 npm 來管理前端依賴。如果你剛接觸包管理器，[Yarn 文檔](https://yarnpkg.com/en/docs/getting-started)是一個了解它的好去處。使用 Yarn 安裝 React ，運行： ~~~ yarn add react react-dom ~~~ 使用 npm 安裝 React，運行： ~~~ npm install --save react react-dom ~~~ Yarn 和 npm 都從 [npm 倉庫](http://npmjs.com/)下載包。 ### 啟用 ES6 和 JSX 我們建議使用 Babel 來在 React 中使用 ES6 和 JSX 的 JavaScript 語法。 ES6 是一系列的現代 JavaScript 特性，簡化開發；JSX是一個 JavaScript 語言的擴展，和 React 配合默契。 [Babel 設置說明](https://babeljs.io/docs/setup/)解釋了在許多不同的構建環境中如何配置 Babel。確保你安裝了[ babel-preset-react](http://babeljs.io/docs/plugins/preset-react/#basic-setup-with-the-cli-) 和 [babel-preset-es2015](http://babeljs.io/docs/plugins/preset-es2015/#basic-setup-with-the-cli-)，并在你的 [.babelrc 配置](http://babeljs.io/docs/usage/babelrc/)中啟用它們。 ### 使用 ES6 和 JSX 的 Hello World 建議使用一個打包機如 webpack 或者 Browserify，你可以編寫模塊化的代碼并包裝進小的包中來優化加載事件。最小化的 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>` 。同樣，你可以渲染一個 React 組件到現有使用其它 JavaScript UI 庫編寫的 app 中的一個 DOM 元素中。 ### 開發版和產品版默認，React 包括了許多有用的警告信息。這些警告信息在開發中非常有用。然而，它們會拖慢 React，所以當你部署 app 的時候應該確保使用產品化版本。 **創建 React App** 如果你使用 [ Create React App](https://github.com/facebookincubator/create-react-app)， `npm run build` 將創建一個優化構建的應用，保存到 build 目錄中。 **webpack** 包括了 DefinePlugin 和 UglifyJsPlugin 到你的產品 Webpack 配置中，如[指南](https://webpack.js.org/guides/production-build/)中所描述的。 **Browserify** 使用 NODE_ENV 環境變量設置為 production 來運行 Browserify，并使用 [UglifyJs](https://github.com/mishoo/UglifyJS) 作為最后的構建步驟，然后開發相關代碼會被剝去。 ### 使用 CDN 如果你不想使用 npm 來管理客戶端包， react 和 react-dom npm 包也提供了單獨文件的版本，在 dist 目錄中，它們托管在一個 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> ~~~ 上面的版本只用于開發，并不適合產品化。壓縮優化的產品化版本也是可用的： ~~~ <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 即可。如果你使用瀏覽器，React 通過 react 包使用。