Skip to content

Commit

Permalink
Minor changes
Browse files Browse the repository at this point in the history
Fix some typos. Add links to the primary web site for various defined
terms. Re-order the terms list so the definition for React appears
before other React-related definitions
  • Loading branch information
Bernard Farrell committed Jan 12, 2017
1 parent 8f46304 commit 5880352
Showing 1 changed file with 23 additions and 23 deletions.
46 changes: 23 additions & 23 deletions react-semantics.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
# React Semantics

Before I enlighten anyone with the mechanics of React I'd first like to define a few terms so as to grease the learning process.
Before I enlighten you with the mechanics of React I'd first like to define a few terms so as to grease the learning process.

Below I list the most common terms, and their definitions, used when talking about React.

#### Babel
Babel transforms JavaScript ES\* (i.e., JS 2016, 2016, 2017) to ES5. Babel is the tool of choice from the React team for writing future ES* code and transforming JSX to ES5 code.
[Babel](https://babeljs.io/) transforms JavaScript ES\* (i.e., JS 2016, 2016, 2017) to ES5. Babel is the tool of choice from the React team for writing future ES* code and transforming JSX to ES5 code.

***

#### Babel CLI
Babel comes with a CLI tool, called Babel CLI, that can be used to compile files from the command line.
Babel comes with a CLI tool, called [Babel CLI](https://babeljs.io/docs/usage/cli/), that can be used to compile files from the command line.

***

Expand All @@ -22,7 +22,7 @@ The configuration arguments passed (as an object) to the `React.createClass()` f

#### Component Life Cycle Methods

A sub group of component events, semantically separated from the other component configuration options (i.e., `componentWillUnmount`, `componentDidUpdate`, `componentWillUpdate`, `shouldComponentUpdate`, `componentWillReceiveProps`, `componentDidMount`, `componentWillMount`). These various methods are executed at specific points in a component's existences.
A sub group of component events, semantically separated from the other component configuration options (i.e., `componentWillUnmount`, `componentDidUpdate`, `componentWillUpdate`, `shouldComponentUpdate`, `componentWillReceiveProps`, `componentDidMount`, `componentWillMount`). These methods are executed at specific points in a component's existence.

***

Expand All @@ -33,17 +33,17 @@ A sub group of component events, semantically separated from the other component
***

#### ES5
The 5th edition of the ECMAScript standard. The ECMAScript 5.1 edition was finalized on June 2011.
The 5th edition of the ECMAScript standard. The [ECMAScript 5.1 edition](https://www.ecma-international.org/ecma-262/5.1/) was finalized in June 2011.

***

#### ES6/ES 2015
The 6th edition of the ECMAScript standard. A.k.a, JavaScript 2015. The ECMAScript 6th edition was finalized on June 2015.
The 6th edition of the ECMAScript standard. A.k.a, JavaScript 2015 or ECMAScript 2015. The [ECMAScript 6th edition](http://www.ecma-international.org/ecma-262/6.0/index.html) was finalized in June 2015.

***

#### ECMAScript 2016 (a.k.a, ES7)
Name of the specification that will provide updates to the JavaScript language in 2016.
The 7th edition of the ECMAScript standard. The [ECMAScript 7th edition](http://www.ecma-international.org/ecma-262/7.0/index.html) was finalized in June 2016.

***

Expand All @@ -53,17 +53,17 @@ Used to represent the current version of JavaScript as well as potential future
***

#### JSX
JSX is an optional XML-like syntax extension to ECMAScript that can be used to define an HTML-like tree structure in a JavaScript file. The JSX expressions in a JavaScript file must be transformed to JavaScript syntax before a JavaScript engine can parse the file. Babel is typically used, and recommended for transforming JSX expressions.
[JSX](https://jsx.github.io/) is an optional XML-like syntax extension to ECMAScript that can be used to define an HTML-like tree structure in a JavaScript file. The JSX expressions in a JavaScript file must be transformed to JavaScript syntax before a JavaScript engine can parse the file. Babel is typically used and recommended for transforming JSX expressions.

***

#### Node.js
An open-source, cross-platform runtime environment for writing JavaScript. The runtime environment interprets JavaScript using Google's V8 JavaScript engine.
[Node.js](https://nodejs.org/) is an open-source, cross-platform runtime environment for writing JavaScript. The runtime environment interprets JavaScript using [Google's V8 JavaScript engine](https://developers.google.com/v8/).

***

#### npm
The package manager for JavaScript born from the Node.js community.
[npm](https://www.npmjs.com/) is the package manager for JavaScript born from the Node.js community.

***

Expand All @@ -74,11 +74,16 @@ In one sense you can think of props as the configuration options for React nodes
Props take on several roles:

1. Props can become HTML attributes. If a prop matches a known HTML attribute then it will be added to the final HTML element in the DOM.
2. Props passed to `createElement()` become values stored in a `prop` object as an instance property of `React.createElement()` instances (i.e., `[INSTANCE].props.[NAME OF PROP]`). Props by enlarge are used to input values into components.
2. Props passed to `createElement()` become values stored in a `prop` object as an instance property of `React.createElement()` instances (i.e., `[INSTANCE].props.[NAME OF PROP]`). Props by and large are used to input values into components.
3. A few special props have side effects (e.g., [`key`](https://facebook.github.io/react/docs/multiple-components.html#dynamic-children), [`ref`](https://facebook.github.io/react/docs/more-about-refs.html), and [`dangerouslySetInnerHTML`](https://facebook.github.io/react/tips/dangerously-set-inner-html.html))

***

#### React
[React](https://facebook.github.io/react/) is an open source JavaScript library for writing declarative, efficient, and flexible user interfaces.

***

#### React Component

A React component is created by calling `React.createClass()` (or, `React.Component` if using ES6 classes). This function takes an object of options that is used to configure and create a React component. The most common configuration option is the `render` function which returns React nodes. Thus, you can think of a React component as an abstraction containing one or more React nodes/components.
Expand All @@ -91,6 +96,11 @@ An HTML or custom HTML element node representation in the Virtual DOM created us

***

#### React Nodes
React nodes (i.e., element and text nodes) are the primary object type in React and can be created using `React.createElement('div');`. In other words React nodes are objects that represent DOM nodes and children DOM nodes. They are a light, stateless, immutable, virtual representation of a DOM node.

***

#### React Node Factories

A function that generates a React element node with a particular type property.
Expand All @@ -116,21 +126,11 @@ A text node representation in the Virtual DOM created using `React.createElement

***

#### React Nodes
React nodes (i.e., element and text nodes) are the primary object type in React and can be created using `React.createElement('div');`. In other words React nodes are objects that represent DOM nodes and children DOM nodes. They are a light, stateless, immutable, virtual representation of a DOM node.

***

#### React
An open source JavaScript library for writing declarative, efficient, and flexible user interfaces.

***

#### Virtual DOM
A JavaScript tree of React elements/components that is used for efficient re-rendering (i.e., diffing via JavaScript) of the browser DOM.
An in-memory JavaScript tree of React elements/components that is used for efficient re-rendering (i.e., diffing via JavaScript) of the browser DOM.

***

#### Webpack

A module loader and bundler that takes modules (.js, .css, .txt, etc.) with dependencies and generates static assets representing those modules.
[Webpack](https://webpack.github.io/) is a module loader and bundler that takes modules (.js, .css, .txt, etc.) with dependencies and generates static assets representing these modules.

0 comments on commit 5880352

Please sign in to comment.