[Παίζει μουσική] 

Neel MEHTA: Εδώ πηγαίνει. 

Λοιπόν, ο καθένας, καλωσορίζουμε στο δικτυακό εφαρμογές του μέλλοντος με React. Αυτό είναι CS50. Το όνομά μου είναι Neel. Είμαι ΤΑ για CS50 και δευτεροετών φοιτητών στο Harvard College και ένα πολύ, πολύ πάθος για την ανάπτυξη Ιστού. Έτσι, είμαι πολύ συναρπαστικό να πρέπει να μιλάμε σε εσάς σήμερα, αν είστε εδώ ή στο σπίτι βλέποντας, για React, η οποία είναι, και πάλι όπως είπα, το μέλλον του Web Apps. 

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

Έτσι, το Facebook είναι ένα πλαίσιο web που αναπτύχθηκε από το Facebook ένα-δύο χρόνια back-- React είναι. Είναι επειδή έχουν χρησιμοποιηθεί σε Facebook εφαρμογές για κινητά τους και η εφαρμογή web, Instagram. Khan Academy είναι ένα άλλο έντονο πρώιμο υιοθετών της React. 

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

Και έτσι React είναι καλό όχι μόνο ως πλαισίου για τις διεπαφές web κτίριο. Είναι καλό για την οικοδόμηση διεπαφές web. Υπάρχει επίσης ένα πράγμα Αντιδράστε ονομάζεται Native οποία σας επιτρέπει να δημιουργήσετε διασυνδέσεις για Android και iOS και ίσως και άλλες πλατφόρμες στο μέλλον χρησιμοποιώντας μόνο τον ίδιο κώδικα JavaScript. Θα μπορούσατε να χρησιμοποιήσετε την ίδια ακριβώς Κώδικα JavaScript για να καταστήσει ιστοσελίδες, να καταστήσει Android εφαρμογές και εφαρμογές iOS. 

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

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

React είναι χτισμένο στην ιδέα των συστατικών. Ένα συστατικό είναι ένα HTML στοιχείο στα στεροειδή, έτσι ώστε ένα στοιχείο HTML είναι σαν ένα κουμπί. Είναι μια σκέψη. Είναι μια κεφαλίδα, έτσι δεν είναι; Και Instagram θα χρησιμοποιήσει αυτές, αλλά θα χρησιμοποιήσει επίσης τα στοιχεία του React. 

Αντιδράστε συστατικά είναι souped-up στοιχεία HTML που έχουν τη δική τους συμπεριφορά που περιέχονται σε αυτές. Έτσι, ως ένα παράδειγμα, θα μπορούσαμε να έχουμε ένα στοιχείο τη φορά, ένα συστατικό του χρόνου, η οποία θα περιέχει, όπως η χρονική σφραγίδα, ξέρετε, ένα συστατικό το οποίο προφίλ θα περιέχει την εικόνα προφίλ και το όνομα του προσώπου. Μπορεί να έχει σαν μετρητής, ο οποίος μπορεί να μετρήσει όπως ο αριθμός των συμπαθεί, και αν κάνετε κλικ σε αυτό, αυτό θα την αύξηση του αριθμού των συμπαθεί. Ένα συστατικό είναι απλώς ένα μάτσο κώδικα HTML που έχει κάποια λειτουργικότητα τυλιγμένο στο εσωτερικό του. Έτσι είναι σαν ένα στοιχείο HTML στα στεροειδή, όπως είπα και πριν. Μπορείτε να πάρετε αυτά τα στοιχεία, και μπορείτε να τα βάλει μαζί να κάνουν νέα στοιχεία, σε Στην περίπτωση αυτή, ένα συστατικό των υστέρων, το οποίο περιέχει όλα αυτά τα πράγματα. Θα περιέχει χρόνος, το προφίλ, LikeCounter, ίσως το σχόλιο και ίσως η ίδια η εικόνα. Και έτσι Web Apps είναι ακριβώς χτίστηκε από τη λήψη συστατικά και τη θέση τους μαζί. Μια τροφή Instagram δεν είναι τίποτα περισσότερο από ό, τι ένα μάτσο δημοσιεύσεις ένα μετά το άλλο, κάθε θέση περιέχει, όπως το Time, Προφίλ, LikeCounter, και ούτω καθεξής. Είναι το είδος του σαν να χτίζεις ένα σπίτι. Δεν χτίσει το σπίτι από πάνω προς τα κάτω. Θα σας πάρει components-- να λάβει, όπως το μπάνιο. Παίρνετε το bedroom-- μπορείτε να κολλήσετε μαζί, και έχετε ένα νέο στοιχείο. Έχετε ένα νέο τμήμα του σπιτιού. 

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

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

Εντάξει, έτσι ώστε να αντιδρά είναι δροσερό, διότι έχει ένα διαφορετικό τρόπο θεώρησης το πώς θα οικοδομήσουμε Web Apps. Έχετε ακούσει πιθανώς του MVC, ένα μοντέλο μπορείτε να ελέγχετε σε CS50 ή οτιδήποτε άλλο άλλα σχολαστικά τις κατηγορίες που χρησιμοποιείτε. Και οι περισσότεροι πλαίσια είναι χτισμένο γύρω από την ιδέα του MVC. Αντιδρούν δεν είναι. React είναι χτισμένο γύρω από την ιδέα της μονής κατεύθυνσης ροή δεδομένων όπως φαίνεται από αυτό το διάγραμμα ή το γραφικό εδώ. 

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

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

Στο Facebook Messenger, για παράδειγμα, η οποία είναι React, μπορεί να έχετε μια λίστα μηνυμάτων ως πηγή δεδομένων σας. Και αυτό δεν θα καταστήσει μόνο ο κατάλογος των μηνυμάτων αλλά και τον κατάλογο των φίλων που έχετε. Έχετε το πλήθος των μη αναγνωσμένων. Ίσως επίσης να καταστήσει το πράγμα Facebook που είναι στο κάτω μέρος του Facebook.com. Το ίδιο δεδομένων είναι ένα μοναδική πηγή της αλήθειας και αυτό προκαλεί πολλά συστατικά που πρέπει να αποδοθεί. Και κάθε φορά που ένα από αυτά συστατικών αλλάξει, πηγαίνει πίσω και αλλάζει την πηγή δεδομένων. 

Μπορείτε να στείλετε ένα μήνυμα, έτσι δεν είναι; Αυτό αλλάζει την πηγή δεδομένων. Μπορείτε να διαβάσετε τα μηνύματά σας, έτσι ώστε να ρυθμίσετε αδιάβαστη στο 0. Αυτό αλλάζει την πηγή δεδομένων. Και παρατηρώ ότι όλα αυτά από ένα βέλος πηγαίνει πίσω στα ίδια δεδομένα πηγή, ώστε να γνωρίζετε, δίνεται ένα συγκεκριμένο σύνολο δεδομένων, ξέρετε ακριβώς ποια είναι η σελίδα πρόκειται να μοιάσει. Είναι ντετερμινιστική. Ξέρετε, δίνεται ορισμένα δεδομένα, τι η σελίδα πρόκειται να μοιάσει. Μπορείτε να προβλέψετε το πώς πρόκειται να συμπεριφέρονται και πώς πηγαίνουν τα πράγματα να εργάζονται όταν είναι μαζί. 

Και αν είχα ένα εκατομμύριο εξαρτήματα Εδώ, θα συμπεριφέρονται με τον ίδιο, έτσι δεν είναι; Δεν θα έχει καμία Περίεργο διασυνδέσεις. Ένας στοιχεία που παρασχέθηκαν από ένα εκατομμύριο εξαρτήματα. Ένα εκατομμύριο εξαρτήματα μπορούσε πάτε πίσω και να επεξεργαστείτε τα δεδομένα. Και έτσι αυτό είναι πολύ ωραίο. Χτίζουμε συναρμολογούμενων, εύκολα επεκτάσιμη εφαρμογές web. 

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

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

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

Έτσι React είναι βασικά ένα web view-- ένα εμπρόσθιο άκρο με εξαρτήματα για οποιαδήποτε πηγή δεδομένων. Και έτσι πηγαίνει από την πηγή δεδομένων για να αντιδρούν συστατικά είναι αρκετά εύκολο. Πηγαίνοντας ο άλλος τρόπος είναι λίγο πιο δύσκολο. Αυτό χρησιμοποιεί Flux όπως ανέφερα πριν. Δεν θα μπω σε αυτό. Θα επικεντρωθεί περισσότερο στην δεδομένα προς συστατικό πλευρά. Με αυτό τον τρόπο μπορείτε να κάνετε δροσερό, διασκεδαστικές εφαρμογές web. Δεν θα επηρεάσει τον έξω κόσμο για τώρα, αλλά αυτό είναι μια άλλη ιστορία. 

