Tutorial React: come iniziare e come si confronta

Il front-end e JavaScript in particolare sono un mondo strano. La quantità di nuove cose che vengono lanciate quotidianamente è spesso ridicolizzata da persone che non lavorano con loro, e molte che lo fanno. Tuttavia, a volte, siamo un po' sopraffatti da nuove informazioni, librerie e discussioni, e vorremmo qualcosa di stabile, come un porto sicuro per le navi dove possiamo rimanere un po' più a lungo. Negli ultimi tempi, React sembra essere questo docile porto in un mare di evoluzione dinamica di JavaScript.

Con questo in mente, abbiamo deciso di produrre questo tutorial React in più parti, per mostrare le sue capacità e vedere come si confronta con Angular e VueJS.

Ovviamente, React non è l'unico porto che possiamo usare, ma al momento è una delle soluzioni più popolari, stabili e innovative e, sebbene riceva ancora molti aggiornamenti, sono più un'opzione per il miglioramento che che una necessità per la funzione.

Lo stato di reazione nel 2019

React è una libreria di viste a cui possiamo risalire già nel 2011, quando il suo primo prototipo, chiamato FaxJs, è apparso sulla sua pagina Facebook, lo stesso React è stato presentato da Jordan Walke (che è anche autore del prototipo menzionato) a JSConfUS su 29 maggio 2013 ed è stato reso disponibile pubblicamente su GitHub il 2 luglio 2013.

React ha continuato a guadagnare popolarità nel 2014, quando le conferenze hanno iniziato ad apparire per espandere la comunità e rendere popolare React. Dal mio punto di vista, tuttavia, il 2015 è stato un anno fondamentale per React: le grandi aziende (ad es. Airbnb e Netflix) hanno iniziato ad apprezzare e ad adottare le soluzioni React. Inoltre, React Native è apparso quell'anno. L'idea alla base di React Native non era qualcosa di assolutamente nuovo, ma era interessante da guardare, soprattutto perché supportata da Facebook.

Un altro grande cambiamento è stato Redux, un'implementazione di Flux. Ciò ha reso la gestione statale molto più accessibile e semplice, rendendo questa l'implementazione di maggior successo fino ad oggi.

Da allora ad oggi, sono diventate disponibili molte altre cose, inclusi gli strumenti React, una riscrittura dell'algoritmo di base, Fiber, una modifica al controllo delle versioni semantico e così via. Avanti veloce fino ad oggi, siamo alla 16.6.3, probabilmente qualche settimana prima che la nuova versione con Hooks diventi disponibile (doveva essere la 16.7.0, ma quella è già stata rilasciata a causa di alcune correzioni per React.lazy). React è ben noto e stabile e riceve ottime opinioni.

Ma cos'è la reazione?

Bene, se sei uno sviluppatore front-end e non ne hai ancora sentito parlare, allora devo dire che le congratulazioni sono d'obbligo, poiché è una vera impresa.

Scherzi a parte, React è una libreria di visualizzazione dichiarativa basata su componenti che ti aiuta a creare un'interfaccia utente. È una libreria, non un framework, anche se all'inizio molte persone l'hanno descritta come quest'ultima.

Ovviamente, se aggiungiamo Redux, React Router e così via, inizia ad avere tutte le cose necessarie per creare una normale applicazione a pagina singola, il che potrebbe essere un motivo per cui a volte è erroneamente caratterizzato come un framework piuttosto che una libreria . Semmai, si potrebbe sostenere che, con tutti i componenti di quell'ambiente insieme, il termine "framework" è in qualche modo appropriato, ma di per sé, React è solo una libreria.

Fermiamoci con la nomenclatura e concentriamoci su ciò che è diverso in React, sulle cose che non avevamo prima del suo inizio. Prima di tutto, quando pensi per la prima volta a React, pensi a JSX, poiché è la prima cosa che ti viene in mente quando guardi il codice. JSX è un'estensione della sintassi JavaScript che ricorda in qualche modo HTML/XML. Quando si tratta di React e JSX, abbiamo alcune differenze rispetto all'HTML, ad esempio, una classe in React è className , non c'è tabindex ma tabIndex , lo stile accetta oggetti JavaScript che hanno proprietà camelCased e così via.

