資訊專欄INFORMATION COLUMN
摘要：文檔翻譯系列一安裝原文地址原文本系列是針對文檔進行的翻譯，因為自己在學習的時候，最開始通過看博客或者論壇等中文資料，有些內容是零零散散的接收，并沒有給自己帶來很好的效果，所以后來決定把文檔的原文從頭到尾看一遍。
React文檔翻譯系列（一）安裝
原文地址：原文
本系列是針對React文檔進行的翻譯，因為自己在學習react的時候，最開始通過看博客或者論壇等中文資料，有些內容是零零散散的接收，并沒有給自己帶來很好的效果，所以后來決定把文檔的原文從頭到尾看一遍。目前為止原文文檔也看的差不多了，自己的英文水平也有限，看的也是似懂非懂，但是卻比在博客或者其他途徑得來的零散的效果要好一些，而且原文文檔是最新的，而找到的中文資料都是其他人之前翻譯或者針對之前的文檔寫出來的一些解決方案，對更新后的內容并沒有進行更新，基于這樣的想法，自己也本著能夠更加深入的學習，所以決定對文檔進行一個大概的翻譯，第一次做這些事情，不知道自己能堅持多久，也不知道自己能翻譯到什么程度，錯誤之處還望多多指正，希望能夠堅持下去。廢話不多說，進入正題。
安裝React是靈活的，并且可以應用到各種各樣的項目中。你可以使用它創建一個新的項目，但是，你也可以在不用重新編寫的前提下，逐步的將它引入到現有的代碼庫中。
初嘗React如果你只是對React感興趣，你完全可以使用CodePen。嘗試這從這個Hello World示例開始吧。你不用安裝任何東西，只需要對代碼進行修改，然后看看它是否會起作用。
如果你更喜歡使用自己的文本編輯器，可以下載這個HTML文件，編輯它，然后在本地通過瀏覽器打開。它會執行一個緩慢的運行時代碼轉換，所以不要在生產環境使用它。
創建一個單頁面應用Create React App（譯者注：facebook提供的一個工具集）是開始創建React單頁應用最好的一種方式。它已經為你設置好了開發環境，這樣你就可以使用到最新的Javascript特性，提供一個良好的開發體驗，并且可以優化你的生產環境應用。
npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start
Create React App 不會處理后端邏輯或者是數據庫；它只是創建了一個前端構建管道，所以你可以使用它配合任何你想使用的后端。它的底層是使用Webpack，Babeland ESLint，但是已經為你配置好了。
在已有應用中加入React你不必為了開始使用React而重寫原來的應用。
我們推薦你將React添加到你應用的一小部分中，比如一個個人小部件，這樣你可以觀察一下是否它能在你的應用場景下良好的運行。
盡管React可以在沒有構建管道（build pipeline）的情況下使用，然而我們還是推薦將構建管道配置起來以便提高生產力。一個典型的現代構造管道包括下面幾部分：
一個包管理器，比如Yarn或者npm。它可以讓您利用龐大的第三方軟件包生態系統，輕松安裝或更新它們。
一個構建工具，比如Webpack或者[Browserify][]。它允許您編寫模塊化代碼并將其捆綁在一起成為小包以優化加載時間。
一個編譯器，比如Babel，它可以讓您編寫仍舊適用于舊版瀏覽器的現代JavaScript代碼。
安裝React我們推薦使用Yarn或者npm來管理前端依賴。如果你是包管理工具的新手，Yarn文檔是一個好的開始的地方。
使用Yarn安裝React，運行下面的命令：
yarn init
yarn add react react-dom
使用npm安裝React，運行下面的命令:
npm init
npm install --save react react-dom
Yarn和npm都是從npm registry下載所需要的包。
啟用ES6和JSX為了在你的Javascript代碼中使用ES6和JSX，我們推薦配合Babel使用React。ES6是一組可以使開發變得更簡單的現代化的JavaScript特性，JSX是對React的很好的JavaScript語言的擴展。
Babel設置說明解釋了如何在許多不同的構建環境中配置Babel。確保你已經安裝了babel-preset-react和babel-preset-es2015 并且已經在你的.babelrc 配置中啟用了他們，這樣就準備就緒了。
使用ES6和JSX的Hello World我們建議使用像webpack或Browserify這樣的構建器，以便您可以編寫模塊化代碼，并將其打包在一起成為小包，以優化加載時間。
最小的React例子是像下面這樣：
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
Hello, world!
,
document.getElementById("root")
);
這段代碼會渲染到id為root的DOM元素中，所以在你的HTML文件中的某處需要。
類似的，你也可以在使用其他Javascript UI庫所寫的現有應用中的某處，將一個React組件渲染到一個DOM元素上。
開發環境版和生產環境版默認的，React包括了許多有用的警告。這些警告在開發環境中是非常有用的。然而，他們會讓React變得很大并且很慢，所以要確保在部署應用的時候要使用生產環境版。
Brunch
想要使用Brunch創建一個優化的生產構建，只需要在構建命令中添加-p 標識。更多細節參看Brunch docs。
Browserify
運行Browserify，將 NODE_ENV 環境變量設置成 production，使用UglifyJS作為構建的最后一步，這樣只在開發環境生效的代碼就會被剝離出來。
Create React App
如果使用Create React App，npm run build 會在應用的 build文件夾下面生成一份優化后的代碼。
Rollup
使用rollup-plugin-replace和rollup-plugin-commonjs一起（按照順序）移除開發專用的代碼。這里有完整的設置案例。
Webpack
像這個指南描述的這樣將DefinePlugin和UglifyJsPlugin包含到生產環境的Webpack配置中。
使用CDN如果不想使用npm管理客戶端包， react和 react-dom的npm包在dist文件夾下面也提供了單個文件的分發，他們托管在CDN上：
上面的版本只適合開發環境，不適合生產環境。壓縮并優化后的React可用生產版本在：
如果想加載特定版本的react 和 react-dom，可以將15替換為想加載版本的版本號。
如果使用Bower，React可以通過react包獲取到。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82280.html
摘要：文檔翻譯系列二開始最簡單的方式就是在上使用示例。最小的例子如下它會在頁面上渲染一個標題。接下來的幾部分會逐步的介紹如何使用。我們會查驗應用的構建塊元素和組件。在例子中也使用了一些的語法?？梢允褂迷诰€轉換器查看的代碼編譯。 React文檔翻譯系列（二）Hello World Hello World 開始React最簡單的方式就是在CodePen上使用Hello World示例。無需安裝任...
摘要：官方文檔中文翻譯構建用戶界面的庫。官方文檔建議學習時以官方文檔為準，中文翻譯或者第三方作者的教程可以幫助你理清思路會用到的重要知識點我也會進行簡明的解釋，如遇到錯誤或者不理解的內容，歡迎實時指出。 前言 前面提到前端大統一的概念，如果感興趣，歡迎說說自己的看法，點擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個小建議： 如果對Weex App感興趣，應該選擇vue框架； 如果...
摘要：官方文檔中文翻譯構建用戶界面的庫。官方文檔建議學習時以官方文檔為準，中文翻譯或者第三方作者的教程可以幫助你理清思路會用到的重要知識點我也會進行簡明的解釋，如遇到錯誤或者不理解的內容，歡迎實時指出。 前言 前面提到前端大統一的概念，如果感興趣，歡迎說說自己的看法，點擊前往。Web前端框架層出不窮，不可能面面俱到，這里給個小建議： 如果對Weex App感興趣，應該選擇vue框架； 如果...
摘要：文檔翻譯系列三簡介先來看一下下面的變量聲明這種有趣的標簽語法既不是字符串也不是。這種形式被稱作，他是的一種擴展語法。為便于閱讀，我們將分隔成多行。表示對象將編譯成調用。我們建議您為選擇的編輯器搜索語法方案，以便和代碼都能夠被正確高亮的顯示。 React文檔翻譯系列（三）JSX簡介 先來看一下下面的變量聲明： const element = Hello world! 這種有趣的標簽語法既...
閱讀 834·2019-08-30 14:05
閱讀 1724·2019-08-30 11:08
閱讀 3226·2019-08-29 15:41
閱讀 3602·2019-08-23 18:31
閱讀 1523·2019-08-23 18:29
閱讀 557·2019-08-23 14:51
閱讀 2115·2019-08-23 13:53
閱讀 2135·2019-08-23 13:02
