1
00:00:00,000 --> 00:00:02,910
>> [Παίζει μουσική]

2
00:00:02,910 --> 00:00:04,850

3
00:00:04,850 --> 00:00:07,275
>> Neel MEHTA: Εδώ πηγαίνει.

4
00:00:07,275 --> 00:00:11,070
>> Λοιπόν, ο καθένας, καλωσορίζουμε στο δικτυακό
εφαρμογές του μέλλοντος με React.

5
00:00:11,070 --> 00:00:11,870
Αυτό είναι CS50.

6
00:00:11,870 --> 00:00:12,930
Το όνομά μου είναι Neel.

7
00:00:12,930 --> 00:00:17,689
Είμαι ΤΑ για CS50 και δευτεροετών φοιτητών
στο Harvard College και ένα πολύ, πολύ

8
00:00:17,689 --> 00:00:18,730
πάθος για την ανάπτυξη Ιστού.

9
00:00:18,730 --> 00:00:20,730
Έτσι, είμαι πολύ συναρπαστικό να
πρέπει να μιλάμε σε εσάς σήμερα,

10
00:00:20,730 --> 00:00:24,550
αν είστε εδώ ή στο σπίτι
βλέποντας, για React, η οποία είναι, και πάλι

11
00:00:24,550 --> 00:00:27,270
όπως είπα, το μέλλον του Web Apps.

12
00:00:27,270 --> 00:00:29,055
>> Έτσι React είναι ένα πλαίσιο web.

13
00:00:29,055 --> 00:00:30,930
Και όπως έχω πει
σε μερικούς ανθρώπους εδώ,

14
00:00:30,930 --> 00:00:33,400
ένα πλαίσιο είναι απλώς ένα
σετ εργαλείων που μπορείτε να χρησιμοποιήσετε

15
00:00:33,400 --> 00:00:35,770
να δομήσει και να οικοδομήσουν εφαρμογή web σας.

16
00:00:35,770 --> 00:00:39,010
Και web εφαρμογές είναι, και πάλι, ιστοσελίδες
που είναι διαδραστικό, όπως το Facebook,

17
00:00:39,010 --> 00:00:42,330
Twitter.com, Instagram.com, οτιδήποτε.

18
00:00:42,330 --> 00:00:45,590
>> Έτσι, το Facebook είναι ένα πλαίσιο web
που αναπτύχθηκε από το Facebook

19
00:00:45,590 --> 00:00:48,060
ένα-δύο χρόνια back-- React είναι.

20
00:00:48,060 --> 00:00:50,830
Είναι επειδή έχουν χρησιμοποιηθεί σε
Facebook εφαρμογές για κινητά τους

21
00:00:50,830 --> 00:00:52,460
και η εφαρμογή web, Instagram.

22
00:00:52,460 --> 00:00:56,350
Khan Academy είναι ένα άλλο
έντονο πρώιμο υιοθετών της React.

23
00:00:56,350 --> 00:00:58,630
>> Είναι πραγματικά έχει πάρει
εξαιρετικά δημοφιλής.

24
00:00:58,630 --> 00:01:03,420
Αν χρησιμοποιείτε ποτέ τα πράγματα όπως γωνιακή ή
Backbone, αυτό είναι της ίδιας οικογένειας,

25
00:01:03,420 --> 00:01:05,830
αλλά έκτοτε μακριά
ξεπερνούν δημοτικότητά τους.

26
00:01:05,830 --> 00:01:06,890
Είναι το καυτό νέο πράγμα.

27
00:01:06,890 --> 00:01:09,590
Είναι πραγματικά, πραγματικά τεράστιο.

28
00:01:09,590 --> 00:01:13,470
>> Και έτσι React είναι καλό όχι μόνο ως
πλαισίου για τις διεπαφές web κτίριο.

29
00:01:13,470 --> 00:01:16,020
Είναι καλό για την οικοδόμηση διεπαφές web.

30
00:01:16,020 --> 00:01:18,350
Υπάρχει επίσης ένα πράγμα
Αντιδράστε ονομάζεται Native οποία

31
00:01:18,350 --> 00:01:22,200
σας επιτρέπει να δημιουργήσετε διασυνδέσεις
για Android και iOS

32
00:01:22,200 --> 00:01:26,390
και ίσως και άλλες πλατφόρμες στο μέλλον
χρησιμοποιώντας μόνο τον ίδιο κώδικα JavaScript.

33
00:01:26,390 --> 00:01:31,130
Θα μπορούσατε να χρησιμοποιήσετε την ίδια ακριβώς
Κώδικα JavaScript για να καταστήσει ιστοσελίδες,

34
00:01:31,130 --> 00:01:33,040
να καταστήσει Android εφαρμογές και εφαρμογές iOS.

35
00:01:33,040 --> 00:01:35,000
>> Είναι μια πολύ, πολύ συναρπαστική στιγμή.

36
00:01:35,000 --> 00:01:37,070
Είναι ένα πραγματικά, πραγματικά δροσερό ευκαιρία.

37
00:01:37,070 --> 00:01:42,020
Είναι πραγματικά μια καθολική διαδίκτυο
διεπαφή εργαλείο ανάπτυξης,

38
00:01:42,020 --> 00:01:44,420
γι 'αυτό είναι ένα πολύ, πολύ
σημαντικό πράγμα που πρέπει να γνωρίζετε.

39
00:01:44,420 --> 00:01:46,949
Και, όπως έλεγε άνθρωποι
πριν, αυτό, νομίζω,

40
00:01:46,949 --> 00:01:48,990
πρόκειται να αλλάξει τον τρόπο που
την κατασκευή δικτυακών εφαρμογών για πάντα.

41
00:01:48,990 --> 00:01:55,820
Γι 'αυτό είναι ίσως υπερβολή λίγο, αλλά εγώ
νομίζω ότι είναι ένα πολύ καλό πράγμα για να ξέρει.

42
00:01:55,820 --> 00:01:57,580
>> Εντάξει, έτσι τι είναι αντιδρούν;

43
00:01:57,580 --> 00:02:01,020
React είναι ένα πλαίσιο που μπορείτε να
χρησιμοποιήσετε για την κατασκευή διασυνδέσεων.

44
00:02:01,020 --> 00:02:03,240
Μια διεπαφή είναι, και πάλι,
μια ιστοσελίδα, έτσι δεν είναι;

45
00:02:03,240 --> 00:02:06,340
Τόσο εδώ είναι Instagram.com, χρήσεις React.

46
00:02:06,340 --> 00:02:08,740
>> React είναι χτισμένο στην
ιδέα των συστατικών.

47
00:02:08,740 --> 00:02:11,900
Ένα συστατικό είναι ένα HTML
στοιχείο στα στεροειδή,

48
00:02:11,900 --> 00:02:14,470
έτσι ώστε ένα στοιχείο HTML είναι σαν ένα κουμπί.

49
00:02:14,470 --> 00:02:15,250
Είναι μια σκέψη.

50
00:02:15,250 --> 00:02:17,500
Είναι μια κεφαλίδα, έτσι δεν είναι;

51
00:02:17,500 --> 00:02:22,740
Και Instagram θα χρησιμοποιήσει αυτές, αλλά
θα χρησιμοποιήσει επίσης τα στοιχεία του React.

52
00:02:22,740 --> 00:02:25,740
>> Αντιδράστε συστατικά είναι
souped-up στοιχεία HTML

53
00:02:25,740 --> 00:02:28,100
που έχουν τη δική τους συμπεριφορά
που περιέχονται σε αυτές.

54
00:02:28,100 --> 00:02:31,800
Έτσι, ως ένα παράδειγμα, θα μπορούσαμε να έχουμε
ένα στοιχείο τη φορά, ένα συστατικό του χρόνου,

55
00:02:31,800 --> 00:02:34,095
η οποία θα περιέχει, όπως
η χρονική σφραγίδα, ξέρετε,

56
00:02:34,095 --> 00:02:37,170
ένα συστατικό το οποίο προφίλ
θα περιέχει την εικόνα προφίλ

57
00:02:37,170 --> 00:02:38,820
και το όνομα του προσώπου.

58
00:02:38,820 --> 00:02:42,930
Μπορεί να έχει σαν μετρητής, ο οποίος
μπορεί να μετρήσει όπως ο αριθμός των συμπαθεί,

59
00:02:42,930 --> 00:02:45,610
και αν κάνετε κλικ σε αυτό, αυτό θα
την αύξηση του αριθμού των συμπαθεί.

60
00:02:45,610 --> 00:02:48,200
Ένα συστατικό είναι απλώς ένα
μάτσο κώδικα HTML που

61
00:02:48,200 --> 00:02:50,520
έχει κάποια λειτουργικότητα
τυλιγμένο στο εσωτερικό του.

62
00:02:50,520 --> 00:02:53,770
Έτσι είναι σαν ένα στοιχείο HTML
στα στεροειδή, όπως είπα και πριν.

63
00:02:53,770 --> 00:02:56,270
Μπορείτε να πάρετε αυτά τα στοιχεία,
και μπορείτε να τα βάλει μαζί

64
00:02:56,270 --> 00:02:59,060
να κάνουν νέα στοιχεία, σε
Στην περίπτωση αυτή, ένα συστατικό των υστέρων,

65
00:02:59,060 --> 00:03:00,505
το οποίο περιέχει όλα αυτά τα πράγματα.

66
00:03:00,505 --> 00:03:04,050
Θα περιέχει χρόνος, το προφίλ,
LikeCounter, ίσως το σχόλιο

67
00:03:04,050 --> 00:03:06,100
και ίσως η ίδια η εικόνα.

68
00:03:06,100 --> 00:03:10,810
Και έτσι Web Apps είναι ακριβώς χτίστηκε από τη λήψη
συστατικά και τη θέση τους μαζί.

69
00:03:10,810 --> 00:03:15,620
Μια τροφή Instagram δεν είναι τίποτα περισσότερο από ό, τι
ένα μάτσο δημοσιεύσεις ένα μετά το άλλο,

70
00:03:15,620 --> 00:03:19,032
κάθε θέση περιέχει, όπως το Time,
Προφίλ, LikeCounter, και ούτω καθεξής.

71
00:03:19,032 --> 00:03:20,490
Είναι το είδος του σαν να χτίζεις ένα σπίτι.

72
00:03:20,490 --> 00:03:22,660
Δεν χτίσει το
σπίτι από πάνω προς τα κάτω.

73
00:03:22,660 --> 00:03:24,960
Θα σας πάρει components--
να λάβει, όπως το μπάνιο.

74
00:03:24,960 --> 00:03:28,320
Παίρνετε το bedroom-- μπορείτε να κολλήσετε
μαζί, και έχετε ένα νέο στοιχείο.

75
00:03:28,320 --> 00:03:29,760
Έχετε ένα νέο τμήμα του σπιτιού.

76
00:03:29,760 --> 00:03:32,860
>> Έτσι αντιδρούν είναι όλα χτισμένα γύρω από
Αυτή η ιδέα της στοιχεία που

77
00:03:32,860 --> 00:03:36,600
είναι διαδραστικό, που είναι δηλωτική.

78
00:03:36,600 --> 00:03:39,650
Όπως μπορείτε απλώς να πω ό, τι μια
προφίλ είναι, και αυτό καθιστά.

79
00:03:39,650 --> 00:03:40,600
Είναι συναρμολογούμενων.

80
00:03:40,600 --> 00:03:43,880
Μπορείτε να κάνετε ένα διάλειμμα και ένα προφίλ, να θέσει
μαζί, κάνουν κάτι καλύτερο.

81
00:03:43,880 --> 00:03:47,770
Και είναι επαναχρησιμοποιήσιμο, οπότε αν
έχουν τον πηγαίο κώδικα για μια θέση,

82
00:03:47,770 --> 00:03:49,440
μπορείτε να ενσωματώσετε ότι οπουδήποτε.

83
00:03:49,440 --> 00:03:53,160
>> Μπορείτε να ενσωματώσετε ένα Instagram
πράγμα για τη δική σας ιστοσελίδα.

84
00:03:53,160 --> 00:03:56,830
Μπορείτε να ενσωματώσετε στο Facebook, για παράδειγμα,
όσο χρησιμοποιεί React επίσης.

85
00:03:56,830 --> 00:04:00,360
Έτσι τα συστατικά είναι πραγματικά, πραγματικά, πραγματικά
ισχυρά δομικά στοιχεία του διαδικτύου

86
00:04:00,360 --> 00:04:04,180
ότι μπορεί να χρησιμοποιηθεί οπουδήποτε και να θέσει
μαζί για να κάνουν νέα δομικά στοιχεία.

87
00:04:04,180 --> 00:04:07,159
Αυτό είναι το πολύ, πολύ
επισκόπηση υψηλού επιπέδου.

88
00:04:07,159 --> 00:04:09,200
Έτσι, και πάλι, αν έχετε
οποιεσδήποτε ερωτήσεις σε οποιοδήποτε σημείο

89
00:04:09,200 --> 00:04:14,470
σχετικά με τη φιλοσοφία του αντιδραστήρα, το
κωδικοποίησης, για να με σταματήσει, και επιτρέψτε μου να ξέρω.

90
00:04:14,470 --> 00:04:18,420
>> Εντάξει, έτσι ώστε να αντιδρά είναι δροσερό, διότι
έχει ένα διαφορετικό τρόπο θεώρησης

91
00:04:18,420 --> 00:04:19,870
το πώς θα οικοδομήσουμε Web Apps.

92
00:04:19,870 --> 00:04:23,620
Έχετε ακούσει πιθανώς του MVC, ένα
μοντέλο μπορείτε να ελέγχετε σε CS50 ή οτιδήποτε άλλο

93
00:04:23,620 --> 00:04:25,940
άλλα σχολαστικά τις κατηγορίες που χρησιμοποιείτε.

94
00:04:25,940 --> 00:04:29,000
Και οι περισσότεροι πλαίσια είναι
χτισμένο γύρω από την ιδέα του MVC.

95
00:04:29,000 --> 00:04:30,410
Αντιδρούν δεν είναι.

96
00:04:30,410 --> 00:04:32,980
React είναι χτισμένο γύρω από την ιδέα
της μονής κατεύθυνσης ροή δεδομένων

97
00:04:32,980 --> 00:04:36,510
όπως φαίνεται από αυτό το διάγραμμα ή το γραφικό εδώ.

98
00:04:36,510 --> 00:04:38,260
>> Βασικά, έχετε μια πηγή δεδομένων.

99
00:04:38,260 --> 00:04:42,380
Και η πηγή των δεδομένων θα αποφασίσει
πώς να θέσει ορισμένα συστατικά.

100
00:04:42,380 --> 00:04:45,452
Και τα στοιχεία θα
τότε, όταν αλλάζουν,

101
00:04:45,452 --> 00:04:47,160
θα πει ο
πηγή δεδομένων για την αλλαγή.

102
00:04:47,160 --> 00:04:49,350
>> Για να χρησιμοποιήσετε το Instagram
παράδειγμα, μπορεί να έχετε

103
00:04:49,350 --> 00:04:52,050
κατάλογο των υστέρων αντικείμενα όπως
σε μια βάση δεδομένων ή κάτι τέτοιο.

104
00:04:52,050 --> 00:04:53,310
Ότι τα δεδομένα.

105
00:04:53,310 --> 00:04:57,600
Και στη συνέχεια, μετά τα συστατικά μας
θα λάβει αυτά τα δεδομένα,

106
00:04:57,600 --> 00:05:01,830
και χρησιμοποιεί τα δεδομένα αυτά για να καταστήσει
ένα πράγμα στην οθόνη.

107
00:05:01,830 --> 00:05:04,300
Αυτό είναι ό, τι το βέλος
από τα δεδομένα στο συστατικό είναι,

108
00:05:04,300 --> 00:05:07,930
και τότε χρησιμοποιείται η ίδια δεδομένα
να καταστήσει μια δέσμη των συστατικών.

109
00:05:07,930 --> 00:05:10,290
>> Στο Facebook Messenger, για
παράδειγμα, η οποία είναι React,

110
00:05:10,290 --> 00:05:13,410
μπορεί να έχετε μια λίστα
μηνυμάτων ως πηγή δεδομένων σας.

111
00:05:13,410 --> 00:05:15,927
Και αυτό δεν θα καταστήσει
μόνο ο κατάλογος των μηνυμάτων

112
00:05:15,927 --> 00:05:17,510
αλλά και τον κατάλογο των φίλων που έχετε.

113
00:05:17,510 --> 00:05:19,200
Έχετε το πλήθος των μη αναγνωσμένων.

114
00:05:19,200 --> 00:05:23,330
Ίσως επίσης να καταστήσει το πράγμα Facebook
που είναι στο κάτω μέρος του Facebook.com.

115
00:05:23,330 --> 00:05:25,610
Το ίδιο δεδομένων είναι ένα
μοναδική πηγή της αλήθειας

116
00:05:25,610 --> 00:05:28,290
και αυτό προκαλεί πολλά
συστατικά που πρέπει να αποδοθεί.

117
00:05:28,290 --> 00:05:30,290
Και κάθε φορά που ένα από αυτά
συστατικών αλλάξει,

118
00:05:30,290 --> 00:05:32,320
πηγαίνει πίσω και
αλλάζει την πηγή δεδομένων.

119
00:05:32,320 --> 00:05:33,460
>> Μπορείτε να στείλετε ένα μήνυμα, έτσι δεν είναι;

