Имена файлов, границы компонентов и имена свойств
Примите простые соглашения: PascalCase для компонентов, понятные папки, небольшие границы компонентов и выразительные имена свойств.
«Имена файлов, границы компонентов и имена свойств» — бесплатный урок React Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 3 уроков всего.
Зачем нужны соглашения
Цель: Сделать кодовую базу предсказуемой.
- Файлы компонентов в PascalCase
- Небольшие компоненты, каждый из которых решает одну задачу
- Понятные и описательные имена свойств
Краткий список правил именования и папок
- Файлы: UserCard.jsx, ProductList.jsx
- Папки: components/UserCard, pages/Profile
- Экспорт: именованный или экспорт по умолчанию, но имя должно совпадать с именем файла
Демонстрация: дерево небольшого проекта
Небольшая структура проекта с файлами компонентов в PascalCase.
<div id="root"></div>
Демонстрация: небольшие переиспользуемые части
Сосредоточьтесь на отдельных задачах компонентов: небольшой UserCard используется внутри Profile.
<div id="root"></div>
Демонстрация: понятные свойства и значения по умолчанию
Используйте описательные имена свойств и задавайте простые значения по умолчанию при деструктуризации.
<div id="root"></div>
Список проверки
- Используйте PascalCase для компонентов и файлов
- Один файл — один основной компонент
- Свойства: понятные имена (label, onPress), простые значения по умолчанию
Лучшая практика именования файлов
Итоги
Итоги: Используйте PascalCase в именах файлов и компонентов, создавайте компоненты с одной основной задачей и выбирайте выразительные имена свойств с простыми значениями по умолчанию.
Часто задаваемые вопросы
Урок «Имена файлов, границы компонентов и имена свойств» бесплатный?
Да — полный текст урока «Имена файлов, границы компонентов и имена свойств» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 3 уроков всего.
Чему я научусь в уроке «Имена файлов, границы компонентов и имена свойств»?
Примите простые соглашения: PascalCase для компонентов, понятные папки, небольшие границы компонентов и выразительные имена свойств. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.
Сколько времени занимает урок «Имена файлов, границы компонентов и имена свойств»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- ESLint и правила React; интеграция Prettier
- Имена файлов, границы компонентов и имена свойств
- Переменные окружения и организация конфигурации