Ci sono alcune piccole differenze, ma chiunque dovrebbe prenderle in pochissimo tempo. La gestione degli eventi avviene tramite, ad esempio, gli attributi onChange e onClick che possono essere utilizzati per allegare alcune funzioni per gestire gli eventi. Inoltre, i componenti in un secondo momento possono essere liberamente riutilizzati e personalizzati utilizzando oggetti di scena, quindi non c'è motivo di scrivere lo stesso codice poche volte.

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div>Hello World, {this.props.name}</div> ); } }

Tuttavia, JSX in realtà non è assolutamente necessario in React. Puoi scrivere funzioni regolari per creare elementi senza usare JSX. Lo stesso codice che è sopra, può essere utilizzato come sotto.

 import React, { Component } from 'react'; export default class App extends Component { render() { return React.createElement( 'div', null, 'Hello World, ', this.props.name ); } }

Ovviamente, non sto suggerendo di usare tale sintassi, anche se ci sono casi in cui potrebbe tornare utile (ad esempio, vuoi introdurre una cosa davvero piccola e non vuoi cambiare l'ambiente di compilazione).

In realtà, ho un altro motivo per cui ho mostrato lo snippet sopra. Spesso gli sviluppatori non capiscono perché dobbiamo fare quanto segue:

 import React from 'react';

Lo snippet dovrebbe essere autoesplicativo. Anche se stiamo estraendo Component , abbiamo ancora bisogno di React, perché Babel traspilisce sopra JSX sotto React.createElement . Quindi, se non importiamo React, semplicemente fallirà per noi. Ho menzionato Babel, che è uno strumento che ci aiuta a introdurre cose che non sono ancora in JavaScript (o meglio nei browser) o sono in qualche modo estensioni ad esso (o linguaggi diversi come TypeScript, che Babel supporta da Babel 7). Grazie a Babele:

• JSX verrà trasformato in funzioni comprensibili dal browser.
• Possiamo utilizzare nuove funzionalità che non sono ancora presenti nei browser (ad esempio, le proprietà delle classi).
• Possiamo aggiungere funzionalità che sono nei browser più recenti ma non sono presenti in quelli meno recenti mantenendo il supporto per browser meno recenti.

In breve, domani è oggi in JavaScript; questo è probabilmente qualcosa che richiederebbe il proprio articolo. Vale la pena ricordare che l'importazione di React può anche essere aggirata da alcune altre tecniche (come l'introduzione di ProvidePlugin tramite Webpack e così via), ma a causa dello spazio limitato qui, lo eviteremo e presumeremo che l'utente utilizzerà l'app Create React ( CRA) (ulteriori informazioni su questo strumento verranno menzionate più avanti).

La seconda cosa importante, e molto più importante dello stesso JSX, è che React è basato sul DOM virtuale. In breve, il DOM virtuale è la memoria di un albero ideale che è rappresentato da JavaScript scritto dallo sviluppatore, che viene successivamente confrontato con il DOM reale e sincronizzato con esso in un processo chiamato riconciliazione.

Come si confronta React rispetto ad Angular e Vue?

Non mi piace molto confrontare le biblioteche, specialmente quando siamo costretti a confrontare le pere con le mele (biblioteche vs. framework e così via).

Pertanto, proverò a confrontare React con Angular e Vue usando una serie di brevi domande e risposte che non hanno molto a che fare con cose tecniche piuttosto che dire qualcosa come "X è meglio di Y perché usa JSX e non modelli. " Punti come questi sono solitamente preferenze personali, scelte soggettive. Anche la velocità, l'allocazione della memoria, ecc., sono abbastanza simili in React e in tutti i suoi principali concorrenti (mi viene in mente Angular e Vue). C'è un ottimo rapporto sull'argomento, ma tienilo a mente: la stragrande maggioranza delle applicazioni non sembrano tabelle davvero grandi che scambiano righe in una tabella da 10k. Pertanto, questi risultati sono anche un esperimento di velocità pura. Nel mondo reale, in primo luogo non faresti una cosa del genere.

Quindi diamo un'occhiata ad alcune domande relative a React e come si confronta con la concorrenza:

