React Crash Course per principianti, parte 2

Nella prima parte di questa serie di tutorial, abbiamo usato il Create-reagiscono-app strumento per creare un'app campione di lavoro come punto di partenza per la nostra app gallery "Movie Mojo".

Nella seconda parte, faremo i conti con l'aggiunta del nostro primo componente personalizzato per visualizzare le singole schede del film. Vedremo anche come l'utilizzo degli oggetti di scena ci consente di personalizzare l'aspetto dei componenti trasmettendo i dati anziché codificarli con cura.

Ciò dimostra la flessibilità e la riusabilità dei componenti e il modo in cui possono essere utilizzati come elementi costitutivi potenti nelle app React.

Il nostro primo componente

OK, creiamo un componente! Per cominciare, manterremo le cose abbastanza semplici e refactoring l'intestazione HTML nel proprio componente.

Le best practice Modern React consigliano di separare ciascun componente della tua app in un file separato. Seguiremo questo principio così, nei tuoi progetti / src / componenti / cartella, crea un nuovo file chiamato Header.js e aprilo in un editor di testo.

Nella parte superiore dei file dei componenti iniziamo sempre con l'importazione delle librerie richieste, degli altri componenti (dato che possiamo annidare i componenti) e delle risorse extra di cui abbiamo bisogno (ad esempio, gli stili). Il importare la dichiarazione fa parte di ES6 e ci consente di mantenere i nostri progetti altamente modulari.

Per noi

componente, abbiamo solo bisogno di importare la libreria React, che possiamo fare con questa affermazione:

import React, Component da 'react';

Questo importa l'intera libreria React e la rende disponibile tramite Reagire variabile. Importa anche il Componente oggetto direttamente in modo che possiamo usarlo senza dover specificarlo in modo specifico con un precedente Reagire. riferimento all'oggetto.

In altre parole, se non abbiamo importato esplicitamente il file Componente oggetto quindi dovremmo accedervi come segue:

React.Component

Ma perché abbiamo importato Componente direttamente, possiamo semplicemente usarlo da solo senza alcun riferimento al Reagire variabile. Non importa quale si usa, e dipende solo dalle preferenze.

Quindi, per creare effettivamente il componente, estendiamo il Componente oggetto di creare una nuova classe che definisce il nostro

componente. Dopo il importare dichiarazione, tipo:

l'intestazione di classe estende l'app predefinita di Component ;

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

Potresti anche aver notato che il file del componente termina con una dichiarazione di esportazione. Questo, come ci si potrebbe aspettare, esporta il nostro componente e lo rende disponibile per altri file nel nostro progetto.

Come minimo, tutti i componenti di React devono avere un metodo render, che restituisce alcuni markup. Questo potrebbe essere HTML, altri componenti React o una combinazione di entrambi.

Aggiungi questo all'interno della classe del tuo componente:

render () return React.createElement ('div', null, 'Ciao, questo è un componente React!');

Il React.createElement () metodo crea un elemento HTML (a

in questo caso) e aggiunge alcuni contenuti ad esso. Salva le modifiche in Header.js e apri App.js.

Per utilizzare un componente React all'interno di un altro componente, dobbiamo prima importarlo, quindi aggiungilo all'elenco delle istruzioni di importazione nella parte superiore di App.js:

importare l'intestazione da "./Header";

Nota come non è necessario aggiungere il .js estensione del file come questo è assunto. Inoltre, perché il

componente è nella stessa cartella del nostro componente, non è necessario specificare il percorso completo.

In effetti, se provi ad usare importare l'intestazione da "./components/Header"; dall'interno App.js, riceverai un errore di compilazione.

Ora possiamo aggiungere il

componente all'interno dell'istruzione return, proprio come qualsiasi elemento HTML. Tuttavia, vi è un avvertimento. Puoi solo restituire un elemento di primo livello all'interno di un metodo di ritorno dei componenti.

Quindi questo non è permesso:

render () return ( 
 
 );

Se vuoi restituire più elementi, devi avvolgerli tutti all'interno di un singolo elemento wrapper:

render () return (  
 
 
 );

Quindi assicurati di aggiungere il

componente all'interno del

elemento per evitare errori.

la classe App estende Component render () return (    Scopri il tuo film Mojo!
 
  Benvenuti nell'app React "Movie Mojo"! 
 
 );

Questo risulterà nel nostro

componente in fase di rendering.

Per completare il

componente, rimuoveremo il seguente blocco di HTML da App.js e aggiungilo a Header.js.

 Scopri il tuo film Mojo!

Tuttavia, potresti aver notato che c'è un problema. Nel App.js il il metodo di rendering dei componenti restituisce ciò che sembra HTML. Ancora dentro Header.js c'è solo una chiamata a React.createElement (). Cosa sta succedendo?

La risposta è JSX. Nel App.js usiamo JSX per scrivere la sintassi simile a HTML per definire il nostro output di componente. Confronta questo con la nostra definizione di componente per Header.js.

React.createElement ('div', null, 'Ciao, questo è un componente React!');

Ecco come scrivere componenti React senza JSX. In realtà, sotto la cappa, questo è ciò che JSX è compilato prima che possa essere reso al browser.

Non è necessario utilizzare JSX affatto per i componenti di React; dipende interamente da te. Ma quasi tutti i componenti che incontrerai saranno scritti in JSX perché è molto più facile scrivere.

È anche altamente leggibile per gli altri nuovi sul tuo codice. Immagina di dover studiare un progetto React contenente dozzine di componenti diversi scritti in un semplice JavaScript!

