React是一個靈活的可以用於各種不同項目的框架,你可以用它來寫新應用,你也可以逐步將它引進已有的代碼庫而不用重寫整個項目。
試用React
如果你想玩一玩React,那么就去CodePen上試一試。嘗試一下Hello World的React例子。不需要安裝任何東西,只是修改代碼然后查看結果。
如果你更喜歡在本地編輯,那么你也可以下載此文件,修改它,然后在本地用瀏覽器打開。但是它會做一個很慢的運行時代碼轉換,所以不要像這樣在產品中使用。
創建一個單頁應用
創建React應用這個項目是一個最好的方式去學習如何創建一個新的單頁應用。它設置好了開發環境所以你可以使用最新的js特性,它提供了很好的開發體驗,最優化你的應用產品。
npm install -g create-react-app create-react-app hello-world cd hello-world npm start
創建React應用不需要處理后台邏輯或者數據庫,它只需要建立一個前端的創建管線,所以你可以和各種不同的后台語言配合。它在底層使用了webpack,Babel和ESLint等組件,並為你配置了它們。
添加React到已存在的應用
想要使用React你不需要重寫你的應用。
我們建議添加React到應用中的一個小模塊里,例如一個獨立的小部件,那樣你會發現在你的用例下它可以工作得很好。
雖然React不強制需要一個創建管線,但是建議創建一個那樣你可以提高效率。一個最新的創建管線一般包括以下幾點:
- 一個包管理器,例如Yarn或者npm。它們可以讓你利用大量的第三方包,然后很方便地安裝和升級。
- 一個打包器,例如webpack或者Browserify。它們讓你在開發的時候寫模塊化的代碼然后在完成之后打包集合成更小的包來優化載入時間。
- 一個編譯器,例如Babel。它能夠讓你使用js最新特效,而且兼容所有瀏覽器。
安裝React
建議使用yarn或者npm包管理器來管理前端依賴的包。如果你沒用過包管理器,那個到Tarn文檔這個網站去學習相關知識。
yarn init
yarn add react react-dom
使用npm安裝,運行以下命令:
npm init
npm install --save react react-dom
Yarn和npm都是從npm registry下載依賴包。
建議使用Babel來支持ES6和JS語法。ES6擁有js最新的特性,讓開發更加簡便,JSX是js語言的擴展,很好的兼容React。
Babel安裝操作指南講解了如何在各種不同的環境配置Babel。確保你已經安裝了babel-parset-react和babel-preset-es2015並且讓他們在Babel的配置項里正常工作。
使用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') );
這段代碼渲染了一個DOM元素插入了id名為root的元素里,所以你需要在你的頁面里含有<div id="root"></div>。
同樣的,你可以渲染一個React組件到一個DOM元素里通過引用其他js UI庫。
開發和生產版本
一般默認情況下,React有很多有用的警告。這些警告在開發時有很大的幫助。但是,如果在生產環境下,它會讓程序臃腫變慢,所以當你發布應用的時候確保使用生產版本。
創建React App
如果你使用Create React App項目,npm run build將會在build文件夾下創建你的應用。
webpack
通過這個指南可以了解DefinePlugin和UglifyJsPlugin插件在生產環境webpack設置中的作用。
Browserify
把NODE_ENV環境變量設置成production運行Browserify,使用UglifyJS將只在開發中使用的代碼剝離出來。
Rollup
使用rollup-plugin-replace和rollup-plugin-commonjs插件來去除開發環境代碼。
使用CDN
如果不想使用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>
以上是開發環境適用的版本,下面是壓縮優化過的,適用於生產環境:
<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包同樣可用。