2 added
2 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Для создания компонентов React не обязательно использовать классы, существуют и альтернативные способы:</p>
1
<p>Для создания компонентов React не обязательно использовать классы, существуют и альтернативные способы:</p>
2
-
<p><a>https://codepen.io/hexlet/pen/brXoER</a></p>
2
+
<p><a>Попрактиковаться</a></p>
3
<p>Компоненты, созданные как функции, называются<strong>функциональными</strong>. Они принимают объект со свойствами как первый аргумент и также начинаются с большой буквы.</p>
3
<p>Компоненты, созданные как функции, называются<strong>функциональными</strong>. Они принимают объект со свойствами как первый аргумент и также начинаются с большой буквы.</p>
4
<p>Функциональные компоненты стали превалировать над классовыми с появлением хуков. Они более лаконичны и позволяют писать чистый код. Еще у них нет своего изменяемого состояния, поэтому их легче тестировать и переиспользовать. В то же время, функциональные компоненты не включают методы жизненного цикла, что может ограничивать их использование. В следующем курсе мы начнем использовать функциональные компоненты и познакомимся с основными хуками React.</p>
4
<p>Функциональные компоненты стали превалировать над классовыми с появлением хуков. Они более лаконичны и позволяют писать чистый код. Еще у них нет своего изменяемого состояния, поэтому их легче тестировать и переиспользовать. В то же время, функциональные компоненты не включают методы жизненного цикла, что может ограничивать их использование. В следующем курсе мы начнем использовать функциональные компоненты и познакомимся с основными хуками React.</p>
5
<h2>Пространства имён</h2>
5
<h2>Пространства имён</h2>
6
<p>Вспомните пример из прошлого урока, связанный с использованием компонентов-потомков, созданных специально для родительского компонента:</p>
6
<p>Вспомните пример из прошлого урока, связанный с использованием компонентов-потомков, созданных специально для родительского компонента:</p>
7
<p>Следуя сказанному выше, компоненты <CardTitle> и <CardBody> должны быть реализованы как функциональные.</p>
7
<p>Следуя сказанному выше, компоненты <CardTitle> и <CardBody> должны быть реализованы как функциональные.</p>
8
<p>Но это еще не всё, можно пойти дальше и реализовать такую структуру:</p>
8
<p>Но это еще не всё, можно пойти дальше и реализовать такую структуру:</p>
9
<p>JSX поддерживает механизм пространств имён. Не сказать, что без него нельзя жить, но он довольно удобен. Во-первых, достаточно импортировать только компонент верхнего уровня, а остальное доступно уже через него, что довольно логично, если смотреть на JSX как на JS-код. Во-вторых, так лучше задаётся семантика.</p>
9
<p>JSX поддерживает механизм пространств имён. Не сказать, что без него нельзя жить, но он довольно удобен. Во-первых, достаточно импортировать только компонент верхнего уровня, а остальное доступно уже через него, что довольно логично, если смотреть на JSX как на JS-код. Во-вторых, так лучше задаётся семантика.</p>
10
<p>Реализуется подобный механизм через статические свойства.</p>
10
<p>Реализуется подобный механизм через статические свойства.</p>
11
-
<p><a>https://codepen.io/hexlet/pen/brXooa</a></p>
11
+
<p><a>Попрактиковаться</a></p>
12
<p>Такой способ компоновки не требует того, чтобы все компоненты были созданы в одном файле. Структура может быть любой, для остального есть импорты.</p>
12
<p>Такой способ компоновки не требует того, чтобы все компоненты были созданы в одном файле. Структура может быть любой, для остального есть импорты.</p>