In deze screencast voor het koppelen voegt Sarah Drasner zich bij me en leidt me door enkele van mijn allereerste ervaringen met React. We pakken enkele functionaliteit in "echte wereld" -stijl aan: een reactieformulier.
Dit bleek een behoorlijk handig stukje gebruikersinterface te zijn om mee te werken, omdat er veel dingen nodig waren die nogal fundamenteel waren om te reageren (of tenminste, het lijkt mij). Bijvoorbeeld een hoofdapp die zich bezighoudt met de state(onze grote 'status'-zaak zijn de opmerkingen zelf) en componenten die te maken hebben met het weergeven van de weergave (het reactieformulier is bijvoorbeeld een component en elke opmerking is een component).
Toen kwamen we in veel kleinere React-dingetjes terecht, maar ook enorme dingen om te begrijpen in React-land, zoals:
props- een manier om gegevens tussen componenten uit te wisselen. Ze zien eruit als HTML-attributen wanneer u ze verzendt en komen aan als een object in de vorm van this.props.refs- hoe u gegevens uit het formulierelement haalt dat we hebben gemaakt.keys- een manier om een onderdeel uniek te identificeren wanneer het wordt herhaald. We herhalen hier opmerkingen (er kunnen meerdere opmerkingen zijn), dus als we functionaliteit zouden hebben die een van deze zou kunnen veranderen, is het hebben van een sleutel wat React efficiënt maakt (het kan gewoon die ene opmerking vervangen in plaats van ze allemaal) .
Plus een ton meer!
Hier is de demo waaraan we hebben gewerkt:
Zie de pen die een reactie-aangedreven reactieformulier start door Chris Coyier (@chriscoyier) op CodePen.
Hoe verhoog je je React-leren verder dan dit? Begin hier.