Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

React corso intensivo per principianti, Parte 2

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called React Crash Course for Beginners.
React Crash Course for Beginners, Part 1
React Crash Course for Beginners, Part 3

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Nella prima parte di questa serie di tutorial, abbiamo usato lo strumento create-react-app per creare un'applicazione di esempio funzionante come punto di partenza per la nostra app per visualizzare una galleria 'Movie Mojo'.

Nella seconda parte, saremo alle prese con l'aggiunta del nostro primo componente personalizzato per visualizzare le schede dei singoli film. Vedremo anche come l'uso dei props ci permette di personalizzare l'aspetto dei componenti mediante il passaggio dei dati, piuttosto che scriverne il codice.

Questo dimostra la flessibilità e la riutilizzabilità dei componenti, e come possono essere utilizzati come potenti blocchi per realizzare le vostre app con React.

Il nostro primo componente

OK, creiamo un componente! Per cominciare, terremo le cose abbastanza semplici e faremo il refactoring dell'intestazione HTML in un suo componente.

Le pratiche migliori del moderno React consigliano di separare ogni componente dell'applicazione in un file separato. Seguiremo questo principio, quindi nella vostra cartella dei progetti /src/components/, create un nuovo file chiamato Header.js e apritelo in un editor di testo.

Nella parte superiore del file del componente partiamo sempre importando le librerie richieste, gli altri componenti (poiché possiamo annidare i componenti) e le risorse extra di cui abbiamo bisogno (ad esempio gli stili). L'istruzione import è parte di ES6 e permette di mantenere i nostri progetti altamente modulari.

Per il nostro componente <Header />, abbiamo solo bisogno di importare la libreria di React, che possiamo fare con questa istruzione:

Questo consente di importare l'intera libreria di React e la rende disponibile tramite la variabile React. Importa anche l'oggetto Component direttamente così possiamo usarlo senza doverlo qualificare in modo specifico con un precedente riferimento all'oggetto React..

In altre parole, se non importiamo in modo esplicito l'oggetto Component allora dovremmo accedervi come segue:

React.Component

Ma poiché abbiamo importato direttamente Component, possiamo usarlo da solo senza alcun riferimento alla variabile React. Non importa quale utilizzate, ed è in fondo alla preferenza.

Successivamente, per creare il componente, estendiamo l'oggetto Component per creare una nuova classe che definisce il nostro componente <Header />. Dopo l'istruzione import, digitate:

Qui, usiamo una classe ES6 come nostro contenitore del componente. Le classi sono un ottimo modo per incapsulare tutto il codice necessario per descrivere il componente.

Inoltre potreste aver notato che il file del componente termina con un'istruzione di export. Questo, come ci si potrebbe aspettare, esporta il nostro componente e lo rende disponibile ad altri file nel nostro progetto.

Come requisito minimo, tutti i componenti di React sono necessari per avere un metodo di rendering, che restituisce del markup. Potrebbe trattarsi di HTML, altri componenti di React o una miscela di entrambi.

Aggiungete questo all'interno della classe del componente:

Il metodo React.createElement() crea un elemento HTML (un <div> in questo caso) e aggiunge alcuni contenuti a esso. Salvate le modifiche apportate a Header.js e aprite App.js.

Per utilizzare un componente di React all'interno di un altro componente, dobbiamo prima di importarlo, quindi aggiungerlo alla lista delle istruzioni di import nella parte superiore di App.js:

Notate come non sia necessario aggiungere l'estensione del file .js poiché è presupposto. Inoltre, perché il componente <Header /> è nella stessa cartella come il nostro componente <App />, non abbiamo bisogno di specificare il percorso completo.

Infatti, se tentate di utilizzare import Header from './components/Header'; all'interno di App.js, si otterrà un errore di compilazione.

Component file not found

Ora possiamo aggiungere il componente <Header /> all'interno dell'istruzione return proprio come qualsiasi elemento HTML. Tuttavia, c'è un avvertimento. È possibile restituire solo un elemento di primo livello all'interno di un metodo di restituzione di componenti.

Quindi questo non è consentito:

Se volete restituire più elementi allora è necessario avvolgerli tutti all'interno di un elemento contenitore singolo:

Quindi assicuratevi di aggiungere il componente <Header /> all'interno dell'elemento <div className="App"> per evitare errori.

Questo avrà come risultato che sia reso il nostro componente <Header />.

Initial Header component

Per completare il componente <Header />, togliamo il seguente blocco di codice HTML da App.js e lo aggiungiamo a Header.js.

Tuttavia, potreste aver notato che c'è un problema. In App.js il metodo di render del componente <App /> restituisce ciò che appare come HTML. Ancora in Header.js c'è solo una singola chiamata a React.createElement(). Cosa sta succedendo?

La risposta è JSX. In App.js usiamo JSX per scrivere la sintassi simile all'HTML per definire l'output del nostro componente. Confrontatelo con la nostra definizione di componente per Header.js.

Questo è come dobbiamo scrivere i componenti di React senza JSX. In realtà, sotto il coperchio, questo è in cosa JSX è compilato prima che sia possibile eseguirne il rendering nel browser.

Non siete tenuti a utilizzare JSX per i vostri componenti di React; dipende interamente da voi. Ma quasi tutti i componenti in cui vi imbatterete verranno scritti in JSX perché è solo molto più facile da scrivere.

È anche altamente leggibile per gli altri che non conoscono il vostro codice. Immaginate di dover studiare un progetto React contenente decine di diversi componenti scritti in semplice JavaScript!

