1 added
2 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Взгляните на пример, который будет разбираться в течение урока:</p>
1
<p>Взгляните на пример, который будет разбираться в течение урока:</p>
2
-
<p><a>https://codepen.io/hexlet/pen/xLaegY/</a></p>
3
<p>Центральное понятие в React - компонент. Более того, это единственная сущность, которую он содержит. Вся остальная функциональность построена вокруг компонентов.</p>
2
<p>Центральное понятие в React - компонент. Более того, это единственная сущность, которую он содержит. Вся остальная функциональность построена вокруг компонентов.</p>
4
<p>В примере выше создан компонент, который добавляет <div>Hello!</div> в DOM страницы.</p>
3
<p>В примере выше создан компонент, который добавляет <div>Hello!</div> в DOM страницы.</p>
5
<p>Вот как выглядит получившийся html:</p>
4
<p>Вот как выглядит получившийся html:</p>
6
<h2>Импорты</h2>
5
<h2>Импорты</h2>
7
<p>CodePen импортирует React автоматически (его нужно указать в подключаемых библиотеках), но в своём коде импорты пропускать нельзя:</p>
6
<p>CodePen импортирует React автоматически (его нужно указать в подключаемых библиотеках), но в своём коде импорты пропускать нельзя:</p>
8
<p>Из кода и импортов видно, что для работы с React нужно две библиотеки: сам React и ReactDOM. Причина наличия двух зависимостей достаточно проста. Сама библиотека React не связана с DOM напрямую и используется не только в браузере. Поэтому отрисовка конкретно для DOM вынесена в отдельный пакет ReactDOM.</p>
7
<p>Из кода и импортов видно, что для работы с React нужно две библиотеки: сам React и ReactDOM. Причина наличия двух зависимостей достаточно проста. Сама библиотека React не связана с DOM напрямую и используется не только в браузере. Поэтому отрисовка конкретно для DOM вынесена в отдельный пакет ReactDOM.</p>
9
<h2>Компонент</h2>
8
<h2>Компонент</h2>
10
<h3>Очевидные тезисы</h3>
9
<h3>Очевидные тезисы</h3>
11
<ol><li>Компонент React - это класс, который наследуется от класса React.Component (как вы увидите позже, это не единственный способ создать компонент)</li>
10
<ol><li>Компонент React - это класс, который наследуется от класса React.Component (как вы увидите позже, это не единственный способ создать компонент)</li>
12
<li>Функция render возвращает нечто (рассмотрим позже), что будет отрисовано в браузере. Класс-компонент без функции render существовать не может, это его интерфейс</li>
11
<li>Функция render возвращает нечто (рассмотрим позже), что будет отрисовано в браузере. Класс-компонент без функции render существовать не может, это его интерфейс</li>
13
</ol><p>Экспорт класса по умолчанию задан неспроста. В JS принято создавать один класс на файл. В отличие от обычных классов, React-компоненты имеют расширение JSX, а значит компонент, определённый выше, должен лежать в файле с именем Hello.jsx.</p>
12
</ol><p>Экспорт класса по умолчанию задан неспроста. В JS принято создавать один класс на файл. В отличие от обычных классов, React-компоненты имеют расширение JSX, а значит компонент, определённый выше, должен лежать в файле с именем Hello.jsx.</p>
14
<p>Обратите внимание: класс всё равно проименован, хотя это и не обязательно в случае дефолтного экспорта. Вы действительно можете его не именовать, но тогда через расширение React Dev Tools будет тяжело понять, что же отрисовал React, так как любой безымянный компонент отображается как <ReactComponent>. Поэтому возьмите себе за правило всегда давать компонентам имена.</p>
13
<p>Обратите внимание: класс всё равно проименован, хотя это и не обязательно в случае дефолтного экспорта. Вы действительно можете его не именовать, но тогда через расширение React Dev Tools будет тяжело понять, что же отрисовал React, так как любой безымянный компонент отображается как <ReactComponent>. Поэтому возьмите себе за правило всегда давать компонентам имена.</p>
15
<h3>Неочевидные тезисы</h3>
14
<h3>Неочевидные тезисы</h3>
16
<p>Самое поразительное происходит в этой строчке:</p>
15
<p>Самое поразительное происходит в этой строчке:</p>
17
<p>Здравый смысл подсказывает, что такая запись синтаксически невозможна в JS. И он будет прав. То, что вы видите, называется<strong>JSX</strong>и является расширением языка (добавляется с помощью Babel). Кардинальное решение для фреймворка, не правда ли? В процессе вы поймёте, что это не такая уж и плохая идея.</p>
16
<p>Здравый смысл подсказывает, что такая запись синтаксически невозможна в JS. И он будет прав. То, что вы видите, называется<strong>JSX</strong>и является расширением языка (добавляется с помощью Babel). Кардинальное решение для фреймворка, не правда ли? В процессе вы поймёте, что это не такая уж и плохая идея.</p>
18
<p>Главное сейчас запомнить то, что в конечном итоге любой React-компонент возвращает кусок DOM (на самом деле - виртуальный DOM).</p>
17
<p>Главное сейчас запомнить то, что в конечном итоге любой React-компонент возвращает кусок DOM (на самом деле - виртуальный DOM).</p>
19
<p>Кстати, div - это тоже компонент React, только встроенный. Отличить встроенные компоненты от самописных очень легко. Встроенные всегда начинаются с маленькой буквы, а те, которые не являются частью React, должны начинаться с большой.</p>
18
<p>Кстати, div - это тоже компонент React, только встроенный. Отличить встроенные компоненты от самописных очень легко. Встроенные всегда начинаются с маленькой буквы, а те, которые не являются частью React, должны начинаться с большой.</p>
20
<p>Хорошим стилем считается давать расширение .jsx для всех файлов, которые содержат JSX, независимо от того, создаётся ли компонент в этом файле или нет.</p>
19
<p>Хорошим стилем считается давать расширение .jsx для всех файлов, которые содержат JSX, независимо от того, создаётся ли компонент в этом файле или нет.</p>
21
<h2>Mount</h2>
20
<h2>Mount</h2>
22
<p>Созданный компонент (класс компонента) сам по себе ничего не делает. Чтобы насладиться результатом его работы, нужно произвести так называемое монтирование. То есть указать React, куда его вставить в DOM.</p>
21
<p>Созданный компонент (класс компонента) сам по себе ничего не делает. Чтобы насладиться результатом его работы, нужно произвести так называемое монтирование. То есть указать React, куда его вставить в DOM.</p>
23
<p>Для этой задачи обязательно требуется реальный DOM-узел. Подходящим может быть любой узел внутри body. Как правило, если у вас не SPA, то React используется в виде виджетов, подключаемых на странице в разных местах. Причём на одной странице может быть сразу несколько виджетов. Например, на Хекслете все фронтенд-элементы - это как раз виджеты. На основе узла создаётся контейнер приложения строчкой:</p>
22
<p>Для этой задачи обязательно требуется реальный DOM-узел. Подходящим может быть любой узел внутри body. Как правило, если у вас не SPA, то React используется в виде виджетов, подключаемых на странице в разных местах. Причём на одной странице может быть сразу несколько виджетов. Например, на Хекслете все фронтенд-элементы - это как раз виджеты. На основе узла создаётся контейнер приложения строчкой:</p>
24
<p>Далее в контейнер производится монтирование компонента:</p>
23
<p>Далее в контейнер производится монтирование компонента:</p>
25
<p>В качестве параметра передаётся компонент в синтаксисе JSX.</p>
24
<p>В качестве параметра передаётся компонент в синтаксисе JSX.</p>
26
<h2>JSX</h2>
25
<h2>JSX</h2>
27
<p>JSX - это похожее на XML-разметку расширение для JavaScript, созданное специально для задач React. React из коробки поставляется с набором компонентов, которые полностью повторяют HTML. По большей части синтаксис и структура JSX и HTML совпадают, но есть некоторые важные различия:</p>
26
<p>JSX - это похожее на XML-разметку расширение для JavaScript, созданное специально для задач React. React из коробки поставляется с набором компонентов, которые полностью повторяют HTML. По большей части синтаксис и структура JSX и HTML совпадают, но есть некоторые важные различия:</p>
28
<ol><li>Так как это похожий на XML синтаксис, одиночные теги в JSX должны быть закрыты: <hr /></li>
27
<ol><li>Так как это похожий на XML синтаксис, одиночные теги в JSX должны быть закрыты: <hr /></li>
29
<li>Вместо атрибута class в JSX используется имя свойства в DOM: className, так как class - это зарезервированное слово для создания классов</li>
28
<li>Вместо атрибута class в JSX используется имя свойства в DOM: className, так как class - это зарезервированное слово для создания классов</li>
30
</ol><p>Существуют и другие различия, о которых будет рассказываться в следующих уроках. Большинство этих отличий делает работу с DOM внутри React проще и удобнее.</p>
29
</ol><p>Существуют и другие различия, о которых будет рассказываться в следующих уроках. Большинство этих отличий делает работу с DOM внутри React проще и удобнее.</p>
31
<p>Так же как и в HTML, из JSX-элементов можно строить композиции, например такую:</p>
30
<p>Так же как и в HTML, из JSX-элементов можно строить композиции, например такую:</p>
32
<p>И это всё валидный код на JS с подключённым расширением для JSX.</p>
31
<p>И это всё валидный код на JS с подключённым расширением для JSX.</p>
33
<p>То, что каждый компонент React возвращает кусок DOM, является следствием его фундаментальной идеи и архитектуры. В одном из уроков эта идея будет рассмотрена подробнее, и вы наверняка проникнитесь ей. Но почему понадобилось вводить JSX?</p>
32
<p>То, что каждый компонент React возвращает кусок DOM, является следствием его фундаментальной идеи и архитектуры. В одном из уроков эта идея будет рассмотрена подробнее, и вы наверняка проникнитесь ей. Но почему понадобилось вводить JSX?</p>
34
<p>Нужно понимать, что JSX - расширение языка, а значит это именно<em>код</em>, а не html. А раз JSX транслируется в код, то, следовательно, вы могли бы сразу писать этот код. Верно? Верно, но не совсем:</p>
33
<p>Нужно понимать, что JSX - расширение языка, а значит это именно<em>код</em>, а не html. А раз JSX транслируется в код, то, следовательно, вы могли бы сразу писать этот код. Верно? Верно, но не совсем:</p>
35
-
<p>Пример кода выше - это как раз то, как бы выглядели функции render компонентов на React. Причём данный пример очень тривиальный и не содержит логику. Если бы у вас появились условные конструкции, то этот код перешёл бы все разумные пределы по сложности анализа. К сожалению, или к счастью, собирать древовидные структуры в коде (а DOM - это дерево) - занятие очень тяжёлое и беспощадное. Теперь должно стать чуть понятнее, зачем нужен JSX, и что JSX - это не вёрстка (как думают некоторые).</p>
34
+
<p>Пример кода выше - это как раз то, как бы выглядели функции render компонентов на React. Причём данный пример очень тривиальный и не содержит логику. Если бы у вас появились условные конструкции, то этот код перешёл бы все разумные пределы по сложности анализа. К сожалению, или к счастью, собирать ��ревовидные структуры в коде (а DOM - это дерево) - занятие очень тяжёлое и беспощадное. Теперь должно стать чуть понятнее, зачем нужен JSX, и что JSX - это не вёрстка (как думают некоторые).</p>