In diesem Pairing-Screencast begleitet mich Sarah Drasner und führt mich durch einige meiner ersten Erkenntnisse über React. Wir befassen uns mit einigen Funktionen im Stil der „realen Welt“: einem Kommentarformular.
Es stellte sich heraus, dass dies ein ziemlich nützliches Stück Benutzeroberfläche war, da es viele Dinge erforderte, die für React ziemlich grundlegend waren (oder zumindest scheint es mir). Zum Beispiel eine Master-App, die sich mit dem state(unser großes "Status" -Ding sind die Kommentare selbst) und Komponenten befasst, die sich mit dem Rendern der Ansicht befassen (zum Beispiel ist das Kommentarformular eine Komponente und jeder Kommentar ist eine Komponente).
Dann haben wir uns mit vielen kleineren React-Dingen beschäftigt, aber auch mit riesigen Dingen, die im React-Land zu verstehen sind, wie:
props- eine Möglichkeit, Daten zwischen Komponenten zu übertragen. Sie sehen beim Senden wie HTML-Attribute aus und kommen als Objekt in Form von this.props an.refs- wie Sie Daten aus dem von uns erstellten Formularelement herausholen.keys- eine Möglichkeit, eine Komponente eindeutig zu identifizieren, wenn sie wiederholt wird. Wir wiederholen hier Kommentare (es kann mehrere Kommentare geben). Wenn wir also Funktionen haben, die einen von ihnen ändern könnten, ist es effizient, einen Schlüssel zu haben, der React effizient macht (er kann nur diesen einzelnen Kommentar anstelle aller ersetzen). .
Plus eine Tonne mehr!
Hier ist die Demo, an der wir gearbeitet haben:
Siehe den Stift, der ein reaktionsgesteuertes Kommentarformular von Chris Coyier (@chriscoyier) auf CodePen startet.
Wie können Sie Ihr React-Lernen darüber hinaus verbessern? Fang hier an.