Σε αυτό το σενάριο ζευγαρώματος, η Sarah Drasner με ενώνει και με καθοδηγεί σε μερικά από τα πρώτα μου μαθήματα του React. Αντιμετωπίζουμε κάποια λειτουργικότητα "πραγματικού κόσμου": μια φόρμα σχολίων.
Αυτό αποδείχθηκε ένα πολύ χρήσιμο κομμάτι UI για εργασία, καθώς απαιτούσε πολλά πράγματα μάλλον θεμελιώδη για το React (ή τουλάχιστον, μου φαίνεται). Για παράδειγμα, ένας κύριος "Εφαρμογή" που ασχολείται με το state(το μεγάλο "κράτος" είναι τα ίδια τα σχόλια) και τα στοιχεία που ασχολούνται με την απόδοση της προβολής (για παράδειγμα, η φόρμα σχολίων είναι ένα στοιχείο και κάθε σχόλιο είναι ένα συστατικό).
Στη συνέχεια, μπήκαμε σε πολλά μικρότερα πράγματα, αλλά και τεράστια πράγματα που πρέπει να καταλάβουμε στο React-land, όπως:
props- ένας τρόπος μετάδοσης δεδομένων μεταξύ των στοιχείων. Μοιάζουν με χαρακτηριστικά HTML όταν τα στέλνετε και φτάνουν ως αντικείμενο με τη μορφή αυτού.refs- πώς αντλείτε δεδομένα από το στοιχείο φόρμας που δημιουργήσαμε.keys- ένας τρόπος για να προσδιορίσετε μοναδικά ένα στοιχείο όταν επαναλαμβάνεται. Επαναλαμβάνουμε τα σχόλια εδώ (μπορεί να υπάρχουν πολλά σχόλια), οπότε αν θέλαμε να έχουμε λειτουργικότητα που θα μπορούσε να αλλάξει οποιοδήποτε από αυτά, το να έχετε ένα κλειδί είναι αυτό που κάνει το React αποτελεσματικό (μπορεί απλά να αντικαταστήσει αυτό το μόνο σχόλιο αντί για όλα) .
Συν ένα τόνο περισσότερο!
Εδώ είναι το demo στο οποίο δουλέψαμε:
Δείτε το Στυλό που ξεκινά μια φόρμα σχολιασμού με αντιδράσεις από τον Chris Coyier (@chriscoyier) στο CodePen.
Πώς ανεβάζετε τη μάθηση React πέρα από αυτό; Ξεκινήστε εδώ.