Сначала давайте подключим все необходимые библиотеки и компоненты React. Если что-то не понятно – на этом же ресурсе есть прекрасная документация в разделе “Docs”.
Теперь создадим файл index.html и наполним его кодом:
Далее откройте этот файл в вашем любимом браузере и разверните консоль. Введите “Re”. Можно увидеть, что глобальные переменные React и ReactDOM теперь нам доступны.
Давайте посмотрим, что нам предлагает React и ReactDOM.
Тут представлено много различных типов и методов, но пока что мы будем использовать метод createElement. Вы заметили, что createElement доступен в React Object?
Метод нам сообщает, что ему нужно передать три аргумента:
- type: имеется в виду тип HTML-элемента (h1, h2, p, div и т. д.);
- props: свойства этого элемента;
- children: тут описывается plain text или дочерние элементы.
Теперь рассмотрим метод createElement на практике.
Создадим JavaScript-файл с именем script2.js с таким кодом:
Эта строка просто создает элемент “p” с текстом приветствия “hello react”. Теперь мы умеем создавать элемент “p” без использования HTML.
Если вы запустите js-файл, в браузере ничего не отобразится. Это происходит потому, что мы не подключены к dom браузера.
Еще раз обратимся к методам, которые нам предоставляет ReactDOM:
Среди всех методов есть доступный нам метод render:
Данный метод рисует элемент в указанном container и возвращает ссылку на компонент или null для компонентов без состояния. Немного практики по этому методу:
Теперь вы должны увидеть в браузере следующее:
Мы объясняем React новичкам, а этот раздел у них вызывает много вопросов.
Давайте попробуем немного модифицировать аргументы метода createElement и посмотрим, что произойдет:
В вашем браузере должно появиться “hello react” шесть раз. Вот так просто можно организовать повторное выполнение.