React è una delle librerie JavaScript più popolari per costruire interfacce utente.
Se vuoi diventare uno sviluppatore front-end o trovare un lavoro di sviluppo web, probabilmente trarresti beneficio dall’imparare React in profondità.
In questo post, imparerai alcune delle basi di React come la creazione di un componente, la sintassi JSX e Props. Se hai poca o nessuna esperienza con React, questo post è per te.
Per cominciare, ecco come puoi installare React.
Che cos’è JSX?
La prima cosa che capirai dopo aver installato il tuo primo progetto React è che una funzione JavaScript restituisce del codice HTML:
function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> </header> </div> );}Questa è una speciale e valida estensione di sintassi per React che è chiamata JSX (JavaScript XML). Normalmente nei progetti legati al frontend, teniamo il codice HTML, CSS e JavaScript in file separati. Tuttavia in React, questo funziona un po’ diversamente.
Nei progetti React, non creiamo file HTML separati, perché JSX ci permette di scrivere HTML e JavaScript combinati insieme nello stesso file, come nell’esempio sopra. Puoi, tuttavia, separare il tuo CSS in un altro file.
All’inizio, JSX potrebbe sembrare un po’ strano. Ma non preoccuparti, ti ci abituerai.
JSX è molto pratico, perché possiamo anche eseguire qualsiasi codice JavaScript (logica, funzioni, variabili, e così via) all’interno dell’HTML direttamente usando le parentesi graffe { }, come questo:
function App() { const text = 'Hello World'; return ( <div className="App"> <p> {text} </p> </div> );}Inoltre, è possibile assegnare tag HTML a variabili JavaScript:
const message = <h1>React is cool!</h1>;Oppure puoi restituire HTML all’interno della logica JavaScript (come i casi if-else):
render() { if(true) { return <p>YES</p>; } else { return <p>NO</p>; }}Non entrerò in ulteriori dettagli di JSX, ma assicurati di considerare le seguenti regole mentre scrivi JSX:
- I tag HTML e dei componenti devono essere sempre chiusi < />
- Alcuni attributi come “class” diventano “className” (perché class si riferisce alle classi JavaScript), “tabindex” diventa “tabIndex” e dovrebbero essere scritti camelCase
- Non possiamo restituire più di un elemento HTML alla volta, quindi assicurati di avvolgerli dentro un tag padre:
return ( <div> <p>Hello</p> <p>World</p> </div>);- o in alternativa, puoi avvolgerli con tag vuoti:
return ( <> <p>Hello</p> <p>World</p> </>);Puoi anche guardare il mio tutorial React for Beginners per maggiori informazioni:
Cosa sono i componenti di classe funzionali &?
Dopo essersi abituati alla sintassi JSX, la prossima cosa da capire è la struttura a componenti di React.
Se rivedete il codice di esempio all’inizio di questo post, vedrete che il codice JSX viene restituito da una funzione. Ma la funzione App( ) non è una funzione ordinaria – è in realtà un componente. Cos’è un componente?
Che cos’è un componente?
Un componente è un blocco di codice indipendente e riutilizzabile che divide l’interfaccia utente in pezzi più piccoli. Per esempio, se stessimo costruendo l’UI di Twitter con React:
Piuttosto che costruire l’intera UI in un unico file, possiamo e dobbiamo dividere tutte le sezioni (segnate in rosso) in pezzi indipendenti più piccoli. In altre parole, questi sono componenti.
React ha due tipi di componenti: funzionali e di classe. Guardiamo ora ciascuno di essi in modo più dettagliato.
Componenti funzionali
Il primo e raccomandato tipo di componente in React è quello funzionale. Un componente funzionale è fondamentalmente una funzione JavaScript/ES6 che restituisce un elemento React (JSX). Secondo i documenti ufficiali di React, la funzione qui sotto è un componente funzionale valido:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}In alternativa, si può anche creare un componente funzionale con la definizione della funzione freccia:
const Welcome = (props) => { return <h1>Hello, {props.name}</h1>; }Questa funzione è un componente React valido perché accetta un singolo argomento oggetto “props” (che sta per proprietà) con dati e restituisce un elemento React. – reactjs.org
Per poter utilizzare un componente in seguito, è necessario prima esportarlo in modo da poterlo importare altrove:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}export default Welcome;Dopo averlo importato, è possibile chiamare il componente come in questo esempio:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome /> </div> );}Quindi un componente funzionale in React:
- è una funzione JavaScript/ES6
- deve restituire un elemento React (JSX)
- inizia sempre con una lettera maiuscola (convenzione di denominazione)
- accetta props come parametro se necessario
Cosa sono i componenti di classe?
Il secondo tipo di componente è il componente di classe. I componenti di classe sono classi ES6 che restituiscono JSX. Sotto, vedete la nostra stessa funzione Welcome, questa volta come componente di classe:
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }}Diversamente dai componenti funzionali, i componenti di classe devono avere un metodo aggiuntivo render( ) per restituire JSX.
Perché usare i componenti di classe?
Siamo soliti usare i componenti di classe a causa dello “stato”. Nelle vecchie versioni di React (versione < 16.8), non era possibile usare lo stato all’interno dei componenti funzionali.
Pertanto, avevamo bisogno di componenti funzionali solo per il rendering della UI, mentre usavamo componenti di classe per la gestione dei dati e alcune operazioni aggiuntive (come i metodi del ciclo di vita).
Questo è cambiato con l’introduzione di React Hooks, e ora possiamo usare gli stati anche nei componenti funzionali. (Tratterò lo stato e gli hook nei miei post successivi, quindi non fateci caso per ora).
Un componente di classe:
- è una classe ES6, sarà un componente una volta che ‘estende’ un componente React.
- assume Props (nel costruttore) se necessario
- deve avere un metodo render( ) per restituire JSX
Cosa sono i Props in React?
Un altro concetto importante dei componenti è come comunicano. React ha un oggetto speciale chiamato prop (acronimo di property) che usiamo per trasportare dati da un componente all’altro.
Ma fai attenzione – i props trasportano i dati solo in un flusso unidirezionale (solo da componente padre a componente figlio). Non è possibile con gli oggetti di scena passare dati da bambino a genitore, o a componenti dello stesso livello.
Rivisitiamo la funzione App( ) sopra per vedere come passare dati con gli oggetti di scena.
Prima di tutto, dobbiamo definire una prop sul componente Welcome e assegnargli un valore:
import Welcome from './Welcome';function App() { return ( <div className="App"> <Welcome name="John"/> <Welcome name="Mary"/> <Welcome name="Alex"/> </div> );}Le prop sono valori personalizzati e rendono anche i componenti più dinamici. Dal momento che il componente Welcome è il bambino qui, abbiamo bisogno di definire le prop sul suo genitore (App), in modo da poter passare i valori e ottenere il risultato semplicemente accedendo alla prop “name”:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;}
React Props Are Really Useful
Quindi gli sviluppatori React usano le prop per passare i dati e sono utili per questo lavoro. Ma che dire della gestione dei dati? Gli oggetti di scena sono usati per passare i dati, non per manipolarli. Tratterò la gestione dei dati con React nei miei futuri post qui su freeCodeCamp.
Nel frattempo, se vuoi imparare di più su React &Sviluppo web, sentiti libero di iscriverti al mio canale YouTube.
Grazie per aver letto!