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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>sao</title>
</head>
<body>
<div class="connect">
</div>
</body>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">
</script>
<script src="./script2.js"></script>
</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 или дочерние элементы.

Например:

<div>
<h1>Hi React</h1>
</div>

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

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

let p=React.createElement('p',null,'hello react');

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

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

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

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

react methods-2

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

render method

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

 ReactDOM.render(p,document.querySelector('.connect'))

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

hello react

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

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

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

var p=React.createElement('p',null,'hello react');

var content = React.createElement('div',null,p,p,p,p,p,p);

ReactDOM.render(content,document.querySelector('.connect'))

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

Оригинал

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

МЕРОПРИЯТИЯ

Комментарии

ВАКАНСИИ

Добавить вакансию

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