120
00:05:33,460 --> 00:05:34,780
Αυτό αλλάζει την πηγή δεδομένων.

121
00:05:34,780 --> 00:05:39,490
Μπορείτε να διαβάσετε τα μηνύματά σας,
έτσι ώστε να ρυθμίσετε αδιάβαστη στο 0.

122
00:05:39,490 --> 00:05:41,136
Αυτό αλλάζει την πηγή δεδομένων.

123
00:05:41,136 --> 00:05:44,010
Και παρατηρώ ότι όλα αυτά από ένα
βέλος πηγαίνει πίσω στα ίδια δεδομένα

124
00:05:44,010 --> 00:05:47,662
πηγή, ώστε να γνωρίζετε,
δίνεται ένα συγκεκριμένο σύνολο δεδομένων,

125
00:05:47,662 --> 00:05:49,870
ξέρετε ακριβώς ποια είναι η
σελίδα πρόκειται να μοιάσει.

126
00:05:49,870 --> 00:05:50,700
Είναι ντετερμινιστική.

127
00:05:50,700 --> 00:05:53,451
Ξέρετε, δίνεται ορισμένα δεδομένα, τι
η σελίδα πρόκειται να μοιάσει.

128
00:05:53,451 --> 00:05:56,158
Μπορείτε να προβλέψετε το πώς πρόκειται να
συμπεριφέρονται και πώς πηγαίνουν τα πράγματα

129
00:05:56,158 --> 00:05:57,650
να εργάζονται όταν είναι μαζί.

130
00:05:57,650 --> 00:06:00,410
>> Και αν είχα ένα εκατομμύριο εξαρτήματα
Εδώ, θα συμπεριφέρονται με τον ίδιο, έτσι δεν είναι;

131
00:06:00,410 --> 00:06:02,290
Δεν θα έχει καμία
Περίεργο διασυνδέσεις.

132
00:06:02,290 --> 00:06:04,120
Ένας στοιχεία που παρασχέθηκαν από ένα εκατομμύριο εξαρτήματα.

133
00:06:04,120 --> 00:06:06,879
Ένα εκατομμύριο εξαρτήματα μπορούσε
πάτε πίσω και να επεξεργαστείτε τα δεδομένα.

134
00:06:06,879 --> 00:06:07,920
Και έτσι αυτό είναι πολύ ωραίο.

135
00:06:07,920 --> 00:06:10,870
Χτίζουμε συναρμολογούμενων,
εύκολα επεκτάσιμη εφαρμογές web.

136
00:06:10,870 --> 00:06:13,150
>> Έχετε μία πηγή δεδομένων,
η πηγή της αλήθειας.

137
00:06:13,150 --> 00:06:15,790
Αυτό λέει συστατικά σας
πώς να θέσει τη σελίδα,

138
00:06:15,790 --> 00:06:18,190
και τα στοιχεία θα
χειριστεί αλληλεπίδραση.

139
00:06:18,190 --> 00:06:20,150
Και αν θέλετε να αλλάξετε
τα πράγματα, απλά πηγαίνετε πίσω

140
00:06:20,150 --> 00:06:21,750
και να πει η πηγή δεδομένων για την αλλαγή.

141
00:06:21,750 --> 00:06:22,850
Βγάζει νόημα?

142
00:06:22,850 --> 00:06:26,010
Έτσι React είναι όλα σχετικά με την κατανόηση
πώς να οικοδομήσουμε ένα συστατικό

143
00:06:26,010 --> 00:06:29,540
και πώς να κάνει συνιστώσα σας
αλληλεπιδρούν με τον έξω κόσμο.

144
00:06:29,540 --> 00:06:31,850
>> Κάνοντας το INTERACT συστατικό
με τον έξω κόσμο

145
00:06:31,850 --> 00:06:34,490
χρησιμοποιεί μια άλλη τεχνολογία
που ονομάζεται ροή, η οποία

146
00:06:34,490 --> 00:06:36,872
είναι ένα πλαίσιο που είναι
προστίθεται στην κορυφή της React.

147
00:06:36,872 --> 00:06:38,330
Εμείς δεν πρόκειται να μιλήσω για αυτό.

148
00:06:38,330 --> 00:06:42,990
Εμείς πάμε να μιλήσουμε περισσότερο για, δεδομένου
δεδομένων, πώς μπορεί να σας καταστήσει ένα στοιχείο;

149
00:06:42,990 --> 00:06:47,010
>> Και έτσι React είναι πραγματικά δροσερό, επειδή σας
μπορεί να το χρησιμοποιήσει με οποιοδήποτε πίσω τέλος που θέλετε.

150
00:06:47,010 --> 00:06:50,480
Αν έχετε σαν ένα πίσω τέλος Python,
Εάν η Python σας μπορεί να φτύσει κάποια δεδομένα,

151
00:06:50,480 --> 00:06:51,610
Αντιδρούν μπορεί να την καθιστούν.

152
00:06:51,610 --> 00:06:54,700
Εάν υπάρχουν έξοδοι JS
δεδομένων, React καθιστά.

153
00:06:54,700 --> 00:06:56,890
Ruby ράγες με
δεδομένα, React καθιστά.

154
00:06:56,890 --> 00:07:01,860
>> Έτσι React είναι βασικά ένα web
view-- ένα εμπρόσθιο άκρο με εξαρτήματα

155
00:07:01,860 --> 00:07:03,910
για οποιαδήποτε πηγή δεδομένων.

156
00:07:03,910 --> 00:07:07,145
Και έτσι πηγαίνει από την πηγή δεδομένων για να
αντιδρούν συστατικά είναι αρκετά εύκολο.

157
00:07:07,145 --> 00:07:08,770
Πηγαίνοντας ο άλλος τρόπος είναι λίγο πιο δύσκολο.

158
00:07:08,770 --> 00:07:10,462
Αυτό χρησιμοποιεί Flux όπως ανέφερα πριν.

159
00:07:10,462 --> 00:07:11,420
Δεν θα μπω σε αυτό.

160
00:07:11,420 --> 00:07:13,740
Θα επικεντρωθεί περισσότερο στην
δεδομένα προς συστατικό πλευρά.

161
00:07:13,740 --> 00:07:15,880
Με αυτό τον τρόπο μπορείτε να κάνετε
δροσερό, διασκεδαστικές εφαρμογές web.

162
00:07:15,880 --> 00:07:19,870
Δεν θα επηρεάσει τον έξω κόσμο
για τώρα, αλλά αυτό είναι μια άλλη ιστορία.

163
00:07:19,870 --> 00:07:22,210
>> Εντάξει, οπότε αν ήσουν εδώ
για το τελευταίο σεμινάριο μου

164
00:07:22,210 --> 00:07:26,610
θα ξέρετε ότι όλα του κώδικα για
η σημερινή συζήτηση θα είναι σε αυτή τη διεύθυνση URL

165
00:07:26,610 --> 00:07:29,320
εδώ, συγνώμη, αυτό το URL εδώ.

166
00:07:29,320 --> 00:07:32,730
Και ουσιαστικά θα πάμε για να πάει
μέσω τεσσάρων σταδίων, ίσως πέντε,

167
00:07:32,730 --> 00:07:33,510
ίσως όχι πέντε.

168
00:07:33,510 --> 00:07:37,300
Θα προχωρήσουμε μέσα από τέσσερα βήματα
της οικοδόμησης ενός δείγματος React app.

169
00:07:37,300 --> 00:07:39,550
Και έτσι όλος ο πηγαίος κώδικας
για κάθε βήμα του τρόπου

170
00:07:39,550 --> 00:07:42,216
θα είναι εδώ, οπότε αν
είστε μετά μαζί στο σπίτι,

171
00:07:42,216 --> 00:07:43,991
αισθανθείτε ελεύθερος να μελετήσει αυτόν τον κωδικό.

172
00:07:43,991 --> 00:07:46,740
Εάν είστε μετά μαζί εδώ,
θα πρέπει να το δείχνει στην οθόνη,

173
00:07:46,740 --> 00:07:47,739
οπότε μην ανησυχείτε γι 'αυτό.

174
00:07:47,739 --> 00:07:50,930
Αλλά αν είστε στο σπίτι, αισθάνονται
ελεύθερος να επισκεφθείτε αυτή την ιστοσελίδα.

175
00:07:50,930 --> 00:07:56,400
Και, ναι, θα πρέπει να μπορείτε να πάρετε
όλος ο κώδικας που θα χρειαστείτε ποτέ εδώ.

176
00:07:56,400 --> 00:08:01,380
Γι 'αυτό είναι μια καλή σκονάκι καθώς και
για τις μελλοντικές περιπέτειες σας με React.

177
00:08:01,380 --> 00:08:04,490
Cool, οπότε αν ο καθένας που είναι εδώ,
και ακόμα κι αν είστε στο σπίτι,

178
00:08:04,490 --> 00:08:11,580
σηκώσει αυτή την ιστοσελίδα, is.gd/cs50react,
χωρίς κεφάλαιο, δεν υπογράμμισης, ούτε τίποτα.

179
00:08:11,580 --> 00:08:15,849
>> Θα δείτε μια σελίδα που μοιάζει
λίγο σαν αυτό.

180
00:08:15,849 --> 00:08:17,140
Αυτό είναι ένα πράγμα που ονομάζεται CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen είναι ένα συνεργατικό
κωδικοποίησης περιβάλλον

182
00:08:20,030 --> 00:08:23,364
με το οποίο μπορώ να γράψω κώδικα εδώ, και
αυτό θα πρέπει να αποστέλλεται αυτόματα σε εσάς.

183
00:08:23,364 --> 00:08:24,780
Και με αυτό τον τρόπο, μπορώ να γράφουν κώδικα.

184
00:08:24,780 --> 00:08:26,920
Μπορώ να εκτελέσει κώδικα εδώ.

185
00:08:26,920 --> 00:08:33,470
>> Για example-- και αν reloads-- δείτε,
Τρέχω κώδικα JavaScript στη σελίδα

186
00:08:33,470 --> 00:08:36,390
ακριβώς εδώ, και αυτό θα
καθιστά αυτόματα μια ιστοσελίδα

187
00:08:36,390 --> 00:08:37,980
με αυτόν τον κώδικα JavaScript.

188
00:08:37,980 --> 00:08:40,039
Και έτσι αυτή είναι ένας τρόπος
για εμάς να δοκιμάσετε κώδικα

189
00:08:40,039 --> 00:08:43,089
πραγματικά γρήγορα, χωρίς να χρειάζεται να χρησιμοποιήσετε
ID ή να χρησιμοποιήσετε ένα τοπικό μηχάνημα μας μας

190
00:08:43,089 --> 00:08:44,290
ή οτιδήποτε άλλο.

191
00:08:44,290 --> 00:08:47,670
Είναι ένας πολύ γρήγορος τρόπος για να κοροϊδεύω
και να δοκιμάσουν τα διάφορα είδη κώδικα.

192
00:08:47,670 --> 00:08:50,560
>> Έτσι, Πάω να λαμβάνει
παράδειγμα κώδικα, βάζοντας εδώ.

193
00:08:50,560 --> 00:08:52,374
Εμείς πάμε να εργάζονται μέσα από αυτό.

194
00:08:52,374 --> 00:08:54,540
Και αν είστε στο σπίτι, μπορείτε
μπορεί να τραβήξει αυτό επάνω, καθώς και.

195
00:08:54,540 --> 00:08:57,530
Και έχω ήδη εγκατεστημένο
Αντιδρούν εδώ, έτσι ώστε να μπορείτε απλά

196
00:08:57,530 --> 00:09:00,770
γράψε τη δική σου κώδικα εδώ, και
δοκιμάσετε τη δική σας παιδική χαρά.

197
00:09:00,770 --> 00:09:04,940
>> Ναι, αν ο καθένας να
να ανοίξει αυτό το σύνδεσμο εδώ.

198
00:09:04,940 --> 00:09:08,080
Παρακαλώ να μου δώσετε ένα μπράβο
μέχρι τη στιγμή που θα έχετε ανοιχτή.

199
00:09:08,080 --> 00:09:10,960

200
00:09:10,960 --> 00:09:13,770
Cool, δροσερό δροσερό.

201
00:09:13,770 --> 00:09:16,914
Δεν υπάρχει τίποτα εδώ για τώρα, αλλά
θα αλλάξουμε ότι πολύ σύντομα.

202
00:09:16,914 --> 00:09:21,250
>> Εντάξει, έτσι React είναι ένας JavaScript
βιβλιοθήκη, και ως τέτοια,

203
00:09:21,250 --> 00:09:24,480
απαιτεί γνώση της JavaScript,
η οποία είναι η γλώσσα προγραμματισμού web.

204
00:09:24,480 --> 00:09:27,660
Και αυτό είναι να χρησιμοποιηθούν για άλλα πράγματα
τώρα πάρα πολύ, αλλά κυρίως το διαδίκτυο να αναπτύξουν

205
00:09:27,660 --> 00:09:32,040
γλώσσα, οπότε αν δεν είστε εξοικειωμένοι με
ότι, διαβάστε μια τοποθεσία που ονομάζεται JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Είναι υπέροχο.

207
00:09:32,700 --> 00:09:34,240
Μπορείτε να μάθετε το JavaScript
σε μισή ώρα.

208
00:09:34,240 --> 00:09:34,990
Είναι απίστευτο.

209
00:09:34,990 --> 00:09:36,420
>> Γι 'αυτό να δώσει μια ανάγνωση.

210
00:09:36,420 --> 00:09:39,960
Επίσης, είναι πολύ HTML εδώ γιατί
σχεδιάζουμε ιστοσελίδες του μαθήματος.

211
00:09:39,960 --> 00:09:43,890
Έτσι, εάν είστε εξοικειωμένοι με
HTML, ελέγξτε HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Νομίζω ότι η εκμάθηση React είναι μια
εκατομμύριο φορές πιο εύκολη, αν έχετε ήδη

213
00:09:46,520 --> 00:09:47,892
ξέρουμε τα δομικά υλικά.

214
00:09:47,892 --> 00:09:50,600
Αν έχετε τα συστατικά, είναι
εύκολο να κάνει ένα μεγαλύτερο συστατικό.

215
00:09:50,600 --> 00:09:51,860
Αυτό είναι React γλώσσα για εσάς.

216
00:09:51,860 --> 00:09:54,270
>> Έτσι προχωρήστε και να δώσει
αυτά τα πράγματα για ανάγνωση.

217
00:09:54,270 --> 00:09:55,070
Παύση αυτό το βίντεο.

218
00:09:55,070 --> 00:09:57,440
Δώστε του μια να διαβάσετε αν είστε
στο σπίτι, αν δεν είστε

219
00:09:57,440 --> 00:10:00,794
εξοικειωμένοι με την HTML ή JavaScript

220
00:10:00,794 --> 00:10:02,960
Εντάξει, έτσι τι θα πάμε να
κάνουμε είναι να πάμε να κάνουμε

221
00:10:02,960 --> 00:10:06,470
ένα πολύ βασικό flashcard εφαρμογή χρησιμοποιώντας το React.

222
00:10:06,470 --> 00:10:08,210
Εμείς πάμε για να έχουμε μια flashcard.

223
00:10:08,210 --> 00:10:09,880
Μπορείτε να αναστρέψετε την κάρτα μπροστά και πίσω.

224
00:10:09,880 --> 00:10:12,399
Και θα έχουμε επίσης έναν κατάλογο
όλες οι κάρτες που έχουμε,

225
00:10:12,399 --> 00:10:14,190
και αν αισθανόμαστε
φιλόδοξοι, θα μπορούσαμε να

226
00:10:14,190 --> 00:10:17,060
είναι σε θέση να εναλλαγή μεταξύ
αυτοκίνητα κάνοντας κλικ πάνω τους.

227
00:10:17,060 --> 00:10:20,360
>> Αλλά αυτό είναι, από τα γυμνά σας
οστά, μια πολύ απλή React app.

228
00:10:20,360 --> 00:10:22,560
Και έτσι αυτό είναι πράγματι
Δεν ασήμαντο για την εφαρμογή της,

229
00:10:22,560 --> 00:10:26,030
αλλά θα πάμε για να δείξουμε ότι, αν το κάνετε
αυτό, είναι πολύ, πολύ εύκολο να επεκταθεί

230
00:10:26,030 --> 00:10:27,680
αν άλλοι άνθρωποι να σας βοηθήσει με αυτό.

231
00:10:27,680 --> 00:10:33,750
Έτσι θα πάμε να περνούν από τέσσερα στάδια
ξεκινώντας από το μηδέν για να οικοδομήσουμε αυτό.

232
00:10:33,750 --> 00:10:36,740
>> Εντάξει, έτσι ώστε τα τέσσερα βήματα, θα
Ξεκινάμε με το πρώτο βήμα.

233
00:10:36,740 --> 00:10:39,790
Το πρώτο βήμα θα είναι
οικοδόμηση του πρώτου συστατικού.

234
00:10:39,790 --> 00:10:44,830
Όπως είπα και πριν, ένα συστατικό στο React
είναι απλά ένα στοιχείο HTML σε στεροειδή.

235
00:10:44,830 --> 00:10:49,660
Καθορίζει την HTML
και κάποια συμπεριφορά, και

