Babel, is a JavaScript compiler that converts latest JavaScript like ES6, ES7 into plain old ES5 JavaScript that most browsers understand.

React context helps you to pass data using the tree of react components. It helps you to share data globally between various react components.

A dispatcher is a central hub of app where you will receive actions and broadcast payload to registered callbacks.

Facebook widely uses flux architecture concept for developing client-side web applications. It is not a framework or a library. It is simply a new kind of architecture that complements React and the concept of Unidirectional Data Flow.

• JSX stands for JavaScript XML.
• JSX allows us to write HTML in React.
• JSX makes it easier to write and add HTML in React.

Coding JSX

• JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() and/or appendChild() methods.
• JSX converts HTML tags into react elements.

You are not required to use JSX, but JSX makes it easier to write React applications.

Expressions in JSX

With JSX you can write expressions inside curly braces { }.

The expression can be a React variable, or property, or any other valid JavaScript expression. JSX will execute the expression and return the result.

Inserting a Large Block of HTML

To write HTML on multiple lines, put the HTML inside parentheses.

One Top Level Element

The HTML code must be wrapped in ONE top level element.

So if you like to write two paragraphs, you must put them inside a parent element, like a div element.

JSX will throw an error if the HTML is not correct, or if the HTML misses a parent element.

Alternatively, you can use a fragment to wrap multiple lines. This will prevent unnecessarily adding extra nodes to the DOM.

A fragment looks like an empty HTML tag: <></>.

Elements Must be Closed

JSX follows XML rules, and therefore HTML elements must be properly closed.

JSX will throw an error if the HTML is not properly closed.

Attribute class = className

The class attribute is a much used attribute in HTML, but since JSX is rendered as JavaScript, and the class keyword is a reserved word in JavaScript, you are not allowed to use it in JSX.

Use attribute className instead.

JSX solved this by using className instead. When JSX is rendered, it translates className attributes into class attributes.

Conditions - if statements

React supports if statements, but not inside JSX.

To be able to use conditional statements in JSX, you should put the if statements outside of the JSX, or you could use a ternary expression instead.

A callback function should be called when setState has finished, and the component is retendered. As the setState is asynchronous, which is why it takes in a second callback function.

It is an object which decides how a specific component renders and how it behaves. The state stores the information which can be changed over the lifetime of a React component.

React is a JavaScript library that makes building user interfaces easy. It was developed by Facebook.

Redux has a feature called 'Store' which allow you to save the application's entire State at one place. Therefore all it's component's State are stored in the Store so that you will get regular updates directly from Store. The single state tree helps you to keep track of changes over time and debug inspect the application.

Empty tags are used in React for declaring fragments.

Webpack in basically is a module builder. It is mainly runs during the development process.

The virtual DOM (VDOM) is a programming concept where an ideal, or virtual, representation of a UI is kept in memory and synced with the real DOM by a library such as ReactDOM. This process is called reconciliation.

This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.

Since virtual DOM is more of a pattern than a specific technology, people sometimes say it to mean different things. In React world, the term virtual DOM is usually associated with React elements since they are the objects representing the user interface. React, however, also uses internal objects called fibers to hold additional information about the component tree. They may also be considered a part of virtual DOM implementation in React.