React: 6. Struttura del codice

Site tree di cartelle e file

Muoviamo i primi passi nel codice di React, quindi iniziamo a parlare della struttura del codice e suo avvio.
Anzitutto dobbiamo chiarire la struttura di file e cartelle del codice stesso.
La cartella “node_modules” contiene le librerie che useremo.
La cartella “public” contiene le risorse statiche, come ad esempio le immagini.
Invece “src” contiene il codice vero e proprio che sarà eseguito.

I file .js contengono ciò che vediamo a schermo, mente i file .css (o altri file .js ma separati), contengono lo stile di tali pagine.

Cosa viene eseguito all’avvio

Dopo aver analizzato la struttura del codice di ReactJs nel suo complesso, analizziamo cosa avviene al suo avvio. All’interno della cartella public troviamo index.html. Questo file è il file html della web app che funge da “contenitore” alla we bapp stessa. Al suo interno possiamo trovare il div con id root:

<div id="root"></div>

Il contenuto della pagina risulta vuoto perché all’interno del div con id “root”, renderizzeremo dinamicamente il contenuto, tramite i file .js.

Il file index.js è il file .js che che viene eseguito nel momento del lancio della nostra web app.
Possiamo vedere che tale file indica di renderizzare all’interno del div con id “root” di index.html, il component di nome “App”.

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

In questo momento il nostro unico component di nome App.js si trova all’interno di src, ma in futuro, per motivi di organizzazione, inseriremo i nostri component dentro una cartella in src/components.

App.js è un component e possiamo capirlo dal fatto che al suo interno troviamo:

export default App;

Ciò significa che la function principale del nostro component può essere esportata e mostrata da un altro component.

Tale function, ha un “return”, pertanto, visto che a monte, cioè in index.js, è presente il metodo “render”, i “return” delle function chiamati al suo interno, saranno renderizzati a schermo.

Component

Appare subito chiaro come vi sia appunto una struttura a component. Significa che potremo creare molti component diversi tra loro e richiamarli da dove vogliamo. Potremo chiamare lo stesso component da punti diversi e inserire più component-figlio all’interno dello stesso component-padre.

Questo concetto di padre-figlio è molto importante e lo analizzeremo successivamente, ma qui di base basti sapere che un component padre, può contenere uno o più component-figli. E sarà il component padre a passare a cascata, le informazioni da renderizzare, ai figli.

Altra caratteristica di React che riguarda i component è il fatto che saranno ricaricati solo i component che hanno rilevato una modifica nelle informazioni che renderizzano e non tutti i component della pagina.

Repository del progetto in progress su GitHub: https://github.com/DoAgency/ReactJs