236
00:10:49,660 --> 00:10:52,600
θα καθορίζει πώς οι άνθρωποι
μπορούν να αλληλεπιδράσουν με αυτό τον τρόπο

237
00:10:52,600 --> 00:10:54,270
θα έχουν εσωτερική κατάσταση.

238
00:10:54,270 --> 00:10:57,630
Όπως ένα κουμπί θα γνωρίζουν, όπως το πώς πολλοί
φορές που κάνετε κλικ, για παράδειγμα,

239
00:10:57,630 --> 00:11:01,010
και θα ξέρουν πώς να lay out.

240
00:11:01,010 --> 00:11:04,430
>> Ας πάμε μπροστά και να οικοδομήσουμε μας
πρώτο συστατικό τη χρήση JavaScript.

241
00:11:04,430 --> 00:11:09,711
Έτσι, αν η σύνταξη φαίνεται παράξενο,
αυτό είναι επειδή το είδος του είναι.

242
00:11:09,711 --> 00:11:11,710
Έτσι, και πάλι, θα πάμε
να κάνει μια μεταβλητή που ονομάζεται

243
00:11:11,710 --> 00:11:14,580
app χρησιμοποιώντας τη λέξη ας,
η οποία καθιστά μια μεταβλητή,

244
00:11:14,580 --> 00:11:18,210
ας App ίση React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> React είναι μια βιβλιοθήκη και έχει
η λειτουργία δημιουργήσουν τάξη.

246
00:11:22,609 --> 00:11:24,400
Και αυτή η λειτουργία είναι
ένα κομμάτι του κώδικα που

247
00:11:24,400 --> 00:11:29,090
μπορεί να χρησιμοποιήσει για να δημιουργήσει μια νέα
τύπο του React στοιχείου.

248
00:11:29,090 --> 00:11:32,780
Και έτσι React.createClass
κάνει ένα συστατικό,

249
00:11:32,780 --> 00:11:35,270
και αυτό το συστατικό θα
να είναι σε θέση να κάνει πράγματα.

250
00:11:35,270 --> 00:11:40,460
Το κύριο πράγμα που μπορεί να κάνει είναι να καταστήσει
κάτι, καθιστούν ως μια λειτουργία.

251
00:11:40,460 --> 00:11:44,500
>> Και πάλι, αν ο δείκτης δεν είναι προφανής για
σας, σας συνιστώ να πάτε στο JS για γάτες

252
00:11:44,500 --> 00:11:45,682
και να το ελέγξουμε.

253
00:11:45,682 --> 00:11:47,710
Είναι ότι μεγεθύνεται αρκετά καλά;

254
00:11:47,710 --> 00:11:48,490
Δροσερός.

255
00:11:48,490 --> 00:11:50,670
>> Έτσι, κάθε συνιστώσα ανάγκες
να έχουν μια λειτουργία render.

256
00:11:50,670 --> 00:11:53,010
Η λειτουργία καθιστούν λέει,
τι μπορώ να εκτυπώσετε στην οθόνη;

257
00:11:53,010 --> 00:11:54,760
Αλλά η συνιστώσα είναι
άχρηστο αν δεν το κάνει

258
00:11:54,760 --> 00:11:58,060
ξέρω τι να εκτυπώσετε στην οθόνη, έτσι
θα πρέπει να έχουν μια λειτουργία render.

259
00:11:58,060 --> 00:12:01,904
>> Έτσι, στο να καταστήσει πράγμα, εσείς
Απλά πρέπει να επιστρέψουν κάποια HTML.

260
00:12:01,904 --> 00:12:03,820
Και τι είναι δροσερός είναι αυτός
υπάρχει ένα πράγμα που ονομάζεται

261
00:12:03,820 --> 00:12:08,660
JSX, η οποία είναι μια επέκταση του
JavaScript που χρησιμοποιείται από αντιδράσει.

262
00:12:08,660 --> 00:12:11,845
Θα σας επιτρέπουν να γράψετε HTML μέσα
του σας JavaScript, τα οποία

263
00:12:11,845 --> 00:12:13,970
Ακούγεται περίεργο είδος, όταν
για πρώτη φορά το σκέφτομαι,

264
00:12:13,970 --> 00:12:15,553
αλλά κάνει πολύ νόημα αργότερα.

265
00:12:15,553 --> 00:12:17,430
Έτσι, μπορούμε να το κάνουμε αυτό.

266
00:12:17,430 --> 00:12:21,360
Εάν είστε εξοικειωμένοι με τη γλώσσα HTML, ξέρω
έχουμε ένα div με ένα γενικού σκοπού

267
00:12:21,360 --> 00:12:22,790
δοχείο για την ουσία.

268
00:12:22,790 --> 00:12:26,380
Μπορούμε να επιστρέψει ένα div, και μέσα
Αυτό div, μπορούμε να βάλουμε τα πράγματα.

269
00:12:26,380 --> 00:12:32,390
>> Ας πούμε ότι θέλουμε να καταστήσει μόνο
μια ευθεία-up flashcard για τώρα.

270
00:12:32,390 --> 00:12:34,890
Η flashcard, θα έλεγα,
θα έχει μια ερώτηση και απάντηση.

271
00:12:34,890 --> 00:12:37,530
Έτσι, μέσα σε αυτό το div, ας
εκτυπώσετε μια παράγραφο

272
00:12:37,530 --> 00:12:42,155
που λέει question-- Ποια είναι η
τελική απάντηση για τη ζωή, το σύμπαν;

273
00:12:42,155 --> 00:12:47,640

274
00:12:47,640 --> 00:12:50,345
Και τότε η απάντηση είναι
πρόκειται να είναι, φυσικά, 42.

275
00:12:50,345 --> 00:12:56,880

276
00:12:56,880 --> 00:12:59,730
>> Αυτό δεν ήρθε καθόλου καλά.

277
00:12:59,730 --> 00:13:04,164
Ναι, έτσι βασικά μπορείτε πραγματικά
γράφετε HTML στο εσωτερικό JavaScript σας.

278
00:13:04,164 --> 00:13:06,330
Και αυτό πρόκειται να είναι
εκτυπώνεται στην οθόνη.

279
00:13:06,330 --> 00:13:08,250
Ας το δοκιμάσουμε.

280
00:13:08,250 --> 00:13:09,520
>> Έτσι έχουμε συστατικό μας.

281
00:13:09,520 --> 00:13:12,210
Πρέπει να πω React να θέσει
το στοιχείο στην οθόνη

282
00:13:12,210 --> 00:13:18,990
έτσι React.render, έτσι ώστε να παρατηρήσετε
θεραπεία app όπως οποιοδήποτε άλλο στοιχείο.

283
00:13:18,990 --> 00:13:21,010
Γράφουμε καθώς ήταν ένα στοιχείο HTML.

284
00:13:21,010 --> 00:13:25,100
Όπως και αντί να λέει όπως img
για την εικόνα ή σ για την παράγραφο,

285
00:13:25,100 --> 00:13:28,120
γράφετε App, έτσι App είναι
αντιμετωπίζεται σαν ένα στοιχείο HTML.

286
00:13:28,120 --> 00:13:30,380
Όπως είπα και πριν, είναι
ένα στοιχείο στα στεροειδή.

287
00:13:30,380 --> 00:13:32,870
>> Έτσι μπορείτε να καταστήσει App, και
δώσει ένα μέρος για να το θέσω.

288
00:13:32,870 --> 00:13:37,170
Και αυτό είναι το πώς μπορείτε να κάνετε
πες το πού να το θέσω.

289
00:13:37,170 --> 00:13:46,200
Έχω δημιουργήσει μια απλή div σχετικά με την
σελίδα που ονομάζεται με ένα αναγνωριστικό της σελίδας,

290
00:13:46,200 --> 00:13:48,300
και αυτό είναι όπου η
στοιχείο πρόκειται να πάει.

291
00:13:48,300 --> 00:13:49,841
>> Και εμείς δεν πρόκειται να τρέξει με την HTML.

292
00:13:49,841 --> 00:13:53,145
Βασικά, αυτό πρόκειται να πάρει
βάλει στο εσωτερικό αυτής της σελίδας στοιχείου

293
00:13:53,145 --> 00:13:54,270
ότι έχουμε στην οθόνη.

294
00:13:54,270 --> 00:13:59,210
Γι 'αυτό τρέχει αυτόν τον κώδικα, και να αντλεί αυτή
πράγμα στην οθόνη, έτσι και εδώ είμαστε.

295
00:13:59,210 --> 00:14:01,770
Έχουμε κάνει το πρώτο συστατικό Αντιδρούν μας.

296
00:14:01,770 --> 00:14:08,000
>> Έτσι ακριβώς όπως μια ανακεφαλαίωση, θα γίνουν απαλά
ένα νέο τύπο κατασκευαστικού στοιχείου, έτσι δεν είναι;

297
00:14:08,000 --> 00:14:10,145
Αυτή ακριβώς είναι η React.createClass.

298
00:14:10,145 --> 00:14:12,680
Και σε αυτό το σκέλος,
είπε ότι αυτό που πρέπει να κάνει.

299
00:14:12,680 --> 00:14:15,590
Κάθε φορά που αυτό το συστατικό είναι να
να τυπωθεί πάνω στην οθόνη,

300
00:14:15,590 --> 00:14:19,300
θα εκτυπώσει το div με
τα δύο σημεία στο εσωτερικό του.

301
00:14:19,300 --> 00:14:24,460
>> Και αυτό που κάναμε, κάναμε μια νέα εφαρμογή
χρησιμοποιώντας το συμβολισμό γωνία του στηρίγματος app.

302
00:14:24,460 --> 00:14:27,160
Μας είπε να το βάλετε
στο εσωτερικό του στοιχείου της σελίδας.

303
00:14:27,160 --> 00:14:29,867
Και έτσι ό, τι έκανα, το δημιούργησε
μια νέα εφαρμογή από το εν λόγω πρότυπο.

304
00:14:29,867 --> 00:14:31,200
Και τότε μου είπε να το καταστήσει.

305
00:14:31,200 --> 00:14:33,680
Έτσι είπε, εντάξει, app,
τι πρέπει να εκτυπώσετε;

306
00:14:33,680 --> 00:14:36,970
App λέει, πάμε να εκτυπώσετε ένα div
με δύο σημεία στο εσωτερικό του.

307
00:14:36,970 --> 00:14:40,420
Και ιδού, υπάρχει div μας
δύο σημεία στο εσωτερικό του.

308
00:14:40,420 --> 00:14:43,180
Νόημα μέχρι στιγμής;

309
00:14:43,180 --> 00:14:46,690
>> Έτσι, και πάλι, το σύνολο του React πρόκληση
είναι ακριβώς να γνωρίζει πώς να κάνει τα συστατικά.

310
00:14:46,690 --> 00:14:48,500
Πώς να κάνει το
συστατικά συνεργαστούν.

311
00:14:48,500 --> 00:14:51,780
Τώρα που κάναμε την πρώτη μας
συστατικό, ας πάμε πίσω

312
00:14:51,780 --> 00:14:54,284
και κατασκευάζει εξαρτήματα προσαρμόσιμη.

313
00:14:54,284 --> 00:14:56,700
Έτσι, ξέρετε πόσο σας σε μορφή HTML
μπορεί να δώσει τα κουμπιά τάξεις σας;

314
00:14:56,700 --> 00:14:59,146
Μπορείτε να δώσετε άγκυρες σας το href.

315
00:14:59,146 --> 00:15:00,770
Μπορείτε να δώσετε τις εντολές σας έναν τύπο, σωστά;

316
00:15:00,770 --> 00:15:04,740
Μπορείτε να δώσετε περισσότερα προσαρμοσμένα
ιδιότητες για όλα τα στοιχεία σας

317
00:15:04,740 --> 00:15:06,490
για να γίνει πιο ενδιαφέρουσα.

318
00:15:06,490 --> 00:15:09,030
Και μπορούμε πραγματικά να κάνουμε
ακριβώς το ίδιο πράγμα.

319
00:15:09,030 --> 00:15:17,500
>> Ας πούμε ότι θέλουμε μας
app για να πάνε να δώσουν οποιαδήποτε κάρτα.

320
00:15:17,500 --> 00:15:19,630
Αυτή τη στιγμή έχουμε μόνο
καταξιώσει ως μια μόνιμη κάρτα.

321
00:15:19,630 --> 00:15:22,530
Γνωρίζουμε ότι υπάρχει μόνο μία
κάρτα μπορεί να το κάνει, έτσι είμαστε

322
00:15:22,530 --> 00:15:25,960
Θα προσπαθήσουμε και να αλλάξει αυτό τώρα έτσι
ότι μπορούμε να δώσουμε μόνο κάποια κάρτα.

323
00:15:25,960 --> 00:15:27,410
Θα εκτυπώσετε την κάρτα.

324
00:15:27,410 --> 00:15:29,380
>> Θα πρέπει να προσπαθήσουμε και να κάνουμε σας
συστατικά ένα πολύ γενικό σκοπό.

325
00:15:29,380 --> 00:15:31,654
Έτσι, με αυτόν τον τρόπο θα μπορούσα email
Αυτός ο φίλος μου και είναι σαν,

326
00:15:31,654 --> 00:15:33,820
ό, τι έχετε flashcard,
απλά να τροφοδοτήσει εδώ,

327
00:15:33,820 --> 00:15:35,290
και αυτό θα το κάνει από μόνη της.

328
00:15:35,290 --> 00:15:37,650
Μπορείτε να βάλετε και άλλα
τα πράγματα στη δική σας εφαρμογή.

329
00:15:37,650 --> 00:15:40,600
>> Αλλά πρώτα, ας σπάσει αυτό
επάνω σε δύο συνιστώσες,

330
00:15:40,600 --> 00:15:44,500
αλλά θέλουμε να διαχωρίσει την κάρτα
μέρος εκτύπωση από το πραγματικό μέρος app.

331
00:15:44,500 --> 00:15:46,660
Έτσι, αυτό που μπορούμε να κάνουμε είναι να
μπορεί να αλλάξει αυτό από το App

332
00:15:46,660 --> 00:15:51,300
να CardView, μόνο ένα
νέο όνομα για το app,

333
00:15:51,300 --> 00:15:54,450
και μπορούμε να κάνουμε μια νέα
στοιχείο που ονομάζεται App,

334
00:15:54,450 --> 00:15:56,336
δεν πρέπει να συγχέεται με την παλιά App.

335
00:15:56,336 --> 00:16:00,730
Έχουμε τις createClass,
όπως και στην HTML,

336
00:16:00,730 --> 00:16:03,590
μπορείτε φωλιά μπορεί να αντιδράσει εξαρτήματα
μέσα από την άλλη.

337
00:16:03,590 --> 00:16:16,430
>> Έτσι, σε αυτή τη λειτουργία καθιστούν,
λειτουργία CardView επιστροφή,

338
00:16:16,430 --> 00:16:18,234
και αυτό είναι ακριβώς το ίδιο πράγμα.

339
00:16:18,234 --> 00:16:19,400
Δείτε γιατί είναι το ίδιο πράγμα;

340
00:16:19,400 --> 00:16:22,590
Αντί απλά καθιστώντας την εφαρμογή που
έχει το div και σύνδεση στο εσωτερικό του,

341
00:16:22,590 --> 00:16:26,194
η εφαρμογή καθιστά την CardView, και η
CardView καθιστά το div και της παραγράφου.

342
00:16:26,194 --> 00:16:29,110
Έτσι, αυτό είναι το πρώτο παράδειγμα μας
στοιχεία ένθεσης μέσα στην άλλη.

343
00:16:29,110 --> 00:16:32,177
Βγάζει νόημα αυτό?

344
00:16:32,177 --> 00:16:33,760
Έτσι, και πάλι, έχουμε ένα στοιχείο CardView.

345
00:16:33,760 --> 00:16:37,250
Έχουμε στοιχεία app
ότι είναι μεγαλύτερο από ό, τι.

346
00:16:37,250 --> 00:16:40,990
>> Εντάξει, έτσι θέλουμε μας CardView-- αν
δίνουν μια καλή CardView μια συγκεκριμένη κάρτα,

347
00:16:40,990 --> 00:16:43,370
αυτό θα εκτυπώσετε για σας, έτσι δεν είναι;

348
00:16:43,370 --> 00:16:48,050
Έτσι, πρώτα, θα πρέπει να κάνει μια κάρτα,
οπότε ας κάνουμε ένα αντικείμενο κάρτα.

349
00:16:48,050 --> 00:17:02,930
Ας την κάρτα μου equal--
αν είστε όλοι εξοικειωμένοι,

350
00:17:02,930 --> 00:17:05,260
Αυτό είναι ακριβώς ο συμβολισμός αποφάσεων
αντιρρήσεις σε JavaScript.

351
00:17:05,260 --> 00:17:09,280
Είναι σαν ένα είδος struct
σε C, έτσι κάναμε μια κάρτα,

352
00:17:09,280 --> 00:17:15,920
και έτσι τώρα μπορούμε να περάσουμε αυτήν την κάρτα ως
μια ιδιότητα ή ως χαρακτηριστικό σε HTML

353
00:17:15,920 --> 00:17:17,290
ορολογία για να app μας.

354
00:17:17,290 --> 00:17:20,210
Έτσι, μπορούμε να κάνουμε αυτό, App
κάρτα ισούται myCard.

