În acest scenariu de împerechere, Sarah Drasner mi se alătură și mă ghidează prin unele dintre primele mele învățături despre React. Abordăm unele funcționalități de stil „lumea reală”: un formular de comentarii.
Acest lucru sa dovedit a fi un pic destul de util de interfață cu care să lucreze, deoarece a necesitat o mulțime de lucruri destul de fundamentale pentru a reacționa (sau cel puțin, mi se pare). De exemplu, o „aplicație” principală care se ocupă de state
(marea noastră „stare” sunt comentariile în sine) și componente care se ocupă cu redarea vizualizării (de exemplu, formularul de comentariu este o componentă și fiecare comentariu este o componentă).
Apoi am intrat în multe lucruri mai mici React, dar și lucruri uriașe de înțeles în React-land, cum ar fi:
props
- o modalitate de a transmite date între componente. Acestea arată ca atribute HTML atunci când le trimiteți și ajung ca obiect sub forma this.props.refs
- cum scoateți datele din elementul de formular pe care l-am creat.keys
- o modalitate de a identifica în mod unic o componentă atunci când este repetată. Repetăm comentarii aici (pot exista mai multe comentarii), așa că, dacă ar trebui să avem funcționalități care ar putea schimba oricare dintre ele, a avea o cheie este ceea ce face React eficient (poate înlocui doar acel comentariu în loc de toate) .
Plus încă o tonă!
Iată demonstrația la care am lucrat:
Vedeți stiloul de pornire a unui formular de comentarii cu reacție de Chris Coyier (@chriscoyier) pe CodePen.
Cum vă ridicați nivelul de învățare React dincolo de acest lucru? Începe aici.