Εντάξει, οπότε αν ήσουν εδώ για το τελευταίο σεμινάριο μου θα ξέρετε ότι όλα του κώδικα για η σημερινή συζήτηση θα είναι σε αυτή τη διεύθυνση URL εδώ, συγνώμη, αυτό το URL εδώ. Και ουσιαστικά θα πάμε για να πάει μέσω τεσσάρων σταδίων, ίσως πέντε, ίσως όχι πέντε. Θα προχωρήσουμε μέσα από τέσσερα βήματα της οικοδόμησης ενός δείγματος React app. Και έτσι όλος ο πηγαίος κώδικας για κάθε βήμα του τρόπου θα είναι εδώ, οπότε αν είστε μετά μαζί στο σπίτι, αισθανθείτε ελεύθερος να μελετήσει αυτόν τον κωδικό. Εάν είστε μετά μαζί εδώ, θα πρέπει να το δείχνει στην οθόνη, οπότε μην ανησυχείτε γι 'αυτό. Αλλά αν είστε στο σπίτι, αισθάνονται ελεύθερος να επισκεφθείτε αυτή την ιστοσελίδα. Και, ναι, θα πρέπει να μπορείτε να πάρετε όλος ο κώδικας που θα χρειαστείτε ποτέ εδώ. Γι 'αυτό είναι μια καλή σκονάκι καθώς και για τις μελλοντικές περιπέτειες σας με React. Cool, οπότε αν ο καθένας που είναι εδώ, και ακόμα κι αν είστε στο σπίτι, σηκώσει αυτή την ιστοσελίδα, is.gd/cs50react, χωρίς κεφάλαιο, δεν υπογράμμισης, ούτε τίποτα. 

Θα δείτε μια σελίδα που μοιάζει λίγο σαν αυτό. Αυτό είναι ένα πράγμα που ονομάζεται CodePen. CodePen είναι ένα συνεργατικό κωδικοποίησης περιβάλλον με το οποίο μπορώ να γράψω κώδικα εδώ, και αυτό θα πρέπει να αποστέλλεται αυτόματα σε εσάς. Και με αυτό τον τρόπο, μπορώ να γράφουν κώδικα. Μπορώ να εκτελέσει κώδικα εδώ. 

Για example-- και αν reloads-- δείτε, Τρέχω κώδικα JavaScript στη σελίδα ακριβώς εδώ, και αυτό θα καθιστά αυτόματα μια ιστοσελίδα με αυτόν τον κώδικα JavaScript. Και έτσι αυτή είναι ένας τρόπος για εμάς να δοκιμάσετε κώδικα πραγματικά γρήγορα, χωρίς να χρειάζεται να χρησιμοποιήσετε ID ή να χρησιμοποιήσετε ένα τοπικό μηχάνημα μας μας ή οτιδήποτε άλλο. Είναι ένας πολύ γρήγορος τρόπος για να κοροϊδεύω και να δοκιμάσουν τα διάφορα είδη κώδικα. 

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

Ναι, αν ο καθένας να να ανοίξει αυτό το σύνδεσμο εδώ. Παρακαλώ να μου δώσετε ένα μπράβο μέχρι τη στιγμή που θα έχετε ανοιχτή. Cool, δροσερό δροσερό. Δεν υπάρχει τίποτα εδώ για τώρα, αλλά θα αλλάξουμε ότι πολύ σύντομα. 

Εντάξει, έτσι React είναι ένας JavaScript βιβλιοθήκη, και ως τέτοια, απαιτεί γνώση της JavaScript, η οποία είναι η γλώσσα προγραμματισμού web. Και αυτό είναι να χρησιμοποιηθούν για άλλα πράγματα τώρα πάρα πολύ, αλλά κυρίως το διαδίκτυο να αναπτύξουν γλώσσα, οπότε αν δεν είστε εξοικειωμένοι με ότι, διαβάστε μια τοποθεσία που ονομάζεται JSforCats.com. Είναι υπέροχο. Μπορείτε να μάθετε το JavaScript σε μισή ώρα. Είναι απίστευτο. 

Γι 'αυτό να δώσει μια ανάγνωση. Επίσης, είναι πολύ HTML εδώ γιατί σχεδιάζουμε ιστοσελίδες του μαθήματος. Έτσι, εάν είστε εξοικειωμένοι με HTML, ελέγξτε HTMLdog.com. Νομίζω ότι η εκμάθηση React είναι μια εκατομμύριο φορές πιο εύκολη, αν έχετε ήδη ξέρουμε τα δομικά υλικά. Αν έχετε τα συστατικά, είναι εύκολο να κάνει ένα μεγαλύτερο συστατικό. Αυτό είναι React γλώσσα για εσάς. 

Έτσι προχωρήστε και να δώσει αυτά τα πράγματα για ανάγνωση. Παύση αυτό το βίντεο. Δώστε του μια να διαβάσετε αν είστε στο σπίτι, αν δεν είστε εξοικειωμένοι με την HTML ή JavaScript Εντάξει, έτσι τι θα πάμε να κάνουμε είναι να πάμε να κάνουμε ένα πολύ βασικό flashcard εφαρμογή χρησιμοποιώντας το React. Εμείς πάμε για να έχουμε μια flashcard. Μπορείτε να αναστρέψετε την κάρτα μπροστά και πίσω. Και θα έχουμε επίσης έναν κατάλογο όλες οι κάρτες που έχουμε, και αν αισθανόμαστε φιλόδοξοι, θα μπορούσαμε να είναι σε θέση να εναλλαγή μεταξύ αυτοκίνητα κάνοντας κλικ πάνω τους. 

Αλλά αυτό είναι, από τα γυμνά σας οστά, μια πολύ απλή React app. Και έτσι αυτό είναι πράγματι Δεν ασήμαντο για την εφαρμογή της, αλλά θα πάμε για να δείξουμε ότι, αν το κάνετε αυτό, είναι πολύ, πολύ εύκολο να επεκταθεί αν άλλοι άνθρωποι να σας βοηθήσει με αυτό. Έτσι θα πάμε να περνούν από τέσσερα στάδια ξεκινώντας από το μηδέν για να οικοδομήσουμε αυτό. 

Εντάξει, έτσι ώστε τα τέσσερα βήματα, θα Ξεκινάμε με το πρώτο βήμα. Το πρώτο βήμα θα είναι οικοδόμηση του πρώτου συστατικού. Όπως είπα και πριν, ένα συστατικό στο React είναι απλά ένα στοιχείο HTML σε στεροειδή. Καθορίζει την HTML και κάποια συμπεριφορά, και θα καθορίζει πώς οι άνθρωποι μπορούν να αλληλεπιδράσουν με αυτό τον τρόπο θα έχουν εσωτερική κατάσταση. Όπως ένα κουμπί θα γνωρίζουν, όπως το πώς πολλοί φορές που κάνετε κλικ, για παράδειγμα, και θα ξέρουν πώς να lay out. 

Ας πάμε μπροστά και να οικοδομήσουμε μας πρώτο συστατικό τη χρήση JavaScript. Έτσι, αν η σύνταξη φαίνεται παράξενο, αυτό είναι επειδή το είδος του είναι. Έτσι, και πάλι, θα πάμε να κάνει μια μεταβλητή που ονομάζεται app χρησιμοποιώντας τη λέξη ας, η οποία καθιστά μια μεταβλητή, ας App ίση React.createClass. 

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

Και πάλι, αν ο δείκτης δεν είναι προφανής για σας, σας συνιστώ να πάτε στο JS για γάτες και να το ελέγξουμε. Είναι ότι μεγεθύνεται αρκετά καλά; Δροσερός. 

Έτσι, κάθε συνιστώσα ανάγκες να έχουν μια λειτουργία render. Η λειτουργία καθιστούν λέει, τι μπορώ να εκτυπώσετε στην οθόνη; Αλλά η συνιστώσα είναι άχρηστο αν δεν το κάνει ξέρω τι να εκτυπώσετε στην οθόνη, έτσι θα πρέπει να έχουν μια λειτουργία render. 

Έτσι, στο να καταστήσει πράγμα, εσείς Απλά πρέπει να επιστρέψουν κάποια HTML. Και τι είναι δροσερός είναι αυτός υπάρχει ένα πράγμα που ονομάζεται JSX, η οποία είναι μια επέκταση του JavaScript που χρησιμοποιείται από αντιδράσει. Θα σας επιτρέπουν να γράψετε HTML μέσα του σας JavaScript, τα οποία Ακούγεται περίεργο είδος, όταν για πρώτη φορά το σκέφτομαι, αλλά κάνει πολύ νόημα αργότερα. Έτσι, μπορούμε να το κάνουμε αυτό. Εάν είστε εξοικειωμένοι με τη γλώσσα HTML, ξέρω έχουμε ένα div με ένα γενικού σκοπού δοχείο για την ουσία. Μπορούμε να επιστρέψει ένα div, και μέσα Αυτό div, μπορούμε να βάλουμε τα πράγματα. 