355
00:17:20,210 --> 00:17:23,200
>> Ξέρεις πώς στην είσοδο, κάνετε
Τύπος εισόδου ισοδυναμεί με κείμενο ή το κουμπί

356
00:17:23,200 --> 00:17:25,240
κατηγορίας ισούται btn για bootstrap ,?

357
00:17:25,240 --> 00:17:29,500
Ίδια ιδέα, equals-- κάρτα App
έχετε να βάλει σιδεράκια here--

358
00:17:29,500 --> 00:17:33,830
Κάρτα App ισούται myCard, οπότε αυτό
λέει ότι έχουμε αυτό το αντικείμενο κάρτα.

359
00:17:33,830 --> 00:17:39,149
Πάω να το περάσει ως
ιδιοκτησίας στο συστατικό app.

360
00:17:39,149 --> 00:17:41,440
Και αυτό το συστατικό εφαρμογή θα
να είναι σε θέση να έχουν πρόσβαση και να κάνουμε

361
00:17:41,440 --> 00:17:43,580
ενδιαφέροντα πράγματα με αυτό.

362
00:17:43,580 --> 00:17:47,650
>> Έτσι app μας θα είναι
δίνεται μια κάρτα, έτσι για τώρα,

363
00:17:47,650 --> 00:17:49,980
ας έχουν το app απλά δώστε
η κάρτα για να την CardView

364
00:17:49,980 --> 00:17:53,110
μόνη της, επειδή, όπως η εφαρμογή δεν είναι
πρόκειται να ξέρει τι να κάνει με αυτό,

365
00:17:53,110 --> 00:17:54,850
έτσι θα το δώσω στον CardView.

366
00:17:54,850 --> 00:18:00,050
Γι 'αυτό και θα το περάσει την
ίδιο τρόπο, κάρτα ισούται με,

367
00:18:00,050 --> 00:18:05,426
και έτσι κάθε συστατικό μπορεί να έχει πρόσβαση το
πράγματα που έχει δοθεί σε αυτό.

368
00:18:05,426 --> 00:18:07,800
Μπορούν να αποκτήσετε πρόσβαση στις ιδιότητες
που έχουν δοθεί για την

369
00:18:07,800 --> 00:18:09,470
χρησιμοποιώντας την ακόλουθη σύνταξη, this.props.card.

370
00:18:09,470 --> 00:18:12,010

371
00:18:12,010 --> 00:18:14,920
>> Έτσι, αυτό που συμβαίνει εδώ είναι
που έχουν ως αντικείμενο myCard.

372
00:18:14,920 --> 00:18:18,250
Μπορείτε να δώσετε στο app
χρησιμοποιώντας την κάρτα App ισούται myCard.

373
00:18:18,250 --> 00:18:21,420
Ο σκοπός της κάρτας δίνεται στην εφαρμογή σας.

374
00:18:21,420 --> 00:18:24,400
Η εφαρμογή μπορεί να έχει πρόσβαση
όπως this.props.card.

375
00:18:24,400 --> 00:18:28,780
Είναι κάτι σαν μια εικόνα
ξέρει τι πηγή θα είναι.

376
00:18:28,780 --> 00:18:31,972
>> Αυτή η εφαρμογή γνωρίζει τι είναι η κάρτα
είναι, και μπορεί να κάνει πράγματα με αυτό.

377
00:18:31,972 --> 00:18:32,930
Μπορεί να κάνει υπολογισμούς.

378
00:18:32,930 --> 00:18:35,290
Μπορεί να κάνει αποφάσεις που βασίζονται στα ανοικτά της.

379
00:18:35,290 --> 00:18:39,950
>> Για τώρα, ήμουν έτοιμος να περάσει
this.props.card πάνω στο CardView.

380
00:18:39,950 --> 00:18:43,420
Νόημα μέχρι στιγμής;

381
00:18:43,420 --> 00:18:45,210
Θα καταστήσει περισσότερο νόημα τώρα.

382
00:18:45,210 --> 00:18:46,990
>> Εντάξει, έτσι και τώρα είμαστε σε CardView.

383
00:18:46,990 --> 00:18:51,719
CardView μας, δεδομένης της κάρτας, θα πρέπει να
εκτυπώσετε ερώτηση και την απάντησή της.

384
00:18:51,719 --> 00:18:54,510
Αυτή τη στιγμή έχουμε μόλις είχαν τυπώσει μερικά
hardcoded ερωτήσεις και απαντήσεις.

385
00:18:54,510 --> 00:18:57,720
Πρέπει να καταλάβουμε out-- χρειαζόμαστε
να ζητήσει από την κάρτα που μας έδωσαν

386
00:18:57,720 --> 00:19:01,360
ποια είναι η ερώτηση και απάντηση, και
στη συνέχεια να εκτυπώσετε αυτό έξω στην οθόνη.

387
00:19:01,360 --> 00:19:02,470
>> Έτσι, μπορούμε να το κάνουμε αυτό εδώ.

388
00:19:02,470 --> 00:19:06,135
Σε καθιστούν begin-- κάνετε πρώτα ίσοι.

389
00:19:06,135 --> 00:19:08,710

390
00:19:08,710 --> 00:19:13,050
Έτσι, αυτό που κάνουμε εδώ είναι ότι ξέρουμε
οι κάρτες μας δίνονται σε ένα ακίνητο,

391
00:19:13,050 --> 00:19:13,580
δικαίωμα?

392
00:19:13,580 --> 00:19:15,930
Είναι που μας δόθηκε ως είσοδος.

393
00:19:15,930 --> 00:19:19,440
Όπως είναι σχεδόν σαν
επιχειρήματα σε μια λειτουργία.

394
00:19:19,440 --> 00:19:22,810
Η κάρτα είναι ένα επιχείρημα
σχεδόν σε αυτήν την CardView.

395
00:19:22,810 --> 00:19:25,239
>> Θα απόσπασμα αυτό, και να θέσει
αυτό στη μεταβλητή ερώτηση.

396
00:19:25,239 --> 00:19:27,280
Βεβαιωθείτε ότι η απάντηση πήγε
στη μεταβλητή απάντηση.

397
00:19:27,280 --> 00:19:31,130
Ζητά ότι η κάρτα για να απαντήσετε.

398
00:19:31,130 --> 00:19:35,072
Και τώρα που έχουμε αυτά,
αντί εκτύπωση του κειμένου,

399
00:19:35,072 --> 00:19:37,030
θα πάμε για να εκτυπώσετε
Ό, τι μας έδωσαν.

400
00:19:37,030 --> 00:19:43,580
>> Έτσι, αυτό stuff-- έτσι θα πάμε
να σβήσει Ερώτηση Απάντηση.

401
00:19:43,580 --> 00:19:46,380
Ας δούμε αν αυτό λειτουργεί.

402
00:19:46,380 --> 00:19:52,800
Cool, οπότε ας το βήμα μέσα από αυτό
για μια ακόμη φορά ακριβώς για να είναι σίγουρος.

403
00:19:52,800 --> 00:20:00,470
>> Έτσι, η κάρτα μου είναι αντικείμενο της κάρτας, και εμείς
δίνουν αυτή την κάρτα για το app.

404
00:20:00,470 --> 00:20:04,790
Και η εφαρμογή πρόκειται να λάβει η
κάρτα και να τη δώσει στον CardView.

405
00:20:04,790 --> 00:20:09,190
Και αυτό CardView λέει, αν
να μου δώσει οποιοδήποτε αντικείμενο flashcard,

406
00:20:09,190 --> 00:20:11,920
Θα εκτυπώσετε το ερώτημά του
και η απάντησή του, σωστά;

407
00:20:11,920 --> 00:20:14,590
>> Λοιπόν, τι θα μπορούσα να κάνω είναι μπορώ να
στείλετε αυτό τον κωδικό, το πρώτο

408
00:20:14,590 --> 00:20:16,580
όπως 10 γραμμές κώδικα μου, στον φίλο μου.

409
00:20:16,580 --> 00:20:18,820
Θα μπορούσε να το ενσωματώσετε σε
δική του αίτηση.

410
00:20:18,820 --> 00:20:27,200
Και εφ 'όσον έκανε το ίδιο πράγμα,
όπως κάρτα CardView ισούται με αυτό,

411
00:20:27,200 --> 00:20:30,580
εφ 'όσον ο ίδιος δημιούργησε το CardView
και έδωσε τις σωστές πληροφορίες,

412
00:20:30,580 --> 00:20:31,987
θα μπορούσε να δώσει τη δική του κάρτα.

413
00:20:31,987 --> 00:20:34,320
Και έτσι με αυτόν τον τρόπο, αυτό είναι ένα πραγματικά
δροσερό τρόπο για να οικοδομήσουμε

414
00:20:34,320 --> 00:20:35,906
συστατικά που χρησιμοποιούν ο ένας τον άλλον, έτσι δεν είναι;

415
00:20:35,906 --> 00:20:38,280
Αυτή η κάρτα θα μπορούσε να δημοσιεύσει
Αυτό CardView στο διαδίκτυο,

416
00:20:38,280 --> 00:20:39,790
και οι άνθρωποι θα είναι σε θέση να το χρησιμοποιήσετε.

417
00:20:39,790 --> 00:20:45,070
Έτσι, βασικά, είναι σαν ένα από τα
τυπικές λειτουργίες στη βιβλιοθήκη C.

418
00:20:45,070 --> 00:20:47,280
>> Είναι μια λειτουργία όπου
κάποιος έχει γράψει.

419
00:20:47,280 --> 00:20:48,419
Μπορείτε να δώσει μια συγκεκριμένη είσοδο.

420
00:20:48,419 --> 00:20:49,710
Θα παράγουν ένα συγκεκριμένο προϊόν.

421
00:20:49,710 --> 00:20:50,890
Δεν με νοιάζει πώς λειτουργεί εσωτερικά.

422
00:20:50,890 --> 00:20:53,790
Εφ 'όσον έχετε δώσει το δικαίωμα
εισόδου, θα κάνουν τη σωστή έξοδο.

423
00:20:53,790 --> 00:20:57,850
>> Και ένα συστατικό μπορεί να είναι
σκέφτηκε τον ίδιο τρόπο.

424
00:20:57,850 --> 00:21:00,280
Αυτό είναι σαν CardView
μια λειτουργία βιβλιοθήκης.

425
00:21:00,280 --> 00:21:03,400
Αν δώσετε κάποια κάρτα
ως ένα ακίνητο, αυτό θα

426
00:21:03,400 --> 00:21:05,095
εκτυπώσετε τα περιεχόμενα της κάρτας αυτής.

427
00:21:05,095 --> 00:21:16,820
Όπως και αν μπορώ να αλλάξω την κάρτα μου για να
αντί να είναι σαν αυτό που είναι 5 συν 37,

428
00:21:16,820 --> 00:21:19,210
θα ενημερώσει αναλόγως.

429
00:21:19,210 --> 00:21:21,955
Έτσι, μόνο με την αλλαγή της εισόδου,
παίρνει ένα συγκεκριμένο προϊόν.

430
00:21:21,955 --> 00:21:24,830
Έτσι, μπορείτε να σκεφτείτε συστατικά σχεδόν
ως συναρτήσεις με τον τρόπο αυτό, η οποία

431
00:21:24,830 --> 00:21:25,920
μπορείτε να βάλετε μαζί.

432
00:21:25,920 --> 00:21:29,440
Μπορείτε να πάρετε εισόδου, όπως αυτό CardView
ως την είσοδο, θα έχετε έξοδο.

433
00:21:29,440 --> 00:21:31,900
Σε αυτή την περίπτωση, η παραγωγή είναι η HTML.

434
00:21:31,900 --> 00:21:34,404
Νόημα μέχρι στιγμής;

435
00:21:34,404 --> 00:21:36,890
Cool, οπότε και πάλι, οι ιδιότητες είναι
πώς μπορείτε να περάσετε πληροφορίες

436
00:21:36,890 --> 00:21:40,900
εντός και εκτός των εξαρτημάτων.

437
00:21:40,900 --> 00:21:42,740
>> Εντάξει, οπότε ας κάνουμε αυτό
πράγμα διαδραστικό.

438
00:21:42,740 --> 00:21:44,450
Αυτή τη στιγμή είναι κάπως βαρετή.

439
00:21:44,450 --> 00:21:45,520
Τι είναι [δεν ακούγεται];

440
00:21:45,520 --> 00:21:48,210
Μπορείτε να εκτυπώσετε κάποια έξω,
αλλά αυτό είναι το μόνο που μπορεί να κάνει.

441
00:21:48,210 --> 00:21:51,550
>> Ας πάμε πίσω στο
παλιό ερώτημα μόνο για τώρα.

442
00:21:51,550 --> 00:21:54,405
Εντάξει, έτσι τώρα αυτά τα στοιχεία
Οι βαρετό γιατί το μόνο που κάνουν,

443
00:21:54,405 --> 00:21:55,030
παίρνουν εισόδου.

444
00:21:55,030 --> 00:21:56,100
Κάνουν εξόδου, έτσι δεν είναι;

445
00:21:56,100 --> 00:21:57,049
Αυτό είναι κάπως βαρετή.

446
00:21:57,049 --> 00:21:59,090
Θέλουμε να έχουμε μας
συστατικά που είναι σε θέση να έχουν

447
00:21:59,090 --> 00:22:02,150
ένα είδος εσωτερικής κατάστασης,
όπως θυμάμαι κάτι.

448
00:22:02,150 --> 00:22:05,320
>> Για μια flashcard για
παράδειγμα, τι είδους κράτος

449
00:22:05,320 --> 00:22:07,550
μπορεί να θέλετε να
θυμούνται για μια flashcard;

450
00:22:07,550 --> 00:22:09,740
Τι καθεστώς προσωρινής
μπορεί να θέλετε να θυμηθείτε

451
00:22:09,740 --> 00:22:12,491
για flashcard σε flashcard εφαρμογή;

452
00:22:12,491 --> 00:22:13,990
Κοινό: Είτε είναι ήδη γυρίσει;

453
00:22:13,990 --> 00:22:14,990
Neel MEHTA: Ναι, σωστά.

454
00:22:14,990 --> 00:22:17,665
Έτσι, ίσως να θέλετε να κρατήσετε
κομμάτι της είναι να αντιμετωπίσει τα πάνω ή προς τα

455
00:22:17,665 --> 00:22:19,100
Σας μπρούμυτα πάνω στην κάρτα.

456
00:22:19,100 --> 00:22:23,420
Στο Facebook, για παράδειγμα, θα κάνατε
Θέλετε να θυμηθείτε πού στην τροφοδοσία ειδήσεων

457
00:22:23,420 --> 00:22:25,870
είσαι ή ποιος αρέσει το προφίλ
κάνεις τώρα.

458
00:22:25,870 --> 00:22:30,127
>> Σχετικά με το Messenger, όπως το ποια κείμενο που
πληκτρολογήστε στο πλαίσιο εισόδου, έτσι δεν είναι;

459
00:22:30,127 --> 00:22:31,710
Εάν ανανεώσετε τη σελίδα, θα πάει μακριά.

460
00:22:31,710 --> 00:22:32,793
Αλλά δεν με νοιάζει.

461
00:22:32,793 --> 00:22:33,770
Είναι απλά προσωρινό.

462
00:22:33,770 --> 00:22:34,548
Ναι;

463
00:22:34,548 --> 00:22:36,152
>> Κοινό: [δεν ακούγεται]

464
00:22:36,152 --> 00:22:38,360
Neel MEHTA: Σαν φλας
κάρτα, όπως μπορείτε να βλέπετε

465
00:22:38,360 --> 00:22:40,290
η πλευρά ερώτηση ή απάντηση από την πλευρά της;

466
00:22:40,290 --> 00:22:41,070
>> Κοινό: OK.

467
00:22:41,070 --> 00:22:43,270
>> Neel MEHTA: Σαν
δύο όψεων flashcard, σωστά;

468
00:22:43,270 --> 00:22:46,370
Ναι, έτσι θέλετε να
έχουν αυτή την ιδέα από τώρα

469
00:22:46,370 --> 00:22:50,370
Έχω ιδιότητες, οι οποίες είναι σαν εισόδους,
αλλά κατάσταση, η οποία είναι προσωρινή, εεε,

470
00:22:50,370 --> 00:22:51,839
Όπου και αν είστε στη σελίδα, έτσι δεν είναι;

471
00:22:51,839 --> 00:22:54,380
Και πάλι, είπα στο Facebook
Messenger, έχω σαν η οποία πρόσωπο

472
00:22:54,380 --> 00:22:56,550
βλέπετε στο Facebook
ή ποιος είναι το προφίλ, έτσι δεν είναι;

473
00:22:56,550 --> 00:22:58,030
>> Αυτό είναι μόνο προσωρινή.

474
00:22:58,030 --> 00:23:01,200
Είναι σημαντικό να δείξουμε το χρήστη
τι συμβαίνει, αλλά να ανανεώσετε τη σελίδα.

475
00:23:01,200 --> 00:23:02,250
Δεν έχει τόση σημασία.

476
00:23:02,250 --> 00:23:04,530
Έτσι είναι προσωρινή κατάσταση,
έτσι ώστε όλοι να κράτους.

477
00:23:04,530 --> 00:23:06,250
>> Έτσι, και πάλι, δεν υπάρχει κράτος και στηρίγματα.

