Папки функций и различия между UI-компонентами и составными компонентами
Используйте папки функций и разделяйте компоненты: небольшие повторно используемые примитивы интерфейса и составные компоненты для отдельных функций, координирующие состояние и данные.
«Папки функций и различия между UI-компонентами и составными компонентами» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 3 уроков всего.
Почему важна структура
Цель: структурировать код так, чтобы он масштабировался.
- Папки функциональности объединяют связанный код
- Примитивы интерфейса — небольшие строительные блоки визуальной части
- Составные компоненты соединяют их вместе
Папки по функциональности
- функциональность/оформление/ (маршруты, составные компоненты, хуки, проверки)
- интерфейс/ (примитивы: кнопка, поле ввода, карточка)
- библиотека/ (вспомогательные функции)
- ресурсы/ (значки, стили)
Примитив интерфейса: кнопка
Создайте небольшой примитив кнопки: визуальный, повторно используемый, без получения данных.
<div id="root"></div>Составной компонент: QuantityCard
Составной компонент соединяет примитивы и состояние для функциональной задачи.
<div id="root"></div>Папка функциональности в действии
В папке функциональности оформления компонент CheckoutPanel объединяет примитивы и составные компоненты.
<div id="root"></div>Советы и контрольный список
- Делайте примитивы небольшими и повторно используемыми
- Пусть составные компоненты хранят состояние функциональности
- Предпочитайте папки функциональности огромным глобальным папкам
Проверка: примитив или составной компонент
Повторение
Повторение: организуйте код по функциональности, создавайте небольшие примитивы интерфейса и объединяйте их в составные компоненты, владеющие состоянием функциональности.
Часто задаваемые вопросы
Урок «Папки функций и различия между UI-компонентами и составными компонентами» бесплатный?
Да — полный текст урока «Папки функций и различия между UI-компонентами и составными компонентами» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 3 уроков всего.
Чему я научусь в уроке «Папки функций и различия между UI-компонентами и составными компонентами»?
Используйте папки функций и разделяйте компоненты: небольшие повторно используемые примитивы интерфейса и составные компоненты для отдельных функций, координирующие состояние и данные. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «Папки функций и различия между UI-компонентами и составными компонентами»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Папки функций и различия между UI-компонентами и составными компонентами
- Соглашения для папки хуков и размещение тестов рядом с кодом
- Рекомендации по рефакторингу