Как правильно организовать свой проект
вступление
Я работаю с React более четырех лет. За это время у меня сложилось несколько мнений о том, какими, на мой взгляд, должны быть приложения. Это первая часть из серии таких самоуверенных произведений.
Структура папок и именование файлов
Я прошел через множество итераций структуры папок в приложениях, над которыми я работал. Тот, который, как мне кажется, лучше всего подходит для масштабирования, - это плоские папки и длинные имена файлов. Поскольку я использую VSCode, файлы легко искать, поэтому чем длиннее имя, тем лучше. Вот как я выкладываю большинство своих приложений React.
Структура папки
Вот краткий обзор того, что находится в этих папках.
/assets
— изображения, логотипы/components
— компоненты, которые используются на нескольких страницах./contexts
— Я храню все компоненты контекста в отдельной папке, чтобы не путать их с простыми старыми компонентами React. Обычный контекст, который мне нравится реализовывать, - этоUserAuthContext.tsx
./lib
— При использовании сторонней библиотеки (например, Firebase) я предпочитаю помещать всю инициализацию в папку с именемlib
. Затем я экспортирую экземпляр этой инициализированной библиотеки.
/pages
— Страницы также являются компонентами React, но представляют собой страницу или экран приложения. Они отображают 1: 1 с маршрутом в файлеAppRoutes.tsx
./services
— Все мои методы API помещены в папку с именемservices
. Мне нравится делать это, чтобы я не помещал бизнес-логику вызова API непосредственно в компонент, и чтобы любой компонент мог легко ссылаться на сервис, который ему нужен./styles
— Я очень редко пишу собственный CSS, вместо этого использую фреймворк вроде Tailwind CSS. В этойstyles
папке находятся мои сгенерированные стили и любые пользовательские CSS.AppRoutes
— Этот файл содержит все маршруты моего приложения. Некоторое время я использую React Router, и мне нравится иметь один файл, содержащий все мои маршруты, чтобы я мог все сразу увидеть.
index.tsx
— Это типичныйindex
файл, в котором вы визуализируете приложение React в документе.
Именование файлов
Мое практическое правило - чем длиннее и описательнее имя файла, тем лучше. Для файлов, экспортирующих компоненты React, я использую PascalCase
. Для всего остального я использую dash-case
.
# PascalCase /components/NavBar.tsx /contexts/UserAuthContext.tsx /pages/DashboardPage.tsx
# dash-case /services/auth-service.ts /lib/apollo-client.ts
Я всегда предпочитаю именованный экспорт вместо экспорта по умолчанию. Это упрощает поиск того, что я ищу, в моем редакторе.
Заключение
Это первая часть из серии статей, которые я буду писать. Если вам понравилось, оставьте комментарий ниже. Что еще вы хотите, чтобы я осветил? Как всегда, я открыт для рекомендаций.
Спасибо за прочтение.