478
00:23:06,250 --> 00:23:09,084
Στηρίγματα είναι δεδομένο εισόδου
από την πηγή των δεδομένων σας.

479
00:23:09,084 --> 00:23:10,250
Κράτος είναι ακριβώς όπως προεπιλογές.

480
00:23:10,250 --> 00:23:13,700
Είναι ακριβώς σαν πράγματα που
κάνει το πράγμα διαδραστικό.

481
00:23:13,700 --> 00:23:17,720
>> Έτσι σε μας CardView-- ας ρίξουμε
CardView-- μας γι 'αυτό ήταν ωραίο.

482
00:23:17,720 --> 00:23:21,420
Τι θα πάμε να κάνουμε εδώ, θα πάμε
να αγγίξει CardView και μόνο CardView.

483
00:23:21,420 --> 00:23:25,105
Και έτσι ο φίλος μου, ο οποίος πήρε αυτό,
δεν θα παρατηρήσετε καμία διαφορά.

484
00:23:25,105 --> 00:23:27,230
Δεν θα πρέπει να αλλάξουν
οποιοδήποτε από δικό τους κώδικα,

485
00:23:27,230 --> 00:23:29,410
αλλά βλέπαμε τους
CardView πήρε souped επάνω.

486
00:23:29,410 --> 00:23:31,270
Αυτό είναι ένα ωραίο μέρος για εξαρτήματα.

487
00:23:31,270 --> 00:23:35,290
>> Εντάξει, έτσι ώστε σε CardView μας, ας προσπαθήσουμε και
παρακολουθείτε αν είμαστε φάση έως

488
00:23:35,290 --> 00:23:36,560
ή με την όψη προς τα κάτω.

489
00:23:36,560 --> 00:23:40,480
Σε React το κάνουμε αυτό από την πρώτη
προσδιορίζοντας την αρχική κατάσταση.

490
00:23:40,480 --> 00:23:42,070
Πού να αρχίσει η κάρτα;

491
00:23:42,070 --> 00:23:48,480
>> Έτσι, είναι μια λειτουργία που ονομάζεται getInitialState
λειτουργούν, και θα επιστρέψει ένα αντικείμενο.

492
00:23:48,480 --> 00:23:53,310
Αυτό το αντικείμενο περιέχει κάποια κατάσταση, και
το κράτος είναι απλώς ένα ζεύγος κλειδιού-τιμής.

493
00:23:53,310 --> 00:23:56,950
Όπως και σε καθοδηγούν, να έχετε ένα κλειδί και ένα
τιμή, έχετε σαν όνομα είναι ένα string.

494
00:23:56,950 --> 00:24:01,410
>> Σε αυτή την περίπτωση, ας πούμε μπροστά είναι αλήθεια.

495
00:24:01,410 --> 00:24:03,760
Αυτό λέει ότι έχουμε ένα κράτος.

496
00:24:03,760 --> 00:24:06,570
Ένα συστατικό του κράτους
είναι ένα χαρακτηριστικό που ονομάζεται μπροστά.

497
00:24:06,570 --> 00:24:09,649
[Δεν ακούγεται], τόσο από προεπιλογή,
είμαστε στο μπροστινό μέρος της κάρτας,

498
00:24:09,649 --> 00:24:11,440
και μπορούμε να αλλάξουμε αυτό
καθώς αναστρέψετε την κάρτα.

499
00:24:11,440 --> 00:24:13,380
Βγάζει νόημα?

500
00:24:13,380 --> 00:24:18,190
>> Εντάξει, έτσι καθιστούν, αυτή τη στιγμή, είμαστε
που δείχνει την ερώτηση και την απάντηση.

501
00:24:18,190 --> 00:24:20,860
Τώρα τι πρέπει να κάνουμε
έχει δείξει την ερώτηση

502
00:24:20,860 --> 00:24:24,370
αν είμαστε στο μπροστινό μέρος της κάρτας, ώστε
η απάντηση είναι για το πίσω μέρος της κάρτας.

503
00:24:24,370 --> 00:24:26,850
Αυτός είναι ο λόγος που όλοι κάνουμε
η κάρτα διαδραστικό.

504
00:24:26,850 --> 00:24:28,100
Οπότε ας προσπαθήσουμε και σε αυτό εδώ.

505
00:24:28,100 --> 00:24:31,600

506
00:24:31,600 --> 00:24:33,620
Λοιπόν, πρώτα να κάνω μια μεταβλητή.

507
00:24:33,620 --> 00:24:37,790
Μπορούμε να ζητήσουμε τώρα this.state.front.

508
00:24:37,790 --> 00:24:42,010
Έχουμε πρόσβαση αναφέρει το ίδιο είμαστε
στηρίγματα πρόσβασης, έτσι this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Αν είμαστε μπροστά, τότε το κείμενο
είναι this.props.card.question.

510
00:24:45,870 --> 00:24:48,777

511
00:24:48,777 --> 00:24:51,360
Αν είμαστε στο μπροστινό μέρος του
κάρτα, θα πάμε για να προσπαθήσουμε και να αρπάξει

512
00:24:51,360 --> 00:24:52,485
το ζήτημα από την κάρτα.

513
00:24:52,485 --> 00:24:54,782

514
00:24:54,782 --> 00:24:57,240
Διαφορετικά, αν είμαστε στο πίσω μέρος
της κάρτας, τι κάνουμε;

515
00:24:57,240 --> 00:25:01,830

516
00:25:01,830 --> 00:25:02,750
>> ΚΟΙΝΟ: Η απάντηση;

517
00:25:02,750 --> 00:25:05,041
>> Neel MEHTA: Ναι, έτσι κειμένου
ισούται με this.props.card.answer.

518
00:25:05,041 --> 00:25:08,472

519
00:25:08,472 --> 00:25:10,930
Αλλά αν παρατηρήσετε, είμαστε χρησιμοποιώντας
το κράτος να λάβει μια απόφαση

520
00:25:10,930 --> 00:25:14,420
γιατί τώρα το συστατικό
θα φαίνονται διαφορετικά

521
00:25:14,420 --> 00:25:16,710
βασίζεται στα ανοικτά το πώς αυτές αλληλεπιδρούν με αυτό.

522
00:25:16,710 --> 00:25:20,355
Έτσι, αντί να τα εκτυπώνει έξω από αυτό,
Θα πρέπει απλά να εκτυπώσετε το κείμενο.

523
00:25:20,355 --> 00:25:25,270

524
00:25:25,270 --> 00:25:28,650
Cool, έτσι και τώρα, όπως μπορείτε να δείτε,
βλέπουμε μόνο την ερώτηση.

525
00:25:28,650 --> 00:25:37,720
Και αν μπορώ να αλλάξω την κατάσταση εδώ με το χέρι
προς τα εμπρός είναι ψευδείς παίρνουμε 42 πίσω.

526
00:25:37,720 --> 00:25:39,720
>> Έτσι, και πάλι, αυτό το συστατικό
έχει τη δική του κατάσταση.

527
00:25:39,720 --> 00:25:43,440
Όπως ένα κουμπί ξέρει αν
είναι ήδη πατηθεί ή όχι,

528
00:25:43,440 --> 00:25:46,080
αυτό το πράγμα δεν ξέρει τι είναι σε
το μπροστινό ή στο πίσω μέρος.

529
00:25:46,080 --> 00:25:48,320
Από προεπιλογή, είναι στο μπροστινό μέρος.

530
00:25:48,320 --> 00:25:50,840
Και στη συνέχεια, αν είναι στο μπροστινό μέρος,
θα εκτυπώσετε το θέμα.

531
00:25:50,840 --> 00:25:53,106
Αν είναι στο πίσω μέρος, θα
εκτυπώσετε την απάντηση.

532
00:25:53,106 --> 00:25:54,980
Έτσι, και πάλι, η πληροφορία
που δίνεται είναι το ίδιο.

533
00:25:54,980 --> 00:25:59,090
Απλώς φαίνεται διαφορετικός
με βάση το πώς μπορείτε να το προγραμματίσετε.

534
00:25:59,090 --> 00:26:02,670
Έτσι, για παράδειγμα, το Facebook Messenger,
ακόμα και αν έχετε την ίδια πηγή δεδομένων,

535
00:26:02,670 --> 00:26:05,170
θα μπορούσε να έχει διαφορετική εμφάνιση
επειδή η κατάσταση είναι διαφορετική.

536
00:26:05,170 --> 00:26:08,421
Ψάχνετε σε ένα
Μήνυμα διαφορετικό πρόσωπο.

537
00:26:08,421 --> 00:26:10,930
>> Εντάξει, έτσι αυτό είναι όλα καλά και
καλό, αλλά τώρα τι είναι στην πραγματικότητα

538
00:26:10,930 --> 00:26:15,940
να μας κάνει να τα αλλάξετε, αν
κάρτα μας είναι μπροστά ή πίσω.

539
00:26:15,940 --> 00:26:19,010
Μπορούμε να το κάνουμε αυτό με την προσθήκη ενός κτυπήματος
κουμπί, ένα κουμπί για την κάρτα που

540
00:26:19,010 --> 00:26:22,950
θα αναστρέψετε την κάρτα αν είναι [δεν ακούγεται].

541
00:26:22,950 --> 00:26:31,770
Έτσι, ας προσθέσουμε ένα κουμπί εδώ, αυτό
κουμπί, και αυτό το κουμπί θα πω άλλη.

542
00:26:31,770 --> 00:26:35,650
>> Και έτσι τώρα,
δεν κάνει τίποτα.

543
00:26:35,650 --> 00:26:37,075
Απλά φαίνεται ωραίο.

544
00:26:37,075 --> 00:26:43,650
Τι μπορούμε να κάνουμε είναι να προσθέσουμε ένα κλικ
χειρισμού, onClick ισούται this.flip,

545
00:26:43,650 --> 00:26:44,820
και θα καθορίσει άλλη αργότερα.

546
00:26:44,820 --> 00:26:47,120
Αλλά βασικά, onClick
είναι μια λειτουργία που

547
00:26:47,120 --> 00:26:48,675
φώναξαν όταν ο χρήστης κάνει κλικ.

548
00:26:48,675 --> 00:26:52,330
>> Έτσι, το κουμπί θα ξέρετε
όταν έχει πατηθεί.

549
00:26:52,330 --> 00:26:54,750
Πήγε είναι ήδη πατηθεί,
θα αναστρέψετε την κάρτα.

550
00:26:54,750 --> 00:26:58,382
Είναι κάτι σαν σας
τύπος παράδοσης πίτσα.

551
00:26:58,382 --> 00:27:01,590
Είσαι σαν, εντάξει, κάθε φορά που κάποιος
με καλεί, εγώ θα παραδώσει πίτσα, σωστά;

552
00:27:01,590 --> 00:27:03,420
>> Μπορείτε να εγγραφείτε αυτό ακροατή.

553
00:27:03,420 --> 00:27:04,530
Μπορείτε να ακούσετε για μια εκδήλωση.

554
00:27:04,530 --> 00:27:07,657
Μπορείτε να λέγεται, και όταν η
γεγονός συμβαίνει, μπορείτε να κάνετε κάτι.

555
00:27:07,657 --> 00:27:08,240
Μπορείτε να πάρετε πίτσα.

556
00:27:08,240 --> 00:27:11,480
Σε αυτή την περίπτωση, όταν είστε
κλικ, μπορείτε να αναστρέψετε την κάρτα.

557
00:27:11,480 --> 00:27:14,560
>> Και γι 'αυτό πρέπει να ορίσουμε μια
λειτουργία που θα αναστρέψετε την κάρτα,

558
00:27:14,560 --> 00:27:17,930
έτσι θα γράψω αυτό το δικαίωμα
Εδώ, flip λειτουργία.

559
00:27:17,930 --> 00:27:20,850

560
00:27:20,850 --> 00:27:23,680
Και έτσι τι νομίζεις ότι θα κάνει άλλη;

561
00:27:23,680 --> 00:27:27,180
Και πάλι αυτό γίνεται όταν καλείται
πατάμε το κουμπί αναστροφής.

562
00:27:27,180 --> 00:27:29,406
Τι θα πρέπει η άλλη λειτουργία κάνω;

563
00:27:29,406 --> 00:27:34,136
>> Κοινό: Αλλαγή this.state.front
από την αληθινή σε false, ψευδή σε αληθή.

564
00:27:34,136 --> 00:27:38,420
>> Neel MEHTA: Ναι, έτσι ώστε να λάβει ανεξαρτήτως
this.front is-- το κράτος είναι μπροστά.

565
00:27:38,420 --> 00:27:40,930
Πάρτε το μπροστινό κατάσταση, εάν
είναι αλήθεια, να είναι ψευδείς.

566
00:27:40,930 --> 00:27:42,530
Αν είναι ψευδής, το καθιστά αληθινό, έτσι δεν είναι;

567
00:27:42,530 --> 00:27:45,330
Οπότε ας προσπαθήσουμε αυτό.

568
00:27:45,330 --> 00:27:48,240
>> Δεν μπορείτε να αλλάξετε κατάσταση
απλά κάνοντας this.state.

569
00:27:48,240 --> 00:27:50,380
Δεν μπορείτε να το κάνετε αυτό.

570
00:27:50,380 --> 00:27:52,030
Δεν μπορείτε να το κάνετε αυτό.

571
00:27:52,030 --> 00:27:55,810
Θα πρέπει να χρησιμοποιήσετε μια λειτουργία
που ονομάζεται this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Έτσι, μπορείτε να πείτε this.setState μπροστά
του παχέος εντέρου αυτό όπου, και πάλι, το επιφώνημα

573
00:28:03,230 --> 00:28:04,330
Σημείο σημαίνει το αντίθετο.

574
00:28:04,330 --> 00:28:07,420
Υποθέτω ότι αν αυτή. state.front
Είναι αλήθεια, αυτό θα γυρίσει ψευδείς.

575
00:28:07,420 --> 00:28:09,170
Έτσι θα οριστεί η κατάσταση
από την αληθινή σε false.

576
00:28:09,170 --> 00:28:11,430
Αν είναι ψευδής, θα
που είναι ψευδή σε αληθή.

577
00:28:11,430 --> 00:28:17,210
>> Μόλις παρατηρήσετε ότι θέτουμε και να πάρει ελαφρώς
με διαφορετικό τρόπο, και έτσι ας προσπαθήσουμε αυτό.

578
00:28:17,210 --> 00:28:18,675
Bada Bing, κοίτα αυτό.

579
00:28:18,675 --> 00:28:21,810
Το κουμπί αναστροφής τώρα θα
αλλάξετε την εμπρός προς τα πίσω κατάσταση.

580
00:28:21,810 --> 00:28:24,990
>> Και έτσι εδώ είναι όπου μπορείτε να δείτε ένα
λίγη από τη μαγεία του React.

581
00:28:24,990 --> 00:28:28,420
Όπως και εμείς ποτέ δεν είπε ότι για να καταστεί εκ νέου.

582
00:28:28,420 --> 00:28:30,910
Ποτέ δεν είπα ότι αναδιατυπώσει τίποτα.

583
00:28:30,910 --> 00:28:32,630
Αν το κάνετε αυτό
χωρίς να αντιδράσει, τότε θα

584
00:28:32,630 --> 00:28:34,588
Οι to-- αρέσει όταν η
αναστροφή πατηθεί το κουμπί,

585
00:28:34,588 --> 00:28:37,290
θα έπρεπε να το πω για να
χειροκίνητα ξανά render, σωστά;

586
00:28:37,290 --> 00:28:43,050
>> React είναι πραγματικά δροσερό ότι αν
να δώσει μια ορισμένη κατάσταση και ιδιότητες,

587
00:28:43,050 --> 00:28:45,760
θα καταστήσει πάντα
ακριβώς το ίδιο πράγμα.

588
00:28:45,760 --> 00:28:48,690
Και έτσι όταν εμείς αλλάζουμε ποτέ
η πολιτεία και οι ιδιότητες,

589
00:28:48,690 --> 00:28:50,819
αντιδράσει μόλις εκ νέου καθιστά το όλο θέμα.

590
00:28:50,819 --> 00:28:52,860
Ξέρει ότι υπάρχει μια
ένα-προς-ένα αντιστοιχία

591
00:28:52,860 --> 00:28:57,270
μεταξύ του κράτους και των παραμέτρων και HTML.

592
00:28:57,270 --> 00:29:00,110
Έτσι, κάθε φορά που κάποιο από αυτά
Αλλαγές από μέσω ενός συνόλου κατάσταση,

593
00:29:00,110 --> 00:29:03,750
θα αλλάξει το πώς η
αμοιβή ξανασοβατιστεί.

594
00:29:03,750 --> 00:29:06,650
Και έτσι ουσιαστικά είναι σαν React
σας περιμένει για να αλλάξει.

595
00:29:06,650 --> 00:29:09,870
>> Κάθε φορά που αλλάζει κάτι,
αυτό θα καταστήσει εκ νέου ολόκληρη τη σελίδα.

596
00:29:09,870 --> 00:29:12,480
Και αν ακούγεται αναποτελεσματική,
είναι επειδή θα ήταν,

597
00:29:12,480 --> 00:29:15,050
αλλά αντιδρούν χρησιμοποιεί ένα πράγμα
ονομάζεται Σκιά DOM.

598
00:29:15,050 --> 00:29:19,950
Αντί να τραβάμε απ 'ευθείας τη σελίδα, το
διατηρεί το εικονικό δέντρο HTML στη μνήμη.

