Организиране на компоненти в проект
Когато проектът се разрасне, той трябва да бъде разделен на частни npm пакети, капсулирайки изпълнението. Но не отглеждането на дърво от подпапки в папката компоненти е много по-трудно за разработване и поддържане. Проверено.
Как да създадетекомпонент на домейн - src/components/Post/Post.js.
Всички компоненти в папката на компонента на домейна имат префикс с компонента на домейна (Post*.js).
Подпапките в папката на компонента на домейна не са разрешени в плоска файлова структура от компонентиchild (PostTitle.js, PostBody.js) и компонентиancestor (PostViewPage.js, PostListPage.js). Дъщерните компоненти се използват вътре в компонента на домейна, докато компонентите на предшественика се използват извън (в рутер, например).
За да импортирате компоненти на домейн, трябва да зададете свой собствен package.json във всяка папка на компонента на домейна, в която трябва да посочите "основната" входна точка:
В допълнение, във файла на компонента на домейна (Post.js) се декларира повторното експортиране на компоненти на предшественик:
За съжаление не можете да използвате конструкцията „експортиране от“ (ограничение на WebStorm), например:
В резултат на това няма нужда от изричен достъп до файловете в папката на компонентите, например:
По конвенция е разрешено да се използват импортирания само по името на компонента на домейна:
Бележка относно функцията „Намиране на употреби“ в WebStorm. Има най-малко три контекста на използване: 1) от избран файл, 2) от избрана променлива или символ, 3) от избрано по подразбиране при експортиране на компонент.
1) Изберете файла components/Post/PostViewPage.js, резултат от търсенето:
2) Изберете символа PostViewPage във файла PostViewPage.js, резултат от търсенето:
3) Изберете по подразбиране в експортирането на компонента PostViewPage, резултат от търсенето:
Както можете да видите, третият начинusage връща най-полезната информация за предшестващия компонент.
Намерих правилния начин да завия Styled-JSX за Create React App. Сега CSS блоковете живеят във файловете на компонентите по естествен начин - в CSS формат (срещу вградените стилове на JS обекти). И не е нужно да се притеснявате за глобалния обхват.
Те работят спрямо папката src, например:
babel-plugin-module-resolver конфигурация
Конфигуриране на WebStorm
За папката src в контекстното меню изпълнете: Маркиране на директория като > корен на ресурса.
Настройка на Atom
Настройка на VSCode
Трябва да добавите jsconfig.json към корена на проекта:
И тук можете да получите грант за тестов период на Yandex.Cloud. Необходимо е само да въведете "Habr" в полето "секретна парола".