Quindi non dovrebbe essere una sorpresa che useremo JSX per le definizioni del componente per tutto il resto di questa serie di tutorial.

Andate avanti e sostituite la chiamata di React.createElement() con il JSX equivalente che abbiamo copiato da App.js. Il vostro file Header.js ora dovrebbe assomigliare a questo:

Mentre JSX ci consente molta più flessibilità nella scrittura dei nostri componenti, tenete a mente che non è HTML che stiamo scrivendo, ma un'astrazione di esso.

È possibile notarlo nel frammento di codice sopra. Notate nel tag <div> che abbiamo utilizzato className anziché class per indicare dove vogliamo dichiarare una classe CSS? Questo è perché tutto JSX viene compilato verso il basso come JavaScript puro e class è una parola riservata in ES6 JavaScript.

Modifichiamo anche gli stili di intestazione. Aprite App.css e modificate la classe CSS .App-header in modo che sia:

Ciò aggiorna il colore di sfondo dell'intestazione e riduce l'altezza.

Updated app styles

I props del componente

Finora, il nostro componente <Header /> è statico. Cioè, mostra il contenuto fisso che non cambia mai. Ma i componenti possono essere fatti per essere dinamici e visualizzare i contenuti passati, tramite i props del componente. Questo rende i componenti improvvisamente molto più utili poiché diventano generici e riutilizzabili.

Pensate ai props del componente come simili ai tag HTML. Ad esempio, un tag <div> può avere attributi per id, class, style e così via che ci consentono di assegnare valori univoci per questo specifico elemento <div>..

Possiamo fare lo stesso per i componenti di React. Dite che non volevamo che il nostro header producesse il testo fisso 'Scopri il tuo film Mojo!' tutto il tempo. Non sarebbe meglio se la nostra intestazione potesse mostrare del testo?

A differenza degli attributi HTML, possiamo dare un nome ai nostri props del componente qualunque ci piaccia. All'interno di App.js, aggiornate il tag <Header /> così:

Quindi, aggiornate il componente <Header /> per utilizzare il prop text.

Questo dà come risultato che la nostra intestazione visualizzi qualunque testo venga aggiunto al prop text in App.js.

Using props to customize the Header component

Diamo uno sguardo più attento a come abbiamo fatto riferimento al prop text all'interno di Header.js utilizzando:

Le parentesi graffe dicono semplicemente a JSX che abbiamo del JavaScript che vogliamo valutare. Questo lo distingue dal testo. Se non abbiamo usato le parentesi graffe, la stringa letterale this.props.text dovrebbe essere prodotta, che non è quello che vogliamo.

La parola chiave this fa riferimento alla classe del componente Header, e props è un oggetto che contiene tutti i valori passati da <Header text="David's Movie Mojo App!" />. Nel nostro caso, l'oggetto props contiene solo una voce, ma è possibile aggiungerne quanti ne volete in pratica.

Il nostro componente <Header /> è ora molto più generico e non contiene una stringa con codifica fissa. Si tratta di una buona pratica durante la scrittura dei componenti di React. Più generici li fate, più riutilizzabili sono.

Questa è una buona notizia quando sviluppate app future React poiché è possibile riutilizzare i componenti da progetti precedenti, quindi non dovete scrivere tutto da zero.Questa è una buona notizia quando sviluppate app future React poiché è possibile riutilizzare i componenti da progetti precedenti, quindi non dovete scrivere tutto da zero.

Abbiamo usato i props sopra per passare una stringa fissa al componente di <Header />, ma i props possono passare le variabili, i riferimenti alle funzioni e lo stato ai componenti.

Per inviare una variabile tramite props, potremmo fare qualcosa come questo, dove headerText è una variabile:

Ispezione dei componenti di React

C'è uno strumento molto utile disponibile per il browser Chrome che consente di controllare le informazioni della vostra app React.

React developer tools

Gli strumenti di sviluppo predefiniti consentono solo di visualizzare gli elementi HTML normali, ma con l'estensione di React Developer Tools installata, è possibile navigare attraverso tutti i componenti di React nella vostra app.

Una volta installata, aprite i vostri strumenti di ispezione del browser e scegliete la scheda, ora disponibile, di React. Notate che invece gli elementi HTML, si vede la gerarchia dei componenti di React nella vostra app. Fate clic sul componente <App /> per selezionarlo.

Inspecting props

Una volta selezionata, le informazioni su un componente sono visualizzate nella finestra a destra. Il componente <App /> non dispone di eventuali props e così la finestra è vuota. Ma se si seleziona il componente <Header /> all'interno di <App /> poi vedrete il prop del 'testo' che gli abbiamo passato.

Inspecting Header component props

Gli strumenti di sviluppo di React sono molto utili per il debug, soprattutto quando si imbocca lo sviluppo di app React molto più complesse, quindi vale la pena di abituarsi al loro utilizzo su applicazioni più semplici.

È anche possibile utilizzare gli strumenti di sviluppo di React per controllare lo stato della vostra applicazione, cosa a cui arriveremo nel prossimo tutorial.

Conclusione

In questo tutorial hai imparato a dividere l'applicazione in componenti separati per renderlo più modulare. I props del componente consentono di passare valori ai singoli componenti, similmente a come aggiungere attributi agli elementi HTML.

Abbiamo anche visto come sfruttare i nuovi strumenti di ispezione del browser per esaminare i dati dei componenti e i props.

Nella parte 3, aggiungeremo lo stato alla nostra app per aiutarci a gestire più efficacemente i nostri dati.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.