Una guida completa per principianti a React

Foto di Alexander Andrews su Unsplash

Voglio tornare a scrivere più contenuti tecnici. React è una delle mie tecnologie preferite, quindi ho pensato di creare un'introduzione React! Questo post richiede conoscenza di HTML e JavaScript. Sono fermamente convinto che dovresti conoscerli prima di passare a biblioteche come React!

Che cos'è React

React è una libreria JavaScript creata nel 2013 dal team di sviluppo di Facebook. React voleva rendere le interfacce utente più modulari (o riutilizzabili) e più facili da mantenere. Secondo il sito web di React, viene utilizzato per "Costruire componenti incapsulati che gestiscono il proprio stato, quindi comporli per creare interfacce utente complesse".

In questo post userò molti esempi di Facebook da quando hanno scritto React in primo luogo!

Ricordi quando Facebook è passato dai Mi piace alle reazioni? Invece di essere in grado di apprezzare i post, ora puoi reagire con un cuore, una faccina sorridente o un like a qualsiasi post. Se tali reazioni fossero principalmente prodotte in HTML, sarebbe un'enorme mole di lavoro cambiare tutti quei Mi piace in reazioni e assicurarsi che funzionino.

È qui che entra in gioco React. Invece di implementare la "separazione delle preoccupazioni", abbiamo un'architettura diversa in React. Questa architettura aumenta la modularità in base alla struttura di un componente.

Oggi terremo separato il CSS, ma puoi anche rendere specifico quel componente se lo desideri!

React vs. Vanilla JavaScript

Quando parliamo di JavaScript "vaniglia", normalmente stiamo parlando di scrivere codice JavaScript che non utilizza librerie aggiuntive come JQuery, React, Angular o Vue. Se desideri saperne di più su questi e su cosa sia un framework, ho un post tutto sui framework web.

Un paio di brevi note prima di iniziare

  • Per rendere questo tutorial un po 'più sintetico, alcuni esempi di codice hanno ... prima o dopo di loro. Ciò significa che abbiamo omesso del codice.
  • Uso Git diff in alcuni punti per mostrare righe di codice che cambieranno. Se copi e passi, devi eliminare il + all'inizio della riga.
  • Ho CodePen complete con le versioni complete di ogni sezione, quindi puoi usarle per giocare al passo!
  • I concetti più avanzati che non sono essenziali per il tutorial sono in blockquotes. Questi sono fatti interessanti!

Impostare

Se stai creando un'applicazione React di produzione, vorrai utilizzare uno strumento di creazione come Webpack. Webpack raggrupperà il tuo codice poiché React utilizza alcuni schemi che non funzioneranno di default nel browser. Crea React App è super utile per questi scopi poiché fa la maggior parte della configurazione per te!

Per ora, useremo React CDN, che è solo a scopo di sviluppo! Utilizzeremo anche la CDN Babel in modo da poter utilizzare alcune funzioni JavaScript non standard (ne parleremo più avanti in seguito!).

Ora, passiamo al nostro codice React!

la classe HelloWorld estende React.Component {
  render () {
    // Indica a React quale codice HTML visualizzare
    return 

Hello World

  }
}
// Indica a React di collegare il componente HelloWorld al div HTML "root"
ReactDOM.render (, document.getElementById ("root"))

Tutto ciò che accade è che “Hello World” viene visualizzato come un H1 sulla pagina!

Vediamo cosa sta succedendo qui.

Innanzitutto, stiamo usando una classe ES6 che eredita dalla classe React.Component. Questo è un modello che useremo per la maggior parte dei nostri componenti React.

Successivamente, abbiamo un metodo nella nostra classe - ed è un metodo speciale chiamato render. React cerca il metodo di rendering per decidere cosa rendere sulla pagina! Il nome ha un senso. Qualunque cosa venga restituita da quel metodo di rendering, verrà renderizzata da quel componente.

In questo caso, stiamo restituendo un H1 con il testo di "Hello World" - questo è esattamente ciò che sarebbe normalmente nel file HTML.

Finalmente abbiamo:

ReactDOM.render (, document.getElementById ("root"))

Stiamo utilizzando la funzionalità ReactDOM per collegare il nostro componente di reazione al DOM.

React utilizza qualcosa chiamato DOM virtuale che è una rappresentazione virtuale del DOM con cui normalmente interagiresti in Vanilla JavaScript o JQuery. ReactDOM.render esegue il rendering di questo DOM virtuale sul DOM effettivo. Dietro le quinte, React fa molto lavoro per modificare in modo efficiente e ri-renderizzare il DOM quando qualcosa sull'interfaccia deve cambiare.

Il nostro componente, , sembra un tag HTML! Questa sintassi fa parte di JSX che è un'estensione di JavaScript. Non puoi usarlo nativamente nel browser. Ricordi come stiamo usando Babel per il nostro JavaScript? Babel traspila (o converte) il nostro JSX in JavaScript normale in modo che il browser possa capirlo.

JSX è in realtà facoltativo in React, ma lo vedrai usato nella stragrande maggioranza dei casi!

Quindi, stiamo usando il documento incorporato di JavaScript.getElementById per catturare il nostro elemento radice che abbiamo creato nel nostro HTML.

Tutto sommato, in questa dichiarazione ReactDOM.render, stiamo collegando il nostro componente HelloWorld al nostro div che abbiamo creato nel nostro file HTML.

Codice di avviamento

Bene, ora che abbiamo fatto un "Hello World", possiamo iniziare con il nostro componente Facebook.

Per prima cosa, voglio che tu giochi con questa demo. Ci lavoreremo su tutto il resto del tutorial. Sentiti libero di guardare anche il codice, ma non preoccuparti di non capirlo! Ecco a cosa serve il resto del tutorial!

Iniziamo "codificando" l'HTML per il widget:

Con alcuni CSS aggiunti, questo è simile al seguente:

Ecco un Codepen con il codice di avviamento completo.

Per il bene di questo tutorial, creeremo quattro componenti: un componente Status che sarà il genitore, un componente Like che includerà la logica di gradimento e il componente Comment che conterrà la logica per scrivere un commento. Il componente Like avrà anche un LikeIcon figlio che verrà visualizzato o nascosto quando si attiva il pulsante Mi piace.

Architettura dei componenti

Andiamo avanti e dividiamo il codice HTML che abbiamo scritto in quei componenti.

Inizieremo con la shell di un componente e lo renderemo anche per assicurarci che funzioni!

Una nota interessante di quanto sopra, è che abbiamo dovuto modificare gli attributi "class" in "className". Classe significa già qualcosa in JavaScript: è per le classi ES6! Alcuni attributi sono denominati diversamente in JSX rispetto a HTML.

Possiamo anche eliminare il contenuto del nostro HTML, lasciando solo un elemento con la radice ID - il div "content" genitore è solo per lo stile!


  
    
  

Ecco l'HTML che andrà nel componente Stato. Nota, parte dell'HTML originale non è ancora lì - andrà invece ai nostri sottocomponenti!

Creiamo un secondo componente, quindi lo includeremo nel nostro componente Stato.

Il commento di classe estende React.Component {
  render () {
    ritorno (