Voglio avere molte opportunità di lavoro. Quanto è popolare React?

Bene, è facile rispondere: scegli React. In realtà, direi che React ha circa 6-10 volte (una diffusione piuttosto ampia, ma ci sono alcuni portali in cui è 1:50 e altri in cui è 1:6) più offerte di lavoro rispetto a Vue e 2-4 volte di più rispetto ad Angolare. La domanda di esperti di React è forte, quindi perché Vue è così popolare su GitHub (ha più stelle di React in effetti) ma ha meno opportunità di lavoro? Non ne ho idea.

Voglio una grande comunità, molte biblioteche, soluzioni rapide per i problemi che potrebbero sorgere.

Reagire. Non guardare oltre.

È facile da usare e rende piacevole lo sviluppo?

Ancora una volta, secondo i rapporti sullo stato di JS per il 2018 e il 2017, sia React che Vue godono di un'ottima reputazione e la maggior parte degli sviluppatori afferma che li utilizzerebbe di nuovo. Angular, d'altra parte, ha la tendenza, anno dopo anno, a mandare sempre più persone dicendo che non lo userebbero più.

Voglio creare una nuova applicazione a pagina singola, ma non voglio cercare le librerie.

Questo è probabilmente l'unico posto in cui direi che Angular è la scelta migliore.

Nessuna grande società. Voglio essere il più indipendente possibile, quale dovrei scegliere?

Vue: è l'unico indipendente nel nostro grande trio. (Facebook sostiene React, mentre Google è dietro Angular.)

Inizio più facile e curva di apprendimento più veloce?

Vue/Reagisci. Sono propenso per Vue qui, ma questa è solo la mia opinione personale.

Come mai? Perché non è nemmeno necessario conoscere JSX (è facoltativo) ed è fondamentalmente solo HTML + CSS + JavaScript.

Tutorial React: Guida introduttiva alla tua prima app

Il modo più semplice per iniziare con React al giorno d'oggi è utilizzare CRA, uno strumento CLI che crea un progetto per te e ti aiuta a evitare tutte le impostazioni necessarie per Webpack/Babel e altro ancora. Invece, fai affidamento su come è configurato per impostazione predefinita e su cosa è stato incluso in esso nel tempo. Grazie a ciò, non devi preoccuparti di aggiornamenti importanti per alcune librerie critiche.

Ovviamente, in seguito, puoi "espellere" te stesso e gestire ogni singolo aspetto da solo eseguendo npm run eject . Questo approccio ha i suoi punti di forza, poiché puoi migliorare la tua app con cose che altrimenti non sarebbero disponibili (ad esempio, decoratori), ma può anche essere fonte di mal di testa poiché richiede molti file extra e molto più tempo.

Quindi, la prima cosa da fare è:

 npx create-react-app {app-name}

Quindi npm run start e sei pronto per partire.

Classe e componenti di funzione

Dovremmo iniziare spiegando in che modo questi componenti differiscono. Fondamentalmente, ogni componente può essere una funzione o una classe . La principale differenza tra loro è che la classe uno ha alcune caratteristiche che non sono disponibili nel componente funzione: possono avere uno stato e utilizzare riferimenti, ciclo di vita, ecc. Questo è lo stato attuale del gioco e dalla versione 16.7 (o comunque sarà essere chiamato a causa delle modifiche già menzionate), avremo anche gli hook, quindi lo stato e gli arbitri saranno possibili con gli hook.

Esistono due tipi di componenti di classe: Component e PureComponent . L'unica differenza tra i due è che PureComponent sta facendo un confronto superficiale tra prop e stato: ha i suoi vantaggi in una situazione in cui non si desidera fare rendering "sprecati", in cui un componente e i suoi figli si trovano esattamente nello stesso stato dopo un rendering. Tuttavia, è solo un confronto superficiale; se vuoi implementare il tuo confronto (ad esempio, perché stai passando oggetti di scena complessi), usa semplicemente Component e sovrascrivi shouldComponentUpdate (che per impostazione predefinita restituisce true). Dalla versione 16.6+, qualcosa di simile è disponibile anche con i componenti delle funzioni, grazie a React.memo che è un componente di ordine superiore e per impostazione predefinita si comporta come PureComponent (confronto superficiale), ma richiede un secondo argomento in cui puoi passare il tuo confronto di oggetti di scena personalizzato .

