（React啓蒙系列）學習React前須要理解的名詞

學習React前須要理解的名詞

這是React啓蒙系列的第二篇，本篇內容比較簡單，用於闡述React初學者容易迷惑的一些名詞。若是你們對本系列感興趣，歡迎在GitBook上訂閱。

在正式開始講解React的機制以前，先以後學習React過程當中會遇到的一些名詞作一些講解，是很是有必要的，這樣能讓後續學習少些迷惑。（原文中這些名詞以字母表順序組織，因此存在前面的名詞解釋涉及到後面的名詞時，可能須要您跳轉着閱讀。不過這樣來回的閱讀，雖然麻煩，可是能讓記憶更加深入，因此譯文仍以字母順序表示。）

Babel

Babel是一個轉換JavaScript ES*（JS2015，2016，2017）語句爲ES5語句的工具。使用Babel，能夠放心的在React中使用JavaScript可能還未被瀏覽器徹底兼容的語法了。在React中，Babel也會轉換JSX爲ES5語句。

Babel CLI

Babel命令行工具，安裝後能夠經過命令行轉換代碼了。

Component Configuration Options

傳遞給React.createClass()的參數，是一個數組，裏面包含一系列函數，使用此函數後會獲得一個React Component的實例。

Component Life Circle Methods(組件生命週期函數)

組件中的一組事件，從語義上也能夠看出其會在組件存在的不一樣階段被執行。

(i.e., componentWillUnmount, componentDidUpdate, componentWillUpdate,shouldComponentUpdate, componentWillReceiveProps, componentDidMount,componentWillMount).

Document Object Model（DOM）文檔對象模型

文檔對象模型 (DOM) 是 HTML 和 XML 文檔的編程接口。它給文檔（結構樹）提供了一個結構化的表述而且定義了一種方式—程序能夠對結構樹進行訪問，以改變文檔的結構，樣式和內容。 DOM 提供了一種表述形式— 將文檔做爲一個結構化的節點組以及包含屬性和方法的對象。從本質上說，它將 web 頁面和腳本或編程語言鏈接起來了。MDN

ES

ES5

ECMAScript 標準的第5版，ECMA5.1在2011年6月推出。

ES6/ES 2015

ECMAScript 標準的第6版，於ECMA5.1在2015年6月推出。

ES7/ES 2016

將會在2016年推出的JavaScript語義的新版本

ES*

這個名詞用於表明，如今以及未來的JavaScript標準，當你看到這個詞的時候，你可能發現ES5，ES6甚至ES7的語法在混合使用。

JSX

JSX是一種可選的類XML的JavaScript的語法拓展，它用於在JavaScript文件中定義類Html樹形結構。JSX必須被裝換爲JavaScript語句才能被瀏覽器識別渲染，Babel是React推薦的轉換工具。

Node.js

Node.js是一個開源，跨平臺的JavaScript運行環境（想一想Java）,這個運行環境依託於Google V8 JS引擎解釋JavaScript語句

npm

node.js社區提供的JavaScript包管理器

React Attributes/Props

props能夠用兩種理解，一是能夠被當作構建React節點的參數，二是能夠被理解爲HTML標籤的屬性。具體以下

• 當props與一個已知HTML屬性相同時，當他被加入最終DOM中的HTML元素時，它就是該元素的屬性；

• 當被傳入React.createElement()中當作參數時，也能夠是React node實例裏的各類值。

• 一些特殊的用法，好比說key、ref、dangerouslySetInnerHtml

React Component(React 組件)

通常組件

當調用React.createClass()(ES6中爲React.Component)時，一個React組件會被建立。這個方法以一個對象做爲參數（對象中包含多個函數），用於建立具體的React組件，最多見的函數是render(),這個方法用於返回React nodes。一個React組件中可包含多個React節點或React組件。

React Stateless Function Component（無狀態函數組件）

若是一個組件裏只須要props而不須要state,那麼這個組件能夠由純函數方式建立，而不須要構建一個React組件的實例。

var MyComponent = function(props){

 return <div>Hello {props.name}</div>;

};

ReactDOM.render(<MyComponent name="doug" />, app);

React nodes

React nodes

用於表現Virtual DOM的類HTML元素節點，React中最基礎的對象類型，可由React.createElement('div')建立,用以表明DOM節點和子DOM節點，它具備輕量的，無狀態，不可變的特色。

React Node Factories

是一個構建特色類型的React nodes的方法（<div>、<li>等等）

React Text節點

Virtual DOM中的文本節點能夠由React.createElement('div',null,'a text node')建立。

React

React是一個開源的JavaScript框架，用它能夠構建清晰，高效，具備彈性的用戶界面。

Virtual DOM

由React節點和組件構建的JavaScript樹形結構，用於高效的重構HTML中的真實DOM。

Webpack

是一個組件管理和打包的工具，它能夠很好的處理組件之間的依賴關係，而且能夠產生靜態的文件來表明這些組件。

連接

原文
本文在Gitbook上的連接