Fondamenti di Rock Solid React.js: una guida per principianti

Corso crash React.js

Ho lavorato con React e React-Native negli ultimi due mesi. Ho già rilasciato due app in produzione, Kiven Aa (React) e Pollen Chat (React Native). Quando ho iniziato a studiare React, stavo cercando qualcosa (un blog, un video, un corso, qualunque cosa) che non mi insegnasse solo a scrivere app in React. Volevo anche che mi preparasse per le interviste.

Gran parte del materiale che ho trovato, concentrato sull'uno o sull'altro. Quindi, questo post è rivolto al pubblico che è alla ricerca di un mix perfetto di teoria e pratica. Ti darò un po 'di teoria in modo che tu capisca cosa sta succedendo sotto il cofano e poi ti mostrerò come scrivere del codice React.js.

Se preferisci i video, ho anche l'intero corso su YouTube. Si prega di dare un'occhiata.

Tuffiamoci in ...

React.js è una libreria JavaScript per la creazione di interfacce utente

Puoi creare tutti i tipi di applicazioni a pagina singola. Ad esempio, chat chat e portali di e-commerce in cui si desidera mostrare le modifiche sull'interfaccia utente in tempo reale.

Tutto è un componente

Un'app React è composta da componenti, molti dei quali nidificati l'uno nell'altro. "Ma quali sono i componenti?", Potresti chiedere.

Un componente è un pezzo di codice riutilizzabile, che definisce l'aspetto e il comportamento di determinate funzionalità nell'interfaccia utente. Ad esempio, un pulsante è un componente.

Diamo un'occhiata al seguente calcolatore, che vedi su Google quando provi a calcolare qualcosa come 2 + 2 = 4 –1 = 3 (matematica veloce!)

I marcatori rossi indicano i componenti

Come puoi vedere nell'immagine sopra, la calcolatrice ha molte aree, come la finestra di visualizzazione dei risultati e il tastierino numerico. Tutti questi possono essere componenti separati o un componente gigante. Dipende da quanto ci si sente a proprio agio nel scomporre e sottrarre cose a React

Scrivi il codice per tutti questi componenti separatamente. Quindi combinare quelli sotto un contenitore, che a sua volta è un componente React stesso. In questo modo puoi creare componenti riutilizzabili e la tua app finale sarà una raccolta di componenti separati che lavorano insieme.

Di seguito è riportato un modo per scrivere la calcolatrice, mostrata sopra, in React:

Sì! Sembra un codice HTML, ma non lo è. Ne esploreremo di più nelle sezioni successive.

Impostazione del nostro parco giochi

Questo tutorial si concentra sui fondamenti di React. Non è principalmente orientato a React for Web o React Native (per la creazione di app mobili). Quindi, useremo un editor online in modo da evitare configurazioni web o native specifiche prima ancora di sapere cosa può fare React.

Ho già creato un ambiente per te su codepen.io. Basta seguire il link e leggere tutti i commenti nelle schede HTML e JavaScript (JS).

Componenti di controllo

Abbiamo appreso che un'app React è una raccolta di vari componenti, strutturata come un albero nidificato. Pertanto, abbiamo bisogno di una sorta di meccanismo per passare i dati da un componente all'altro.

Inserisci "oggetti di scena"

Possiamo trasmettere dati arbitrari al nostro componente usando un oggetto props. Ogni componente in React ottiene questo oggetto oggetti di scena.

Prima di imparare come utilizzare questo oggetto oggetti di scena, impariamo a conoscere i componenti funzionali.

a) Componente funzionale

Un componente funzionale in React consuma dati arbitrari che gli vengono passati usando l'oggetto oggetti di scena. Restituisce un oggetto che descrive ciò che UI React dovrebbe rendere. I componenti funzionali sono anche noti come componenti Stateless.

Scriviamo il nostro primo componente funzionale:

È così semplice. Abbiamo appena passato gli oggetti di scena come argomento a una semplice funzione JavaScript e restituito, umm, beh, cos'era quello? Quella cosa

{props.name}
! È JSX (JavaScript esteso). Ne impareremo di più in una sezione successiva.

Questa funzione sopra mostrerà il seguente HTML nel browser:

Leggi la sezione seguente su JSX, dove ho spiegato come otteniamo questo HTML dal nostro codice JSX.

Come puoi utilizzare questo componente funzionale nella tua app React? Sono contento che tu l'abbia chiesto! È semplice come il seguente:

Il nome dell'attributo nel codice sopra diventa props.name all'interno del nostro componente Hello. L'età dell'attributo diventa props.age e così via.

