In questo articolo si parla di come strutturare il progetto ReactJS. Se non hai seguito ancora gli altri passi della guida ti consiglio di iniziare da ReactJS: come creare una web app da zero. Altrimenti continua quì per iniziare questa strutturazione del progetto.

Come è strutturato il progetto

Per prima cosa è importante definire quali sono alcune delle pratiche che spesso vengono discusse da persone più o meno esperte del settore. Ci sono diversi tipi di approcci infatti per strutturare il progetto.

Appena utilizzato create-react-app, come visto in questo articolo, la struttura del progetto è questa:

La prima cartella è quella relativa ai node_modules e come tale contiene tutti i moduli utilizzabili dall’applicazione. Ogni volta che installerete una dipendenza, come per esempio un nuovo componente da usare, eseguirai il comando npm install. Il modulo scaricato lo troverai dentro alla cartella node_modules.

La cartella public contiene alcuni file pubblici, in particolare il file index.html che contiene il <div> nel quale verrà renderizzata la nostra applicazione ReactJS (il <div> con id root).

La cartella src contiene invece i file principali della nostra applicazione. Tra questi abbiamo index.js che recupera il componente App (lo abbiamo modificato nell’articolo precedente) e lo renderizza dove c’è il <div> con id root. In questa cartella abbiamo anche fogli di stile (CSS), un test ed il file registerServiceWorker.js di cui ne approfondiremo la conoscenza in futuro.

Infine troviamo diversi file. Il più importante è il file package.json perché contiene dati importanti relativi al progetto come:

• nome
• versione
• dipendenze (quì troverai tutte le dipendenze che installi per il progetto utilizzando il comando npm install)
• scripts (servono per far partire il progetto, per eseguire i tests o fare la build. Lanciando npm start il progetto parte e si apre nel browser)

Come strutturarlo

La struttura del progetto è in linea di massima ottimale tranne per quanto riguarda il contenuto di src. In questo caso non vogliamo inserire tutti i file all’interno di questa cartella, sarebbe una cosa da pazzi.

Quindi possiamo adottare diverse filosofie. Tra queste c’è quella filosofia per cui possiamo avere più cartelle:

• components > conterrà i componenti dell’applicazione divisi in cartelle
• css > conterrà i file CSS dell’applicazione divisi in cartelle
• tests > conterrà i tests divisi in cartelle
• common > conterrà componenti comuni
• utils > conterrà file di utilità comuni

In questo modo i components saranno i componenti relativi alle views. Per esempio il componente che serve per renderizzare la pagina Home si troverà dentro alla cartella home. Il CSS relativo alla home si troverà nella cartella home situata nella cartella css. I tests della home si troveranno all’interno della cartella tests sotto la relativa cartella e così via.

I componenti comuni, quindi per esempio una tabella riutilizzabile da tutta l’applicazione, si troveranno dentro a common. La cartella common conterrà quindi per esempio una cartella reactTable con dentro un componente ed eventuali piccoli componentini utili per la tabella (per esempio reactColumn).

In utils potremo inserire tutti i file relativi alle utilità. Per esempio un xmlParser, un fileReader o un apiService e simili.

Ci sono anche altri approcci per cui il progetto è diviso in views e components. Ciascun componente che servirà per mostrare una sezione dell’applicazione si troverà dentro alla cartella views. I componenti che invece faranno da mattoncini, per esempio reactTable citato prima, si troveranno dentro alla cartella components. Sia se parliamo di componenti views o di componenti “standard” dentro con ogni componente ci sarà anche un file css relativo, un file di test relativo e file di utility relativo.

Potremmo stare a discutere di queste teorie per giorni. Di queste pratiche, filosofie, teorie ce ne sono tantissime ed io stesso ne ho utilizzate diverse su progetti diversi. Quindi non mi resta che decidere quale pratica è la più semplice per te che ti approcci a questo mondo per la prima volta.

So che perderai un po’ di tempo, ma credo che la via migliore sia la prima descritta per iniziare. In questo modo vedrai una maggiore separazione dei concetti e le cartelle sulle quali opererai maggiormente saranno più snelle. Normalmente, in azienda, ti consiglio di decidere l’approccio migliore con il team in base anche alle esigenze.

Iniziamo la suddivisione

Nella cartella src inserisci le seguenti cartelle:

• tests
• components
• common
• utils
• css

Dunque sposta il file App.test.js dentro alla cartella tests. Quindi sposta i file index.css ed app.css dentro la cartella css.

Apri il file index.js e modifica la riga iniziale in cui c’è l’import del file index.css sostituendo “./index.css” con “./css/index.css”. Giustamente è cambiato il percorso al file 🙂 .

Ora devi fare lo stesso per App.js. Anche in questo caso il CSS che stiamo importando ha un percorso errato.

A questo punto l’applicazione si compila nuovamente. Come ultimo passo prendi il file registerServiceWorker.js ed inseriscilo in utils. Dunque nel file index.js devi cambiare il path di recupero di registerServiceWorker. Il mio file index.js adesso è così:

Il file App.js si vede male!

Dunque, nel caso in cui stai utilizzando Sublime Text, potresti veder male il file. Quello che devi fare è installare il package control di Sublime se non è presente seguendo questa guida: https://packagecontrol.io/installation. Se il package control è già presente puoi andare avanti.

A questo punto clicca su Sublime Text > Preferences > Package Control:

Seleziona Install Package nella finestra che si apre:

Cerca Babel nella finestra che si apre successivamente ed installa il pacchetto “Babel”. Dunque chiudi e ri-apri il file App.js e clicca su View > Syntax > Open all with current extension as.. > Babel > Javascript (Babel):

Conclusioni

In questo articolo stai iniziando a strutturare il progetto ed hai imparato ad installare pacchetti per Sublime. Non è estremamente importante seguire la struttura che ti ho consigliato quì, ti consiglio anzi di cercare su Google quali sono le pratiche più diffuse. La cosa importante inizialmente è che riesci a seguire la guida quindi ti consiglio di mantenere la struttura vista così da non perderti.

Se vuoi continuare a seguire questa guida ti ricordo di non perdere di vista ReactJS: come creare una web app da zero. Inoltre se ti iscrivi alla newsletter non ti perderai i nuovi articoli. Mando da 1 a 4 mail al mese ricapitolando dove siamo arrivati con ogni guida. Con la newsletter hai anche accesso a libri ed ebook gratuiti, così come a coupon Udemy? .

Per dubbi o domande scrivimi nei commenti ? .

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!).