Rock Solid React.js Ιδρύματα: Ένας οδηγός για αρχάριους

Δουλεύω με τους React και React-Native τους τελευταίους δύο μήνες. Έχω ήδη κυκλοφορήσει δύο εφαρμογές στην παραγωγή, το Kiven Aa (React) και το Pollen Chat (React Native). Όταν άρχισα να μαθαίνω το React, έψαχνα για κάτι (ένα blog, ένα βίντεο, ένα μάθημα, οτιδήποτε άλλο) που δεν μου δίδαξε πώς να γράφω εφαρμογές στο React. Ήθελα επίσης να με προετοιμάσει για συνεντεύξεις.

Το μεγαλύτερο μέρος του υλικού που βρήκα, επικεντρώθηκε στο ένα ή το άλλο. Έτσι, αυτή η ανάρτηση απευθύνεται στο κοινό που αναζητά έναν τέλειο συνδυασμό θεωρίας και πρακτικών. Θα σας δώσω λίγη θεωρία, ώστε να καταλάβετε τι συμβαίνει κάτω από την κουκούλα και στη συνέχεια θα σας δείξω πώς να γράψετε κάποιον κώδικα React.js.

Αν προτιμάτε βίντεο, έχω επίσης ολόκληρο το μάθημα στο YouTube. Ελέγξτε το.

Ας βουτήξουμε…

Το React.js είναι μια βιβλιοθήκη JavaScript για τη δημιουργία διεπαφών χρήστη

Μπορείτε να δημιουργήσετε κάθε είδους εφαρμογές μιας σελίδας. Για παράδειγμα, chat messenger και πύλες ηλεκτρονικού εμπορίου όπου θέλετε να εμφανίζονται αλλαγές στη διεπαφή χρήστη σε πραγματικό χρόνο.

Όλα είναι ένα συστατικό

Η εφαρμογή React αποτελείται από στοιχεία, πολλά από αυτά , τα οποία είναι φωλιαμένα μεταξύ τους. «Αλλά ποια είναι τα συστατικά;», μπορείτε να ρωτήσετε.

Ένα στοιχείο είναι ένα επαναχρησιμοποιήσιμο κομμάτι κώδικα, το οποίο καθορίζει τον τρόπο εμφάνισης και συμπεριφοράς ορισμένων χαρακτηριστικών στο περιβάλλον χρήστη. Για παράδειγμα, ένα κουμπί είναι ένα στοιχείο.

Ας δούμε την ακόλουθη αριθμομηχανή, την οποία βλέπετε στο Google όταν προσπαθείτε να υπολογίσετε κάτι όπως 2 + 2 = 4 –1 = 3 (γρήγορα μαθηματικά!)

Όπως μπορείτε να δείτε στην παραπάνω εικόνα, η αριθμομηχανή έχει πολλές περιοχές - όπως το παράθυρο εμφάνισης αποτελεσμάτων και το numpad . Όλα αυτά μπορούν να είναι ξεχωριστά συστατικά ή ένα τεράστιο συστατικό. Εξαρτάται από το πόσο άνετα είναι κάποιος στο να σπάσει και να αφαιρέσει τα πράγματα στο React

Γράφετε κώδικα για όλα αυτά τα στοιχεία ξεχωριστά. Στη συνέχεια, συνδυάστε αυτά κάτω από ένα δοχείο, το οποίο με τη σειρά του είναι ένα συστατικό React. Με αυτόν τον τρόπο μπορείτε να δημιουργήσετε επαναχρησιμοποιήσιμα στοιχεία και η τελική σας εφαρμογή θα είναι μια συλλογή ξεχωριστών στοιχείων που συνεργάζονται.

Το παρακάτω είναι ένας τέτοιος τρόπος για να γράψετε την αριθμομηχανή, που φαίνεται παραπάνω, στο React:

Ναί! Μοιάζει με κώδικα HTML, αλλά δεν είναι. Θα το διερευνήσουμε περισσότερα στις επόμενες ενότητες.

Ρύθμιση της παιδικής χαράς μας

Αυτό το σεμινάριο επικεντρώνεται στις βασικές αρχές του React. Δεν κατευθύνεται κυρίως προς το React for Web ή το React Native (για τη δημιουργία εφαρμογών για κινητά). Έτσι, θα χρησιμοποιήσουμε έναν διαδικτυακό επεξεργαστή για να αποφύγουμε συγκεκριμένες διαμορφώσεις ιστού ή εγγενών εγγράφων, προτού μάθουμε τι μπορεί να κάνει το React.

Έχω ήδη δημιουργήσει ένα περιβάλλον για εσάς στο codepen.io. Απλώς ακολουθήστε τον σύνδεσμο και διαβάστε όλα τα σχόλια σε καρτέλες HTML και JavaScript (JS).

Στοιχεία ελέγχου