Ας πούμε ότι θέλουμε να καταστήσει μόνο μια ευθεία-up flashcard για τώρα. Η flashcard, θα έλεγα, θα έχει μια ερώτηση και απάντηση. Έτσι, μέσα σε αυτό το div, ας εκτυπώσετε μια παράγραφο που λέει question-- Ποια είναι η τελική απάντηση για τη ζωή, το σύμπαν; Και τότε η απάντηση είναι πρόκειται να είναι, φυσικά, 42. 

Αυτό δεν ήρθε καθόλου καλά. Ναι, έτσι βασικά μπορείτε πραγματικά γράφετε HTML στο εσωτερικό JavaScript σας. Και αυτό πρόκειται να είναι εκτυπώνεται στην οθόνη. Ας το δοκιμάσουμε. 

Έτσι έχουμε συστατικό μας. Πρέπει να πω React να θέσει το στοιχείο στην οθόνη έτσι React.render, έτσι ώστε να παρατηρήσετε θεραπεία app όπως οποιοδήποτε άλλο στοιχείο. Γράφουμε καθώς ήταν ένα στοιχείο HTML. Όπως και αντί να λέει όπως img για την εικόνα ή σ για την παράγραφο, γράφετε App, έτσι App είναι αντιμετωπίζεται σαν ένα στοιχείο HTML. Όπως είπα και πριν, είναι ένα στοιχείο στα στεροειδή. 

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

Και εμείς δεν πρόκειται να τρέξει με την HTML. Βασικά, αυτό πρόκειται να πάρει βάλει στο εσωτερικό αυτής της σελίδας στοιχείου ότι έχουμε στην οθόνη. Γι 'αυτό τρέχει αυτόν τον κώδικα, και να αντλεί αυτή πράγμα στην οθόνη, έτσι και εδώ είμαστε. Έχουμε κάνει το πρώτο συστατικό Αντιδρούν μας. 

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

Και αυτό που κάναμε, κάναμε μια νέα εφαρμογή χρησιμοποιώντας το συμβολισμό γωνία του στηρίγματος app. Μας είπε να το βάλετε στο εσωτερικό του στοιχείου της σελίδας. Και έτσι ό, τι έκανα, το δημιούργησε μια νέα εφαρμογή από το εν λόγω πρότυπο. Και τότε μου είπε να το καταστήσει. Έτσι είπε, εντάξει, app, τι πρέπει να εκτυπώσετε; App λέει, πάμε να εκτυπώσετε ένα div με δύο σημεία στο εσωτερικό του. Και ιδού, υπάρχει div μας δύο σημεία στο εσωτερικό του. Νόημα μέχρι στιγμής; 

Έτσι, και πάλι, το σύνολο του React πρόκληση είναι ακριβώς να γνωρίζει πώς να κάνει τα συστατικά. Πώς να κάνει το συστατικά συνεργαστούν. Τώρα που κάναμε την πρώτη μας συστατικό, ας πάμε πίσω και κατασκευάζει εξαρτήματα προσαρμόσιμη. Έτσι, ξέρετε πόσο σας σε μορφή HTML μπορεί να δώσει τα κουμπιά τάξεις σας; Μπορείτε να δώσετε άγκυρες σας το href. Μπορείτε να δώσετε τις εντολές σας έναν τύπο, σωστά; Μπορείτε να δώσετε περισσότερα προσαρμοσμένα ιδιότητες για όλα τα στοιχεία σας για να γίνει πιο ενδιαφέρουσα. Και μπορούμε πραγματικά να κάνουμε ακριβώς το ίδιο πράγμα. 

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

Θα πρέπει να προσπαθήσουμε και να κάνουμε σας συστατικά ένα πολύ γενικό σκοπό. Έτσι, με αυτόν τον τρόπο θα μπορούσα email Αυτός ο φίλος μου και είναι σαν, ό, τι έχετε flashcard, απλά να τροφοδοτήσει εδώ, και αυτό θα το κάνει από μόνη της. Μπορείτε να βάλετε και άλλα τα πράγματα στη δική σας εφαρμογή. 

Αλλά πρώτα, ας σπάσει αυτό επάνω σε δύο συνιστώσες, αλλά θέλουμε να διαχωρίσει την κάρτα μέρος εκτύπωση από το πραγματικό μέρος app. Έτσι, αυτό που μπορούμε να κάνουμε είναι να μπορεί να αλλάξει αυτό από το App να CardView, μόνο ένα νέο όνομα για το app, και μπορούμε να κάνουμε μια νέα στοιχείο που ονομάζεται App, δεν πρέπει να συγχέεται με την παλιά App. Έχουμε τις createClass, όπως και στην HTML, μπορείτε φωλιά μπορεί να αντιδράσει εξαρτήματα μέσα από την άλλη. 

Έτσι, σε αυτή τη λειτουργία καθιστούν, λειτουργία CardView επιστροφή, και αυτό είναι ακριβώς το ίδιο πράγμα. Δείτε γιατί είναι το ίδιο πράγμα; Αντί απλά καθιστώντας την εφαρμογή που έχει το div και σύνδεση στο εσωτερικό του, η εφαρμογή καθιστά την CardView, και η CardView καθιστά το div και της παραγράφου. Έτσι, αυτό είναι το πρώτο παράδειγμα μας στοιχεία ένθεσης μέσα στην άλλη. Βγάζει νόημα αυτό? Έτσι, και πάλι, έχουμε ένα στοιχείο CardView. Έχουμε στοιχεία app ότι είναι μεγαλύτερο από ό, τι. 

Εντάξει, έτσι θέλουμε μας CardView-- αν δίνουν μια καλή CardView μια συγκεκριμένη κάρτα, αυτό θα εκτυπώσετε για σας, έτσι δεν είναι; Έτσι, πρώτα, θα πρέπει να κάνει μια κάρτα, οπότε ας κάνουμε ένα αντικείμενο κάρτα. Ας την κάρτα μου equal-- αν είστε όλοι εξοικειωμένοι, Αυτό είναι ακριβώς ο συμβολισμός αποφάσεων αντιρρήσεις σε JavaScript. Είναι σαν ένα είδος struct σε C, έτσι κάναμε μια κάρτα, και έτσι τώρα μπορούμε να περάσουμε αυτήν την κάρτα ως μια ιδιότητα ή ως χαρακτηριστικό σε HTML ορολογία για να app μας. Έτσι, μπορούμε να κάνουμε αυτό, App κάρτα ισούται myCard. 

Ξέρεις πώς στην είσοδο, κάνετε Τύπος εισόδου ισοδυναμεί με κείμενο ή το κουμπί κατηγορίας ισούται btn για bootstrap ,? Ίδια ιδέα, equals-- κάρτα App έχετε να βάλει σιδεράκια here-- Κάρτα App ισούται myCard, οπότε αυτό λέει ότι έχουμε αυτό το αντικείμενο κάρτα. Πάω να το περάσει ως ιδιοκτησίας στο συστατικό app. Και αυτό το συστατικό εφαρμογή θα να είναι σε θέση να έχουν πρόσβαση και να κάνουμε ενδιαφέροντα πράγματα με αυτό. 

Έτσι app μας θα είναι δίνεται μια κάρτα, έτσι για τώρα, ας έχουν το app απλά δώστε η κάρτα για να την CardView μόνη της, επειδή, όπως η εφαρμογή δεν είναι πρόκειται να ξέρει τι να κάνει με αυτό, έτσι θα το δώσω στον CardView. Γι 'αυτό και θα το περάσει την ίδιο τρόπο, κάρτα ισούται με, και έτσι κάθε συστατικό μπορεί να έχει πρόσβαση το πράγματα που έχει δοθεί σε αυτό. Μπορούν να αποκτήσετε πρόσβαση στις ιδιότητες που έχουν δοθεί για την χρησιμοποιώντας την ακόλουθη σύνταξη, this.props.card. 

Έτσι, αυτό που συμβαίνει εδώ είναι που έχουν ως αντικείμενο myCard. Μπορείτε να δώσετε στο app χρησιμοποιώντας την κάρτα App ισούται myCard. Ο σκοπός της κάρτας δίνεται στην εφαρμογή σας. Η εφαρμογή μπορεί να έχει πρόσβαση όπως this.props.card. Είναι κάτι σαν μια εικόνα ξέρει τι πηγή θα είναι. 

Αυτή η εφαρμογή γνωρίζει τι είναι η κάρτα είναι, και μπορεί να κάνει πράγματα με αυτό. Μπορεί να κάνει υπολογισμούς. Μπορεί να κάνει αποφάσεις που βασίζονται στα ανοικτά της. 

