Объясняем React так доходчиво, что поймет даже ребенок

Сначала давайте подключим все необходимые библиотеки и компоненты React. Если что-то не понятно – на этом же ресурсе есть прекрасная документация в разделе “Docs”.

Теперь создадим файл index.html и наполним его кодом:

Далее откройте этот файл в вашем любимом браузере и разверните консоль. Введите “Re”. Можно увидеть, что глобальные переменные React и ReactDOM теперь нам доступны.

Объясняем React

Давайте посмотрим, что нам предлагает React и ReactDOM.

react methods

Тут представлено много различных типов и методов, но пока что мы будем использовать метод createElement. Вы заметили, что createElement доступен в React Object?

create element

Метод нам сообщает, что ему нужно передать три аргумента:

  • type: имеется в виду тип HTML-элемента (h1, h2, p, div и т. д.);
  • props: свойства этого элемента;
  • children: тут описывается plain text или дочерние элементы.

Теперь рассмотрим метод createElement на практике.

Создадим JavaScript-файл с именем script2.js с таким кодом:

Эта строка просто создает элемент “p” с текстом приветствия “hello react”. Теперь мы умеем создавать элемент “p” без использования HTML.

Если вы запустите js-файл, в браузере ничего не отобразится. Это происходит потому, что мы не подключены к dom браузера.

Еще раз обратимся к методам, которые нам предоставляет ReactDOM:

react methods-2

Среди всех методов есть доступный нам метод render:

render method

Данный метод рисует элемент в указанном container и возвращает ссылку на компонент или null для компонентов без состояния. Немного практики по этому методу:

Теперь вы должны увидеть в браузере следующее:

hello react

Мы объясняем React новичкам, а этот раздел у них вызывает много вопросов.

Давайте попробуем немного модифицировать аргументы метода createElement и посмотрим, что произойдет:

В вашем браузере должно появиться “hello react” шесть раз. Вот так просто можно организовать повторное выполнение.