599
00:29:19,950 --> 00:29:23,620
>> Ξέρεις, HTML είναι σαν ένα δέντρο,
σαν μια ιεραρχική δομή δεδομένων.

600
00:29:23,620 --> 00:29:28,990
Διατηρεί ένα ψεύτικο δέντρο στη μνήμη,
και κάθε φορά που ενημερώνετε τη σελίδα,

601
00:29:28,990 --> 00:29:31,940
αυτό θα πάρει και άλλο πλαστό
δέντρο, και θα υπολογίσει

602
00:29:31,940 --> 00:29:35,120
τι χρειάζεται να αλλάξει είναι να καταστεί η
σελίδα για να κάνουν τα δύο δέντρα ίσα.

603
00:29:35,120 --> 00:29:38,540
Έτσι, βασικά, είναι σχεδόν
re-καθιστά πολύ.

604
00:29:38,540 --> 00:29:41,540
Και τότε μόνο, όπως οι αλλαγές της
σελίδα σε λίγο τσιμπήματα, όπως απαιτείται,

605
00:29:41,540 --> 00:29:44,240
γι 'αυτό είναι πολύ, πολύ, πολύ αποτελεσματικό.

606
00:29:44,240 --> 00:29:46,970
>> Έτσι, βασικά αντίδραση θα
κάθε φορά που αλλάζετε κάτι,

607
00:29:46,970 --> 00:29:49,010
αυτό θα ξανά καθιστούν πρακτικώς τη σελίδα.

608
00:29:49,010 --> 00:29:52,830
Θα καταλάβω τι πρέπει να κάνω για να
αλλάξετε για να κάνει το πραγματικό σελίδα αντανακλά

609
00:29:52,830 --> 00:29:55,602
η εικονική σελίδα, και αυτό θα το κάνουμε αυτό.

610
00:29:55,602 --> 00:29:56,560
Αυτή είναι η εικονική DOM.

611
00:29:56,560 --> 00:29:59,350
Είναι ένα από τα μεγαλύτερα
χαρακτηριστικά του React.

612
00:29:59,350 --> 00:30:00,880
>> Βγάζει νόημα αυτό?

613
00:30:00,880 --> 00:30:01,540
Καμιά ερώτηση?

614
00:30:01,540 --> 00:30:02,040
Ναι;

615
00:30:02,040 --> 00:30:05,568

616
00:30:05,568 --> 00:30:08,969
>> Κοινό: Πώς
συγκρίνουν ακόμα στην MVC

617
00:30:08,969 --> 00:30:10,760
ότι μιλήσαμε για
όπως πριν πόρων.

618
00:30:10,760 --> 00:30:13,527
>> Neel MEHTA: Ναι, το ερώτημα
είναι πώς να το συγκρίνετε με MVC;

619
00:30:13,527 --> 00:30:14,610
Ρωτήσατε σχετικά με τους πόρους.

620
00:30:14,610 --> 00:30:16,445
Λοιπόν, ας μιλήσουμε για το πώς λειτουργεί.

621
00:30:16,445 --> 00:30:18,190
>> Σε MVC, θα ενημερωθεί το υπόδειγμα.

622
00:30:18,190 --> 00:30:20,560
Στην περίπτωση αυτή θα είχαμε ένα μοντέλο της κάρτας.

623
00:30:20,560 --> 00:30:24,540
Η θέα θα έχουν την
αναστροφή κουμπί, και ο έλεγχος

624
00:30:24,540 --> 00:30:26,310
θα έχουν τη λειτουργία πορτάκι.

625
00:30:26,310 --> 00:30:28,450
Έτσι, η θέα θα πει ο
ελεγκτής για να αναστρέψετε άλλη.

626
00:30:28,450 --> 00:30:30,370
Flip θα πει ο
μοντέλο να αλλάξει, έτσι δεν είναι;

627
00:30:30,370 --> 00:30:33,915
>> Και έτσι όταν κάνετε μια MVC, σας
ακούστε για το μοντέλο να αλλάξει,

628
00:30:33,915 --> 00:30:37,150
και θα καταστήσει εκ νέου αναλόγως την άποψη.

629
00:30:37,150 --> 00:30:39,210
Ή απλά πρέπει να αρέσει
έχουν τον ελεγκτή.

630
00:30:39,210 --> 00:30:42,418
Περιμένετε για το μοντέλο να αλλάξει, και στη συνέχεια,
επιλέγουμε ένα μέρος σαν ένα πράγμα

631
00:30:42,418 --> 00:30:44,032
να αλλάξει.

632
00:30:44,032 --> 00:30:45,740
Εδώ έχουμε ένα πράγμα,
αλλά σε ένα μεγάλο app,

633
00:30:45,740 --> 00:30:48,510
θα πρέπει να θυμηθούμε τι αρέσει
η αλλαγή σε κάθε χώρα,

634
00:30:48,510 --> 00:30:50,290
γι 'αυτό είναι λίγο ενοχλητικό.

635
00:30:50,290 --> 00:30:53,670
Και έτσι React είναι ωραίο
επειδή έχει μια σκιά Dom.

636
00:30:53,670 --> 00:30:56,040
Μπορεί να αντέξει οικονομικά να απλά
ξαναγράψουμε το όλο πράγμα.

637
00:30:56,040 --> 00:30:58,680
Δεν χρειάζεται να επιλεκτικά
όπως μάντεψε τι να ενημερώσετε.

638
00:30:58,680 --> 00:31:02,186
>> Στο Facebook, αν σας αρέσει
πάρετε ένα νέο μήνυμα, στο MVC,

639
00:31:02,186 --> 00:31:04,060
που θα πρέπει να θυμόμαστε,
Εντάξει, να αλλάξει τα πράγματα

640
00:31:04,060 --> 00:31:06,260
στην κορυφή του
σελίδα, το εικονίδιο του μηνύματος.

641
00:31:06,260 --> 00:31:08,290
Επίσης σκάσει ένα νέο παράθυρο στο κάτω μέρος.

642
00:31:08,290 --> 00:31:10,070
Επίσης, κάνει ένα νέο πράγμα σε αυτό το παράθυρο.

643
00:31:10,070 --> 00:31:11,060
Επίσης, παίζουν έναν ήχο.

644
00:31:11,060 --> 00:31:13,150
>> Αυτό είναι ένα πολλά πράγματα
βγαίνει ταυτόχρονα.

645
00:31:13,150 --> 00:31:15,320
Και έτσι, αν δεν το κάνετε
έχουν μια σκιά Dom, τότε θα

646
00:31:15,320 --> 00:31:18,740
Πρέπει να το κάνουμε αυτό με το χέρι, επειδή
δεν μπορείτε να απαλλαγείτε από το σύνολο της σελίδας.

647
00:31:18,740 --> 00:31:21,430
Δεν μπορείτε να αντέξετε οικονομικά να, έτσι ώστε να έχουν
για να αλλάξετε κάθε πράγμα με το χέρι,

648
00:31:21,430 --> 00:31:23,990
το οποίο είναι πραγματικά ενοχλητικό στην MVC.

649
00:31:23,990 --> 00:31:27,640
>> Έτσι, προκειμένου να
οικονόμος, που επιλεκτικά

650
00:31:27,640 --> 00:31:30,750
ενημερώσετε τη σελίδα, η οποία είναι
αποτελεσματική, αλλά και ενοχλητικό.

651
00:31:30,750 --> 00:31:34,002
Σε αντιδράσει, λόγω της Σκιάς
Dom, μπορείτε να πάρετε και τα δύο πράγματα δωρεάν.

652
00:31:34,002 --> 00:31:35,710
Είναι αποτελεσματική γιατί
Σκιά του Dom.

653
00:31:35,710 --> 00:31:37,210
Το εμπόδιο είναι η ενημέρωση της σελίδας.

654
00:31:37,210 --> 00:31:40,292
Δεν κάνει τη χειραγώγηση δέντρο.

655
00:31:40,292 --> 00:31:41,250
Μπορείτε να πάρετε την απόδοση.

656
00:31:41,250 --> 00:31:45,420
Μπορείτε επίσης να πάρετε την ευκολία στη χρήση, διότι
αν απλά ξαναγράψει ολόκληρη τη σελίδα,

657
00:31:45,420 --> 00:31:48,970
αλλά ξέρετε ακριβώς, εντάξει, τα πράγματα
πρόκειται να είναι στη σελίδα κάπου.

658
00:31:48,970 --> 00:31:51,180
Θα μπορούσε να είναι σε μια διαφορετική θέση, αλλά
πρόκειται να είναι στη σελίδα, έτσι δεν είναι;

659
00:31:51,180 --> 00:31:52,860
Έτσι, μπορείτε απλά ξανασοβατιστεί
το όλο πράγμα σχεδόν,

660
00:31:52,860 --> 00:31:55,540
και μπορεί να κάνει ένα ζευγάρι
αλλαγές στην ίδια σελίδα.

661
00:31:55,540 --> 00:31:57,850
>> Έτσι, και πάλι, στο MVC σας
Θα πρέπει να επιλέξετε

662
00:31:57,850 --> 00:32:01,840
μεταξύ ευκολία χρήσης και την αποτελεσματικότητα,
και να αντιδράσει, θα έχετε και τα δύο.

663
00:32:01,840 --> 00:32:04,020
Έτσι είναι καλύτερα.

664
00:32:04,020 --> 00:32:05,220
Βγάζει νόημα?

665
00:32:05,220 --> 00:32:06,676
Στερεός.

666
00:32:06,676 --> 00:32:12,080
>> ΟΚ, οπότε ας δούμε ας μιλήσουμε
λίγο για το βήμα 4,

667
00:32:12,080 --> 00:32:14,740
πώς μπορούμε να ενσωματώσετε τα συστατικά.

668
00:32:14,740 --> 00:32:16,260
Έτσι έχουμε αυτή τη στιγμή.

669
00:32:16,260 --> 00:32:19,420
Έχουμε λίγο δροσερό κουμπί μας.

670
00:32:19,420 --> 00:32:23,157
Μπορούμε να αναστρέψετε πίσω και
εμπρός, και αυτό είναι το μόνο που κάνει.

671
00:32:23,157 --> 00:32:24,990
Ας πούμε ότι θέλουμε να
έχουν ένα άλλο συστατικό.

672
00:32:24,990 --> 00:32:28,730
Ας πούμε flashcard app μας θα πρέπει να
περιέχει μια λίστα με όλες τις κάρτες

673
00:32:28,730 --> 00:32:31,520
ότι έχετε, έτσι αυτό σημαίνει ότι
θα πρέπει να έχει ένα άλλο συστατικό.

674
00:32:31,520 --> 00:32:32,970
Καλά, ίσως να το ονομάσουμε μια προβολή λίστας.

675
00:32:32,970 --> 00:32:36,200
Ας κάνουμε μια προβολή λίστας που
συνυπάρχει με την CardView,

676
00:32:36,200 --> 00:32:39,680
και αυτή η προβολή λίστας και CardView
θα ήθελα να συνεργαστούμε.

677
00:32:39,680 --> 00:32:43,190
Και μπορείτε να τα συνδυάσετε
για να κάνουν το app μας για εσάς.

678
00:32:43,190 --> 00:32:45,160
>> Έτσι το πρώτο, ας κάνουμε μια
ζευγάρι περισσότερες κάρτες δικαιώματος.

679
00:32:45,160 --> 00:32:46,370
Ας πούμε, τι κάρτες;

680
00:32:46,370 --> 00:32:49,619

681
00:32:49,619 --> 00:32:51,910
Και ακριβώς γι 'αυτό δεν χρειάζεται να
σας κουράσω με την πληκτρολόγηση σε αυτό,

682
00:32:51,910 --> 00:32:53,410
Είμαι ακριβώς πρόκειται να το αντιγράψετε από εδώ.

683
00:32:53,410 --> 00:33:01,664

684
00:33:01,664 --> 00:33:03,580
Και έτσι Πάω να μην
δίνουν μόνο μία κάρτα.

685
00:33:03,580 --> 00:33:06,910
Πάω να του δώσει μια σειρά από κάρτες.

686
00:33:06,910 --> 00:33:10,240
Έτσι, οι πρώτες εφαρμογές
πρόκειται να σπάσει για τώρα.

687
00:33:10,240 --> 00:33:14,717
Εντάξει, έτσι θα πάμε για να κάνει
Αυτό είναι σε θέση να χειρίζεται πολλαπλές κάρτες.

688
00:33:14,717 --> 00:33:17,800
Έτσι, η πρώτη, θα πάμε να το δώσει, δεν
μόνο μία κάρτα, αλλά μια σειρά από κάρτες,

689
00:33:17,800 --> 00:33:18,700
όπως μια λίστα με κάρτες.

690
00:33:18,700 --> 00:33:20,980
Και σε αυτή την περίπτωση, έχουμε τρία από αυτά.

691
00:33:20,980 --> 00:33:27,280
>> Εντάξει, έτσι ώστε η εφαρμογή είναι
πρόκειται να πάρετε μια λίστα με τις κάρτες,

692
00:33:27,280 --> 00:33:29,870
και πρόκειται να αποφασίσει ποια
ένα για να δείξει στον CardView.

693
00:33:29,870 --> 00:33:33,740
Η CardView μπορεί μόνο
καθιστούν μία κάρτα, αλλά το app

694
00:33:33,740 --> 00:33:37,610
παίρνει μια λίστα με όλα τα χαρτιά, σωστά;

695
00:33:37,610 --> 00:33:40,820
>> Έτσι, όταν καταλάβω ένα
κάρτα για να δώσει σε CardView,

696
00:33:40,820 --> 00:33:44,660
πώς θα μαντέψει ίσως να είναι σε θέση
να λάβει μια απόφαση σχετικά με το ποια κάρτα

697
00:33:44,660 --> 00:33:47,064
να δείξω?

698
00:33:47,064 --> 00:33:49,980
Για να σας δώσω μια υπόδειξη, είναι προσωρινά
Θα πρέπει να βλέπετε ένα ορισμένο κάρτα.

699
00:33:49,980 --> 00:33:53,260
Εάν ανανεώσετε τη σελίδα, θα
πήγαινε πίσω στην πρώτη κάρτα.

700
00:33:53,260 --> 00:33:55,464
Αυτό είναι εντάξει επειδή είναι προσωρινή.

701
00:33:55,464 --> 00:33:56,630
Ποια τεχνική θα μπορούσε να χρησιμοποιήσουμε;

702
00:33:56,630 --> 00:34:02,534

703
00:34:02,534 --> 00:34:08,760
>> Κοινό: Θα μπορούσατε να κάνετε μια μεταβλητή
έτσι ακριβώς όπως σας είχε μπροστά.

704
00:34:08,760 --> 00:34:11,989
Είναι αλήθεια αυτό, θα μπορούσατε
έχουν τρέχουσα κάρτα ισούται με 1;

705
00:34:11,989 --> 00:34:14,150
>> Neel MEHTA: Ναι, γι 'αυτό
θέλουν να έχουν κατάσταση, σωστά;

706
00:34:14,150 --> 00:34:16,080
Θα χρησιμοποιήσετε την κατάσταση στην
συστατικό για να καταλάβω

707
00:34:16,080 --> 00:34:17,288
ποια κάρτα θέλουμε να πάρει.

708
00:34:17,288 --> 00:34:19,290
Όπως έχουμε μια λίστα
όλες οι κάρτες, θα

709
00:34:19,290 --> 00:34:21,630
χρησιμοποιήστε κράτος για να καταλάβω
ένα από τα πρώτα κάρτας,

710
00:34:21,630 --> 00:34:23,710
δευτερόλεπτα κάρτα, τρίτη κάρτα, και ούτω καθεξής.

711
00:34:23,710 --> 00:34:28,760
>> Έτσι, μια εφαρμογή έτσι ώστε ένα app θα πάρετε μια
έχουν τη λειτουργία getInitialState,

712
00:34:28,760 --> 00:34:35,020
getInitialState επιστροφή λειτουργία.

713
00:34:35,020 --> 00:34:39,929
Και θα πω μόνο activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Έτσι τώρα app μας έχει το δικό του κράτος.

715
00:34:42,889 --> 00:34:47,179
>> Και έτσι τώρα για καθιστούν, για να καταλάβω
μια κάρτα, ας πάμε στη συστοιχία

716
00:34:47,179 --> 00:34:49,969
και πιάσε το πράγμα σε αυτό το δείκτη.

717
00:34:49,969 --> 00:34:53,580
Επιλέξτε την κάρτα ίση this.props.cards
this.state.activeIndex.

718
00:34:53,580 --> 00:34:56,469

719
00:34:56,469 --> 00:35:00,162
Έτσι, όπως μπορείτε να δείτε εδώ, τα στηρίγματα και
η κατάσταση στην πραγματικότητα εργάζονται από κοινού.

720
00:35:00,162 --> 00:35:08,990
Έτσι τώρα που έχουμε activeCard μας,
Θα ονομάσουμε activeCard,

721
00:35:08,990 --> 00:35:10,470
και ας δούμε αν αυτό λειτουργεί.

722
00:35:10,470 --> 00:35:20,320

723
00:35:20,320 --> 00:35:20,820
[ΜΗ ΑΚΟΥΣΤΌΣ]

724
00:35:20,820 --> 00:35:41,504