Για τώρα, ήμουν έτοιμος να περάσει this.props.card πάνω στο CardView. Νόημα μέχρι στιγμής; Θα καταστήσει περισσότερο νόημα τώρα. 

Εντάξει, έτσι και τώρα είμαστε σε CardView. CardView μας, δεδομένης της κάρτας, θα πρέπει να εκτυπώσετε ερώτηση και την απάντησή της. Αυτή τη στιγμή έχουμε μόλις είχαν τυπώσει μερικά hardcoded ερωτήσεις και απαντήσεις. Πρέπει να καταλάβουμε out-- χρειαζόμαστε να ζητήσει από την κάρτα που μας έδωσαν ποια είναι η ερώτηση και απάντηση, και στη συνέχεια να εκτυπώσετε αυτό έξω στην οθόνη. 

Έτσι, μπορούμε να το κάνουμε αυτό εδώ. Σε καθιστούν begin-- κάνετε πρώτα ίσοι. Έτσι, αυτό που κάνουμε εδώ είναι ότι ξέρουμε οι κάρτες μας δίνονται σε ένα ακίνητο, δικαίωμα? Είναι που μας δόθηκε ως είσοδος. Όπως είναι σχεδόν σαν επιχειρήματα σε μια λειτουργία. Η κάρτα είναι ένα επιχείρημα σχεδόν σε αυτήν την CardView. 

Θα απόσπασμα αυτό, και να θέσει αυτό στη μεταβλητή ερώτηση. Βεβαιωθείτε ότι η απάντηση πήγε στη μεταβλητή απάντηση. Ζητά ότι η κάρτα για να απαντήσετε. Και τώρα που έχουμε αυτά, αντί εκτύπωση του κειμένου, θα πάμε για να εκτυπώσετε Ό, τι μας έδωσαν. 

Έτσι, αυτό stuff-- έτσι θα πάμε να σβήσει Ερώτηση Απάντηση. Ας δούμε αν αυτό λειτουργεί. Cool, οπότε ας το βήμα μέσα από αυτό για μια ακόμη φορά ακριβώς για να είναι σίγουρος. 

Έτσι, η κάρτα μου είναι αντικείμενο της κάρτας, και εμείς δίνουν αυτή την κάρτα για το app. Και η εφαρμογή πρόκειται να λάβει η κάρτα και να τη δώσει στον CardView. Και αυτό CardView λέει, αν να μου δώσει οποιοδήποτε αντικείμενο flashcard, Θα εκτυπώσετε το ερώτημά του και η απάντησή του, σωστά; 

Λοιπόν, τι θα μπορούσα να κάνω είναι μπορώ να στείλετε αυτό τον κωδικό, το πρώτο όπως 10 γραμμές κώδικα μου, στον φίλο μου. Θα μπορούσε να το ενσωματώσετε σε δική του αίτηση. Και εφ 'όσον έκανε το ίδιο πράγμα, όπως κάρτα CardView ισούται με αυτό, εφ 'όσον ο ίδιος δημιούργησε το CardView και έδωσε τις σωστές πληροφορίες, θα μπορούσε να δώσει τη δική του κάρτα. Και έτσι με αυτόν τον τρόπο, αυτό είναι ένα πραγματικά δροσερό τρόπο για να οικοδομήσουμε συστατικά που χρησιμοποιούν ο ένας τον άλλον, έτσι δεν είναι; Αυτή η κάρτα θα μπορούσε να δημοσιεύσει Αυτό CardView στο διαδίκτυο, και οι άνθρωποι θα είναι σε θέση να το χρησιμοποιήσετε. Έτσι, βασικά, είναι σαν ένα από τα τυπικές λειτουργίες στη βιβλιοθήκη C. 

Είναι μια λειτουργία όπου κάποιος έχει γράψει. Μπορείτε να δώσει μια συγκεκριμένη είσοδο. Θα παράγουν ένα συγκεκριμένο προϊόν. Δεν με νοιάζει πώς λειτουργεί εσωτερικά. Εφ 'όσον έχετε δώσει το δικαίωμα εισόδου, θα κάνουν τη σωστή έξοδο. 

Και ένα συστατικό μπορεί να είναι σκέφτηκε τον ίδιο τρόπο. Αυτό είναι σαν CardView μια λειτουργία βιβλιοθήκης. Αν δώσετε κάποια κάρτα ως ένα ακίνητο, αυτό θα εκτυπώσετε τα περιεχόμενα της κάρτας αυτής. Όπως και αν μπορώ να αλλάξω την κάρτα μου για να αντί να είναι σαν αυτό που είναι 5 συν 37, θα ενημερώσει αναλόγως. Έτσι, μόνο με την αλλαγή της εισόδου, παίρνει ένα συγκεκριμένο προϊόν. Έτσι, μπορείτε να σκεφτείτε συστατικά σχεδόν ως συναρτήσεις με τον τρόπο αυτό, η οποία μπορείτε να βάλετε μαζί. Μπορείτε να πάρετε εισόδου, όπως αυτό CardView ως την είσοδο, θα έχετε έξοδο. Σε αυτή την περίπτωση, η παραγωγή είναι η HTML. Νόημα μέχρι στιγμής; Cool, οπότε και πάλι, οι ιδιότητες είναι πώς μπορείτε να περάσετε πληροφορίες εντός και εκτός των εξαρτημάτων. 

Εντάξει, οπότε ας κάνουμε αυτό πράγμα διαδραστικό. Αυτή τη στιγμή είναι κάπως βαρετή. Τι είναι [δεν ακούγεται]; Μπορείτε να εκτυπώσετε κάποια έξω, αλλά αυτό είναι το μόνο που μπορεί να κάνει. 

Ας πάμε πίσω στο παλιό ερώτημα μόνο για τώρα. Εντάξει, έτσι τώρα αυτά τα στοιχεία Οι βαρετό γιατί το μόνο που κάνουν, παίρνουν εισόδου. Κάνουν εξόδου, έτσι δεν είναι; Αυτό είναι κάπως βαρετή. Θέλουμε να έχουμε μας συστατικά που είναι σε θέση να έχουν ένα είδος εσωτερικής κατάστασης, όπως θυμάμαι κάτι. 

Για μια flashcard για παράδειγμα, τι είδους κράτος μπορεί να θέλετε να θυμούνται για μια flashcard; Τι καθεστώς προσωρινής μπορεί να θέλετε να θυμηθείτε για flashcard σε flashcard εφαρμογή; Κοινό: Είτε είναι ήδη γυρίσει; Neel MEHTA: Ναι, σωστά. Έτσι, ίσως να θέλετε να κρατήσετε κομμάτι της είναι να αντιμετωπίσει τα πάνω ή προς τα Σας μπρούμυτα πάνω στην κάρτα. Στο Facebook, για παράδειγμα, θα κάνατε Θέλετε να θυμηθείτε πού στην τροφοδοσία ειδήσεων είσαι ή ποιος αρέσει το προφίλ κάνεις τώρα. 

Σχετικά με το Messenger, όπως το ποια κείμενο που πληκτρολογήστε στο πλαίσιο εισόδου, έτσι δεν είναι; Εάν ανανεώσετε τη σελίδα, θα πάει μακριά. Αλλά δεν με νοιάζει. Είναι απλά προσωρινό. Ναι; 

Κοινό: [δεν ακούγεται] Neel MEHTA: Σαν φλας κάρτα, όπως μπορείτε να βλέπετε η πλευρά ερώτηση ή απάντηση από την πλευρά της; 

Κοινό: OK. 

Neel MEHTA: Σαν δύο όψεων flashcard, σωστά; Ναι, έτσι θέλετε να έχουν αυτή την ιδέα από τώρα Έχω ιδιότητες, οι οποίες είναι σαν εισόδους, αλλά κατάσταση, η οποία είναι προσωρινή, εεε, Όπου και αν είστε στη σελίδα, έτσι δεν είναι; Και πάλι, είπα στο Facebook Messenger, έχω σαν η οποία πρόσωπο βλέπετε στο Facebook ή ποιος είναι το προφίλ, έτσι δεν είναι; 

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

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

Έτσι σε μας CardView-- ας ρίξουμε CardView-- μας γι 'αυτό ήταν ωραίο. Τι θα πάμε να κάνουμε εδώ, θα πάμε να αγγίξει CardView και μόνο CardView. Και έτσι ο φίλος μου, ο οποίος πήρε αυτό, δεν θα παρατηρήσετε καμία διαφορά. Δεν θα πρέπει να αλλάξουν οποιοδήποτε από δικό τους κώδικα, αλλά βλέπαμε τους CardView πήρε souped επάνω. Αυτό είναι ένα ωραίο μέρος για εξαρτήματα. 