Έχουμε μάθει ότι η εφαρμογή React είναι μια συλλογή από διάφορα στοιχεία, δομημένα ως ένθετο δέντρο. Έτσι, απαιτούμε κάποιο είδος μηχανισμού για τη μετάδοση δεδομένων από το ένα συστατικό στο άλλο.

Εισαγάγετε "στηρίγματα"

Μπορούμε να μεταφέρουμε αυθαίρετα δεδομένα στο στοιχείο μας χρησιμοποιώντας ένα propsαντικείμενο. Κάθε στοιχείο στο React λαμβάνει αυτό το propsαντικείμενο.

Πριν μάθετε πώς να χρησιμοποιείτε αυτό το propsαντικείμενο, ας μάθουμε για τα λειτουργικά στοιχεία.

α) Λειτουργικό συστατικό

Ένα λειτουργικό στοιχείο στο React καταναλώνει αυθαίρετα δεδομένα που μεταβιβάζετε σε αυτό χρησιμοποιώντας propsαντικείμενο. Επιστρέφει ένα αντικείμενο που περιγράφει τι πρέπει να αποδίδει το UI React. Τα λειτουργικά συστατικά είναι επίσης γνωστά ως στοιχεία χωρίς κατάσταση.

Ας γράψουμε το πρώτο λειτουργικό μας στοιχείο:

Είναι τόσο απλό. Μόλις περάσαμε propsως επιχείρημα σε μια απλή συνάρτηση JavaScript και επιστρέψαμε , λοιπόν, τι ήταν αυτό; Αυτό {props.name}i κατά> πράγμα! Είναι JSX ( επέκταση JavaScript ). Θα μάθουμε περισσότερα για αυτό σε μια μεταγενέστερη ενότητα.

Αυτή η παραπάνω λειτουργία θα αποδώσει τον ακόλουθο HTML στο πρόγραμμα περιήγησης:

Διαβάστε την παρακάτω ενότητα σχετικά με το JSX, όπου έχω εξηγήσει πώς λαμβάνουμε αυτό το HTML από τον κώδικα JSX.

Πώς μπορείτε να χρησιμοποιήσετε αυτό το λειτουργικό στοιχείο στην εφαρμογή React; Χαίρομαι που ρωτήσατε! Είναι τόσο απλό όσο το ακόλουθο:

Το χαρακτηριστικό nameστον παραπάνω κώδικα μπαίνει props.nameστο Hello στοιχείο μας . Το χαρακτηριστικό ageγίνεται props.ageκαι ούτω καθεξής.

Θυμάμαι! Μπορείτε να τοποθετήσετε ένα στοιχείο React μέσα σε άλλα στοιχεία React.

Ας χρησιμοποιήσουμε αυτό το Helloστοιχείο στην παιδική χαρά codepen. Αντικαταστήστε το divεσωτερικό ReactDOM.render()με το Helloστοιχείο μας , ως εξής, και δείτε τις αλλαγές στο κάτω παράθυρο.

Τι γίνεται όμως αν το στοιχείο σας έχει κάποια εσωτερική κατάσταση; Για παράδειγμα, όπως το ακόλουθο στοιχείο μετρητή, το οποίο έχει μια εσωτερική μεταβλητή μέτρησης, η οποία αλλάζει με τα πλήκτρα + και -

β) Βασικό συστατικό

Το στοιχείο που βασίζεται στην κλάση έχει μια επιπλέον ιδιότητα state, την οποία μπορείτε να χρησιμοποιήσετε για να διατηρήσετε τα προσωπικά δεδομένα ενός στοιχείου. Μπορούμε να ξαναγράψουμε το Helloστοιχείο μας χρησιμοποιώντας τη σημειογραφία τάξης ως εξής. Δεδομένου ότι αυτά τα στοιχεία έχουν κατάσταση, αυτά είναι επίσης γνωστά ως στοιχεία Stateful .

Επεκτείνουμε την React.Componentκλάση της βιβλιοθήκης React για να φτιάξουμε εξαρτήματα που βασίζονται στην τάξη στο React. Μάθετε περισσότερα για τα μαθήματα JavaScript εδώ.

Η render()μέθοδος πρέπει να υπάρχει στην τάξη σας, καθώς το React αναζητά αυτήν τη μέθοδο για να μάθει ποια διεπαφή χρήστη πρέπει να αποδίδει στην οθόνη.

Για να χρησιμοποιήσουμε αυτό το είδος εσωτερικής κατάστασης, πρέπει πρώτα να προετοιμάσουμε το stateαντικείμενο στον κατασκευαστή της κλάσης συστατικών, με τον ακόλουθο τρόπο.

Παρομοίως, propsμπορείτε να έχετε πρόσβαση στο εσωτερικό του εξαρτήματος που βασίζεται στην κλάση χρησιμοποιώντας this.propsαντικείμενο.

