What is JSX (Javascript XML)

JSX is the markup used when building React applications.

JSX is another way to write Javascript, even it looks like HTML. A transpile step was added to transform it in Javascript because browser don’t understand JSX natively. Ultimately, the Javascript code becomes HTML.

It can be mixed with Javascript. Code written within curly braces is interpreted as literal Javascript.

Basic concepts of React.js

React is a Javascript library for building user interfaces. It is considered the « V » from the MVC pattern.
React was created to solve one problem: building large applications with data that changes over time.
A React application is build in terms of components. Javascript classes are used when declaring React components.
A component must extend the React.Component class and it must have a render method.
The Virtual DOM is an in-memory representation of the real DOM. It is generated by the components before any changes are made to the page. It happens between the render function being called and displaying of elements. . So, there are two steps:

  1. The render method of the component returns some markup but it is not the final HTML yet. It is an in-memory representation.
  2. The HTML is displayed in the browser.

This makes react faster. It is called diffing and it allows React to minimize changes as a result of user actions.

ReactDOM.Render method is called to render components to a web page.