Εντάξει, έτσι ώστε σε CardView μας, ας προσπαθήσουμε και παρακολουθείτε αν είμαστε φάση έως ή με την όψη προς τα κάτω. Σε React το κάνουμε αυτό από την πρώτη προσδιορίζοντας την αρχική κατάσταση. Πού να αρχίσει η κάρτα; 

Έτσι, είναι μια λειτουργία που ονομάζεται getInitialState λειτουργούν, και θα επιστρέψει ένα αντικείμενο. Αυτό το αντικείμενο περιέχει κάποια κατάσταση, και το κράτος είναι απλώς ένα ζεύγος κλειδιού-τιμής. Όπως και σε καθοδηγούν, να έχετε ένα κλειδί και ένα τιμή, έχετε σαν όνομα είναι ένα string. 

Σε αυτή την περίπτωση, ας πούμε μπροστά είναι αλήθεια. Αυτό λέει ότι έχουμε ένα κράτος. Ένα συστατικό του κράτους είναι ένα χαρακτηριστικό που ονομάζεται μπροστά. [Δεν ακούγεται], τόσο από προεπιλογή, είμαστε στο μπροστινό μέρος της κάρτας, και μπορούμε να αλλάξουμε αυτό καθώς αναστρέψετε την κάρτα. Βγάζει νόημα? 

Εντάξει, έτσι καθιστούν, αυτή τη στιγμή, είμαστε που δείχνει την ερώτηση και την απάντηση. Τώρα τι πρέπει να κάνουμε έχει δείξει την ερώτηση αν είμαστε στο μπροστινό μέρος της κάρτας, ώστε η απάντηση είναι για το πίσω μέρος της κάρτας. Αυτός είναι ο λόγος που όλοι κάνουμε η κάρτα διαδραστικό. Οπότε ας προσπαθήσουμε και σε αυτό εδώ. Λοιπόν, πρώτα να κάνω μια μεταβλητή. Μπορούμε να ζητήσουμε τώρα this.state.front. Έχουμε πρόσβαση αναφέρει το ίδιο είμαστε στηρίγματα πρόσβασης, έτσι this.state.front. 

Αν είμαστε μπροστά, τότε το κείμενο είναι this.props.card.question. Αν είμαστε στο μπροστινό μέρος του κάρτα, θα πάμε για να προσπαθήσουμε και να αρπάξει το ζήτημα από την κάρτα. Διαφορετικά, αν είμαστε στο πίσω μέρος της κάρτας, τι κάνουμε; 

ΚΟΙΝΟ: Η απάντηση; 

Neel MEHTA: Ναι, έτσι κειμένου ισούται με this.props.card.answer. Αλλά αν παρατηρήσετε, είμαστε χρησιμοποιώντας το κράτος να λάβει μια απόφαση γιατί τώρα το συστατικό θα φαίνονται διαφορετικά βασίζεται στα ανοικτά το πώς αυτές αλληλεπιδρούν με αυτό. Έτσι, αντί να τα εκτυπώνει έξω από αυτό, Θα πρέπει απλά να εκτυπώσετε το κείμενο. Cool, έτσι και τώρα, όπως μπορείτε να δείτε, βλέπουμε μόνο την ερώτηση. Και αν μπορώ να αλλάξω την κατάσταση εδώ με το χέρι προς τα εμπρός είναι ψευδείς παίρνουμε 42 πίσω. 

Έτσι, και πάλι, αυτό το συστατικό έχει τη δική του κατάσταση. Όπως ένα κουμπί ξέρει αν είναι ήδη πατηθεί ή όχι, αυτό το πράγμα δεν ξέρει τι είναι σε το μπροστινό ή στο πίσω μέρος. Από προεπιλογή, είναι στο μπροστινό μέρος. Και στη συνέχεια, αν είναι στο μπροστινό μέρος, θα εκτυπώσετε το θέμα. Αν είναι στο πίσω μέρος, θα εκτυπώσετε την απάντηση. Έτσι, και πάλι, η πληροφορία που δίνεται είναι το ίδιο. Απλώς φαίνεται διαφορετικός με βάση το πώς μπορείτε να το προγραμματίσετε. Έτσι, για παράδειγμα, το Facebook Messenger, ακόμα και αν έχετε την ίδια πηγή δεδομένων, θα μπορούσε να έχει διαφορετική εμφάνιση επειδή η κατάσταση είναι διαφορετική. Ψάχνετε σε ένα Μήνυμα διαφορετικό πρόσωπο. 

Εντάξει, έτσι αυτό είναι όλα καλά και καλό, αλλά τώρα τι είναι στην πραγματικότητα να μας κάνει να τα αλλάξετε, αν κάρτα μας είναι μπροστά ή πίσω. Μπορούμε να το κάνουμε αυτό με την προσθήκη ενός κτυπήματος κουμπί, ένα κουμπί για την κάρτα που θα αναστρέψετε την κάρτα αν είναι [δεν ακούγεται]. Έτσι, ας προσθέσουμε ένα κουμπί εδώ, αυτό κουμπί, και αυτό το κουμπί θα πω άλλη. 

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

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

Μπορείτε να εγγραφείτε αυτό ακροατή. Μπορείτε να ακούσετε για μια εκδήλωση. Μπορείτε να λέγεται, και όταν η γεγονός συμβαίνει, μπορείτε να κάνετε κάτι. Μπορείτε να πάρετε πίτσα. Σε αυτή την περίπτωση, όταν είστε κλικ, μπορείτε να αναστρέψετε την κάρτα. 

Και γι 'αυτό πρέπει να ορίσουμε μια λειτουργία που θα αναστρέψετε την κάρτα, έτσι θα γράψω αυτό το δικαίωμα Εδώ, flip λειτουργία. Και έτσι τι νομίζεις ότι θα κάνει άλλη; Και πάλι αυτό γίνεται όταν καλείται πατάμε το κουμπί αναστροφής. Τι θα πρέπει η άλλη λειτουργία κάνω; 

Κοινό: Αλλαγή this.state.front από την αληθινή σε false, ψευδή σε αληθή. 

Neel MEHTA: Ναι, έτσι ώστε να λάβει ανεξαρτήτως this.front is-- το κράτος είναι μπροστά. Πάρτε το μπροστινό κατάσταση, εάν είναι αλήθεια, να είναι ψευδείς. Αν είναι ψευδής, το καθιστά αληθινό, έτσι δεν είναι; Οπότε ας προσπαθήσουμε αυτό. 

Δεν μπορείτε να αλλάξετε κατάσταση απλά κάνοντας this.state. Δεν μπορείτε να το κάνετε αυτό. Δεν μπορείτε να το κάνετε αυτό. Θα πρέπει να χρησιμοποιήσετε μια λειτουργία που ονομάζεται this.setState. 

Έτσι, μπορείτε να πείτε this.setState μπροστά του παχέος εντέρου αυτό όπου, και πάλι, το επιφώνημα Σημείο σημαίνει το αντίθετο. Υποθέτω ότι αν αυτή. state.front Είναι αλήθεια, αυτό θα γυρίσει ψευδείς. Έτσι θα οριστεί η κατάσταση από την αληθινή σε false. Αν είναι ψευδής, θα που είναι ψευδή σε αληθή. 

Μόλις παρατηρήσετε ότι θέτουμε και να πάρει ελαφρώς με διαφορετικό τρόπο, και έτσι ας προσπαθήσουμε αυτό. Bada Bing, κοίτα αυτό. Το κουμπί αναστροφής τώρα θα αλλάξετε την εμπρός προς τα πίσω κατάσταση. 

Και έτσι εδώ είναι όπου μπορείτε να δείτε ένα λίγη από τη μαγεία του React. Όπως και εμείς ποτέ δεν είπε ότι για να καταστεί εκ νέου. Ποτέ δεν είπα ότι αναδιατυπώσει τίποτα. Αν το κάνετε αυτό χωρίς να αντιδράσει, τότε θα Οι to-- αρέσει όταν η αναστροφή πατηθεί το κουμπί, θα έπρεπε να το πω για να χειροκίνητα ξανά render, σωστά; 

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

Κάθε φορά που αλλάζει κάτι, αυτό θα καταστήσει εκ νέου ολόκληρη τη σελίδα. Και αν ακούγεται αναποτελεσματική, είναι επειδή θα ήταν, αλλά αντιδρούν χρησιμοποιεί ένα πράγμα ονομάζεται Σκιά DOM. Αντί να τραβάμε απ 'ευθείας τη σελίδα, το διατηρεί το εικονικό δέντρο HTML στη μνήμη. 

