Как правильно организовать свой проект

вступление

Я работаю с 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

Я всегда предпочитаю именованный экспорт вместо экспорта по умолчанию. Это упрощает поиск того, что я ищу, в моем редакторе.

Заключение

Это первая часть из серии статей, которые я буду писать. Если вам понравилось, оставьте комментарий ниже. Что еще вы хотите, чтобы я осветил? Как всегда, я открыт для рекомендаций.

Спасибо за прочтение.