（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上的连接