Ξέρεις, HTML είναι σαν ένα δέντρο, σαν μια ιεραρχική δομή δεδομένων. Διατηρεί ένα ψεύτικο δέντρο στη μνήμη, και κάθε φορά που ενημερώνετε τη σελίδα, αυτό θα πάρει και άλλο πλαστό δέντρο, και θα υπολογίσει τι χρειάζεται να αλλάξει είναι να καταστεί η σελίδα για να κάνουν τα δύο δέντρα ίσα. Έτσι, βασικά, είναι σχεδόν re-καθιστά πολύ. Και τότε μόνο, όπως οι αλλαγές της σελίδα σε λίγο τσιμπήματα, όπως απαιτείται, γι 'αυτό είναι πολύ, πολύ, πολύ αποτελεσματικό. 

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

Βγάζει νόημα αυτό? Καμιά ερώτηση? Ναι; 

Κοινό: Πώς συγκρίνουν ακόμα στην MVC ότι μιλήσαμε για όπως πριν πόρων. 

Neel MEHTA: Ναι, το ερώτημα είναι πώς να το συγκρίνετε με MVC; Ρωτήσατε σχετικά με τους πόρους. Λοιπόν, ας μιλήσουμε για το πώς λειτουργεί. 

Σε MVC, θα ενημερωθεί το υπόδειγμα. Στην περίπτωση αυτή θα είχαμε ένα μοντέλο της κάρτας. Η θέα θα έχουν την αναστροφή κουμπί, και ο έλεγχος θα έχουν τη λειτουργία πορτάκι. Έτσι, η θέα θα πει ο ελεγκτής για να αναστρέψετε άλλη. Flip θα πει ο μοντέλο να αλλάξει, έτσι δεν είναι; 

Και έτσι όταν κάνετε μια MVC, σας ακούστε για το μοντέλο να αλλάξει, και θα καταστήσει εκ νέου αναλόγως την άποψη. Ή απλά πρέπει να αρέσει έχουν τον ελεγκτή. Περιμένετε για το μοντέλο να αλλάξει, και στη συνέχεια, επιλέγουμε ένα μέρος σαν ένα πράγμα να αλλάξει. Εδώ έχουμε ένα πράγμα, αλλά σε ένα μεγάλο app, θα πρέπει να θυμηθούμε τι αρέσει η αλλαγή σε κάθε χώρα, γι 'αυτό είναι λίγο ενοχλητικό. Και έτσι React είναι ωραίο επειδή έχει μια σκιά Dom. Μπορεί να αντέξει οικονομικά να απλά ξαναγράψουμε το όλο πράγμα. Δεν χρειάζεται να επιλεκτικά όπως μάντεψε τι να ενημερώσετε. 

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

Αυτό είναι ένα πολλά πράγματα βγαίνει ταυτόχρονα. Και έτσι, αν δεν το κάνετε έχουν μια σκιά Dom, τότε θα Πρέπει να το κάνουμε αυτό με το χέρι, επειδή δεν μπορείτε να απαλλαγείτε από το σύνολο της σελίδας. Δεν μπορείτε να αντέξετε οικονομικά να, έτσι ώστε να έχουν για να αλλάξετε κάθε πράγμα με το χέρι, το οποίο είναι πραγματικά ενοχλητικό στην MVC. 

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

Έτσι, και πάλι, στο MVC σας Θα πρέπει να επιλέξετε μεταξύ ευκολία χρήσης και την αποτελεσματικότητα, και να αντιδράσει, θα έχετε και τα δύο. Έτσι είναι καλύτερα. Βγάζει νόημα? Στερεός. 

ΟΚ, οπότε ας δούμε ας μιλήσουμε λίγο για το βήμα 4, πώς μπορούμε να ενσωματώσετε τα συστατικά. Έτσι έχουμε αυτή τη στιγμή. Έχουμε λίγο δροσερό κουμπί μας. Μπορούμε να αναστρέψετε πίσω και εμπρός, και αυτό είναι το μόνο που κάνει. Ας πούμε ότι θέλουμε να έχουν ένα άλλο συστατικό. Ας πούμε flashcard app μας θα πρέπει να περιέχει μια λίστα με όλες τις κάρτες ότι έχετε, έτσι αυτό σημαίνει ότι θα πρέπει να έχει ένα άλλο συστατικό. Καλά, ίσως να το ονομάσουμε μια προβολή λίστας. Ας κάνουμε μια προβολή λίστας που συνυπάρχει με την CardView, και αυτή η προβολή λίστας και CardView θα ήθελα να συνεργαστούμε. Και μπορείτε να τα συνδυάσετε για να κάνουν το app μας για εσάς. 

Έτσι το πρώτο, ας κάνουμε μια ζευγάρι περισσότερες κάρτες δικαιώματος. Ας πούμε, τι κάρτες; Και ακριβώς γι 'αυτό δεν χρειάζεται να σας κουράσω με την πληκτρολόγηση σε αυτό, Είμαι ακριβώς πρόκειται να το αντιγράψετε από εδώ. Και έτσι Πάω να μην δίνουν μόνο μία κάρτα. Πάω να του δώσει μια σειρά από κάρτες. Έτσι, οι πρώτες εφαρμογές πρόκειται να σπάσει για τώρα. Εντάξει, έτσι θα πάμε για να κάνει Αυτό είναι σε θέση να χειρίζεται πολλαπλές κάρτες. Έτσι, η πρώτη, θα πάμε να το δώσει, δεν μόνο μία κάρτα, αλλά μια σειρά από κάρτες, όπως μια λίστα με κάρτες. Και σε αυτή την περίπτωση, έχουμε τρία από αυτά. 

Εντάξει, έτσι ώστε η εφαρμογή είναι πρόκειται να πάρετε μια λίστα με τις κάρτες, και πρόκειται να αποφασίσει ποια ένα για να δείξει στον CardView. Η CardView μπορεί μόνο καθιστούν μία κάρτα, αλλά το app παίρνει μια λίστα με όλα τα χαρτιά, σωστά; 

Έτσι, όταν καταλάβω ένα κάρτα για να δώσει σε CardView, πώς θα μαντέψει ίσως να είναι σε θέση να λάβει μια απόφαση σχετικά με το ποια κάρτα να δείξω? Για να σας δώσω μια υπόδειξη, είναι προσωρινά Θα πρέπει να βλέπετε ένα ορισμένο κάρτα. Εάν ανανεώσετε τη σελίδα, θα πήγαινε πίσω στην πρώτη κάρτα. Αυτό είναι εντάξει επειδή είναι προσωρινή. Ποια τεχνική θα μπορούσε να χρησιμοποιήσουμε; 

Κοινό: Θα μπορούσατε να κάνετε μια μεταβλητή έτσι ακριβώς όπως σας είχε μπροστά. Είναι αλήθεια αυτό, θα μπορούσατε έχουν τρέχουσα κάρτα ισούται με 1; 

Neel MEHTA: Ναι, γι 'αυτό θέλουν να έχουν κατάσταση, σωστά; Θα χρησιμοποιήσετε την κατάσταση στην συστατικό για να καταλάβω ποια κάρτα θέλουμε να πάρει. Όπως έχουμε μια λίστα όλες οι κάρτες, θα χρησιμοποιήστε κράτος για να καταλάβω ένα από τα πρώτα κάρτας, δευτερόλεπτα κάρτα, τρίτη κάρτα, και ούτω καθεξής. 

Έτσι, μια εφαρμογή έτσι ώστε ένα app θα πάρετε μια έχουν τη λειτουργία getInitialState, getInitialState επιστροφή λειτουργία. Και θα πω μόνο activeIndex 0. Έτσι τώρα app μας έχει το δικό του κράτος. 

Και έτσι τώρα για καθιστούν, για να καταλάβω μια κάρτα, ας πάμε στη συστοιχία και πιάσε το πράγμα σε αυτό το δείκτη. Επιλέξτε την κάρτα ίση this.props.cards this.state.activeIndex. Έτσι, όπως μπορείτε να δείτε εδώ, τα στηρίγματα και η κατάσταση στην πραγματικότητα εργάζονται από κοινού. Έτσι τώρα που έχουμε activeCard μας, Θα ονομάσουμε activeCard, και ας δούμε αν αυτό λειτουργεί. [ΜΗ ΑΚΟΥΣΤΌΣ] 

Ω, αυτό ήταν ένα λάθος κείμενο. Αχ. 

Cool, Ναι, έτσι και τώρα ήμασταν πίσω όπου ήμασταν πριν, έτσι δεν είναι; Το ίδιο παλιό πρόγραμμα εκτός τώρα μπορούμε να υποστηρίξουμε μια λίστα με κάρτες, και όχι μόνο μία κάρτα. Και τώρα, πάλι, αν αλλάξουμε το activeIndex, μπορούμε να πάμε 0-1, και τώρα ότι η δεύτερη κάρτα, και στη συνέχεια πήγαμε στο 0. Έτσι, εδώ είναι μια νέα souped-up έκδοση του μας. 