Ricorda! Puoi nidificare un componente React all'interno di altri componenti React.

Usiamo questo componente Hello nel nostro parco giochi codepen. Sostituisci il ReactDOM.render divinside () con il nostro componente Hello, come segue, e vedi le modifiche nella finestra in basso.

Ma cosa succede se il tuo componente ha uno stato interno? Ad esempio, come il seguente componente contatore, che ha una variabile di conteggio interna, che cambia con i tasti + e -.

b) Componente di classe

Il componente basato sulla classe ha uno stato di proprietà aggiuntivo, che puoi utilizzare per conservare i dati privati ​​di un componente. Possiamo riscrivere il nostro componente Hello usando la notazione di classe come segue. Poiché questi componenti hanno uno stato, sono anche noti come componenti Stateful.

Estendiamo la classe React.Component della libreria React per creare componenti basati su classi in React. Ulteriori informazioni sulle classi JavaScript qui.

Il metodo render () deve essere presente nella tua classe poiché React cerca questo metodo per sapere quale interfaccia utente dovrebbe essere visualizzata sullo schermo.

Per utilizzare questo tipo di stato interno, dobbiamo prima inizializzare l'oggetto stato nel costruttore della classe componente, nel modo seguente.

Allo stesso modo, è possibile accedere agli oggetti di scena all'interno del nostro componente basato su classi utilizzando questo oggetto.props.

Per impostare lo stato, utilizzare setState () di React.Component. Vedremo un esempio di questo, nell'ultima parte di questo tutorial.

Suggerimento: non chiamare mai setState () all'interno della funzione render (), poiché setState () provoca il rendering del componente e ciò comporterà un ciclo infinito.

Un componente basato su classe ha uno

Oltre allo stato, un componente basato su classi ha alcuni metodi del ciclo di vita come componentWillMount (). Puoi usarli per fare cose, come inizializzare lo stato e tutto ciò che non rientra nell'ambito di questo post.

JSX

JSX è una forma abbreviata di JavaScript esteso ed è un modo per scrivere componenti React. Usando JSX, ottieni la piena potenza di JavaScript all'interno di XML come tag.

Inserisci espressioni JavaScript all'interno di {}. Di seguito sono riportati alcuni esempi JSX validi.

Il modo in cui funziona è scrivere JSX per descrivere l'aspetto dell'interfaccia utente. Un transpiler come Babel converte quel codice in un mucchio di chiamate React.createElement (). La libreria React usa quindi quelle chiamate React.createElement () per costruire una struttura ad albero di elementi DOM (nel caso di React for Web) o viste native (nel caso di React Native) e la mantiene in memoria.

React quindi calcola come può simulare efficacemente questo albero nella memoria dell'interfaccia utente visualizzata all'utente. Questo processo è noto come riconciliazione. Al termine del calcolo, React apporta le modifiche all'interfaccia utente effettiva sullo schermo.

In che modo React converte il tuo JSX in un albero che descrive l'interfaccia utente della tua app

Puoi usare il REPL online di Babel per vedere cosa React effettivamente produce quando scrivi un JSX.

Usa Babel REPL per trasformare JSX in semplice JavaScript

Poiché JSX è solo uno zucchero sintattico su semplici chiamate React.createElement (), React può essere usato senza JSX

Ora abbiamo tutti i concetti in atto, quindi siamo ben posizionati per scrivere un contro componente che abbiamo visto in precedenza come GIF.

Il codice è il seguente e spero che tu sappia già come renderlo nel nostro parco giochi.

Di seguito sono riportati alcuni punti salienti sul codice sopra.

  1. JSX usa camelCasing quindi l'attributo button è onClick, non onclick, come usiamo in HTML.
  2. Il binding è necessario affinché questo funzioni sui callback. Vedi le righe 8 e 9 nel codice sopra.

Il codice interattivo finale si trova qui.

Con ciò, abbiamo raggiunto la conclusione del nostro corso intensivo React. Spero di aver fatto luce su come funziona React e su come puoi utilizzare React per creare app più grandi, utilizzando componenti più piccoli e riutilizzabili.

Se hai domande o dubbi, contattami su Twitter @ rajat1saxena o scrivimi a rajat@raynstudios.com.

Consiglia questo post, se ti è piaciuto e condividerlo con la tua rete. Seguimi per altri post relativi alla tecnologia e valuta la possibilità di iscriverti al mio canale Rayn Studios su YouTube. Molte grazie.