725
00:35:41,504 --> 00:35:44,900
>> Ω, αυτό ήταν ένα λάθος κείμενο.

726
00:35:44,900 --> 00:35:45,400
Αχ.

727
00:35:45,400 --> 00:35:51,420

728
00:35:51,420 --> 00:35:54,840
>> Cool, Ναι, έτσι και τώρα ήμασταν πίσω
όπου ήμασταν πριν, έτσι δεν είναι;

729
00:35:54,840 --> 00:35:57,100
Το ίδιο παλιό πρόγραμμα εκτός
τώρα μπορούμε να υποστηρίξουμε

730
00:35:57,100 --> 00:35:59,390
μια λίστα με κάρτες, και όχι μόνο μία κάρτα.

731
00:35:59,390 --> 00:36:04,130
Και τώρα, πάλι, αν αλλάξουμε το
activeIndex, μπορούμε να πάμε 0-1,

732
00:36:04,130 --> 00:36:07,330
και τώρα ότι η δεύτερη κάρτα,
και στη συνέχεια πήγαμε στο 0.

733
00:36:07,330 --> 00:36:10,390
Έτσι, εδώ είναι μια νέα
souped-up έκδοση του μας.

734
00:36:10,390 --> 00:36:16,000
>> Εντάξει, έτσι και τώρα ας ρίξουμε μια προβολή λίστας που
δείχνει όλα τα χαρτιά στο πρόγραμμά σας,

735
00:36:16,000 --> 00:36:19,980
έτσι θα κάνουμε ένα νέο
στοιχείο που ονομάζεται listview.

736
00:36:19,980 --> 00:36:22,155
Ας ListView ισούται react.createClass.

737
00:36:22,155 --> 00:36:32,890

738
00:36:32,890 --> 00:36:38,800
Έτσι θέλουμε να καταστήσει μια μη διατεταγμένη
Λίστα με ένα στοιχείο της λίστας για κάθε κάρτα.

739
00:36:38,800 --> 00:36:41,490
Και έτσι έχουμε ένα σωρό χαρτιά.

740
00:36:41,490 --> 00:36:44,990
Θέλουμε ένα στοιχείο της λίστας
για κάθε κάρτα, σωστά;

741
00:36:44,990 --> 00:36:47,490
Θα μπορούσαμε να κάνουμε ένα βρόχο for ή
κάτι για να κάνει ένα νέο στοιχείο λίστας.

742
00:36:47,490 --> 00:36:50,522
Αλλά ο τρόπος που μπορείτε να το κάνετε σε
Αντιδρούν, χρησιμοποιήστε ένα πρόγραμμα που λέγεται χάρτη.

743
00:36:50,522 --> 00:36:57,150
Χάρτης είναι ένα εργαλείο ή μια λειτουργία που χρησιμοποιείτε
ότι για κάθε προϊόν, τρέχει κάποια λειτουργία,

744
00:36:57,150 --> 00:36:59,510
παίρνει την τιμή επιστροφής, και
σας δίνει ότι πίσω.

745
00:36:59,510 --> 00:37:06,310
>> Έτσι, ως ένα παράδειγμα, έχουμε τη συστοιχία
1, 2, 3.map function-- και αυτό

746
00:37:06,310 --> 00:37:12,120
είναι συντομογραφία για μια
function-- x βέλος x φορές το x.

747
00:37:12,120 --> 00:37:16,110
Αυτό λέει, για κάθε αριθμό
σε 1, 2, 3, το πάρετε.

748
00:37:16,110 --> 00:37:17,800
Τετράγωνο αυτό, και να της δώσει πίσω.

749
00:37:17,800 --> 00:37:22,090
Λοιπόν, τι νομίζεις 1,
2, 3.map x πηγαίνει στο x φορές

750
00:37:22,090 --> 00:37:25,480
X σας δίνει πίσω δοθεί
ότι αυτή η λειτουργία είναι

751
00:37:25,480 --> 00:37:27,680
τρέχουν σε κάθε στοιχείο της εν λόγω διάταξης.

752
00:37:27,680 --> 00:37:30,837

753
00:37:30,837 --> 00:37:32,190
>> Κοινό: 1, 4, 9;

754
00:37:32,190 --> 00:37:35,709
>> Neel MEHTA: Ναι, 1, 4, 9,
γιατί το κάνετε 1 φορές 1.

755
00:37:35,709 --> 00:37:36,500
Αυτό σας δίνει ένα.

756
00:37:36,500 --> 00:37:37,690
Αυτό είναι το πρώτο στοιχείο.

757
00:37:37,690 --> 00:37:38,530
>> 2 φορές 2 είναι 4.

758
00:37:38,530 --> 00:37:39,570
Αυτό είναι ένα δεύτερο στοιχείο.

759
00:37:39,570 --> 00:37:40,310
3 φορές 3 είναι 9.

760
00:37:40,310 --> 00:37:41,540
Αυτό είναι ένα τρίτο στοιχείο.

761
00:37:41,540 --> 00:37:42,640
Βγάζει νόημα?

762
00:37:42,640 --> 00:37:45,015
Έτσι χάρτης έχει μια τεχνική που
χρησιμοποιήσουν λειτουργικά προγραμματιστές,

763
00:37:45,015 --> 00:37:48,090
το νέο στυλ του
προγραμματισμού για να κάνουμε κάτι

764
00:37:48,090 --> 00:37:50,500
σε όλα τα στοιχεία στη λίστα σας.

765
00:37:50,500 --> 00:37:51,970
Και έτσι αυτό ακούγεται οικείο.

766
00:37:51,970 --> 00:37:53,370
Έχουμε μια λίστα με κάρτες.

767
00:37:53,370 --> 00:37:56,860
Θέλουμε να πάρετε ένα στοιχείο της λίστας για κάθε
ένα, έτσι θα χρησιμοποιήσουμε ακριβώς χάρτη εδώ.

768
00:37:56,860 --> 00:38:00,250
Θα πω, ας λίστα ίσων
this.props, κάρτες, χάρτης.

769
00:38:00,250 --> 00:38:10,580

770
00:38:10,580 --> 00:38:15,070
>> Και έτσι δόθηκε μια κάρτα, είμαστε
πρόκειται να δημιουργήσει ένα στοιχείο της λίστας

771
00:38:15,070 --> 00:38:17,580
με τη συγκεκριμένη κάρτα του περιεχομένου πλευρά του.

772
00:38:17,580 --> 00:38:20,660
Ας πούμε ότι θέλουμε να δώσουμε
οι κάρτες αμφισβητούν τόσο card.question.

773
00:38:20,660 --> 00:38:24,990

774
00:38:24,990 --> 00:38:30,649
Έτσι, ο κατάλογος αυτός περιέχει ένα
σειρά LI ή στοιχεία λίστας

775
00:38:30,649 --> 00:38:32,440
όπου υπάρχει μία λίστα
στοιχείο για κάθε κάρτα,

776
00:38:32,440 --> 00:38:35,150
και το οποίο περιέχει το ερώτημα κάρτες.

777
00:38:35,150 --> 00:38:37,640
Βγάζει νόημα?

778
00:38:37,640 --> 00:38:39,450
>> Cool, έτσι και τώρα ας
στην πραγματικότητα εκτυπώσετε αυτό έξω.

779
00:38:39,450 --> 00:38:46,521
Γι 'αυτό και θα επιστρέψει ένα ul.

780
00:38:46,521 --> 00:38:49,020
Μέσα σε αυτό μη διατεταγμένη λίστα,
θα μείνουμε μόνο ολόκληρο τον κατάλογο

781
00:38:49,020 --> 00:38:49,890
ότι μας έδωσαν.

782
00:38:49,890 --> 00:38:52,851

783
00:38:52,851 --> 00:38:53,350
Δροσερός.

784
00:38:53,350 --> 00:38:56,060
>> Εντάξει, έτσι και τώρα αυτό
προβολή λίστας λειτουργεί ακριβώς βρείτε.

785
00:38:56,060 --> 00:38:59,842
Οποιεσδήποτε ερωτήσεις σχετικά με την προβολή της λίστας;

786
00:38:59,842 --> 00:39:01,270
Έχετε ένα μάτσο χαρτιά.

787
00:39:01,270 --> 00:39:02,800
Μπορείτε να κάνετε ένα στοιχείο της λίστας για κάθε κάρτα.

788
00:39:02,800 --> 00:39:05,466
Και μπορείτε να τα βάλετε μέσα σε ένα μη διατεταγμένο
κατάλογο, και να το δώσει πίσω.

789
00:39:05,466 --> 00:39:09,410
Έτσι τώρα ας δράσουμε έτσι ώστε να ενσωματώσετε
αυτό μέσα από το app μας,

790
00:39:09,410 --> 00:39:14,310
ώστε να μπορούμε να το κάνουμε αυτό, προβολή λίστας.

791
00:39:14,310 --> 00:39:17,070
Τι επιχείρημα δεν περνάμε στην προβολή λίστας;

792
00:39:17,070 --> 00:39:18,320
Ποια ακίνητα δεν του δίνουμε;

793
00:39:18,320 --> 00:39:25,111

794
00:39:25,111 --> 00:39:26,860
Να θυμάστε, αν έχετε δώσει
είναι ένα μάτσο χαρτιά,

795
00:39:26,860 --> 00:39:29,590
αυτό θα κάνει τη λίστα
δείτε για αυτές τις κάρτες.

796
00:39:29,590 --> 00:39:32,267
Λοιπόν, τι θα περνάμε
και εδώ το επιχείρημα;

797
00:39:32,267 --> 00:39:33,350
Κοινό: Μια λίστα με τις κάρτες;

798
00:39:33,350 --> 00:39:37,130
Neel MEHTA: Ναι, έτσι κάρτες
ισούται με this.props.cards, σωστά;

799
00:39:37,130 --> 00:39:39,850

800
00:39:39,850 --> 00:39:44,370
Και έτσι το μόνο πρόβλημα
είναι ότι μπορείτε μόνο

801
00:39:44,370 --> 00:39:48,600
γύρισε ένα άνω στοιχείο επίπεδο καθιστούν,
έτσι ώστε να έχετε να το τυλίξετε σε ένα div.

802
00:39:48,600 --> 00:39:49,100
Είναι περίεργο.

803
00:39:49,100 --> 00:39:56,190

804
00:39:56,190 --> 00:39:57,530
Ας δούμε λοιπόν αν αυτό.

805
00:39:57,530 --> 00:40:09,790

806
00:40:09,790 --> 00:40:10,560
Γίνεται αυτό;

807
00:40:10,560 --> 00:40:29,774

808
00:40:29,774 --> 00:40:31,030
>> Ναι, εκεί θα πάτε.

809
00:40:31,030 --> 00:40:33,700
Έτσι τώρα έχουμε μια λίστα
των καρτών στο κάτω μέρος,

810
00:40:33,700 --> 00:40:36,180
και, στη συνέχεια, έχουμε μας
Η ίδια CardView στην κορυφή,

811
00:40:36,180 --> 00:40:40,486
και ότι θα αναστρέψετε μεταξύ
οι δύο πλευρές της κάρτας.

812
00:40:40,486 --> 00:40:42,610
Τώρα κάνει ότι κάνει αίσθηση πως το έκανα αυτό;

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
Ναι, οπότε και πάλι, έχουμε δύο συστατικά.

815
00:40:46,790 --> 00:40:49,666
Το πρώτο συστατικό εκτυπώσεις
έξω κάθε κάρτας στη λίστα.

816
00:40:49,666 --> 00:40:50,540
Αυτή είναι η προβολή λίστας.

817
00:40:50,540 --> 00:40:54,770
Και το δεύτερο συστατικό
εκτυπώνει μόνο τη συγκεκριμένη κάρτα.

818
00:40:54,770 --> 00:40:58,840
Αν δώσετε μια συγκεκριμένη κάρτα, αυτό θα
εκτυπώσετε πληροφορίες σχετικά με τη συγκεκριμένη κάρτα

819
00:40:58,840 --> 00:41:01,870
και σας επιτρέπουν να αναστρέψετε πέρα ​​δώθε.

820
00:41:01,870 --> 00:41:05,850
>> Έτσι, αν θέλουμε, μπορούμε να προσπαθήσουμε και να μιλήσουν
σχετικά με την προσθήκη μερικά νέα χαρακτηριστικά σε αυτό.

821
00:41:05,850 --> 00:41:09,482
Διαφορετικά, μπορούμε να μιλήσουμε λίγο περισσότερο
περίπου της ταχύτητας του αντιδραστήρα,

822
00:41:09,482 --> 00:41:11,190
ή μπορούμε να απαντήσουμε
ερωτήσεις που μπορεί να έχετε

823
00:41:11,190 --> 00:41:15,050
γιατί όλα αυτά είναι από τα βασικά τμήματα
της αντιδράσουν ότι θέλω να μιλήσω.

824
00:41:15,050 --> 00:41:16,540
Μπορούμε να πάμε μπροστά.

825
00:41:16,540 --> 00:41:17,590
Μπορούμε να απαντήσει σε ερωτήσεις.

826
00:41:17,590 --> 00:41:18,560
Οτιδήποτε θέλεις.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> Κοινό: Μπορείτε να χρησιμοποιήσετε
JSX στην κανονική JavaScript;

829
00:41:24,205 --> 00:41:27,150
Ή είναι αυτό κάτι που
ήρθε με την [δεν ακούγεται];

830
00:41:27,150 --> 00:41:30,760
>> Neel MEHTA: Το ερώτημα είναι μπορεί
μπορείτε να χρησιμοποιήσετε JSX με φυσιολογική JavaScript;

831
00:41:30,760 --> 00:41:32,620
Η απάντηση είναι ναι.

832
00:41:32,620 --> 00:41:41,070
JSX είναι απλά ένας τρόπος που παίρνει σας
JavaScript που έχει HTML στο εσωτερικό του,

833
00:41:41,070 --> 00:41:44,215
και συγκεντρώνει σε Javascript που
δεν έχει HTML μέσα από αυτό.

834
00:41:44,215 --> 00:41:47,880
Έτσι παρατηρήσετε that-- έτσι παρατηρήσετε εδώ.

835
00:41:47,880 --> 00:41:50,820
Αυτό μοιάζει σαν έχετε div
και έχετε πράγματα μέσα από αυτό.

836
00:41:50,820 --> 00:41:54,970
>> Που συγκεντρώνει σε Javascript που
όπως παράγει το ίδιο πράγμα.

837
00:41:54,970 --> 00:41:59,590
Υποθέτω ότι αυτό που λέω είναι ότι
JSX είναι μόνο μια συντακτική, όπως είναι

838
00:41:59,590 --> 00:42:03,530
ένα προεπεξεργαστή για πολύ JavaScript
όπως η PHP είναι ένα προεπεξεργαστή για HTML.

839
00:42:03,530 --> 00:42:05,490
JSC είναι ένα προεπεξεργαστή
για JavaScript που σας επιτρέπει

840
00:42:05,490 --> 00:42:12,970
βάζετε HTML στο εσωτερικό της JavaScript σας.

841
00:42:12,970 --> 00:42:16,425
Και έτσι, αν έχετε το σωστό μετασχηματιστή
το οποίο είναι ένα πράγμα που ονομάζεται [δεν ακούγεται],

842
00:42:16,425 --> 00:42:17,300
η οποία θα μεταμορφώσει.

843
00:42:17,300 --> 00:42:19,360
Το δικαίωμα προεπεξεργαστή,
αυτό θα σας αφήσει να το κάνουμε αυτό.

844
00:42:19,360 --> 00:42:20,235
>> Κοινό: [δεν ακούγεται]

845
00:42:20,235 --> 00:42:23,026
Neel MEHTA: Συνήθως δεν χρειάζεται
να θέσει HTML εσωτερικό JavaScript

846
00:42:23,026 --> 00:42:24,110
εκτός αν κάτι σας αντιδρούν.

847
00:42:24,110 --> 00:42:27,146
Αλλά μπορείτε να το κάνετε ούτως ή άλλως.

848
00:42:27,146 --> 00:42:27,645
Ναι;

849
00:42:27,645 --> 00:42:29,353
>> Κοινό: Νομίζω ότι εσύ
είχε περιγράψει React

850
00:42:29,353 --> 00:42:31,970
ως λειτουργική γλώσσα programing.

851
00:42:31,970 --> 00:42:35,646
Έχουμε μάθει C σε CS50.

852
00:42:35,646 --> 00:42:38,032
Είναι επίσης ένα C λειτουργική γλώσσα;

853
00:42:38,032 --> 00:42:39,990
Neel MEHTA: Έτσι, το ερώτημα
είναι περίπου λειτουργική

854
00:42:39,990 --> 00:42:43,010
σε σχέση με ένα άλλο πράγμα που ονομάζεται
επιτακτική ανάγκη ή διαδικαστικό προγραμματισμό.

855
00:42:43,010 --> 00:42:44,820
Υπάρχουν δύο είδη προγραμμάτων δημοφιλής.

856
00:42:44,820 --> 00:42:48,550
Ένα ονομάζεται διαδικαστική, η οποία
Είναι όλα σχετικά με τις εντολές σαν να κάνει,

857
00:42:48,550 --> 00:42:51,510
και ένα είναι λειτουργικό, το οποίο είναι
σχετικά με τις λειτουργίες και έχει

