W tym pokazie parowania dołącza do mnie Sarah Drasner i prowadzi mnie przez niektóre z moich pierwszych doświadczeń związanych z Reactem. Zajmujemy się funkcjonalnością w stylu „prawdziwego świata”: formularzem komentarza.
Okazało się, że jest to całkiem przydatny interfejs użytkownika do pracy, ponieważ wymagał wielu rzeczy raczej podstawowych dla Reacta (a przynajmniej wydaje mi się). Na przykład, główna „aplikacja”, która zajmuje się state(naszym wielkim „stanem” są same komentarze) i komponentami zajmującymi się renderowaniem widoku (na przykład formularz komentarza jest komponentem, a każdy komentarz jest komponentem).
Potem weszliśmy do wielu mniejszych rzeczy związanych z Reactem, ale także ogromnych rzeczy do zrozumienia w React-land, takich jak:
props- sposób przekazywania danych między komponentami. Kiedy je wysyłasz, wyglądają jak atrybuty HTML i pojawiają się jako obiekt w postaci this.props.refs- jak wyciągasz dane z utworzonego przez nas elementu formularza.keys- sposób na unikalną identyfikację komponentu, gdy jest powtarzany. Powtarzamy tutaj komentarze (może być wiele komentarzy), więc gdybyśmy mieli funkcjonalność, która mogłaby zmienić którykolwiek z nich, posiadanie klucza jest tym, co sprawia, że React jest skuteczny (może po prostu zastąpić ten pojedynczy komentarz zamiast wszystkich) .
I jeszcze mnóstwo!
Oto wersja demonstracyjna, nad którą pracowaliśmy:
Zobacz Pen rozpoczynający formularz komentarzy oparty na reakcji autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.
Jak ulepszyć swoją naukę React poza tym? Zacznij tutaj.