React Academy · Lezione

Struttura delle cartelle e convenzioni di denominazione

Organizzare un progetto React con cartelle basate sulle funzionalità e nomi di file chiari.

Struttura delle cartelle e convenzioni di denominazione è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuto

In questa lezione esplorerà le strutture di cartelle più comuni per i progetti React, imparerà le convenzioni di denominazione per file e componenti e comprenderà come organizzare il codice man mano che il progetto cresce.

La struttura predefinita

Un progetto Vite + React minimale contiene `src/App.jsx` e `src/main.jsx`. Questo va bene per piccole demo, ma non è scalabile. Man mano che aggiunge funzionalità, crei cartelle dedicate per mantenere raggruppato il codice correlato.

src/
  main.jsx
  App.jsx
  index.css

Struttura basata sulle funzionalità

Raggruppi i file per funzionalità anziché per tipo. Ogni cartella di funzionalità contiene il componente, gli stili, i test e le funzioni di supporto. In questo modo è facile aggiungere o eliminare un'intera funzionalità in una sola volta.

src/
  features/
    auth/
      LoginForm.jsx
      LoginForm.test.jsx
      useLogin.js
    dashboard/
      Dashboard.jsx
      useDashboardData.js
  components/     <- shared UI only
  hooks/          <- shared hooks
  lib/            <- utilities

Nomenclatura dei file dei componenti

Assegni ai file dei componenti nomi in **PascalCase** corrispondenti al nome del componente: `UserCard.jsx`, `NavigationBar.jsx`. Lo standard prevede un componente per file. L'uso di `.jsx` (o `.tsx`) indica agli editor che il file contiene JSX.

Nomenclatura dei file non appartenenti ai componenti

Per hook, utility e costanti utilizzi **camelCase**: `useAuth.js`, `formatDate.js`, `apiClient.js`. I file di test rispecchiano il file sorgente e usano `.test` o `.spec`: `useAuth.test.js`.

File index per importazioni più pulite

L'aggiunta di un `index.js` a una cartella consente di importare dal percorso della cartella anziché dal percorso completo del file. Mantenga i file index esclusivamente come riesportazioni: non inserisca logica.

// src/features/auth/index.js
export { LoginForm } from './LoginForm';
export { useLogin } from './useLogin';

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

Importazioni assolute con alias dei percorsi

Configuri un alias `@/` che punti a `src/` in `vite.config.js` e `tsconfig.json`. In questo modo evita percorsi relativi fragili come `../../../../components/Button`.

// vite.config.js
resolve: {
  alias: { '@': path.resolve(__dirname, 'src') }
}

Componenti condivisi e componenti delle funzionalità

Inserisca i componenti utilizzati da una sola funzionalità nella cartella di quella funzionalità. Sposti un componente in `src/components/` solo quando ne hanno bisogno due o più funzionalità. Eviti di estrarre componenti troppo presto.

File di costanti e configurazione

Conservi le stringhe magiche, gli URL di base delle API e i wrapper delle variabili d'ambiente in `src/lib/constants.js` o `src/config.js`. Non distribuisca stringhe `process.env.VITE_API_URL` in molti file diversi.

// src/config.js
export const API_BASE = import.meta.env.VITE_API_URL;

Tipi e interfacce (TypeScript)

Nei progetti TypeScript, mantenga i tipi vicino alla funzionalità o al componente che li utilizza. Per i tipi condivisi da molte funzionalità, crei `src/types/` con un file per ogni area del dominio.

Verifica rapida

Qual è il vantaggio principale di una struttura di cartelle basata sulle funzionalità rispetto a una struttura basata sui tipi?

Riepilogo

Utilizzi cartelle basate sulle funzionalità, PascalCase per i file dei componenti, camelCase per hook e utility, riesportazioni da index.js per importazioni più pulite e un alias del percorso come @/ per eliminare i lunghi percorsi relativi.

Corso completato

Congratulazioni! Ha completato **React Strict Mode & Best Practices**. Ora comprende il comportamento di StrictMode, come scrivere funzioni di rendering pure, come utilizzare correttamente chiavi e ref e come strutturare cartelle scalabili.

Domande Frequenti

La lezione «Struttura delle cartelle e convenzioni di denominazione» è gratuita?

Sì — il testo completo di «Struttura delle cartelle e convenzioni di denominazione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Struttura delle cartelle e convenzioni di denominazione»?

Organizzare un progetto React con cartelle basate sulle funzionalità e nomi di file chiari. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Struttura delle cartelle e convenzioni di denominazione»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Cosa fa StrictMode
Componenti puri ed evitare effetti collaterali nel render
Best practice per key e ref
Struttura delle cartelle e convenzioni di denominazione

← Torna a React Academy