0Pricing
React Academy · Lekcja

Struktura folderów i konwencje nazewnictwa

Organizuj projekt React za pomocą folderów opartych na funkcjach i czytelnych nazw plików

Struktura folderów i konwencje nazewnictwa to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Wprowadzenie

W tej lekcji poznają Państwo typowe struktury folderów w projektach React, konwencje nazewnictwa plików i komponentów oraz sposoby organizowania kodu w miarę rozwoju projektu.

Struktura domyślna

Minimalny projekt Vite + React zawiera `src/App.jsx` i `src/main.jsx`. W przypadku małych demonstracji to wystarcza, ale takie rozwiązanie nie skaluje się dobrze. W miarę dodawania funkcji należy tworzyć dedykowane foldery, aby przechowywać powiązany kod razem.
src/
  main.jsx
  App.jsx
  index.css

Struktura oparta na funkcjonalnościach

Pliki należy grupować według funkcjonalności, a nie typu. Każdy folder funkcjonalności zawiera komponent, style, testy i funkcje pomocnicze. Dzięki temu można łatwo dodać lub usunąć całą funkcjonalność jednocześnie.
src/
  features/
    auth/
      LoginForm.jsx
      LoginForm.test.jsx
      useLogin.js
    dashboard/
      Dashboard.jsx
      useDashboardData.js
  components/     <- shared UI only
  hooks/          <- shared hooks
  lib/            <- utilities

Nazewnictwo plików komponentów

Nazwy plików komponentów należy zapisywać w **PascalCase**, zgodnie z nazwą komponentu: `UserCard.jsx`, `NavigationBar.jsx`. Standardem jest umieszczanie jednego komponentu w każdym pliku. Rozszerzenie `.jsx` (lub `.tsx`) informuje edytory, że plik zawiera JSX.

Nazewnictwo plików niebędących komponentami

Hooki, funkcje pomocnicze i stałe należy zapisywać w **camelCase**: `useAuth.js`, `formatDate.js`, `apiClient.js`. Pliki testów powinny odzwierciedlać nazwy plików źródłowych, używając `.test` lub `.spec`: `useAuth.test.js`.

Pliki index.js dla przejrzystych importów

Dodanie `index.js` do folderu pozwala importować z użyciem ścieżki folderu zamiast pełnej ścieżki do pliku. Pliki index należy ograniczać wyłącznie do ponownych eksportów — nie powinny zawierać logiki.
// src/features/auth/index.js
export { LoginForm } from './LoginForm';
export { useLogin } from './useLogin';

// Consumer
import { LoginForm } from '@/features/auth';

Importy absolutne z aliasami ścieżek

Należy skonfigurować alias `@/` wskazujący na `src/` w plikach `vite.config.js` i `tsconfig.json`. Pozwala to uniknąć kruchych ścieżek względnych, takich jak `../../../../components/Button`.
// vite.config.js
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') }
}

Komponenty współdzielone a komponenty funkcjonalności

Komponenty używane tylko w jednej funkcjonalności należy umieszczać w folderze tej funkcjonalności. Komponent należy przenieść do `src/components/` dopiero wtedy, gdy potrzebują go co najmniej dwie funkcjonalności. Należy unikać przedwczesnego wydzielania komponentów.

Pliki stałych i konfiguracji

Napisy używane bezpośrednio w kodzie, bazowe adresy URL API oraz obiekty opakowujące zmienne środowiskowe należy przechowywać w `src/lib/constants.js` lub `src/config.js`. Nie należy rozrzucać napisów `process.env.VITE_API_URL` po wielu plikach.
// src/config.js
export const API_BASE = import.meta.env.VITE_API_URL;

Typy i interfejsy (TypeScript)

W projektach TypeScript typy należy umieszczać razem z funkcjonalnością lub komponentem, który ich używa. W przypadku typów współdzielonych przez wiele funkcjonalności należy utworzyć folder `src/types/` i umieścić w nim osobny plik dla każdej dziedziny.

Szybkie sprawdzenie

Jaka jest główna zaleta struktury folderów opartej na funkcjonalnościach w porównaniu ze strukturą opartą na typach?

Podsumowanie

Należy używać folderów opartych na funkcjonalnościach, zapisu PascalCase dla plików komponentów, zapisu camelCase dla hooków i funkcji pomocniczych, ponownych eksportów z index.js dla przejrzystych importów oraz aliasu ścieżki, takiego jak @/, aby wyeliminować długie ścieżki względne.

Kurs ukończony

Gratulacje! Ukończyli Państwo kurs **React Strict Mode & Best Practices**. Wiedzą już Państwo, jak działa StrictMode, jak pisać czyste funkcje renderujące, poprawnie używać kluczy i referencji oraz tworzyć skalowalną strukturę folderów.

Często zadawane pytania

Czy lekcja „Struktura folderów i konwencje nazewnictwa” jest bezpłatna?

Tak — pełny tekst „Struktura folderów i konwencje nazewnictwa” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Struktura folderów i konwencje nazewnictwa”?

Organizuj projekt React za pomocą folderów opartych na funkcjach i czytelnych nazw plików Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Struktura folderów i konwencje nazewnictwa”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Działanie StrictMode
  2. Czyste komponenty i unikanie efektów ubocznych podczas renderowania
  3. Dobre praktyki dotyczące key i ref
  4. Struktura folderów i konwencje nazewnictwa
← Powrót do React Academy