React Semantics

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

    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 CLI

    Babel comes with a CLI tool, called , that can be used to compile files from the command line.

    Component Configuration Options (a.k.a, “Component Specifications”)

    The configuration arguments passed (as an object) to the React.createClass() function resulting in an instance of a React component.

    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, , componentWillMount). These methods are executed at specific points in a component’s existence.

    Document Object Model (a.k.a., DOM)

    “The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document as a tree. The DOM defines methods that allow access to the tree, so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects, possessing various properties and methods. Nodes can also have event handlers attached to them, and once an event is triggered, the event handlers get executed. Essentially, it connects web pages to scripts or programming languages.” -

    ES5

    The 5th edition of the ECMAScript standard. The was finalized in June 2011.

    ES6/ES 2015

    ECMAScript 2016 (a.k.a, ES7)

    The 7th edition of the ECMAScript standard. The ECMAScript 7th edition was finalized in June 2016.

    ES*

    Used to represent the current version of JavaScript as well as potential future versions that can written today using tools like Babel. When you see “ES*” it more than likely means you’ll find uses of ES5, ES6, and ES7 together.

    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.

    Node.js

    is an open-source, cross-platform runtime environment for writing JavaScript. The runtime environment interprets JavaScript using Google’s V8 JavaScript engine.

    npm

    npm is the package manager for JavaScript born from the Node.js community.

    React Attributes/Props

    In one sense you can think of props as the configuration options for React nodes and in another sense you can think of them as HTML attributes.

    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. A few special props have side effects (e.g., key, , and )

    React

    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.

    React Element Nodes (a.k.a., ReactElement)

    An HTML or custom HTML element 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 Node Factories

    A function that generates a React element node with a particular type property.

    React Stateless Function Component

    When a component is purely a result of props alone, no state, the component can be written as a pure function avoiding the need to create a React component instance.

    React Text Nodes (a.k.a., ReactText)

    A text node representation in the Virtual DOM created using .

    Virtual 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