Ciao a tutti e benvenuti in questa nuova serie di guide sulla programmazione di applicazioni web con React.js
In questo corso andremo a creare un’applicazione web completa mostrandovi lungo il precorso, i passi principali ed i concetti fondamentali per ammaestrare la programmazione con React.
Prima di iniziare dovete preparare il vostro ambiente di sviluppo, installando alcuni elementi come Node.js, webpack e altri moduli node. Se tutto questo vi sembra spaventoso, potete seguire questa guida di devnews su come iniziare con React, dove vi mostriamo passo per passo il processo di installazione React. Una volta preparato l’ambiente di sviluppo potete tornare a questo corso
Link guida su come creare un’ambiente di sviluppo per React.
Fatto? Non era cosi difficile no?
Cominciamo con la prima parte del corso allora!
React components: cosa sono e come vanno utilizzati?
Se avete seguito l’introduzione del corso, dovreste avere un file index.js del tipo:
index.js
import React from 'react'; import { render } from 'react-dom'; class App extends React.Component { render(){ return(<h1>Hello world</h1>) } } render(<App/>, document.getElementById('app'));
Ora vi spiego in modo intuitivo il funzionamento di questo codice:
La prima regola da sapere in React.js è che ogni elemento in React è un Component. Potete considerare un Component come qualsiasi parte dell’interfaccia della vostra applicazione.
Per esempio se stiamo creando un'applicazione calendario, Il calendario, i giorni, le date, gli eventi, e tutti gli altri elementi della nostra UI saranno dei Components.
Un Component quindi sarà composto da vari tag HTML, questo non significa però che ogni tag HTML sarà un Component. Per esempio il Component per un giorno del calendario sarà composto da vari tag come: <h1>, <p>, <button>
Nel file index.js, come possiamo vedere abbiamo creato un Component, creando una classe JavaScript che eredita dalla classe React.Component. In questo modo ogni proprietà appartenente ai React Components, sarà acquistata dalla nostra classe chiamata App.
Ogni Component in React deve restituire un solo elemento. Come vedete nell’esempio del file index.js, restituiamo un solo tag h1
Ma cosa succede se vogliamo restituire un Component formato da due Tag h1 e h2?
In questo caso dobbiamo circondare i due tag con un ulteriore tag per esempio un <div>
Esempio 1
import React from 'react'; import { render } from 'react-dom'; class App extends React.Component { render(){ return(<div><h1>Ciao Marco</h1><h2>Ciao Marco</h2></div>)} } render(<App/>, document.getElementById('app'));
Se proviamo a restituire due tag separati, l’applicazione web non funzionerà e ci mostrerà un errore.
Ma a cosa servono i components se restituiscono solamente tag HTML? Non possiamo usare l’HTML direttamente?
La bellezza di React sta nel fatto che possiamo mischiare HTML con JavaScript, integrando la logica nel nostro codice HTML. Per esempio possiamo creare un tag <h1> con contenuto variabile in questo modo:
Esempio 2
import React from 'react'; import { render } from 'react-dom'; class App extends React.Component { render(){ var nome = ‘Marco’; return(<div><h1>Hello {nome}</h1><h2>Ciao {nome}</h2></div>)} } render(<App/>, document.getElementById('app'));
La funzione render() deve restituire un tag HTML, ma prima del return, possiamo includere qualsiasi tipo di logica e codice JS. Come vedete abbiamo dichiarato una variabile con il nome “Marco” ed utilizziamo questa variabile nel codice HTML.
Per distinguere il codice JS inserito nell‘HTML utilizziamo le parentesi graffe {}
Se salviamo e ricarichiamo la pagina dovremmo vedere un risultato del tipo:
Ricordate che App è una classe, quindi come tutte le classi in JS possiamo aggiungervi variabili e funzioni. Per esempio una cosa del genere è totalmente fattibile in React. (Anzi è una delle cose che farete di più nella vostra vita da programmatori React)
Esempio 3
import React from 'react'; import { render } from 'react-dom'; class App extends React.Component { getName(){ return "Marco"; } render(){ return(<div><h1>Hello {this.getName()}</h1><h2>Ciao {this.getName()}</h2></div>)} } render(<App/>, document.getElementById('app'));
Forse sarete tentati di includere la logica del vostro programma all’interno delle parentesi {} nel codice HTML o nella funzione render() come abbiamo fatto in precedenza.
Questo è consigliabile solamente nel caso in cui la logica del programma sia molto ristretta, come nell’esempio 2. Se invece la logica del programma comincia a diventare un po’ più complessa un approccio migliore è quello dell’esempio 3
Un’ultima cosa che voglio mostrarvi per questa lezione, è l’uso del constructor.
Come in tutti gli oggetti JS possiamo creare un costruttore del nostro oggetto App. L’unica cosa da ricordare è che bisogna fare un richiamo al costruttore di React.Component con il comando super()
Possiamo quindi assegnare delle proprietà al nostro oggetto in questo modo:
import React from 'react'; import { render } from 'react-dom'; class App extends React.Component { constructor(){ super(); this.nome = "Marco"; } render(){ return(<div><h1>Hello {this.nome}</h1><h2>Ciao {this.nome}</h2></div>) } } render(<App/>, document.getElementById('app'));
Se eseguiamo questo codice otterremo ancora una volta il risultato:
Grazie a tutti per aver seguito questa guida, speri vi sia stata di aiuto, pubblicheremo a breve le altre parti del corso quindi rimanete aggiornati. Nella prossima parte del corso andremo a vedere come Creare un Component personalizzato e come utilizzare gli import per creare un progetto react modulare..
Ci vediamo alla prossima :)