Mainted React: Структура папок и файл Название

вступление

Я работал с реагированием более 4 лет. За это время я сформировал некоторые мнения о том, как я думаю, приложения должны быть. Это часть 1 в коллекции этих мнений.

Структура папки и именование файлов

Я прошел много итераций структуры папки в приложениях, над которыми я работал. Тот, в котором я нашел чешуи, лучше иметь плоские папки и длинные имена файлов. Поскольку я использую VSCode, легко искать файлы, поэтому чем дольше имя, тем лучше. Вот как я раскладываю большинство моих приложений на реагирование.

Структура папок

/react-app
  /build
  /node_modules
  /public
  /src
    /assets
    /components
    /contexts
    /lib
    /pages
    /services
    /styles
    AppRoutes.tsx
    index.tsx
    react-app-env.d.ts

  package.json
  README.md
  tsconfig.json
  yarn.lock

Вот быстрый обзор того, что находятся в этих папках.

/Активы – изображения, логотипы.
/Компоненты – компоненты, которые разделяются между несколькими страницами.
/contexts – я сохраняю все компоненты контекста в отдельной папке, чтобы не путать их с простыми старыми объектами реагирования. Общий контекст, который мне нравится реализовать, является UserAuthContext.tsx.
/lib – При использовании третьей партийной библиотеки, скажем, например, как Firebase, мне нравится поставить всю инициализацию в папке, называемой lib. Затем я экспортирую экземпляр этой инициализированной библиотеки.

import firebase from "firebase/app";
firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
});
export default firebase;

/Страницы – Страницы также реагируют на компоненты, но они представляют собой страницу или экран приложения. Эти карты 1: 1 с маршрутом в файле OmentsES.TSX.
/Услуги – Все мои методы API введены в папку под названием Services. Мне нравится делать это, чтобы я не помещаю деловую логику вызова API непосредственно в компонент, и поэтому любой компонент может легко ссылаться на службу, которая ему нужна.
/Стили – я очень редко пишу пользовательские CSS, вместо этого выбирая использовать табло, такие как ходки. Эта папка стилей – это то, где мои генерируемые стили и любые пользовательские CSS идут.
Оценка – этот файл содержит все маршруты моего приложения. Некоторое время я использовал React-Router, и мне нравится иметь один файл, который содержит все мои маршруты, чтобы я мог видеть все это с первого взгляда.

import React from "react";
import { Switch, BrowserRouter, Route } from "react-router-dom";
import { useAuthContext } from "./contexts/AuthContext";
import { Navbar } from "./components/Navbar";
import { LandingPage } from "./pages/LandingPage";
import { DashboardPage } from "./pages/DashboardPage";

export const AppRoutes: React.FC = () => {
  const authAccount = useAuthContext();

  return (
    
      
        
      
      
        {authAccount ? (
          
        ) : (
          
        )}
      
    
  );
};

const UnauthenticatedAppRoutes: React.FC = () => {
  return (
    
      
    
  );
};

const AuthenticatedAppRoutes: React.FC = () => {
  return (
    
      
    
  );
};

index.tsx. – Это ваш типичный файл индекса, где вы визуете свое приложение React в документ.

Иномация файлов

Мое правило – это дольше и более описательное имя файла, тем лучше. Для файлов, которые экспортируют компоненты реагирования, я использую PASCALCACE, для всего остального я использую Dash-Case.

# PascalCase
/components/NavBar.tsx
/contexts/UserAuthContext.tsx
/pages/DashboardPage.tsx
# dash-case
/services/auth-service.ts
/lib/apollo-client.ts

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

Обновления

Я получил несколько вопросов об этом посте, вот мои ответы:

Было бы очень интересно увидеть структуру внутри/компонентов. Есть ли вложенность? Папка для каждого компонента с стилями/тестом/… рядом с самим компонентным файлом?

Я не использую какие-либо вложенности в любом из папок. У меня также обычно нет отдельных файлов стилей, поскольку я использую Frameworks, как Failwind или Bootstrap. Форма папки моих компонентов подобна:

/components
  /__tests__
    Button.test.tsx
Button.tsx

Что вы делаете с одним из компонентов? Например, страница Contacts.jsx имеет компонент контакта?

Я расплачиваю свою страницу на подкомпонент, все в том же файле, что и страница.

import * as React from 'react'

export const ContactsPage: React.FC = () => {
  return (
    
      Contacts
      
    
  )
}

const ContactsList: React.FC = () => { ... }

Упаковка

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

Как всегда, я открыт для рекомендаций.

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

Оригинал: “https://dev.to/farazamiruddin/an-opinionated-guide-to-react-folder-structure-file-naming-1l7i”