Για να ορίσετε την κατάσταση, χρησιμοποιείτε React.Componentτο setState(). Θα δούμε ένα παράδειγμα αυτού, στο τελευταίο μέρος αυτού του σεμιναρίου.

Συμβουλή: Ποτέ μην καλείτε τη λειτουργία setState()εσωτερικού render(), καθώς setState()προκαλεί την εκ νέου απόδοση του στοιχείου και αυτό θα έχει ως αποτέλεσμα ατελείωτο βρόχο.

Εκτός από state, ένα συστατικό που βασίζεται στην τάξη έχει κάποιες μεθόδους κύκλου ζωής όπως componentWillMount().αυτές που μπορείτε να χρησιμοποιήσετε για να κάνετε πράγματα, όπως η αρχικοποίηση state και όλα εκτός από αυτό το πεδίο εφαρμογής αυτής της ανάρτησης.

JSX

Το JSX είναι μια σύντομη μορφή επέκτασης JavaScript και είναι ένας τρόπος σύνταξης React στοιχείων. Χρησιμοποιώντας το JSX, αποκτάτε την πλήρη ισχύ του JavaScript μέσα σε ετικέτες τύπου XML.

Βάζετε τις εκφράσεις JavaScript μέσα {}. Τα παρακάτω είναι μερικά έγκυρα παραδείγματα JSX.

Ο τρόπος που λειτουργεί είναι να γράψετε JSX για να περιγράψετε πώς θα πρέπει να εμφανίζεται το περιβάλλον χρήστη σας. Ένα transpiler όπως Babelμετατρέπει αυτόν τον κώδικα σε μια δέσμη React.createElement()κλήσεων. Στη συνέχεια, η βιβλιοθήκη του React χρησιμοποιεί αυτές τις React.createElement()κλήσεις για να κατασκευάσει μια δομή που δεν μοιάζει με στοιχεία DOM (σε περίπτωση React για Web) ή εγγενείς προβολές (στην περίπτωση του React Native) και τη διατηρεί στη μνήμη.

Το React υπολογίζει έπειτα πώς μπορεί να μιμηθεί αποτελεσματικά αυτό το δέντρο στη μνήμη της διεπαφής χρήστη που εμφανίζεται στον χρήστη. Αυτή η διαδικασία είναι γνωστή ως συμφιλίωση. Αφού ολοκληρωθεί ο υπολογισμός, το React πραγματοποιεί τις αλλαγές στην πραγματική διεπαφή χρήστη στην οθόνη.

Μπορείτε να χρησιμοποιήσετε το διαδικτυακό REPL του Babel για να δείτε τι πραγματικά αντιδρά το React όταν γράφετε κάποιο JSX.

Δεδομένου ότι το JSX είναι απλώς μια συντακτική ζάχαρη σε σχέση με απλές React.createElement()κλήσεις, το React μπορεί να χρησιμοποιηθεί χωρίς JSX

Τώρα έχουμε κάθε ιδέα στη θέση του, οπότε είμαστε σε θέση να γράψουμε ένα counterστοιχείο που είδαμε νωρίτερα ως GIF.

Ο κωδικός έχει ως εξής και ελπίζω να γνωρίζετε ήδη πώς να το αποδώσετε στην παιδική χαρά μας.

Τα παρακάτω είναι μερικά σημαντικά σημεία για τον παραπάνω κώδικα.

  1. Το JSX χρησιμοποιεί camelCasingως εκ τούτου buttonτο χαρακτηριστικό δεν onClickείναι onclick, όπως χρησιμοποιούμε σε HTML.
  2. Η δέσμευση είναι απαραίτητη για thisνα εργαστείτε σε επιστροφές κλήσεων Δείτε τις γραμμές # 8 και 9 στον παραπάνω κώδικα.

Ο τελικός διαδραστικός κωδικός βρίσκεται εδώ.

Με αυτό, καταλήξαμε στο συμπέρασμα του React crash course Ελπίζω να ρίξω λίγο φως στο πώς λειτουργεί το React και πώς μπορείτε να χρησιμοποιήσετε το React για να δημιουργήσετε μεγαλύτερες εφαρμογές, χρησιμοποιώντας μικρότερα και επαναχρησιμοποιήσιμα στοιχεία.

Εάν έχετε απορίες ή αμφιβολίες, ανεβάστε μου στο Twitter @ rajat1saxena ή γράψτε μου στη διεύθυνση [email protected]

Προτείνετε αυτήν την ανάρτηση, αν σας άρεσε και μοιραστείτε την με το δίκτυό σας. Ακολουθήστε με για περισσότερες δημοσιεύσεις σχετικά με την τεχνολογία και σκεφτείτε να εγγραφείτε στο κανάλι μου Rayn Studios στο YouTube. Ευχαριστώ πολύ.