Організація компонентів у проекті
Коли проект зросте, слід дробити його на приватні npm-пакети, інкапсулюючи реалізацію. Але не вирощувати дерево підпапок усередині папки компонентів — розвивати та підтримувати таке відчутно складніше. Перевірено.
Як створитидоменний компонент - src/components/Post/Post.js.
Усі компоненти в папці доменного компонента одержують префікс доменного компонента (Post*.js).
Підпапки в папці доменного компонента не допускаються, всередині плоска структура файлів зкомпонентів-нащадків (PostTitle.js, PostBody.js) такомпонентів-предків (PostViewPage.js, PostListPage.js) . Компоненти-нащадки використовуються всередині доменного компонента, а компоненти-предки використовуються зовні (у роутері, наприклад).
Для імпорту доменних компонентів слід задати всередині кожної папки доменного компонента свій package.json, у якому прописати точку входу "main":
Крім того, всередині файлу доменного компонента (Post.js) оголошено реекспорт компонентів-предків:
На жаль, не можна використовувати конструкцію "export from" (обмеження WebStorm), наприклад:
В результаті не потрібно явного доступу до файлів усередині папки компонентів, наприклад:
За згодою, дозволяється використовувати імпорт тільки на ім'я доменного компонента:
Примітка за функцією "Find Usages" у WebStorm. Як мінімум, є три контексти використання: 1) за виділеним файлом, 2) за виділеною змінною або символом, 3) за виділеним default в експорті компонента.
1) Виділимо файл components/Post/PostViewPage.js, результат пошуку:
2) Виділимо символ PostViewPage всередині файлу PostViewPage.js, результат пошуку:
3) Виділимо default в експорті компонента PostViewPage, результат пошуку:
Як видно, третій спосібвикористання видає найкориснішу інформацію для компонента-предка.
Знайдено правильний спосіб прикрутити Styled-JSX для Create React App. Тепер CSS-блоки живуть усередині файлів компонентів природним для себе способом - у CSS-форматі (проти інлайн-стилів JS-об'єктів). І не треба турбуватися за глобальну сферу видимості.
Працюють щодо папки src, приклад:
Конфігурація babel-plugin-module-resolver
Налаштування WebStorm
Для папки src у контекстному меню виконати: Mark Directory as > Resource Root.
Налаштування Atom
Налаштування VSCode
Потрібно додати jsconfig.json у корінь проекту:
А у нас тут можна отримати грант на тестовий період Яндекс.Хмари. Варто лише у полі «секретний пароль» запровадити «Хабр»