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

0
25062
Добавить в избранное

Сегодня мы объясняем React для новичков – куда нажать, где посмотреть, как применять библиотеки и ReactDOM, используя при этом чистый JavaScript.

Сначала давайте подключим все необходимые библиотеки и компоненты 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 браузера.

Объясняем React на примере метода render

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

react methods-2

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

render method

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

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

hello react

Повторное использование в React

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

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

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

Оригинал

Другие материалы по теме:

Интересуетесь фронтендом?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




Добавить комментарий