Come regola generale, se puoi usare il componente della funzione (non hai bisogno di funzioni di classe), allora usalo. Presto, a partire dal 16.7.0, l'utilizzo dei componenti di classe sarà richiesto solo a causa dei metodi del ciclo di vita. Tendo a credere che i componenti delle funzioni siano più trasparenti, più facili da ragionare e da capire.

Reagire ai metodi del ciclo di vita

Costruttore (oggetti di scena)

• Facoltativo, specialmente con CRA che è così popolare, in cui le dichiarazioni dei campi di classe per JavaScript sono incluse come predefinite. Non ha senso dichiarare se stai vincolando i tuoi metodi tramite la funzione freccia all'interno del corpo della classe. Uno stato simile può anche essere inizializzato come proprietà di classe.
• Dovrebbe essere utilizzato solo per inizializzare lo stato locale per l'oggetto e i metodi di associazione nelle classi ES6.

componenteDidMount()

• Effettua chiamate Ajax qui.
• Se hai bisogno di listener di eventi, abbonamenti e simili, aggiungili qui.
• Puoi usare setState qui (ma renderà il componente nuovamente renderizzato).

componenteWillUnmount()

• Pulisce tutto ciò che è ancora in corso, ad esempio Ajax dovrebbe essere interrotto, sottoscrizione annullata, timer cancellati e così via.
• Non chiamare setState , poiché è inutile perché il componente verrà smontato (e riceverai un avviso).

componentDidUpdate(prevProps, prevState, snapshot)

• Si verifica quando il componente ha appena terminato l'aggiornamento (non si verifica durante il rendering iniziale).
• Dispone di tre parametri facoltativi da utilizzare (props precedenti, stato precedente e uno snapshot che verrà visualizzato solo se il componente implementa getSnapshotBeforeUpdate ).
• Succede solo se shouldComponentUpdate restituisce true.
• Se usi setState qui, dovresti proteggerlo o atterrerai in un ciclo infinito.

shouldComponentUpdate(nextProps, nextState)

• Solo per l'ottimizzazione delle prestazioni.
• Se restituisce false, NON verrà invocato un rendering.
• PureComponent può essere utilizzato invece se l'SCO sovrascritto è solo un confronto superficiale/stato di props.

getSnapshotBeforeUpdate()

• Può essere utilizzato per conservare alcune informazioni sul DOM corrente, ad esempio la posizione di scorrimento corrente che in seguito può essere riutilizzata all'interno di componentDidUpdate per ripristinare la posizione dello scorrimento.

componentDidCatch(errore, informazioni)

• Un luogo in cui dovrebbero verificarsi errori di registrazione.
• Può chiamare setState , ma nelle versioni future verrà eliminato a favore del metodo statico getDerivedStateFromError(error) , che aggiornerà lo stato restituendo un valore per aggiornare lo stato.

Esistono due metodi aggiuntivi che sono entrambi statici e sono stati menzionati in altre spiegazioni

getDerivedStateFromError(errore) statico

• Le informazioni sull'errore sono disponibili qui.
• Dovrebbe restituire un valore oggetto che aggiornerà lo stato che può essere utilizzato per la gestione degli errori (visualizzando qualcosa).
• Poiché è statico, non ha accesso all'istanza del componente stessa.

getSnapshotBeforeUpdate statico(props, state)

• Dovrebbe essere utilizzato nei casi in cui gli oggetti di scena cambiano nel tempo, ad esempio, secondo i documenti di React, potrebbe essere utile per un componente di transizione.
• Poiché è statico, non ha accesso all'istanza del componente stessa.

Nota, ci sono alcuni altri metodi disponibili ad oggi, ma dovrebbero essere rimossi in React 17.0, ecco perché non sono stati menzionati qui.

Stato contro puntelli

Iniziamo con gli oggetti di scena , perché sono più facili e veloci da spiegare. I prop sono proprietà che vengono passate al componente che in seguito possono essere riutilizzate al suo interno per visualizzare informazioni/logica aziendale e simili.

 import React, { Component } from 'react'; export default class App extends Component { render() { return ( <div> <HelloWorld name="Someone :)"/> </div> ); } } const HelloWorld = (props) => <div>Hello {props.name}</div>