858
00:42:51,510 --> 00:42:52,930
εισόδου και εξόδου από αυτούς.

859
00:42:52,930 --> 00:42:55,930
React είναι ένα λειτουργικό πρότυπο.

860
00:42:55,930 --> 00:42:58,010
C είναι μια πολύ διαδικαστικό πρότυπο.

861
00:42:58,010 --> 00:43:02,360
>> Και ως παράδειγμα, για παράδειγμα C,
δεν κάνετε αυτόν τον τρόπο δηλωτική

862
00:43:02,360 --> 00:43:04,390
να καταστεί το πρόγραμμα, έτσι δεν είναι;

863
00:43:04,390 --> 00:43:06,826
Θα πρέπει να πω, να εκτυπώσετε αυτό.

864
00:43:06,826 --> 00:43:07,950
Αλλάξτε αυτή τη δομή δεδομένων.

865
00:43:07,950 --> 00:43:08,530
Εκτυπώστε αυτό.

866
00:43:08,530 --> 00:43:10,160
Είναι όλα σχετικά με τις εντολές.

867
00:43:10,160 --> 00:43:12,640
>> Σε αντιδράσει, δεν υπάρχει
ότι πολλές εντολές.

868
00:43:12,640 --> 00:43:15,145
Είναι όλα σχετικά με τη
συστατικά βάζετε μαζί.

869
00:43:15,145 --> 00:43:16,300
Είναι σαν λειτουργίες.

870
00:43:16,300 --> 00:43:26,360
Έχετε σαν μια συνάρτηση
που ονομάζεται CardView,

871
00:43:26,360 --> 00:43:28,680
η οποία είναι μια συνάρτηση
ότι έχει εισόδου, εξόδου,

872
00:43:28,680 --> 00:43:30,660
και έτσι είναι όλα React
για αυτή τη φιλοσοφία

873
00:43:30,660 --> 00:43:32,700
ΗΠΑ having-- έχετε δεδομένα.

874
00:43:32,700 --> 00:43:34,910
Μπορείτε να το περάσει μέσα από αυτό
αλγόριθμο, και αυτό θα

875
00:43:34,910 --> 00:43:36,800
εξόδου HTML που
μόλις είχαν τυπώσει τη σελίδα,

876
00:43:36,800 --> 00:43:39,180
και έτσι πρέπει να
οικοδομήσουμε το κομμάτι από το κομμάτι.

877
00:43:39,180 --> 00:43:42,800
>> Έτσι για να σχεδιάσετε μια αλληγορία για το τι
Είπα και πριν, ξέρετε πώς

878
00:43:42,800 --> 00:43:47,050
στο Facebook, αν έχετε ένα μήνυμα,
και μπορείτε να επιλέξετε ποια τμήματα για την ενημέρωση,

879
00:43:47,050 --> 00:43:47,882
αυτό είναι διαδικαστικό.

880
00:43:47,882 --> 00:43:48,840
Είναι επιτακτική ανάγκη, έτσι δεν είναι;

881
00:43:48,840 --> 00:43:49,806
Εντάξει, πήρα ένα μήνυμα.

882
00:43:49,806 --> 00:43:50,930
Ας αλλάξουμε λογαριασμό εκεί.

883
00:43:50,930 --> 00:43:52,110
>> Ας εμφανιστεί ένα παράθυρο εδώ.

884
00:43:52,110 --> 00:43:52,780
Ας αλλάξουμε λογαριασμό εκεί.

885
00:43:52,780 --> 00:43:53,700
Να τραβήξουμε αυτό εδώ.

886
00:43:53,700 --> 00:43:55,220
Αυτή είναι μια διαδικαστική προσέγγιση.

887
00:43:55,220 --> 00:44:00,240
>> Αυτό είναι ό, τι πράγματα όπως γωνιακή,
Boost, σπονδυλική στήλη, χρησιμοποιήστε άλλα πλαίσια.

888
00:44:00,240 --> 00:44:01,200
React είναι λειτουργική.

889
00:44:01,200 --> 00:44:03,324
Είναι ένα πολύ διαφορετικό τρόπο
της σκέψης για τα πράγματα.

890
00:44:03,324 --> 00:44:07,950
Παίρνει την ιδέα της ας ρίξουμε
λειτουργίες ή αλγόριθμους που θα σας

891
00:44:07,950 --> 00:44:08,800
δώσει στοιχεία.

892
00:44:08,800 --> 00:44:11,820
Θα φτύσει τι
θα πρέπει να είναι, και ο υπολογιστής

893
00:44:11,820 --> 00:44:13,490
θα φροντίσει για το ζύγισμα.

894
00:44:13,490 --> 00:44:15,890
Δεν χρειάζεται να χειριστεί τον εαυτό σας.

895
00:44:15,890 --> 00:44:18,470
Μήπως αυτό κάνει λίγο νόημα;

896
00:44:18,470 --> 00:44:18,970
Ναι;

897
00:44:18,970 --> 00:44:24,180
>> Κοινό: Σε μια λειτουργική γλώσσα,
όλα συμβαίνουν ταυτόχρονα;

898
00:44:24,180 --> 00:44:26,800
>> Neel MEHTA: Όχι, τα πράγματα συμβαίνουν στην τάξη.

899
00:44:26,800 --> 00:44:29,320
Όπως και εδώ υπάρχει ακόμη
να καταδικάσει, αλλά δεν το κάνει

900
00:44:29,320 --> 00:44:32,390
συμβεί κατά σειρά, όπως
Συνιστώ, εντολή,.

901
00:44:32,390 --> 00:44:36,459
Συμβαίνει κατά σειρά
η λειτουργία σας δίνει έξοδο.

902
00:44:36,459 --> 00:44:37,750
Βάλτε ότι σε μια άλλη λειτουργία.

903
00:44:37,750 --> 00:44:39,550
Βάλτε ότι σε ένα άλλο
λειτουργία, μια άλλη λειτουργία.

904
00:44:39,550 --> 00:44:41,470
>> Αν το κάνετε CS51, θα
μάθετε λειτουργικά προγράμματα

905
00:44:41,470 --> 00:44:42,886
λίγο έξω από το πεδίο εφαρμογής της παρούσας.

906
00:44:42,886 --> 00:44:45,090
Αλλά βασικά, αυτό που κάνει
Αντιδρούν δροσερό δεν είναι μόνο

907
00:44:45,090 --> 00:44:46,840
η ροή των δεδομένων μονόδρομη
και η εικονική Dom,

908
00:44:46,840 --> 00:44:48,700
αλλά και αυτή η ιδέα της
λειτουργικό προγραμματισμό.

909
00:44:48,700 --> 00:44:51,720
Και λειτουργικό προγραμματισμό είναι πολύ εύκολο
να συνθέσει και να κάνει δροσερό πράγματα έξω από,

910
00:44:51,720 --> 00:44:53,844
και είναι πολύ εύκολο να σκεφτεί
περίπου και για το λόγο.

911
00:44:53,844 --> 00:44:55,450
Γι 'αυτό είναι μια άλλη καλή κλήρωση του React.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Οποιεσδήποτε άλλες ερωτήσεις;

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Ναι;

916
00:45:03,150 --> 00:45:06,840
>> Κοινό: Χμ, γιατί θα σας
χρησιμοποιούν ας σε αντίθεση με var;

917
00:45:06,840 --> 00:45:10,450
>> Neel MEHTA: Το ερώτημα λοιπόν είναι
γιατί χρησιμοποιείς αφήσετε αντί var;

918
00:45:10,450 --> 00:45:13,220
Αυτό είναι ένα πράγμα που ονομάζεται
ES6 ή ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Είναι η νέα έκδοση του JavaScript.

920
00:45:15,820 --> 00:45:19,050
Υπάρχει μια δέσμη των τεχνικούς λόγους,
Αλλά ας είναι η καλύτερη εκδοχή της var.

921
00:45:19,050 --> 00:45:20,724
>> Είναι το πώς θα δηλώσετε τις μεταβλητές.

922
00:45:20,724 --> 00:45:21,390
Μπορείτε να χρησιμοποιήσετε το αφήσουμε.

923
00:45:21,390 --> 00:45:22,140
Μπορείτε να χρησιμοποιήσετε var.

924
00:45:22,140 --> 00:45:23,825
Ας έχει μια δέσμη των τεχνικών
reasons-- μπορείτε να τους δούμε

925
00:45:23,825 --> 00:45:25,610
μέχρι later-- για τους οποίους είναι καλύτερο.

926
00:45:25,610 --> 00:45:28,780
Βασικά, ES6 έχει κάποια ωραία
νέα σύνταξη, μερικά νέα χαρακτηριστικά

927
00:45:28,780 --> 00:45:30,720
πάνω από το παλιό JavaScript.

928
00:45:30,720 --> 00:45:32,782
>> Έτσι έχουμε σαν πέντε λεπτά.

929
00:45:32,782 --> 00:45:34,990
Ήθελα απλώς να μιλήσω για
ένα πράγμα πραγματικά γρήγορα.

930
00:45:34,990 --> 00:45:36,450
Αν είχατε οποιεσδήποτε ερωτήσεις,
Ας μιλήσουμε γι 'αυτό μετά από αυτό.

931
00:45:36,450 --> 00:45:38,366
Αλλά ακριβώς έτσι αυτό παίρνει
πιάστηκε στην κάμερα, απλά

932
00:45:38,366 --> 00:45:41,550
θέλω να μιλήσω λίγο για το πώς θα
χρησιμοποιούν πραγματικά αντιδρούν με τις εφαρμογές σας.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Αν πάτε εδώ,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
Αυτή είναι η αρχική σελίδα για React, και
αυτό θα σας δείξουμε πώς μπορείτε πραγματικά να χρησιμοποιήσετε

936
00:46:03,320 --> 00:46:05,320
Αντιδρούν στις σελίδες σας.

937
00:46:05,320 --> 00:46:08,845
Βασικά, είναι μια μικρή
περίπλοκη προσπαθείτε να εγκαταστήσετε React.

938
00:46:08,845 --> 00:46:12,300
Δεν είναι τόσο εύκολο όσο απλά σύρετε
και απόθεση ενός JavaScript εκεί.

939
00:46:12,300 --> 00:46:15,890
>> Πρέπει να έχεις μετασχηματιστή σας
που έχει συσταθεί, τα οποία θα, όπως και πριν,

940
00:46:15,890 --> 00:46:18,120
μετατρέψει σε JSX σας
η κανονική JavaScript.

941
00:46:18,120 --> 00:46:21,030
Θα πρέπει να πράγμα που θα
μεταγλώττιση σας ES6 στο φυσιολογικό.

942
00:46:21,030 --> 00:46:24,720
Το JavaScript υπάρχει πολλή κίνηση
τα μέρη που πρέπει να κάνετε, έτσι υπάρχει ένα πράγμα

943
00:46:24,720 --> 00:46:27,200
που ονομάζεται Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
Και αυτό είναι ένα εργαλείο γραμμής εντολών που θα
να σας βοηθήσει να σκαλωσιά έξω React σας

945
00:46:31,110 --> 00:46:32,380
έργα εύκολα.

946
00:46:32,380 --> 00:46:38,660
>> Έτσι, μπορείτε να διαβάσετε για αυτό
αργότερα, αλλά υπάρχουν μερικά εργαλεία

947
00:46:38,660 --> 00:46:40,160
ότι Yeoman προσφέρει.

948
00:46:40,160 --> 00:46:43,280
Θα σας επιτρέπουν να δημιουργήσετε ένα React
app με όλα ενσωματωμένα.

949
00:46:43,280 --> 00:46:46,030
Όπως και αυτό θα έχουν κατασκευαστεί
σε, συστατικά που χτίστηκε το.

950
00:46:46,030 --> 00:46:47,880
Θα πρέπει μετασχηματιστή σας έχουν φτιαχτεί.

951
00:46:47,880 --> 00:46:50,699
Έχουν πολλά δροσερά
πράγματα που χτίστηκε το αυτόματα

952
00:46:50,699 --> 00:46:52,240
χρησιμοποιώντας αυτά τα πράγματα που ονομάζεται γεννήτριες.

953
00:46:52,240 --> 00:46:54,620
>> Έτσι, διαβάστε γι 'αυτό, αν σας αρέσει.

954
00:46:54,620 --> 00:46:59,110
Απλά πηγαίνετε στις Yeoman, Υ-Ε-Ο-Μ-Α-Ν, και
μπορείτε να βρείτε γεννήτριες όπως αυτούς.

955
00:46:59,110 --> 00:47:01,263
Και με γεννήτριες, όπως
αυτά, θα ήθελα μόνο ένα

956
00:47:01,263 --> 00:47:03,010
Είναι εντολές μια γραμμή εντολών ζευγάρι.

957
00:47:03,010 --> 00:47:05,530
Θα ικρίωμα από ένα
Αντιδρούν ολόκληρο το app για σας.

958
00:47:05,530 --> 00:47:10,470
Θα πάρει όλη τη χειρωνακτική σωληνώσεις,
και γρύλισμα δουλειά κάνει για σας,

959
00:47:10,470 --> 00:47:13,010
και αυτός είναι ο λόγος που επικεντρώνεται μόνο
σχετικά απλά γράφοντας στο React.

960
00:47:13,010 --> 00:47:16,739
>> Έτσι, βασικά οικοδόμηση μιας
Αντιδρούν app είναι τετριμμένη.

961
00:47:16,739 --> 00:47:19,530
Είναι ενσύρματο όλοι μαζί, αλλά υπάρχουν
είναι εργαλεία που θα το κάνει για εσάς.

962
00:47:19,530 --> 00:47:23,070
Έτσι, αν θέλετε να κάνετε ένα React
app, δοκιμάστε να κάνετε αυτόν τον τρόπο.

963
00:47:23,070 --> 00:47:26,360
Αν απλά θέλετε να πειραματιστείτε,
μπορείτε να προσπαθήσετε να χρησιμοποιήσετε αυτό το CodePen

964
00:47:26,360 --> 00:47:28,550
γιατί αυτό έχει CodePen
όλες οι καλωδιώσεις να αντιδράσει.

965
00:47:28,550 --> 00:47:30,240
Έχω κάνει όλη τη δουλειά για σας ήδη.

966
00:47:30,240 --> 00:47:34,610
>> Έτσι, εάν θέλετε να κάνετε σαν ένα
παραγωγής να απελευθερώσει React app,

967
00:47:34,610 --> 00:47:37,220
δοκιμάστε μία από αυτές τις γεννήτριες.

968
00:47:37,220 --> 00:47:40,240
Αν απλά θέλετε να παίξετε
περίπου, είναι συχνά αξίζει μόνο

969
00:47:40,240 --> 00:47:44,490
όπως προσπαθήστε να παίζει γύρω στις CodePen εδώ.

970
00:47:44,490 --> 00:47:45,470
Ήχος καλό;

971
00:47:45,470 --> 00:47:45,970
Δροσερός.

972
00:47:45,970 --> 00:47:47,890
>> Έτσι, αυτό είναι το μόνο που έχω.

973
00:47:47,890 --> 00:47:52,470
Και πάλι, όλος ο κώδικας και τα παραδείγματα είναι
πρόκειται να είναι σε αυτή την ιστοσελίδα εδώ.

974
00:47:52,470 --> 00:47:55,509
Έτσι, και πάλι, δεν μιλήσαμε
για πολύ σύνταξη του React,

975
00:47:55,509 --> 00:47:57,550
αλλά να βρούμε όλους εκείνους
μικρή συντακτική λεπτομέρειες,

976
00:47:57,550 --> 00:48:00,320
είναι όλα πρόκειται να είναι διαθέσιμο
σε αυτή την ιστοσελίδα εδώ.

977
00:48:00,320 --> 00:48:02,660
>> Έτσι, θα ήθελα να συστήσει όπως
κάνουν το πρώτο βήμα.

978
00:48:02,660 --> 00:48:06,277
Βάλτε το σε CodePen σας.

979
00:48:06,277 --> 00:48:08,110
Προσπαθήστε να εργαζόμαστε για να κάνουμε
το στο δεύτερο στάδιο.

980
00:48:08,110 --> 00:48:11,310
Υπάρχει ένα τέταρτο βήμα, και μόλις
δείτε πού μπορείτε να πάρετε από αυτό.

981
00:48:11,310 --> 00:48:14,840
>> Οποιεσδήποτε άλλες ερωτήσεις, ελέγξτε
από αυτή τη σελίδα ή στο email μου.

982
00:48:14,840 --> 00:48:16,490
Αυτό είναι το ηλεκτρονικό ταχυδρομείο μου.

983
00:48:16,490 --> 00:48:19,885
Αλλά θα ήθελα πολύ να σας βοηθήσει με οποιαδήποτε
ερωτήσεις που μπορεί να έχετε σχετικά με React.

984
00:48:19,885 --> 00:48:21,010
Έτσι, Ναι, αυτό είναι το μόνο που έχω.

985
00:48:21,010 --> 00:48:23,410
Σας ευχαριστώ όλους πάρα πολύ για
βλέποντας ή για την παρακολούθηση.

986
00:48:23,410 --> 00:48:26,820
Και θα πάρω απορίες
μπορεί να έχετε μετά από αυτό τώρα.

987
00:48:26,820 --> 00:48:29,140
Έτσι, σας ευχαριστώ όλους για την προσοχή.

988
00:48:29,140 --> 00:48:31,270