Quindi non dovrebbe sorprendere che useremo JSX per le definizioni dei componenti per tutto il resto di questa serie di tutorial.

Vai avanti e sostituisci il React.createElement () chiamare con l'equivalente JSX da cui abbiamo copiato App.js. Il tuo Header.js il file dovrebbe ora assomigliare a questo:

import React, Component da 'react'; l'intestazione della classe estende Component render () return (  Scopri il tuo film Mojo!
 
 );  esporta intestazione predefinita;

Mentre JSX ci consente molta più flessibilità nello scrivere i nostri componenti, tieni presente che non è l'HTML vero che stiamo scrivendo, ma un'astrazione di esso.

Puoi vederlo nello snippet di codice qui sopra. Avviso nel

tag che abbiamo usato nome della classe piuttosto che classe per indicare dove vogliamo dichiarare una classe CSS? Questo perché tutto JSX è compilato su puro JavaScript, e classe è una parola riservata in ES6 JavaScript.

Analizziamo anche gli stili di intestazione. Aperto App.css e modifica il .App-header La classe CSS deve essere:

.App-header background-color: steelblue; altezza: 70 px; imbottitura: 20px; colore bianco;

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

Puntelli di componenti

Finora, il nostro

il componente è statico. Ovvero, visualizza il contenuto fisso che non cambia mai. Ma i componenti possono essere fatti per essere dinamici e visualizzare i contenuti passati a loro, tramite i componenti del componente. Ciò rende i componenti improvvisamente molto più utili man mano che diventano generici e riutilizzabili.

Pensa agli oggetti componenti come simili ai tag HTML. Ad esempio, a

il tag potrebbe avere attributi per id, classe, stile e così via che ci permettono di assegnare valori unici per quello specifico

elemento.

Possiamo fare lo stesso per i componenti React. Diciamo che non volevamo che la nostra intestazione producesse il testo fisso "Scopri il tuo film Mojo!" tutto il tempo. Non sarebbe meglio se la nostra intestazione potesse visualizzare qualsiasi testo?

A differenza degli attributi HTML, possiamo nominare i nostri puntelli componenti come preferiamo. Dentro App.js, aggiorna il

tag per essere:

Quindi, aggiorna il

componente per utilizzare il testo puntello.

  This.props.text

Ciò si traduce nella nostra intestazione che visualizza qualsiasi testo viene aggiunto al testo prop in App.js.

Diamo uno sguardo più da vicino a come abbiamo fatto riferimento al testo puntellare dentro Header.js utilizzando:

 This.props.text

Le parentesi graffe dicono semplicemente a JSX che abbiamo alcuni JavaScript che vogliamo valutare. Questo lo distingue dal testo. Se non abbiamo usato parentesi graffe, la stringa letterale this.props.text sarebbe emesso, che non è quello che vogliamo.

Il Questo parola chiave si riferisce al Intestazione classe componente, e oggetti di scena è un oggetto che contiene tutti i valori passati da

. Nel nostro caso, il oggetti di scena l'oggetto contiene solo una voce, ma puoi aggiungerne quante ne vuoi in pratica.

Nostro

il componente è ora molto più generico e non contiene una stringa hard-coded. Questa è una buona pratica quando si scrivono componenti React. Più generico li fai, più riusabili sono.

Questa è una buona notizia quando si sviluppano le future app React in quanto è possibile riutilizzare componenti da progetti precedenti in modo da non dover scrivere tutto da zero.

Abbiamo usato puntelli sopra per passare una stringa fissa nel

componente, ma gli oggetti di scena possono anche passare variabili, riferimenti alle funzioni e lo stato ai componenti.

Per inviare una variabile tramite oggetti di scena, potremmo fare qualcosa di simile, dove titolo è una variabile:

Ispezionare componenti React

È disponibile uno strumento molto utile per il browser Chrome che consente di esaminare le informazioni sulla tua app React.

Gli strumenti di sviluppo predefiniti consentono solo di visualizzare normali elementi HTML, ma con l'estensione React Developer Tools installata, puoi navigare tra tutti i componenti React nella tua app.

Una volta installato, apri gli strumenti di ispezione del browser e fai clic sul nuovo disponibile Reagire scheda. Nota che al posto degli elementi HTML, puoi vedere la gerarchia dei componenti React nella tua app. Clicca sul componente per selezionarlo.

Una volta selezionato, le informazioni su un componente vengono visualizzate nella finestra a destra. Il il componente non ha oggetti di scena e quindi la finestra è vuota. Ma se selezioni il

componente all'interno poi vedrai il puntello "testo" in cui siamo passati.

Gli strumenti di sviluppo di React sono molto utili per il debug, specialmente quando si inizia a sviluppare applicazioni React più complesse, quindi vale la pena di abituarsi a utilizzarle in app più semplici.

Puoi anche utilizzare gli strumenti di sviluppo di React per verificare lo stato dell'applicazione, che esamineremo nel prossimo tutorial.

Conclusione

In questo tutorial hai imparato come suddividere la tua app in componenti separati per renderla più modulare. I puntelli dei componenti consentono di trasferire i valori ai singoli componenti, in modo simile a come si aggiungono gli attributi agli elementi HTML.

Abbiamo anche visto come sfruttare i nuovi strumenti di ispezione del browser per esaminare i componenti e i dati degli oggetti di scena.

Nella terza parte aggiungeremo lo stato alla nostra app per aiutarci a gestire i nostri dati in modo più efficace.

Codice

React Crash Course per principianti, parte 3

React Crash Course per principianti, parte 1