Nell'esempio sopra, il name è un oggetto di scena. I prop sono elementi di sola lettura e non possono essere modificati direttamente nei componenti figlio. Inoltre, c'è una cattiva pratica che le persone spesso fanno, ed è copiare oggetti di scena allo stato e agire sullo stato in seguito. Naturalmente, ci sono casi in cui vuoi fare qualcosa come "lo stato iniziale che aggiornerà il componente genitore dopo l'invio", ma questo è più raro: in uno scenario del genere, l'alimentazione dello stato iniziale potrebbe avere senso. Inoltre, non solo le proprietà come le stringhe possono essere passate ai componenti figli, ma anche i numeri, gli oggetti, le funzioni, ecc.

Gli oggetti di scena hanno anche un'altra cosa utile che si chiama defaultProps , un campo statico che può dirti quali sono gli oggetti di scena predefiniti per un componente (quando non vengono passati al componente, ad esempio).

In caso di "sollevamento dello stato", in cui un componente (il genitore) ha uno stato che viene successivamente riutilizzato dai suoi figli (ad esempio, un figlio lo mostra e un altro consente la modifica), allora dobbiamo passare la funzione al figlio da genitore, che ci consente di aggiornare lo stato locale del genitore.

State , d'altra parte, è uno stato locale che può essere modificato, ma indirettamente, utilizzando this.setState . Se qualcuno dovesse mutare direttamente lo stato, il componente non sarà a conoscenza della modifica e non verrà eseguito nuovamente il rendering per riflettere le modifiche menzionate nello stato.

SetState è un metodo per modificare l'oggetto dello stato locale (eseguendo un'unione superficiale) e, successivamente, il componente risponde eseguendo il rendering di se stesso. Tieni presente che dopo l'uso di setState , la proprietà this.state non rifletterà immediatamente le modifiche menzionate in funzione (ha una natura asincrona) poiché alcune istanze di setState potrebbero essere raggruppate insieme a causa dell'ottimizzazione. Ha alcuni modi per essere invocato in cui una di queste possibilità ci consente di fare qualcosa con il componente subito dopo aver aggiornato lo stato:

• setState({value: '5'})
• setState((state, props) => ({value: state.name + “'s”}))
• setState([object / function like above], () => {}) – questo modulo ci consente di allegare callback , che verrà invocato quando lo stato rifletterà i dati che volevamo avere (nel primo argomento).

 import React, { Component } from 'react'; export default class App extends Component { state = { name: 'Someone :)' } onClick = () => this.setState({ name: 'You' }) render() { return ( <div> <HelloWorld name={this.state.name} onClick={this.onClick}/> </div> ); } } const HelloWorld = (props) => <div onClick={props.onClick}>Hello {props.name}</div>

Contesto di reazione

React ha recentemente stabilizzato l'API Context (che è stata in React per un po' di tempo, ma era una funzionalità sperimentale nonostante fosse ampiamente utilizzata da alcune delle librerie più popolari come Redux), che ci aiuta a risolvere un problema: il drill degli oggetti di scena. Il drill degli oggetti di scena in breve è un modo per passare gli oggetti di scena in profondità all'interno della struttura, ad esempio può essere una sorta di tema per i componenti, la localizzazione di un linguaggio specifico, le informazioni sull'utente e così via. Prima di Context (o meglio prima che diventasse non sperimentale), veniva approfondito passando in modo ricorsivo da genitore a figlio fino all'ultima foglia (ovviamente c'era anche Redux che poteva risolvere il problema). Tieni presente che questa funzione risolve SOLO la perforazione di oggetti di scena e non sostituisce cose come Redux o Mobx. Ovviamente, se stavi utilizzando una libreria di gestione dello stato solo per quello, puoi sostituirla liberamente.

Avvolgendo

Questo conclude la prima parte del nostro tutorial React. Nei prossimi articoli, speriamo di affrontare argomenti più avanzati, che vanno dallo stile e dai tipi di controllo, all'implementazione della produzione e all'ottimizzazione delle prestazioni.