In questo screencast di accoppiamento, Sarah Drasner si unisce a me e mi guida attraverso alcuni dei miei primissimi apprendimenti di React. Affrontiamo alcune funzionalità di stile del "mondo reale": un modulo di commento.
Questa si è rivelata una parte abbastanza utile dell'interfaccia utente con cui lavorare, poiché richiedeva molte cose piuttosto fondamentali per React (o almeno, mi sembra). Ad esempio, una "App" principale che si occupa della state(la nostra grande cosa di "stato" sono i commenti stessi) e componenti che si occupano del rendering della vista (ad esempio, il modulo di commento è un componente e ogni commento è un componente).
Poi siamo entrati in molte cose più piccole di React, ma anche cose enormi da capire in React-land, come:
props- un modo per passare i dati tra i componenti. Sembrano attributi HTML quando li invii e arrivano come oggetto sotto forma di this.props.refs- come estrarre i dati dall'elemento del modulo che abbiamo creato.keys- un modo per identificare in modo univoco un componente quando viene ripetuto. Stiamo ripetendo i commenti qui (possono esserci più commenti), quindi se dovessimo avere funzionalità che potrebbero cambiarli, avere una chiave è ciò che rende React efficiente (può semplicemente sostituire quel singolo commento invece di tutti loro) .
Inoltre un sacco di più!
Ecco la demo su cui abbiamo lavorato:
Vedere la penna che avvia un modulo di commento basato sulla reazione di Chris Coyier (@chriscoyier) su CodePen.
Come aumenti di livello il tuo apprendimento React oltre a questo? Comincia qui.