Εντάξει, έτσι και τώρα ας ρίξουμε μια προβολή λίστας που δείχνει όλα τα χαρτιά στο πρόγραμμά σας, έτσι θα κάνουμε ένα νέο στοιχείο που ονομάζεται listview. Ας ListView ισούται react.createClass. Έτσι θέλουμε να καταστήσει μια μη διατεταγμένη Λίστα με ένα στοιχείο της λίστας για κάθε κάρτα. Και έτσι έχουμε ένα σωρό χαρτιά. Θέλουμε ένα στοιχείο της λίστας για κάθε κάρτα, σωστά; Θα μπορούσαμε να κάνουμε ένα βρόχο for ή κάτι για να κάνει ένα νέο στοιχείο λίστας. Αλλά ο τρόπος που μπορείτε να το κάνετε σε Αντιδρούν, χρησιμοποιήστε ένα πρόγραμμα που λέγεται χάρτη. Χάρτης είναι ένα εργαλείο ή μια λειτουργία που χρησιμοποιείτε ότι για κάθε προϊόν, τρέχει κάποια λειτουργία, παίρνει την τιμή επιστροφής, και σας δίνει ότι πίσω. 

Έτσι, ως ένα παράδειγμα, έχουμε τη συστοιχία 1, 2, 3.map function-- και αυτό είναι συντομογραφία για μια function-- x βέλος x φορές το x. Αυτό λέει, για κάθε αριθμό σε 1, 2, 3, το πάρετε. Τετράγωνο αυτό, και να της δώσει πίσω. Λοιπόν, τι νομίζεις 1, 2, 3.map x πηγαίνει στο x φορές X σας δίνει πίσω δοθεί ότι αυτή η λειτουργία είναι τρέχουν σε κάθε στοιχείο της εν λόγω διάταξης. 

Κοινό: 1, 4, 9; 

Neel MEHTA: Ναι, 1, 4, 9, γιατί το κάνετε 1 φορές 1. Αυτό σας δίνει ένα. Αυτό είναι το πρώτο στοιχείο. 

2 φορές 2 είναι 4. Αυτό είναι ένα δεύτερο στοιχείο. 3 φορές 3 είναι 9. Αυτό είναι ένα τρίτο στοιχείο. Βγάζει νόημα? Έτσι χάρτης έχει μια τεχνική που χρησιμοποιήσουν λειτουργικά προγραμματιστές, το νέο στυλ του προγραμματισμού για να κάνουμε κάτι σε όλα τα στοιχεία στη λίστα σας. Και έτσι αυτό ακούγεται οικείο. Έχουμε μια λίστα με κάρτες. Θέλουμε να πάρετε ένα στοιχείο της λίστας για κάθε ένα, έτσι θα χρησιμοποιήσουμε ακριβώς χάρτη εδώ. Θα πω, ας λίστα ίσων this.props, κάρτες, χάρτης. 

Και έτσι δόθηκε μια κάρτα, είμαστε πρόκειται να δημιουργήσει ένα στοιχείο της λίστας με τη συγκεκριμένη κάρτα του περιεχομένου πλευρά του. Ας πούμε ότι θέλουμε να δώσουμε οι κάρτες αμφισβητούν τόσο card.question. Έτσι, ο κατάλογος αυτός περιέχει ένα σειρά LI ή στοιχεία λίστας όπου υπάρχει μία λίστα στοιχείο για κάθε κάρτα, και το οποίο περιέχει το ερώτημα κάρτες. Βγάζει νόημα? 

Cool, έτσι και τώρα ας στην πραγματικότητα εκτυπώσετε αυτό έξω. Γι 'αυτό και θα επιστρέψει ένα ul. Μέσα σε αυτό μη διατεταγμένη λίστα, θα μείνουμε μόνο ολόκληρο τον κατάλογο ότι μας έδωσαν. Δροσερός. 

Εντάξει, έτσι και τώρα αυτό προβολή λίστας λειτουργεί ακριβώς βρείτε. Οποιεσδήποτε ερωτήσεις σχετικά με την προβολή της λίστας; Έχετε ένα μάτσο χαρτιά. Μπορείτε να κάνετε ένα στοιχείο της λίστας για κάθε κάρτα. Και μπορείτε να τα βάλετε μέσα σε ένα μη διατεταγμένο κατάλογο, και να το δώσει πίσω. Έτσι τώρα ας δράσουμε έτσι ώστε να ενσωματώσετε αυτό μέσα από το app μας, ώστε να μπορούμε να το κάνουμε αυτό, προβολή λίστας. Τι επιχείρημα δεν περνάμε στην προβολή λίστας; Ποια ακίνητα δεν του δίνουμε; Να θυμάστε, αν έχετε δώσει είναι ένα μάτσο χαρτιά, αυτό θα κάνει τη λίστα δείτε για αυτές τις κάρτες. Λοιπόν, τι θα περνάμε και εδώ το επιχείρημα; Κοινό: Μια λίστα με τις κάρτες; Neel MEHTA: Ναι, έτσι κάρτες ισούται με this.props.cards, σωστά; Και έτσι το μόνο πρόβλημα είναι ότι μπορείτε μόνο γύρισε ένα άνω στοιχείο επίπεδο καθιστούν, έτσι ώστε να έχετε να το τυλίξετε σε ένα div. Είναι περίεργο. Ας δούμε λοιπόν αν αυτό. Γίνεται αυτό; 

Ναι, εκεί θα πάτε. Έτσι τώρα έχουμε μια λίστα των καρτών στο κάτω μέρος, και, στη συνέχεια, έχουμε μας Η ίδια CardView στην κορυφή, και ότι θα αναστρέψετε μεταξύ οι δύο πλευρές της κάρτας. Τώρα κάνει ότι κάνει αίσθηση πως το έκανα αυτό; Ναι, οπότε και πάλι, έχουμε δύο συστατικά. Το πρώτο συστατικό εκτυπώσεις έξω κάθε κάρτας στη λίστα. Αυτή είναι η προβολή λίστας. Και το δεύτερο συστατικό εκτυπώνει μόνο τη συγκεκριμένη κάρτα. Αν δώσετε μια συγκεκριμένη κάρτα, αυτό θα εκτυπώσετε πληροφορίες σχετικά με τη συγκεκριμένη κάρτα και σας επιτρέπουν να αναστρέψετε πέρα ​​δώθε. 

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

Κοινό: Μπορείτε να χρησιμοποιήσετε JSX στην κανονική JavaScript; Ή είναι αυτό κάτι που ήρθε με την [δεν ακούγεται]; 

Neel MEHTA: Το ερώτημα είναι μπορεί μπορείτε να χρησιμοποιήσετε JSX με φυσιολογική JavaScript; Η απάντηση είναι ναι. JSX είναι απλά ένας τρόπος που παίρνει σας JavaScript που έχει HTML στο εσωτερικό του, και συγκεντρώνει σε Javascript που δεν έχει HTML μέσα από αυτό. Έτσι παρατηρήσετε that-- έτσι παρατηρήσετε εδώ. Αυτό μοιάζει σαν έχετε div και έχετε πράγματα μέσα από αυτό. 

Που συγκεντρώνει σε Javascript που όπως παράγει το ίδιο πράγμα. Υποθέτω ότι αυτό που λέω είναι ότι JSX είναι μόνο μια συντακτική, όπως είναι ένα προεπεξεργαστή για πολύ JavaScript όπως η PHP είναι ένα προεπεξεργαστή για HTML. JSC είναι ένα προεπεξεργαστή για JavaScript που σας επιτρέπει βάζετε HTML στο εσωτερικό της JavaScript σας. Και έτσι, αν έχετε το σωστό μετασχηματιστή το οποίο είναι ένα πράγμα που ονομάζεται [δεν ακούγεται], η οποία θα μεταμορφώσει. Το δικαίωμα προεπεξεργαστή, αυτό θα σας αφήσει να το κάνουμε αυτό. 

Κοινό: [δεν ακούγεται] Neel MEHTA: Συνήθως δεν χρειάζεται να θέσει HTML εσωτερικό JavaScript εκτός αν κάτι σας αντιδρούν. Αλλά μπορείτε να το κάνετε ούτως ή άλλως. Ναι; 

Κοινό: Νομίζω ότι εσύ είχε περιγράψει React ως λειτουργική γλώσσα programing. Έχουμε μάθει C σε CS50. Είναι επίσης ένα C λειτουργική γλώσσα; Neel MEHTA: Έτσι, το ερώτημα είναι περίπου λειτουργική σε σχέση με ένα άλλο πράγμα που ονομάζεται επιτακτική ανάγκη ή διαδικαστικό προγραμματισμό. Υπάρχουν δύο είδη προγραμμάτων δημοφιλής. Ένα ονομάζεται διαδικαστική, η οποία Είναι όλα σχετικά με τις εντολές σαν να κάνει, και ένα είναι λειτουργικό, το οποίο είναι σχετικά με τις λειτουργίες και έχει εισόδου και εξόδου από αυτούς. React είναι ένα λειτουργικό πρότυπο. C είναι μια πολύ διαδικαστικό πρότυπο. 

