React – это библиотека JavaScript, разработанная для внешнего интерфейса. Это полная смесь HTML, CSS и JS.

Чтобы создавать проекты React, следуйте инструкциям, указанным в Официальном документе React.

React популярен, потому что он поставляется со встроенным виртуальным DOM, который меньше загружает браузер, а также прост в освоении. React использует JSX (JavaScript XML) для создания компонентов.

Чтобы использовать React и его виртуальную модель DOM, необходимо импортировать модули следующим образом:

import React from ‘react’;
import ReactDOM from 'react-dom';

Чтобы визуализировать что-либо с помощью ReactDOM:

ReactDOM.render(<div><h1>Hello World</h1><p>Content</p></div>,
                document.getElementById("root"));

ПРИМЕЧАНИЕ: в функции рендеринга разрешен только один HTML-тег. Поэтому два тега были включены в один родительский тег div.

Чтобы добавить синтаксис JavaScript в теги HTML в методе render(), который использует JSX, используются { }. Пример:

let content = "Hello, World";
...
ReactDOM.render(<h1>{content}</h1>,                           document.getElementById("root"));

ПРИМЕЧАНИЕ.внутри фигурных скобок можно использовать только выражения. Заявление нельзя добавить внутрь render(). Поэтому проверка условий и итерации не могут быть выполнены непосредственно внутри функции рендеринга.

Пример проекта React можно найти здесь.