React. Реакт. Тестовая задача 001. Привет, React!




Этот код выведет заголовок "Привет, React!".

Разберёмся, что здесь происходит:

Любое React-приложение начинается с создания корня. Для этого мы используем метод ReactDOM.createRoot и первым аргументом передаём ему указатель на DOM-элемент, в котором будем отображать интерфейс.

После этого уже можно вызвать метод корня render. Он принимает один аргумент - разметку, которую мы хотим поместить в корневой узел, обрабатывает её и отрисовывает результат в DOM.

Более детально разберём аргумент метода render. Это вызов ещё одной функции - React.createElement.

Она вызывается с тремя аргументами:
  1. Названием результирующего HTML-тега.
  2. Дополнительными свойствами, которые прикреплены к этому тегу. Это может быть CSS-идентификатор class или id либо другие свойства.
  3. Содержимым, которое попадёт в HTML-тег. В данном случае это строка 'Привет, React!'. Содержимым может быть не только текст, но и другие элементы.


После третьего аргумента могут идти и другие. Все они будут добавлены друг за другом внутрь создаваемого элемента, как если бы мы использовали метод appendChild.