Και ως παράδειγμα, για παράδειγμα C, δεν κάνετε αυτόν τον τρόπο δηλωτική να καταστεί το πρόγραμμα, έτσι δεν είναι; Θα πρέπει να πω, να εκτυπώσετε αυτό. Αλλάξτε αυτή τη δομή δεδομένων. Εκτυπώστε αυτό. Είναι όλα σχετικά με τις εντολές. 

Σε αντιδράσει, δεν υπάρχει ότι πολλές εντολές. Είναι όλα σχετικά με τη συστατικά βάζετε μαζί. Είναι σαν λειτουργίες. Έχετε σαν μια συνάρτηση που ονομάζεται CardView, η οποία είναι μια συνάρτηση ότι έχει εισόδου, εξόδου, και έτσι είναι όλα React για αυτή τη φιλοσοφία ΗΠΑ having-- έχετε δεδομένα. Μπορείτε να το περάσει μέσα από αυτό αλγόριθμο, και αυτό θα εξόδου HTML που μόλις είχαν τυπώσει τη σελίδα, και έτσι πρέπει να οικοδομήσουμε το κομμάτι από το κομμάτι. 

Έτσι για να σχεδιάσετε μια αλληγορία για το τι Είπα και πριν, ξέρετε πώς στο Facebook, αν έχετε ένα μήνυμα, και μπορείτε να επιλέξετε ποια τμήματα για την ενημέρωση, αυτό είναι διαδικαστικό. Είναι επιτακτική ανάγκη, έτσι δεν είναι; Εντάξει, πήρα ένα μήνυμα. Ας αλλάξουμε λογαριασμό εκεί. 

Ας εμφανιστεί ένα παράθυρο εδώ. Ας αλλάξουμε λογαριασμό εκεί. Να τραβήξουμε αυτό εδώ. Αυτή είναι μια διαδικαστική προσέγγιση. 

Αυτό είναι ό, τι πράγματα όπως γωνιακή, Boost, σπονδυλική στήλη, χρησιμοποιήστε άλλα πλαίσια. React είναι λειτουργική. Είναι ένα πολύ διαφορετικό τρόπο της σκέψης για τα πράγματα. Παίρνει την ιδέα της ας ρίξουμε λειτουργίες ή αλγόριθμους που θα σας δώσει στοιχεία. Θα φτύσει τι θα πρέπει να είναι, και ο υπολογιστής θα φροντίσει για το ζύγισμα. Δεν χρειάζεται να χειριστεί τον εαυτό σας. Μήπως αυτό κάνει λίγο νόημα; Ναι; 

Κοινό: Σε μια λειτουργική γλώσσα, όλα συμβαίνουν ταυτόχρονα; 

Neel MEHTA: Όχι, τα πράγματα συμβαίνουν στην τάξη. Όπως και εδώ υπάρχει ακόμη να καταδικάσει, αλλά δεν το κάνει συμβεί κατά σειρά, όπως Συνιστώ, εντολή,. Συμβαίνει κατά σειρά η λειτουργία σας δίνει έξοδο. Βάλτε ότι σε μια άλλη λειτουργία. Βάλτε ότι σε ένα άλλο λειτουργία, μια άλλη λειτουργία. 

Αν το κάνετε CS51, θα μάθετε λειτουργικά προγράμματα λίγο έξω από το πεδίο εφαρμογής της παρούσας. Αλλά βασικά, αυτό που κάνει Αντιδρούν δροσερό δεν είναι μόνο η ροή των δεδομένων μονόδρομη και η εικονική Dom, αλλά και αυτή η ιδέα της λειτουργικό προγραμματισμό. Και λειτουργικό προγραμματισμό είναι πολύ εύκολο να συνθέσει και να κάνει δροσερό πράγματα έξω από, και είναι πολύ εύκολο να σκεφτεί περίπου και για το λόγο. Γι 'αυτό είναι μια άλλη καλή κλήρωση του React. Οποιεσδήποτε άλλες ερωτήσεις; Ναι; 

Κοινό: Χμ, γιατί θα σας χρησιμοποιούν ας σε αντίθεση με var; 

Neel MEHTA: Το ερώτημα λοιπόν είναι γιατί χρησιμοποιείς αφήσετε αντί var; Αυτό είναι ένα πράγμα που ονομάζεται ES6 ή ECMAScript 6. Είναι η νέα έκδοση του JavaScript. Υπάρχει μια δέσμη των τεχνικούς λόγους, Αλλά ας είναι η καλύτερη εκδοχή της var. 

Είναι το πώς θα δηλώσετε τις μεταβλητές. Μπορείτε να χρησιμοποιήσετε το αφήσουμε. Μπορείτε να χρησιμοποιήσετε var. Ας έχει μια δέσμη των τεχνικών reasons-- μπορείτε να τους δούμε μέχρι later-- για τους οποίους είναι καλύτερο. Βασικά, ES6 έχει κάποια ωραία νέα σύνταξη, μερικά νέα χαρακτηριστικά πάνω από το παλιό JavaScript. 

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

Αν πάτε εδώ, Facebook.GitHub.IO/react, Αυτή είναι η αρχική σελίδα για React, και αυτό θα σας δείξουμε πώς μπορείτε πραγματικά να χρησιμοποιήσετε Αντιδρούν στις σελίδες σας. Βασικά, είναι μια μικρή περίπλοκη προσπαθείτε να εγκαταστήσετε React. Δεν είναι τόσο εύκολο όσο απλά σύρετε και απόθεση ενός JavaScript εκεί. 

Πρέπει να έχεις μετασχηματιστή σας που έχει συσταθεί, τα οποία θα, όπως και πριν, μετατρέψει σε JSX σας η κανονική JavaScript. Θα πρέπει να πράγμα που θα μεταγλώττιση σας ES6 στο φυσιολογικό. Το JavaScript υπάρχει πολλή κίνηση τα μέρη που πρέπει να κάνετε, έτσι υπάρχει ένα πράγμα που ονομάζεται Yeoman, Yeoman.io. Και αυτό είναι ένα εργαλείο γραμμής εντολών που θα να σας βοηθήσει να σκαλωσιά έξω React σας έργα εύκολα. 

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

Έτσι, διαβάστε γι 'αυτό, αν σας αρέσει. Απλά πηγαίνετε στις Yeoman, Υ-Ε-Ο-Μ-Α-Ν, και μπορείτε να βρείτε γεννήτριες όπως αυτούς. Και με γεννήτριες, όπως αυτά, θα ήθελα μόνο ένα Είναι εντολές μια γραμμή εντολών ζευγάρι. Θα ικρίωμα από ένα Αντιδρούν ολόκληρο το app για σας. Θα πάρει όλη τη χειρωνακτική σωληνώσεις, και γρύλισμα δουλειά κάνει για σας, και αυτός είναι ο λόγος που επικεντρώνεται μόνο σχετικά απλά γράφοντας στο React. 

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

Έτσι, εάν θέλετε να κάνετε σαν ένα παραγωγής να απελευθερώσει React app, δοκιμάστε μία από αυτές τις γεννήτριες. Αν απλά θέλετε να παίξετε περίπου, είναι συχνά αξίζει μόνο όπως προσπαθήστε να παίζει γύρω στις CodePen εδώ. Ήχος καλό; Δροσερός. 

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

Έτσι, θα ήθελα να συστήσει όπως κάνουν το πρώτο βήμα. Βάλτε το σε CodePen σας. Προσπαθήστε να εργαζόμαστε για να κάνουμε το στο δεύτερο στάδιο. Υπάρχει ένα τέταρτο βήμα, και μόλις δείτε πού μπορείτε να πάρετε από αυτό. 

Οποιεσδήποτε άλλες ερωτήσεις, ελέγξτε από αυτή τη σελίδα ή στο email μου. Αυτό είναι το ηλεκτρονικό ταχυδρομείο μου. Αλλά θα ήθελα πολύ να σας βοηθήσει με οποιαδήποτε ερωτήσεις που μπορεί να έχετε σχετικά με React. Έτσι, Ναι, αυτό είναι το μόνο που έχω. Σας ευχαριστώ όλους πάρα πολύ για βλέποντας ή για την παρακολούθηση. Και θα πάρω απορίες μπορεί να έχετε μετά από αυτό τώρα. Έτσι, σας ευχαριστώ όλους για την προσοχή.