1
00:00:00,000 --> 00:00:02,910
>> [Jouer de la musique]

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

3
00:00:04,850 --> 00:00:07,275
>> NEEL MEHTA: Ici, il va.

4
00:00:07,275 --> 00:00:11,070
>> Eh bien, tout le monde, Bienvenue dans le Web
applications de l'avenir avec réagir.

5
00:00:11,070 --> 00:00:11,870
Ceci est CS50.

6
00:00:11,870 --> 00:00:12,930
Mon nom est Neel.

7
00:00:12,930 --> 00:00:17,689
Je suis un TA pour CS50 et un étudiant en deuxième année
à Harvard College et un très, très

8
00:00:17,689 --> 00:00:18,730
développeur web passionné.

9
00:00:18,730 --> 00:00:20,730
Je suis donc très excitant de
être de vous parler aujourd'hui,

10
00:00:20,730 --> 00:00:24,550
si vous êtes ici ou à la maison
regarder, à propos Réagir, qui est, encore une fois

11
00:00:24,550 --> 00:00:27,270
comme je le disais, l'avenir des applications web.

12
00:00:27,270 --> 00:00:29,055
>> Donc Réagir est un framework web.

13
00:00:29,055 --> 00:00:30,930
Et comme je l'ai été dit
pour certaines personnes ici,

14
00:00:30,930 --> 00:00:33,400
un cadre est juste un
un ensemble d'outils que vous pouvez utiliser

15
00:00:33,400 --> 00:00:35,770
de structurer et de construire votre application web.

16
00:00:35,770 --> 00:00:39,010
Et les applications web sont, à nouveau, les sites Web
qui sont interactifs comme Facebook,

17
00:00:39,010 --> 00:00:42,330
Twitter.com, Instagram.com, peu importe.

18
00:00:42,330 --> 00:00:45,590
>> Donc, Facebook est un framework web
qui a été développé par Facebook

19
00:00:45,590 --> 00:00:48,060
quelques années back-- REACT passe.

20
00:00:48,060 --> 00:00:50,830
Il a depuis été utilisé dans
Facebook sur leurs applications mobiles

21
00:00:50,830 --> 00:00:52,460
et l'application web, Instagram.

22
00:00:52,460 --> 00:00:56,350
Khan Academy est un autre
adopteur précoce éminent de réagir.

23
00:00:56,350 --> 00:00:58,630
>> Il a vraiment été d'obtenir
extrêmement populaire.

24
00:00:58,630 --> 00:01:03,420
Si jamais vous utilisez des choses comme angulaires ou
Backbone, ceci est de la même famille,

25
00:01:03,420 --> 00:01:05,830
mais il n'a jusqu'à présent puisque
dépasser leur popularité.

26
00:01:05,830 --> 00:01:06,890
Il est la nouvelle chose chaude.

27
00:01:06,890 --> 00:01:09,590
Il est vraiment, vraiment énorme.

28
00:01:09,590 --> 00:01:13,470
>> Et donc Réagir est bon non seulement comme un
framework web pour les interfaces de construction.

29
00:01:13,470 --> 00:01:16,020
Il est bon pour la création d'interfaces web.

30
00:01:16,020 --> 00:01:18,350
Il ya aussi une chose
Réagir appelé maternelle qui

31
00:01:18,350 --> 00:01:22,200
vous permet de construire des interfaces
pour Android et iOS

32
00:01:22,200 --> 00:01:26,390
et peut-être d'autres plates-formes dans le futur
en utilisant simplement le même code JavaScript.

33
00:01:26,390 --> 00:01:31,130
Vous pouvez utiliser exactement la même
Code JavaScript pour rendre les sites Web,

34
00:01:31,130 --> 00:01:33,040
pour rendre les applications Android et les applications iOS.

35
00:01:33,040 --> 00:01:35,000
>> Il est un moment très, très excitant.

36
00:01:35,000 --> 00:01:37,070
Il est une occasion vraiment, vraiment cool.

37
00:01:37,070 --> 00:01:42,020
Il est vraiment un Web universel
outil de développement d'interface,

38
00:01:42,020 --> 00:01:44,420
il est donc très, très
chose importante à savoir.

39
00:01:44,420 --> 00:01:46,949
Et, comme je disais aux gens
avant, cela, je pense,

40
00:01:46,949 --> 00:01:48,990
qui va changer la façon dont nous
construire des applications web toujours.

41
00:01:48,990 --> 00:01:55,820
Donc, il est peut-être une hyperbole de peu, mais je
pense qu'il est une assez bonne chose à savoir.

42
00:01:55,820 --> 00:01:57,580
>> OK, donc ce qui est Réagir?

43
00:01:57,580 --> 00:02:01,020
Réagir est un cadre vous pouvez
utiliser pour construire des interfaces.

44
00:02:01,020 --> 00:02:03,240
Une interface est, à nouveau,
une page web, non?

45
00:02:03,240 --> 00:02:06,340
Alors, voici Instagram.com, utilisations réagir.

46
00:02:06,340 --> 00:02:08,740
>> Réagir est construit sur le
idée de composants.

47
00:02:08,740 --> 00:02:11,900
Un composant est un HTML
élément sur les stéroïdes,

48
00:02:11,900 --> 00:02:14,470
si un élément HTML est comme un bouton.

49
00:02:14,470 --> 00:02:15,250
Il est un paragraphe.

50
00:02:15,250 --> 00:02:17,500
Il est un en-tête, non?

51
00:02:17,500 --> 00:02:22,740
Et Instagram utiliser ceux-ci, mais il
sera également utiliser des composants de réagir.

52
00:02:22,740 --> 00:02:25,740
>> React composants sont
éléments HTML trafiquées

53
00:02:25,740 --> 00:02:28,100
qui ont leur propre comportement
contenue en leur sein.

54
00:02:28,100 --> 00:02:31,800
Ainsi, à titre d'exemple, nous pourrions avoir
un élément de temps, une composante de temps,

55
00:02:31,800 --> 00:02:34,095
qui contiendra comme
l'horodatage, vous le savez,

56
00:02:34,095 --> 00:02:37,170
un composant de profil qui
contiendra l'image de profil

57
00:02:37,170 --> 00:02:38,820
et le nom de la personne.

58
00:02:38,820 --> 00:02:42,930
Il peut avoir un compteur analogue, qui
peut compter comme le nombre de goûts,

59
00:02:42,930 --> 00:02:45,610
et si vous cliquez dessus, il va
augmenter le nombre de goûts.

60
00:02:45,610 --> 00:02:48,200
Un composant est juste un
tas de code HTML qui

61
00:02:48,200 --> 00:02:50,520
a certaines fonctionnalités
enveloppé à l'intérieur.

62
00:02:50,520 --> 00:02:53,770
Donc, il est comme un élément HTML
sur les stéroïdes, comme je l'ai dit avant.

63
00:02:53,770 --> 00:02:56,270
Vous pouvez prendre ces composants,
et vous pouvez les mettre ensemble

64
00:02:56,270 --> 00:02:59,060
de faire de nouveaux composants, en
ce cas, une composante de poste,

65
00:02:59,060 --> 00:03:00,505
qui contient tous ces trucs.

66
00:03:00,505 --> 00:03:04,050
Il contiendrait horaire, Profil,
LikeCounter, peut-être le commentaire

67
00:03:04,050 --> 00:03:06,100
et peut-être l'image elle-même.

68
00:03:06,100 --> 00:03:10,810
Et donc les applications web sont construits juste en prenant
composants et de les mettre ensemble.

69
00:03:10,810 --> 00:03:15,620
Un flux Instagram est rien de plus que
un tas de messages un après l'autre,

70
00:03:15,620 --> 00:03:19,032
chaque poste contient comme le temps,
Profil, LikeCounter, et ainsi de suite.

71
00:03:19,032 --> 00:03:20,490
Il est un peu comme construire une maison.

72
00:03:20,490 --> 00:03:22,660
On ne construit pas la
maison de haut en bas.

73
00:03:22,660 --> 00:03:24,960
Vous prenez-vous components--
prendre comme la salle de bains.

74
00:03:24,960 --> 00:03:28,320
Vous prenez le bedroom-- vous les tenez
ensemble, et vous avez un nouveau composant.

75
00:03:28,320 --> 00:03:29,760
Vous avez une nouvelle partie de la maison.

76
00:03:29,760 --> 00:03:32,860
>> Donc Réagissez est tout construit autour
cette idée de composants

77
00:03:32,860 --> 00:03:36,600
sont interactifs, qui sont déclarative.

78
00:03:36,600 --> 00:03:39,650
Comme vous venez de dire ce qu'est un
profil est, et il rend.

79
00:03:39,650 --> 00:03:40,600
Ils sont composables.

80
00:03:40,600 --> 00:03:43,880
Vous pouvez prendre un temps et un profil, mettez
ensemble, font quelque chose de mieux.

81
00:03:43,880 --> 00:03:47,770
Et ils sont réutilisables, donc si vous
avoir le code source pour un poste,

82
00:03:47,770 --> 00:03:49,440
vous pourriez intégrer cela nulle part.

83
00:03:49,440 --> 00:03:53,160
>> Vous pouvez incorporer un Instagram
chose sur votre propre site.

84
00:03:53,160 --> 00:03:56,830
Vous pouvez intégrer dans Facebook, par exemple,
dans la mesure où il utilise ainsi React.

85
00:03:56,830 --> 00:04:00,360
Donc, les composants sont vraiment, vraiment, vraiment
puissants éléments constitutifs de la nappe

86
00:04:00,360 --> 00:04:04,180
qui peut être utilisé n'importe où et mis
ensemble pour faire de nouveaux blocs de construction.

87
00:04:04,180 --> 00:04:07,159
Voilà le très, très
aperçu de haut niveau.

88
00:04:07,159 --> 00:04:09,200
Donc, encore une fois, si vous avez
des questions à tout moment

89
00:04:09,200 --> 00:04:14,470
sur la philosophie du réacteur, le
codage, pour moi arrêter, et laissez-moi savoir.

90
00:04:14,470 --> 00:04:18,420
>> OK, donc réagir parce qu'il est cool
a une façon différente de voir

91
00:04:18,420 --> 00:04:19,870
comment vous construisez des applications web.

92
00:04:19,870 --> 00:04:23,620
Vous avez probablement entendu parler de MVC, un
le modèle que vous contrôlez dans CS50 ou quoi

93
00:04:23,620 --> 00:04:25,940
d'autres catégories de sondage que vous utilisez.

94
00:04:25,940 --> 00:04:29,000
Et la plupart des cadres sont
construit autour de l'idée de MVC.

95
00:04:29,000 --> 00:04:30,410
Réagir est pas.

96
00:04:30,410 --> 00:04:32,980
Réagissez est construit autour de l'idée
du flux de données unidirectionnel

97
00:04:32,980 --> 00:04:36,510
comme on le voit par ce tableau ou le graphique ici.

98
00:04:36,510 --> 00:04:38,260
>> Fondamentalement, vous avez une source de données.

99
00:04:38,260 --> 00:04:42,380
Et la source de données va décider
comment définir certains composants.

100
00:04:42,380 --> 00:04:45,452
Et les composants seront
puis, quand ils changent,

101
00:04:45,452 --> 00:04:47,160
ils diront au
la source de données à modifier.

102
00:04:47,160 --> 00:04:49,350
>> Pour utiliser le Instagram
par exemple, vous pourriez avoir

103
00:04:49,350 --> 00:04:52,050
une liste d'objets de poste comme
dans une base de données ou quelque chose.

104
00:04:52,050 --> 00:04:53,310
Que les données.

105
00:04:53,310 --> 00:04:57,600
Et puis nos composants de poste
aura que les données,

106
00:04:57,600 --> 00:05:01,830
et utiliser ces données pour rendre
une chose sur l'écran.

107
00:05:01,830 --> 00:05:04,300
Voilà ce que la flèche
à partir de données de composant est,

108
00:05:04,300 --> 00:05:07,930
et alors que les mêmes données est utilisé
de rendre un tas de composants.

109
00:05:07,930 --> 00:05:10,290
>> En Facebook Messenger, pour
par exemple, ce qui est React,

110
00:05:10,290 --> 00:05:13,410
vous pourriez avoir une liste des
les messages que votre source de données.

111
00:05:13,410 --> 00:05:15,927
Et cela rendrait pas
que la liste des messages

112
00:05:15,927 --> 00:05:17,510
mais aussi la liste d'amis que vous avez.

113
00:05:17,510 --> 00:05:19,200
Vous avez le comptage non lu.

114
00:05:19,200 --> 00:05:23,330
Peut-être aussi de rendre la chose Facebook
qui est au bas de Facebook.com.

115
00:05:23,330 --> 00:05:25,610
Les mêmes données est un
source unique de vérité

116
00:05:25,610 --> 00:05:28,290
et qui provoque beaucoup de
composants devant être rendus.

117
00:05:28,290 --> 00:05:30,290
Et chaque fois que l'un de ceux
des composants est modifié,

118
00:05:30,290 --> 00:05:32,320
il remonte et
change la source de données.

119
00:05:32,320 --> 00:05:33,460
>> Vous envoyez un message, non?

120
00:05:33,460 --> 00:05:34,780
Cela change la source de données.

121
00:05:34,780 --> 00:05:39,490
Vous avez lu vos messages,
si vous définissez non lu à 0.

122
00:05:39,490 --> 00:05:41,136
Cela change la source de données.

123
00:05:41,136 --> 00:05:44,010
Et remarquez que tous ces derniers d'une
flèche revenir aux mêmes données

124
00:05:44,010 --> 00:05:47,662
la source, de sorte que vous savez,
étant donné un certain ensemble de données,

125
00:05:47,662 --> 00:05:49,870
vous savez exactement ce que le
page est va ressembler.

126
00:05:49,870 --> 00:05:50,700
Il est déterministe.

127
00:05:50,700 --> 00:05:53,451
Vous savez, certaines données fournies, ce qui
la page va ressembler.

128
00:05:53,451 --> 00:05:56,158
Vous pouvez prédire comment il va
se comportent et comment les choses vont

129
00:05:56,158 --> 00:05:57,650
de travailler quand ils sont mis ensemble.

130
00:05:57,650 --> 00:06:00,410
>> Et si je devais un million de composants
ici, il se comporterait de la même, non?

131
00:06:00,410 --> 00:06:02,290
Vous auriez pas
interconnexions bizarre.

132
00:06:02,290 --> 00:06:04,120
Un rendu des données d'un million de composants.

133
00:06:04,120 --> 00:06:06,879
Un million de composants pourraient
revenir en arrière et modifier les données.

134
00:06:06,879 --> 00:06:07,920
Et donc cela est très agréable.

135
00:06:07,920 --> 00:06:10,870
Nous construisons composables,
facilement des applications Web évolutives.

136
00:06:10,870 --> 00:06:13,150
>> Vous disposez d'une source de données,
la source de la vérité.

137
00:06:13,150 --> 00:06:15,790
Qui indique à vos composants
la façon de poser la page,

138
00:06:15,790 --> 00:06:18,190
et les composants seront
gérer l'interaction.

139
00:06:18,190 --> 00:06:20,150
Et si ils veulent changer
les choses, juste remontent

140
00:06:20,150 --> 00:06:21,750
et dire à la source de données pour changer.

141
00:06:21,750 --> 00:06:22,850
Donner un sens?

142
00:06:22,850 --> 00:06:26,010
Donc Réagir est tout au sujet compréhension
comment construire un composant

143
00:06:26,010 --> 00:06:29,540
et comment faire votre composant
interagir avec le monde extérieur.

144
00:06:29,540 --> 00:06:31,850
>> Faire interagissent de composante
avec le monde extérieur

145
00:06:31,850 --> 00:06:34,490
utilise une autre technologie
Flux appelé, qui

146
00:06:34,490 --> 00:06:36,872
est un cadre qui est
ajoutée sur le dessus de réagir.

147
00:06:36,872 --> 00:06:38,330
On ne va pas parler de ça.

148
00:06:38,330 --> 00:06:42,990
Nous allons parler plus sur, étant donné
données, comment pouvez-vous rendre un composant?

149
00:06:42,990 --> 00:06:47,010
>> Et donc Réagir est vraiment cool parce que vous
peut l'utiliser à tout bout de retour que vous voulez.

150
00:06:47,010 --> 00:06:50,480
Si vous avez comme une extrémité arrière Python,
si votre Python peut cracher des données,

151
00:06:50,480 --> 00:06:51,610
Réagir peut rendre.

152
00:06:51,610 --> 00:06:54,700
Si vous êtes pas sorties JS
des données, Réagir la rend.

153
00:06:54,700 --> 00:06:56,890
Ruby rails avec
données, Réagir rend.

154
00:06:56,890 --> 00:07:01,860
>> Donc Réagir est fondamentalement une web
view-- une extrémité avant avec des composants

155
00:07:01,860 --> 00:07:03,910
pour toute source de données.

156
00:07:03,910 --> 00:07:07,145
Et ainsi va de la source de données pour
réagir composants est assez facile.

157
00:07:07,145 --> 00:07:08,770
Dans l'autre sens est un peu plus difficile.

158
00:07:08,770 --> 00:07:10,462
Qui utilise Flux comme je l'ai mentionné auparavant.

159
00:07:10,462 --> 00:07:11,420
Nous allons pas entrer dans cela.

160
00:07:11,420 --> 00:07:13,740
Nous allons nous concentrer plus sur le
données à côté composants.

161
00:07:13,740 --> 00:07:15,880
De cette façon, vous pouvez faire
cool, applications web fun.

162
00:07:15,880 --> 00:07:19,870
Il ne sera pas affecter le monde extérieur
pour l'instant, mais cela est une autre histoire.

163
00:07:19,870 --> 00:07:22,210
>> OK, donc si vous étiez ici
pour mon dernier séminaire

164
00:07:22,210 --> 00:07:26,610
vous saurez que tout le code pour
La discussion d'aujourd'hui va être à cette adresse URL

165
00:07:26,610 --> 00:07:29,320
ici, désolé, cette URL ici.

166
00:07:29,320 --> 00:07:32,730
Et fondamentalement, nous allons aller
à travers quatre étapes, peut-être cinq,

167
00:07:32,730 --> 00:07:33,510
probablement pas cinq.

168
00:07:33,510 --> 00:07:37,300
Nous allons passer à travers quatre étapes
de la construction d'un échantillon Réagir app.

169
00:07:37,300 --> 00:07:39,550
Et ainsi tout le code source
pour chaque étape de la manière

170
00:07:39,550 --> 00:07:42,216
va être ici, donc si
vous suivez à la maison,

171
00:07:42,216 --> 00:07:43,991
hésitez pas à prendre connaissance de ce code.

172
00:07:43,991 --> 00:07:46,740
Si vous suivez ici,
nous allons le montrer sur l'écran,

173
00:07:46,740 --> 00:07:47,739
donc ne vous inquiétez pas à ce sujet.

174
00:07:47,739 --> 00:07:50,930
Mais si vous êtes à la maison, sentez
libre pour visiter ce site.

175
00:07:50,930 --> 00:07:56,400
Et, oui, vous devriez être en mesure d'obtenir
tout le code que vous avez besoin ici.

176
00:07:56,400 --> 00:08:01,380
Donc, il est une bonne feuille de triche ainsi
pour vos futures aventures avec réagir.

177
00:08:01,380 --> 00:08:04,490
Cool, si tout le monde qui est ici,
et même si vous êtes à la maison,

178
00:08:04,490 --> 00:08:11,580
tirer vers le haut ce site, is.gd/cs50react,
pas de capital, pas de soulignement, rien.

179
00:08:11,580 --> 00:08:15,849
>> Vous verrez une page qui ressemble
un peu comme ça.

180
00:08:15,849 --> 00:08:17,140
Ceci est une chose appelée CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen est une collaboration
environnement de codage

182
00:08:20,030 --> 00:08:23,364
avec laquelle je peux écrire le code ici, et
il sera automatiquement envoyé.

183
00:08:23,364 --> 00:08:24,780
Et de cette façon, je peux écrire du code.

184
00:08:24,780 --> 00:08:26,920
Je peux exécuter du code ici.

185
00:08:26,920 --> 00:08:33,470
>> Pour example-- et si elle reloads-- voir,
Je fais tourner du code JavaScript sur la page

186
00:08:33,470 --> 00:08:36,390
ici, et il va
rendre automatiquement une page web

187
00:08:36,390 --> 00:08:37,980
avec ce code JavaScript.

188
00:08:37,980 --> 00:08:40,039
Et donc cela est une façon
pour nous d'essayer de code

189
00:08:40,039 --> 00:08:43,089
vraiment rapide sans avoir à utiliser
notre identité ou utiliser notre machine locale

190
00:08:43,089 --> 00:08:44,290
ou peu importe.

191
00:08:44,290 --> 00:08:47,670
Il est un moyen très rapide pour vous de maquette
et de tester différents types de code.

192
00:08:47,670 --> 00:08:50,560
>> Donc, je vais être en prenant
exemple de code, de le mettre ici.

193
00:08:50,560 --> 00:08:52,374
Nous allons travailler à travers elle.

194
00:08:52,374 --> 00:08:54,540
Et si vous êtes à la maison, vous
peut tirer cette ainsi.

195
00:08:54,540 --> 00:08:57,530
Et je l'ai déjà installé
Réagir ici, donc vous pouvez juste

196
00:08:57,530 --> 00:09:00,770
écrire votre propre code ici, et
essayer que votre propre terrain de jeux.

197
00:09:00,770 --> 00:09:04,940
>> Ouais, si tout le monde
ouvrir ce lien ici.

198
00:09:04,940 --> 00:09:08,080
S'il vous plaît me donner un coup de pouce
une fois que vous l'avez ouvert.

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

200
00:09:10,960 --> 00:09:13,770
Cool, cool cool.

201
00:09:13,770 --> 00:09:16,914
Il n'y a rien ici pour le moment, mais
nous allons changer très bientôt.

202
00:09:16,914 --> 00:09:21,250
>> OK, donc Réagir est un JavaScript
bibliothèque, et en tant que tel,

203
00:09:21,250 --> 00:09:24,480
nécessite la connaissance de JavaScript,
qui est le langage de programmation Web.

204
00:09:24,480 --> 00:09:27,660
Et il est utilisé pour d'autres choses
maintenant trop, mais surtout développer le web

205
00:09:27,660 --> 00:09:32,040
la langue, donc si vous n'êtes pas familier avec
que, lisent un site appelé JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
C'est merveilleux.

207
00:09:32,700 --> 00:09:34,240
Vous pouvez en apprendre JavaScript
dans une demi-heure.

208
00:09:34,240 --> 00:09:34,990
C'est incroyable.

209
00:09:34,990 --> 00:09:36,420
>> Afin de lui donner une lecture.

210
00:09:36,420 --> 00:09:39,960
On est aussi beaucoup de HTML ici parce que
nous concevons des pages Web bien sûr.

211
00:09:39,960 --> 00:09:43,890
Donc, si vous n'êtes pas familier avec
HTML, consultez HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Je pense qu'apprendre est un Réagir
million de fois plus facile si vous avez déjà

213
00:09:46,520 --> 00:09:47,892
connaître les blocs de construction.

214
00:09:47,892 --> 00:09:50,600
Si vous avez les composants, il est
facile de faire une plus grande composante.

215
00:09:50,600 --> 00:09:51,860
Voilà Réagir langue pour vous.

216
00:09:51,860 --> 00:09:54,270
>> Donc, aller de l'avant et de donner
ces choses une lecture.

217
00:09:54,270 --> 00:09:55,070
Mettre en pause cette vidéo.

218
00:09:55,070 --> 00:09:57,440
Donnez-lui une lecture si vous êtes
à la maison si vous n'êtes pas

219
00:09:57,440 --> 00:10:00,794
familier avec le HTML ou JavaScript

220
00:10:00,794 --> 00:10:02,960
OK, donc ce que nous allons
faire est que nous allons faire

221
00:10:02,960 --> 00:10:06,470
une application flashcard très basique utilisant réagir.

222
00:10:06,470 --> 00:10:08,210
Nous allons avoir un linker.

223
00:10:08,210 --> 00:10:09,880
Vous pouvez retourner la carte d'avant en arrière.

224
00:10:09,880 --> 00:10:12,399
Et nous aurons aussi une liste de
toutes les cartes que nous avons,

225
00:10:12,399 --> 00:10:14,190
et si nous nous sentons
ambitieux, nous pourrions être

226
00:10:14,190 --> 00:10:17,060
capable de basculer entre
voitures en cliquant sur eux.

227
00:10:17,060 --> 00:10:20,360
>> Mais cela est, de votre nu
os, très simple Réagir app.

228
00:10:20,360 --> 00:10:22,560
Et si cela est réellement
pas trivial à mettre en œuvre,

229
00:10:22,560 --> 00:10:26,030
mais nous allons montrer que, si vous faites
cela, il est très, très facile de l'étendre

230
00:10:26,030 --> 00:10:27,680
si d'autres personnes de vous aider avec elle.

231
00:10:27,680 --> 00:10:33,750
Nous allons donc passer par quatre étapes
à partir de zéro pour construire ce.

232
00:10:33,750 --> 00:10:36,740
>> Ok, donc les quatre étapes, nous allons
commencer avec la première étape.

233
00:10:36,740 --> 00:10:39,790
La première étape va être
la construction de votre premier composant.

234
00:10:39,790 --> 00:10:44,830
Comme je l'ai déjà dit, un composant dans Réagir
est juste un élément HTML sur les stéroïdes.

235
00:10:44,830 --> 00:10:49,660
Il spécifie le HTML
et certains comportements, et il

236
00:10:49,660 --> 00:10:52,600
précisera comment les gens
il peut interagir avec comment

237
00:10:52,600 --> 00:10:54,270
il aurait état interne.

238
00:10:54,270 --> 00:10:57,630
Comme un bouton saura comme le nombre de
Parfois, il a été cliqué par exemple,

239
00:10:57,630 --> 00:11:01,010
et il saura se trouvait dehors.

240
00:11:01,010 --> 00:11:04,430
>> Donc, nous allons aller de l'avant et de construire notre
premier composant en utilisant JavaScript.

241
00:11:04,430 --> 00:11:09,711
Donc, si la syntaxe un peu bizarre,
qui est parce que ce genre d'est.

242
00:11:09,711 --> 00:11:11,710
Donc, encore une fois, nous allons
de faire une variable appelée

243
00:11:11,710 --> 00:11:14,580
application en utilisant le mot-clé laisser,
ce qui rend une variable,

244
00:11:14,580 --> 00:11:18,210
laissez App égale React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> Réagir est une bibliothèque et a
créer la fonction de classe.

246
00:11:22,609 --> 00:11:24,400
Et cette fonction est
un peu de code que vous

247
00:11:24,400 --> 00:11:29,090
peut utiliser pour créer une nouvelle
Réagir type de composant.

248
00:11:29,090 --> 00:11:32,780
Et donc React.createClass
fait un composant,

249
00:11:32,780 --> 00:11:35,270
et cette composante
être capable de faire des choses.

250
00:11:35,270 --> 00:11:40,460
La principale chose qu'il peut faire est de rendre
quelque chose, comme une fonction de rendu.

251
00:11:40,460 --> 00:11:44,500
>> Encore une fois, si cet indice est pas évidente pour
vous, je vous recommande d'aller sur JS pour les chats

252
00:11:44,500 --> 00:11:45,682
et check it out.

253
00:11:45,682 --> 00:11:47,710
Est-ce que zoomé assez bien?

254
00:11:47,710 --> 00:11:48,490
Cool.

255
00:11:48,490 --> 00:11:50,670
>> Ainsi, chaque composant besoins
d'avoir une fonction de rendu.

256
00:11:50,670 --> 00:11:53,010
La fonction render dit,
que dois-je imprimer sur l'écran?

257
00:11:53,010 --> 00:11:54,760
Mais le composant est
inutile si elle ne le fait pas

258
00:11:54,760 --> 00:11:58,060
savoir quoi imprimer sur l'écran, de sorte
vous devez avoir une fonction de rendu.

259
00:11:58,060 --> 00:12:01,904
>> Donc, dans la chose rendre, vous
juste besoin de retourner une partie HTML.

260
00:12:01,904 --> 00:12:03,820
Et ce qui est cool est que
il ya une chose appelée

261
00:12:03,820 --> 00:12:08,660
JSX, qui est une extension de
JavaScript qui est utilisé par réagir.

262
00:12:08,660 --> 00:12:11,845
Ce qui vous permet d'écrire HTML à l'intérieur
JavaScript de votre, qui

263
00:12:11,845 --> 00:12:13,970
sons un peu bizarre quand
vous pensez d'abord à ce sujet,

264
00:12:13,970 --> 00:12:15,553
mais il fait beaucoup de sens après.

265
00:12:15,553 --> 00:12:17,430
Donc, nous pouvons le faire.

266
00:12:17,430 --> 00:12:21,360
Si vous êtes familier avec le langage HTML, je sais
nous avons une div avec un objectif général

267
00:12:21,360 --> 00:12:22,790
récipient pour des trucs.

268
00:12:22,790 --> 00:12:26,380
Nous pouvons retourner une div, et à l'intérieur
cette div, nous pouvons mettre des choses.

269
00:12:26,380 --> 00:12:32,390
>> Donc, disons que nous voulons rendre juste
un linker straight-up pour le moment.

270
00:12:32,390 --> 00:12:34,890
Le linker, je dirais,
aura une question et la réponse.

271
00:12:34,890 --> 00:12:37,530
Donc, l'intérieur de cette div, nous allons
imprimer un paragraphe

272
00:12:37,530 --> 00:12:42,155
qui dit question-- Quelle est la
réponse ultime à la vie, l'univers?

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

274
00:12:47,640 --> 00:12:50,345
Et alors la réponse est
va être, bien sûr, 42.

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

276
00:12:56,880 --> 00:12:59,730
>> Ce ne sont pas venus du tout.

277
00:12:59,730 --> 00:13:04,164
Ouais, donc, fondamentalement, vous pouvez vraiment
écrire HTML dans votre navigateur.

278
00:13:04,164 --> 00:13:06,330
Et cela va être
imprimé à l'écran.

279
00:13:06,330 --> 00:13:08,250
Donc, nous allons essayer.

280
00:13:08,250 --> 00:13:09,520
>> Donc, nous avons notre composant.

281
00:13:09,520 --> 00:13:12,210
Nous devons dire Réagir à mettre
le composant sur l'écran

282
00:13:12,210 --> 00:13:18,990
afin React.render, donc remarquer que nous
traiter soft comme tout autre élément.

283
00:13:18,990 --> 00:13:21,010
Nous écrivons comme il était un élément HTML.

284
00:13:21,010 --> 00:13:25,100
Comme lieu de dire comme img
pour l'image ou p pour paragraphe,

285
00:13:25,100 --> 00:13:28,120
vous écrivez App, afin App est
traité comme un élément HTML.

286
00:13:28,120 --> 00:13:30,380
Comme je l'ai dit avant, il est
un élément sur les stéroïdes.

287
00:13:30,380 --> 00:13:32,870
>> Donc vous rendez App, et vous
lui donner un endroit pour le mettre.

288
00:13:32,870 --> 00:13:37,170
Et c'est comment vous pouvez
dire où le mettre.

289
00:13:37,170 --> 00:13:46,200
Je l'ai créé d'un simple div sur la
page appelée avec un ID de page,

290
00:13:46,200 --> 00:13:48,300
et voilà où le
élément va aller.

291
00:13:48,300 --> 00:13:49,841
>> Et on ne va pas à courir avec HTML.

292
00:13:49,841 --> 00:13:53,145
Fondamentalement, cela va se faire
mettre à l'intérieur de cet élément de la page

293
00:13:53,145 --> 00:13:54,270
que nous avons sur l'écran.

294
00:13:54,270 --> 00:13:59,210
Donc, il exécute ce code, et il tire cette
chose sur l'écran, de sorte que nous sommes ici.

295
00:13:59,210 --> 00:14:01,770
Nous avons fait notre première composante réagir.

296
00:14:01,770 --> 00:14:08,000
>> Ainsi, tout comme une récapitulation, nous fait en douceur
un nouveau type de composant, non?

297
00:14:08,000 --> 00:14:10,145
Voilà ce que l'React.createClass.

298
00:14:10,145 --> 00:14:12,680
Et en ce que le composant, nous
il dit ce qu'il doit faire.

299
00:14:12,680 --> 00:14:15,590
Chaque fois que cette composante est de
être imprimé sur l'écran,

300
00:14:15,590 --> 00:14:19,300
il va imprimer le div avec
les deux paragraphes à l'intérieur.

301
00:14:19,300 --> 00:14:24,460
>> Et ce que nous avons fait, nous avons fait une nouvelle application
en utilisant la notation équerre app.

302
00:14:24,460 --> 00:14:27,160
Nous avons dit à mettre
à l'intérieur de l'élément de page.

303
00:14:27,160 --> 00:14:29,867
Et si ce que je faisais, il a créé
une nouvelle application à partir de ce modèle.

304
00:14:29,867 --> 00:14:31,200
Et puis je l'ai dit à la rendre.

305
00:14:31,200 --> 00:14:33,680
Donc, il a dit, OK, l'application,
que dois-je imprimer?

306
00:14:33,680 --> 00:14:36,970
App dit, allez imprimer une div
avec deux points à l'intérieur de celui-ci.

307
00:14:36,970 --> 00:14:40,420
Et voila, il ya notre div avec
deux paragraphes à l'intérieur.

308
00:14:40,420 --> 00:14:43,180
Donner un sens à ce jour?

309
00:14:43,180 --> 00:14:46,690
>> Donc, encore une fois, tout le défi de la Réagir
est juste savoir comment faire composants.

310
00:14:46,690 --> 00:14:48,500
Comment faire de la
composants fonctionnent ensemble.

311
00:14:48,500 --> 00:14:51,780
Maintenant que nous avons fait notre premier
composant, revenons

312
00:14:51,780 --> 00:14:54,284
et fabriquer des composants personnalisable.

313
00:14:54,284 --> 00:14:56,700
Donc vous savez comment vous en HTML
peut donner à vos classes de boutons?

314
00:14:56,700 --> 00:14:59,146
Vous pouvez donner vos points d'ancrage le href.

315
00:14:59,146 --> 00:15:00,770
Vous pouvez donner vos entrées un type, non?

316
00:15:00,770 --> 00:15:04,740
Vous pouvez donner plus personnalisé
propriétés à l'ensemble de vos éléments

317
00:15:04,740 --> 00:15:06,490
pour le rendre plus intéressant.

318
00:15:06,490 --> 00:15:09,030
Et nous pouvons le faire effectivement
exactement la même chose.

319
00:15:09,030 --> 00:15:17,500
>> Donc, disons que nous voulons que notre
app pour aller rendre une carte.

320
00:15:17,500 --> 00:15:19,630
En ce moment, nous avons juste
rendu une carte codée en dur.

321
00:15:19,630 --> 00:15:22,530
Nous savons qu'il ya un seul
carte, il peut le faire, donc nous sommes

322
00:15:22,530 --> 00:15:25,960
va essayer de changer cela maintenant si
que nous ne pouvons lui donner une carte.

323
00:15:25,960 --> 00:15:27,410
Il va imprimer la carte.

324
00:15:27,410 --> 00:15:29,380
>> Vous devriez essayer de faire de votre
composants d'un usage très général.

325
00:15:29,380 --> 00:15:31,654
Ainsi de cette façon je pouvais envoyer un courriel
ce mon ami et être comme,

326
00:15:31,654 --> 00:15:33,820
quel que soit flashcard vous avez,
juste nourrir dans ici,

327
00:15:33,820 --> 00:15:35,290
et il va le faire par lui-même.

328
00:15:35,290 --> 00:15:37,650
Vous pouvez mettre l'autre
choses dans votre propre application.

329
00:15:37,650 --> 00:15:40,600
>> Mais d'abord, nous allons briser ce
en deux composants,

330
00:15:40,600 --> 00:15:44,500
mais nous voulons séparer la carte
impression d'une partie de la partie réelle de l'application.

331
00:15:44,500 --> 00:15:46,660
Donc, ce que nous pouvons faire est de nous
peut changer cette App

332
00:15:46,660 --> 00:15:51,300
à CardView, juste un
nouveau nom pour l'application,

333
00:15:51,300 --> 00:15:54,450
et nous pouvons faire une nouvelle
composant appelé App,

334
00:15:54,450 --> 00:15:56,336
à ne pas confondre avec l'ancien App.

335
00:15:56,336 --> 00:16:00,730
Nous avons les createClass,
et comme en HTML,

336
00:16:00,730 --> 00:16:03,590
vous pouvez nid Réagir composants
à l'intérieur de l'autre.

337
00:16:03,590 --> 00:16:16,430
>> Donc, dans cette fonction render,
retour de la fonction CardView,

338
00:16:16,430 --> 00:16:18,234
et cela est exactement la même chose.

339
00:16:18,234 --> 00:16:19,400
Voir pourquoi il est la même chose?

340
00:16:19,400 --> 00:16:22,590
Au lieu de rendre simplement l'application qui
a la div et le jumelage à l'intérieur,

341
00:16:22,590 --> 00:16:26,194
l'application rend le CardView, et la
CardView rend la div et le paragraphe.

342
00:16:26,194 --> 00:16:29,110
Voici donc notre premier exemple de
les éléments d'emboîtement à l'intérieur de l'autre.

343
00:16:29,110 --> 00:16:32,177
Cela a-t-il du sens?

344
00:16:32,177 --> 00:16:33,760
Donc, encore une fois, nous avons un élément CardView.

345
00:16:33,760 --> 00:16:37,250
Nous avons des éléments d'applications
qu'il est plus grand que.

346
00:16:37,250 --> 00:16:40,990
>> OK, si nous voulons que notre CardView-- si vous
donner une bonne CardView une certaine carte,

347
00:16:40,990 --> 00:16:43,370
il va imprimer pour vous, non?

348
00:16:43,370 --> 00:16:48,050
Alors d'abord, nous avons besoin de faire une carte,
Faisons donc un objet de la carte.

349
00:16:48,050 --> 00:17:02,930
Alors laissez ma carte equal--
si vous connaissez tous,

350
00:17:02,930 --> 00:17:05,260
ceci est juste la notation de décision
objet en JavaScript.

351
00:17:05,260 --> 00:17:09,280
Il est un peu comme une struct
en C, donc nous avons fait une carte,

352
00:17:09,280 --> 00:17:15,920
et maintenant nous pouvons passer cette carte comme
une propriété ou un attribut HTML

353
00:17:15,920 --> 00:17:17,290
terminologie pour notre application.

354
00:17:17,290 --> 00:17:20,210
Donc, nous pouvons faire cela, App
carte égale MaCARTE.

355
00:17:20,210 --> 00:17:23,200
>> Vous savez comment en entrée, vous faites
Type d'entrée est égale à texte ou bouton

356
00:17:23,200 --> 00:17:25,240
classe est égal btn pour bootstrap ,?

357
00:17:25,240 --> 00:17:29,500
Même idée, carte App equals--
vous avez à mettre des accolades ici--

358
00:17:29,500 --> 00:17:33,830
Carte App égale MaCARTE, cette
dit que nous devons cet objet de la carte.

359
00:17:33,830 --> 00:17:39,149
Je vais passer comme
biens à la composante de l'application.

360
00:17:39,149 --> 00:17:41,440
Et cette composante de l'application sera
être en mesure d'y accéder et de le faire

361
00:17:41,440 --> 00:17:43,580
choses intéressantes avec elle.

362
00:17:43,580 --> 00:17:47,650
>> Donc notre application va être
donné une carte, donc pour l'instant,

363
00:17:47,650 --> 00:17:49,980
nous allons avoir l'application juste donner
la carte à la CardView

364
00:17:49,980 --> 00:17:53,110
lui-même parce que, comme le soft est pas
va savoir quoi faire avec elle,

365
00:17:53,110 --> 00:17:54,850
donc nous allons simplement le donner à l'CardView.

366
00:17:54,850 --> 00:18:00,050
Donc, nous allons l'adopter le
De même, la carte est égal,

367
00:18:00,050 --> 00:18:05,426
et ainsi de chaque composant peut accéder à la
des choses qui a été donné.

368
00:18:05,426 --> 00:18:07,800
Ils peuvent accéder aux propriétés
qui ont été donnés à elle

369
00:18:07,800 --> 00:18:09,470
en utilisant cette syntaxe, this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> Donc ce qui se passe ici est
vous avez l'objet de MaCARTE.

372
00:18:14,920 --> 00:18:18,250
Vous passez dans l'application
en utilisant une carte App égale MaCARTE.

373
00:18:18,250 --> 00:18:21,420
Cet objet de carte est donnée à votre application.

374
00:18:21,420 --> 00:18:24,400
L'application peut accéder
comme this.props.card.

375
00:18:24,400 --> 00:18:28,780
Il est un peu comme une image
sait ce qu'il est la source.

376
00:18:28,780 --> 00:18:31,972
>> Cette application sait ce qu'il est la carte
est, et il peut faire des choses avec elle.

377
00:18:31,972 --> 00:18:32,930
Il peut faire des calculs.

378
00:18:32,930 --> 00:18:35,290
Il peut prendre des décisions basées hors de lui.

379
00:18:35,290 --> 00:18:39,950
>> Pour l'instant, je vais passer
this.props.card sur la CardView.

380
00:18:39,950 --> 00:18:43,420
Donner un sens à ce jour?

381
00:18:43,420 --> 00:18:45,210
Il va faire plus de sens aujourd'hui.

382
00:18:45,210 --> 00:18:46,990
>> OK, maintenant que nous sommes à CardView.

383
00:18:46,990 --> 00:18:51,719
Notre CardView, compte tenu de la carte, devrait
imprimer sa question et la réponse.

384
00:18:51,719 --> 00:18:54,510
En ce moment, nous avons juste imprimé certains
questions et réponses codées en dur.

385
00:18:54,510 --> 00:18:57,720
Nous devons comprendre que nous devons out--
de demander à la carte qui ils nous ont donné

386
00:18:57,720 --> 00:19:01,360
Quelle est la question et la réponse, et
puis imprimer ceci dans l'écran.

387
00:19:01,360 --> 00:19:02,470
>> Donc, nous pouvons le faire ici.

388
00:19:02,470 --> 00:19:06,135
En rendre begin-- abord faire égale.

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

390
00:19:08,710 --> 00:19:13,050
Donc, ce que nous faisons ici est que nous savons que
les cartes nous sont donnés à une propriété,

391
00:19:13,050 --> 00:19:13,580
droit?

392
00:19:13,580 --> 00:19:15,930
Il est donné à nous comme une entrée.

393
00:19:15,930 --> 00:19:19,440
Comme il est presque comme
arguments à une fonction.

394
00:19:19,440 --> 00:19:22,810
La carte est un argument
presque à cette CardView.

395
00:19:22,810 --> 00:19:25,239
>> Nous extrayons cela, et mis
dans la question variable.

396
00:19:25,239 --> 00:19:27,280
Assurez-vous que la réponse est allé
à la réponse variable.

397
00:19:27,280 --> 00:19:31,130
Invite cette carte pour répondre.

398
00:19:31,130 --> 00:19:35,072
Et maintenant que nous avons ces derniers,
au lieu d'imprimer sur ce texte,

399
00:19:35,072 --> 00:19:37,030
nous allons imprimer
tout ce qu'ils nous ont donné.

400
00:19:37,030 --> 00:19:43,580
>> Donc, ce stuff-- nous allons donc
pour éteindre Question Réponse.

401
00:19:43,580 --> 00:19:46,380
Voyons voir si cela fonctionne.

402
00:19:46,380 --> 00:19:52,800
Cool, nous allons donc étape à travers elle
une fois de plus juste pour être sûr.

403
00:19:52,800 --> 00:20:00,470
>> Donc, ma carte est un objet de la carte, et nous
sont donnant cette carte à l'application.

404
00:20:00,470 --> 00:20:04,790
Et l'application va prendre la
carte et donnez-la à CardView.

405
00:20:04,790 --> 00:20:09,190
Et ce CardView dit, si vous
me donner tout objet flashcard,

406
00:20:09,190 --> 00:20:11,920
Je vais imprime sa question
et sa réponse, non?

407
00:20:11,920 --> 00:20:14,590
>> Donc ce que je pourrais faire est que je peux
envoyer ce code, la première

408
00:20:14,590 --> 00:20:16,580
comme 10 lignes de mon code, à mon ami.

409
00:20:16,580 --> 00:20:18,820
Il pourrait l'intégrer dans
sa propre demande.

410
00:20:18,820 --> 00:20:27,200
Et tant qu'il fait la même chose,
comme la carte de cette CardView égale,

411
00:20:27,200 --> 00:20:30,580
aussi longtemps que il a créé le CardView
et il a donné la bonne information,

412
00:20:30,580 --> 00:20:31,987
il pourrait rendre sa propre carte.

413
00:20:31,987 --> 00:20:34,320
Et de cette façon, il est vraiment un
façon cool pour vous de construire

414
00:20:34,320 --> 00:20:35,906
composants qui utilisent l'autre, non?

415
00:20:35,906 --> 00:20:38,280
Cette carte, je pourrais publier
ce CardView sur l'Internet,

416
00:20:38,280 --> 00:20:39,790
et les gens seraient en mesure de l'utiliser.

417
00:20:39,790 --> 00:20:45,070
Donc, fondamentalement, il est comme l'un des
fonctions standard dans la bibliothèque C.

418
00:20:45,070 --> 00:20:47,280
>> Il est une fonction où
quelqu'un l'a écrit.

419
00:20:47,280 --> 00:20:48,419
Vous donnez une certaine entrée.

420
00:20:48,419 --> 00:20:49,710
Il va produire une certaine sortie.

421
00:20:49,710 --> 00:20:50,890
Vous ne vous souciez pas comment cela fonctionne en interne.

422
00:20:50,890 --> 00:20:53,790
Tant que vous lui donnez le droit
entrée, il va prendre la bonne sortie.

423
00:20:53,790 --> 00:20:57,850
>> Et un composant peut être
pensé de la même façon.

424
00:20:57,850 --> 00:21:00,280
Cette CardView est comme
une fonction de bibliothèque.

425
00:21:00,280 --> 00:21:03,400
Si vous lui donnez une certaine carte
comme une propriété, il va

426
00:21:03,400 --> 00:21:05,095
imprimer le contenu de cette carte.

427
00:21:05,095 --> 00:21:16,820
Comme si je change ma carte à
à la place être comme ce qui est 5 plus 37,

428
00:21:16,820 --> 00:21:19,210
il mettra à jour en conséquence.

429
00:21:19,210 --> 00:21:21,955
Donc, en changeant simplement l'entrée,
il obtient une certaine sortie.

430
00:21:21,955 --> 00:21:24,830
Alors vous pouvez penser de composants presque
que les fonctions de cette manière, ce qui

431
00:21:24,830 --> 00:21:25,920
vous pouvez mettre ensemble.

432
00:21:25,920 --> 00:21:29,440
Vous obtenez entrée, comme cela CardView
comme entrée, vous obtenez une sortie.

433
00:21:29,440 --> 00:21:31,900
Dans ce cas, la sortie est le code HTML.

434
00:21:31,900 --> 00:21:34,404
Donner un sens à ce jour?

435
00:21:34,404 --> 00:21:36,890
Cool, là encore, les propriétés sont
comment vous pouvez transmettre des informations

436
00:21:36,890 --> 00:21:40,900
dans et hors des composants.

437
00:21:40,900 --> 00:21:42,740
>> OK, donc nous allons faire ce
chose interactive.

438
00:21:42,740 --> 00:21:44,450
Actuellement, il est un peu ennuyeux.

439
00:21:44,450 --> 00:21:45,520
Qu'est-ce que [inaudible]?

440
00:21:45,520 --> 00:21:48,210
Vous pouvez imprimer quelques-uns,
mais qui est tout ce qu'il peut faire.

441
00:21:48,210 --> 00:21:51,550
>> Donc revenons à la
vieille question juste pour aujourd'hui.

442
00:21:51,550 --> 00:21:54,405
Ok, donc en ce moment ces composants
sont ennuyeux parce que tout ce qu'ils font,

443
00:21:54,405 --> 00:21:55,030
ils obtiennent entrée.

444
00:21:55,030 --> 00:21:56,100
Ils font la sortie, à droite?

445
00:21:56,100 --> 00:21:57,049
Voilà un peu ennuyeux.

446
00:21:57,049 --> 00:21:59,090
Nous voulons avoir notre
composants pour pouvoir avoir

447
00:21:59,090 --> 00:22:02,150
une sorte de l'état interne,
comme souvenir de quelque chose.

448
00:22:02,150 --> 00:22:05,320
>> Pour un linker, par
par exemple, ce genre d'état

449
00:22:05,320 --> 00:22:07,550
pourriez vous voulez
souviendront linker?

450
00:22:07,550 --> 00:22:09,740
Quel statut temporaire
pourriez vous voulez vous rappeler

451
00:22:09,740 --> 00:22:12,491
pour une carte flash dans une application flashcard?

452
00:22:12,491 --> 00:22:13,990
Public: Que ce soit en été renversé?

453
00:22:13,990 --> 00:22:14,990
NEEL MEHTA: Ouais, à droite.

454
00:22:14,990 --> 00:22:17,665
Donc, vous pourriez vouloir garder
sont une trace de vous rencontrez ou êtes

455
00:22:17,665 --> 00:22:19,100
vous faites face vers le bas sur la carte.

456
00:22:19,100 --> 00:22:23,420
Sur Facebook, par exemple, vous le feriez
voulez vous rappeler où dans le fil de nouvelles

457
00:22:23,420 --> 00:22:25,870
êtes-vous ou comme l'OMS est le profil
faites-vous en ce moment.

458
00:22:25,870 --> 00:22:30,127
>> Sur Messenger, comme ce texte
tapez dans la boîte d'entrée, à droite?

459
00:22:30,127 --> 00:22:31,710
Si vous actualisez la page, il disparaît.

460
00:22:31,710 --> 00:22:32,793
Mais vous ne vous souciez pas vraiment.

461
00:22:32,793 --> 00:22:33,770
Il est juste temporaire.

462
00:22:33,770 --> 00:22:34,548
Oui?

463
00:22:34,548 --> 00:22:36,152
>> AUDIENCE: [inaudible]

464
00:22:36,152 --> 00:22:38,360
NEEL MEHTA: Comme un éclair
carte, comme vous pouvez être voir

465
00:22:38,360 --> 00:22:40,290
du côté de la question ou du côté de la réponse?

466
00:22:40,290 --> 00:22:41,070
>> AUDIENCE: OK.

467
00:22:41,070 --> 00:22:43,270
>> NEEL MEHTA: Comme un
flashcard recto-verso, non?

468
00:22:43,270 --> 00:22:46,370
Ouais, si vous voulez
avoir cette idée de l'entreprise

469
00:22:46,370 --> 00:22:50,370
Je dois propriétés, qui est comme entrées,
mais l'Etat, qui est temporaire, euh,

470
00:22:50,370 --> 00:22:51,839
où vous êtes sur la page, à droite?

471
00:22:51,839 --> 00:22:54,380
Encore une fois, je l'ai dit dans Facebook
Messenger, je dois, comme personne qui

472
00:22:54,380 --> 00:22:56,550
vous consultez Facebook
ou qui est le profil, à droite?

473
00:22:56,550 --> 00:22:58,030
>> Ceci est seulement temporaire.

474
00:22:58,030 --> 00:23:01,200
Il est important de montrer à l'utilisateur
ce qui se passe, mais rafraîchir la page.

475
00:23:01,200 --> 00:23:02,250
Il n'a pas vraiment d'importance.

476
00:23:02,250 --> 00:23:04,530
Il est donc état temporaire,
donc nous avons tout ce qu'il Etat.

477
00:23:04,530 --> 00:23:06,250
>> Donc, encore une fois, il ya l'état et les accessoires.

478
00:23:06,250 --> 00:23:09,084
Props est entrée donnés
à partir de votre source de données.

479
00:23:09,084 --> 00:23:10,250
État est juste comme valeurs par défaut.

480
00:23:10,250 --> 00:23:13,700
Il est juste comme des choses qui
rend la chose interactive.

481
00:23:13,700 --> 00:23:17,720
>> Donc, dans notre CardView-- ayons
notre CardView-- il était bien agréable.

482
00:23:17,720 --> 00:23:21,420
Ce que nous allons faire ici, nous allons
toucher CardView et seulement CardView.

483
00:23:21,420 --> 00:23:25,105
Et alors mon ami qui a obtenu cela, ils
ne serait pas remarqué de différence.

484
00:23:25,105 --> 00:23:27,230
Ils ne voulaient pas avoir à changer
tout de leur propre code,

485
00:23:27,230 --> 00:23:29,410
mais ils verraient leur
CardView obtenu gonflée.

486
00:23:29,410 --> 00:23:31,270
Voilà une belle partie sur les composants.

487
00:23:31,270 --> 00:23:35,290
>> OK, donc dans notre CardView, nous allons essayer de
garder une trace de savoir si nous phase jusqu'en

488
00:23:35,290 --> 00:23:36,560
ou vers le bas.

489
00:23:36,560 --> 00:23:40,480
Dans Réagir nous faisons cela en premier
spécifiant l'état initial.

490
00:23:40,480 --> 00:23:42,070
Où commence la carte?

491
00:23:42,070 --> 00:23:48,480
>> Donc, être une fonction appelée getInitialState
fonction, et nous retournons un objet.

492
00:23:48,480 --> 00:23:53,310
Cet objet contient un certain état, et
un état est juste une paire clé-valeur.

493
00:23:53,310 --> 00:23:56,950
Comme dans instruire, vous avez une clé et un
valeur, vous avez comme le nom est une chaîne.

494
00:23:56,950 --> 00:24:01,410
>> Dans ce cas, disons avant est vrai.

495
00:24:01,410 --> 00:24:03,760
Ce dit que nous avons un état.

496
00:24:03,760 --> 00:24:06,570
Une composante de l'état
est un attribut appelé avant.

497
00:24:06,570 --> 00:24:09,649
[Inaudible], donc, par défaut,
nous sommes à l'avant de la carte,

498
00:24:09,649 --> 00:24:11,440
et nous pouvons changer cela
comme nous renversons la carte.

499
00:24:11,440 --> 00:24:13,380
Donner un sens?

500
00:24:13,380 --> 00:24:18,190
>> OK, donc en rendons, en ce moment, nous sommes
montrant la question et la réponse.

501
00:24:18,190 --> 00:24:20,860
Maintenant, ce que nous devrions faire
montrer est la question

502
00:24:20,860 --> 00:24:24,370
si nous sommes à l'avant de la carte de sorte
la réponse est pour le dos de la carte.

503
00:24:24,370 --> 00:24:26,850
Voilà pourquoi vous faites tous
la carte interactive.

504
00:24:26,850 --> 00:24:28,100
Essayons donc et cela ici.

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

506
00:24:31,600 --> 00:24:33,620
Eh bien, tout simplement faire une variable.

507
00:24:33,620 --> 00:24:37,790
Nous pouvons demander maintenant this.state.front.

508
00:24:37,790 --> 00:24:42,010
Nous accédons indiquer le même nous
accès des accessoires, de sorte this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Si nous sommes avant, puis le texte
est this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
Si nous sommes sur le devant de la
carte, nous allons essayer et grab

512
00:24:51,360 --> 00:24:52,485
la question de la carte.

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

514
00:24:54,782 --> 00:24:57,240
Sinon, si nous sommes sur le dos
de la carte, que faisons-nous?

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

516
00:25:01,830 --> 00:25:02,750
>> PUBLIC: La réponse?

517
00:25:02,750 --> 00:25:05,041
>> NEEL MEHTA: Yep, pour que le texte
this.props.card.answer égaux.

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

519
00:25:08,472 --> 00:25:10,930
Mais si vous remarquez, nous utilisons
l'état de prendre une décision

520
00:25:10,930 --> 00:25:14,420
parce que maintenant le composant
sera différent

521
00:25:14,420 --> 00:25:16,710
basée hors comment ceux-ci interagissent avec elle.

522
00:25:16,710 --> 00:25:20,355
Donc, au lieu d'imprimer ce,
nous suffit d'imprimer le texte.

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

524
00:25:25,270 --> 00:25:28,650
Cool, maintenant, comme vous le voyez,
nous ne voyons que la question.

525
00:25:28,650 --> 00:25:37,720
Et si je change l'état manuellement ici
à l'avant est faux nous obtenons 42 dos.

526
00:25:37,720 --> 00:25:39,720
>> Donc, encore une fois, cette composante
a son propre état.

527
00:25:39,720 --> 00:25:43,440
Comme un bouton sait si
il a été pressé ou non,

528
00:25:43,440 --> 00:25:46,080
cette chose sait ce qui est sur
l'avant ou à l'arrière.

529
00:25:46,080 --> 00:25:48,320
Par défaut, il est sur le front.

530
00:25:48,320 --> 00:25:50,840
Et puis, si elle est sur le front,
nous imprimons sur la question.

531
00:25:50,840 --> 00:25:53,106
Si il est sur le dos, nous allons
imprimer la réponse.

532
00:25:53,106 --> 00:25:54,980
Donc, encore une fois, l'information
donnée est la même.

533
00:25:54,980 --> 00:25:59,090
Il semble juste différente
basé sur la façon dont vous le programmez.

534
00:25:59,090 --> 00:26:02,670
Ainsi, par exemple, Facebook Messenger,
même si vous obtenez la même source de données,

535
00:26:02,670 --> 00:26:05,170
il peut être différent
parce que l'État est différent.

536
00:26:05,170 --> 00:26:08,421
Vous êtes à la recherche à un
Le message de personne différente.

537
00:26:08,421 --> 00:26:10,930
>> OK, donc tout cela est bien et
bon, mais maintenant, ce qui est fait

538
00:26:10,930 --> 00:26:15,940
nous rendre capables de changer, si
notre carte est avant ou l'arrière.

539
00:26:15,940 --> 00:26:19,010
Nous pouvons faire cela en ajoutant un flip
bouton, un bouton à la carte qui

540
00:26:19,010 --> 00:26:22,950
va retourner la carte si elle est [inaudible].

541
00:26:22,950 --> 00:26:31,770
Donc, nous allons ajouter un bouton ici, ce
bouton, ce bouton va dire flip.

542
00:26:31,770 --> 00:26:35,650
>> Et maintenant, il
ne rien faire.

543
00:26:35,650 --> 00:26:37,075
Il semble juste agréable.

544
00:26:37,075 --> 00:26:43,650
Ce que nous pouvons faire est que nous pouvons ajouter un clic
gestionnaire, onClick égale this.flip,

545
00:26:43,650 --> 00:26:44,820
et nous allons définir la médaille plus tard.

546
00:26:44,820 --> 00:26:47,120
Mais fondamentalement, onClick
est une fonction qui

547
00:26:47,120 --> 00:26:48,675
est appelée lorsque l'utilisateur clique dessus.

548
00:26:48,675 --> 00:26:52,330
>> Donc le bouton saura
quand il a été cliqué.

549
00:26:52,330 --> 00:26:54,750
Est allé il a été cliqué,
il va retourner la carte.

550
00:26:54,750 --> 00:26:58,382
Il est un peu comme votre
livreur de pizza.

551
00:26:58,382 --> 00:27:01,590
Vous êtes comme, tout droit, chaque fois que quelqu'un
appelle-moi, je vais livrer une pizza, non?

552
00:27:01,590 --> 00:27:03,420
>> Vous enregistrez cet écouteur.

553
00:27:03,420 --> 00:27:04,530
Vous écoutez pour un événement.

554
00:27:04,530 --> 00:27:07,657
Vous avez appelé, et quand le
événement se produit, vous faites quelque chose.

555
00:27:07,657 --> 00:27:08,240
Vous obtenez une pizza.

556
00:27:08,240 --> 00:27:11,480
Dans ce cas, lorsque vous êtes
cliqué, vous retournez la carte.

557
00:27:11,480 --> 00:27:14,560
>> Et donc nous avons besoin de définir une
fonction qui va retourner la carte,

558
00:27:14,560 --> 00:27:17,930
de sorte que nous allons écrire ce droit
ici, flip fonction.

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

560
00:27:20,850 --> 00:27:23,680
Et que pensez-vous bascule va faire?

561
00:27:23,680 --> 00:27:27,180
Encore une fois cette est appelée lorsque
nous cliquons sur le bouton flip.

562
00:27:27,180 --> 00:27:29,406
Qu'est-ce que la fonction bascule devrait faire?

563
00:27:29,406 --> 00:27:34,136
>> AUDIENCE: Changement this.state.front
de vrai à faux, faux à vrai.

564
00:27:34,136 --> 00:27:38,420
>> NEEL MEHTA: Ouais, donc prendre toutes les
this.front est-- l'état avant est.

565
00:27:38,420 --> 00:27:40,930
Prenez l'état avant, si
il est vrai, font fausse.

566
00:27:40,930 --> 00:27:42,530
Si elle est fausse, rendre vrai, non?

567
00:27:42,530 --> 00:27:45,330
Essayons donc de cela.

568
00:27:45,330 --> 00:27:48,240
>> Vous ne pouvez pas changer d'état
tout en faisant this.state.

569
00:27:48,240 --> 00:27:50,380
Vous ne pouvez pas faire cela.

570
00:27:50,380 --> 00:27:52,030
Vous ne pouvez pas faire cela.

571
00:27:52,030 --> 00:27:55,810
Vous devez utiliser une fonction
appelé this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Donc vous pouvez dire this.setState avant
colon-ci où, encore une fois, l'exclamation

573
00:28:03,230 --> 00:28:04,330
le point signifie le contraire.

574
00:28:04,330 --> 00:28:07,420
Je suppose que si cela. state.front
est vrai, il va se fausse.

575
00:28:07,420 --> 00:28:09,170
Donc, nous allons définir l'état
de vrai à faux.

576
00:28:09,170 --> 00:28:11,430
Si elle est fausse, nous allons
régler false à true.

577
00:28:11,430 --> 00:28:17,210
>> Juste remarquons que nous définir et obtenir légèrement
différemment, et nous allons donc essayer.

578
00:28:17,210 --> 00:28:18,675
Bada Bing, regardez cette.

579
00:28:18,675 --> 00:28:21,810
Le bouton le fera maintenant
passer l'avant vers l'arrière Etat.

580
00:28:21,810 --> 00:28:24,990
>> Et voici où vous voyez une
peu de la magie de réagir.

581
00:28:24,990 --> 00:28:28,420
Comme on n'a jamais dit que ce à nouveau rendu.

582
00:28:28,420 --> 00:28:30,910
On n'a jamais dit que ce redessiner rien.

583
00:28:30,910 --> 00:28:32,630
Si vous faites cela
sans Réagir, vous seriez

584
00:28:32,630 --> 00:28:34,588
ont to-- comme lorsque le
bouton bascule est cliqué,

585
00:28:34,588 --> 00:28:37,290
vous auriez à dire à
manuellement re-rendre, non?

586
00:28:37,290 --> 00:28:43,050
>> Réagir est vraiment cool en ce que si vous
lui donner un certain état et propriétés,

587
00:28:43,050 --> 00:28:45,760
il sera toujours rendre
exactement la même chose.

588
00:28:45,760 --> 00:28:48,690
Et donc quand nous jamais nous changeons
l'état et les propriétés,

589
00:28:48,690 --> 00:28:50,819
réagir tout simplement ré-rend le tout.

590
00:28:50,819 --> 00:28:52,860
Il sait qu'il ya une
une à une correspondance

591
00:28:52,860 --> 00:28:57,270
entre l'État et paramètre et HTML.

592
00:28:57,270 --> 00:29:00,110
Donc, chaque fois l'un de ces
changements par par un état de jeu,

593
00:29:00,110 --> 00:29:03,750
il va changer la façon dont le
rémunération est un nouveau rendu.

594
00:29:03,750 --> 00:29:06,650
Et donc, fondamentalement Réagir est comme
en attente pour vous de changer.

595
00:29:06,650 --> 00:29:09,870
>> Chaque fois que cela change quelque chose,
il va re-rendre la page entière.

596
00:29:09,870 --> 00:29:12,480
Et si cela semble inefficace,
il est parce que ce serait,

597
00:29:12,480 --> 00:29:15,050
mais réagir utilise une chose
appelé Ombre DOM.

598
00:29:15,050 --> 00:29:19,950
Au lieu de tirer directement à la page, il
maintient l'arbre HTML virtuel en mémoire.

599
00:29:19,950 --> 00:29:23,620
>> Vous savez, HTML est comme un arbre,
comme une structure de données hiérarchique.

600
00:29:23,620 --> 00:29:28,990
Il conserve un faux arbre en mémoire,
et chaque fois que vous mettez à jour la page,

601
00:29:28,990 --> 00:29:31,940
il va dessiner un autre faux
arbre, et il va calculer

602
00:29:31,940 --> 00:29:35,120
Quel changement dont il a besoin pour faire le
page pour faire les deux arbres égaux.

603
00:29:35,120 --> 00:29:38,540
Donc, fondamentalement, il est pratiquement
re-rend beaucoup.

604
00:29:38,540 --> 00:29:41,540
Et puis il ne l'aime pas les changements
page dans peu de réglages au besoin,

605
00:29:41,540 --> 00:29:44,240
il est donc très, très, très efficace.

606
00:29:44,240 --> 00:29:46,970
>> Donc, fondamentalement Réagir volonté
chaque fois que vous changez quelque chose,

607
00:29:46,970 --> 00:29:49,010
il va re-rendre la page virtuellement.

608
00:29:49,010 --> 00:29:52,830
Il va comprendre ce que dois-je
changer pour rendre la page réelle reflète

609
00:29:52,830 --> 00:29:55,602
la page virtuelle, et il va le faire.

610
00:29:55,602 --> 00:29:56,560
Voilà le DOM virtuel.

611
00:29:56,560 --> 00:29:59,350
Il est l'un des plus grands
caractéristiques de réagir.

612
00:29:59,350 --> 00:30:00,880
>> Cela a-t-il du sens?

613
00:30:00,880 --> 00:30:01,540
Des questions?

614
00:30:01,540 --> 00:30:02,040
Oui?

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

616
00:30:05,568 --> 00:30:08,969
>> Public: Comment fonctionne
comparer encore à la MVC

617
00:30:08,969 --> 00:30:10,760
dont nous avons parlé
avant que des ressources comme.

618
00:30:10,760 --> 00:30:13,527
>> NEEL MEHTA: Oui, la question
est comment se comparent à MVC?

619
00:30:13,527 --> 00:30:14,610
Vous avez demandé sur les ressources.

620
00:30:14,610 --> 00:30:16,445
Eh bien, nous allons parler de la façon dont il fonctionne.

621
00:30:16,445 --> 00:30:18,190
>> Dans MVC, vous souhaitez mettre à jour le modèle.

622
00:30:18,190 --> 00:30:20,560
Dans ce cas, nous aurions un modèle de carte.

623
00:30:20,560 --> 00:30:24,540
La vue aurait le
bouton bascule, et le contrôle

624
00:30:24,540 --> 00:30:26,310
aurait pour fonction de flip.

625
00:30:26,310 --> 00:30:28,450
Donc, la vue serait dire la
contrôleur pour Flip Flip.

626
00:30:28,450 --> 00:30:30,370
Retourner serait dire la
modèle à changer, non?

627
00:30:30,370 --> 00:30:33,915
>> Et donc quand vous faites un MVC, vous
écouter pour le modèle à changer,

628
00:30:33,915 --> 00:30:37,150
et vous êtes-rendu de la vue en conséquence.

629
00:30:37,150 --> 00:30:39,210
Ou vous avez juste à aimer
disposer le dispositif de commande.

630
00:30:39,210 --> 00:30:42,418
Attendez que le modèle à changer, puis
choisir une partie de comme une chose

631
00:30:42,418 --> 00:30:44,032
changer.

632
00:30:44,032 --> 00:30:45,740
Ici, nous avons une chose,
mais dans une grande application,

633
00:30:45,740 --> 00:30:48,510
il faut aimer se rappeler ce que
le changement dans chaque endroit unique,

634
00:30:48,510 --> 00:30:50,290
il est donc un peu ennuyeux.

635
00:30:50,290 --> 00:30:53,670
Et donc Réagir est agréable
parce qu'il a une Ombre Dom.

636
00:30:53,670 --> 00:30:56,040
Il peut se permettre de simplement
réécrire la chose entière.

637
00:30:56,040 --> 00:30:58,680
Vous ne devez pas sélective
comme deviner ce que la mise à jour.

638
00:30:58,680 --> 00:31:02,186
>> Sur Facebook, si vous le souhaitez
obtenir un nouveau message, dans MVC,

639
00:31:02,186 --> 00:31:04,060
vous auriez à retenir,
OK, changer des choses

640
00:31:04,060 --> 00:31:06,260
au sommet de la
la page, l'icône de message.

641
00:31:06,260 --> 00:31:08,290
Pop aussi une nouvelle fenêtre au fond.

642
00:31:08,290 --> 00:31:10,070
Assurez-vous également une chose nouvelle dans cette fenêtre.

643
00:31:10,070 --> 00:31:11,060
Aussi jouer un son.

644
00:31:11,060 --> 00:31:13,150
>> Cela fait beaucoup de choses
sortir en même temps.

645
00:31:13,150 --> 00:31:15,320
Et si vous ne le faites pas
avoir une ombre Dom, vous seriez

646
00:31:15,320 --> 00:31:18,740
avoir à faire cela manuellement, car
vous ne pouvez pas vous débarrasser de toute la page.

647
00:31:18,740 --> 00:31:21,430
Vous ne pouvez pas vous permettre, si vous avez
Pour changer chaque chose manuellement,

648
00:31:21,430 --> 00:31:23,990
qui est vraiment gênant dans MVC.

649
00:31:23,990 --> 00:31:27,640
>> Ainsi, afin d'être
économe, ils sélective

650
00:31:27,640 --> 00:31:30,750
mettre à jour la page, ce qui est
efficace, mais aussi ennuyeux.

651
00:31:30,750 --> 00:31:34,002
Dans réagir, en raison de l'Ombre
Dom, vous obtenez deux choses gratuitement.

652
00:31:34,002 --> 00:31:35,710
Il est efficace car
de l'Ombre Dom.

653
00:31:35,710 --> 00:31:37,210
Le goulot d'étranglement est mise à jour la page.

654
00:31:37,210 --> 00:31:40,292
Il ne fait pas la manipulation de l'arbre.

655
00:31:40,292 --> 00:31:41,250
Vous obtenez l'efficacité.

656
00:31:41,250 --> 00:31:45,420
Vous bénéficiez également de la facilité d'utilisation, car
si vous venez de réécrire la page entière,

657
00:31:45,420 --> 00:31:48,970
mais vous savez, tout droit, les choses
vont être sur la page quelque part.

658
00:31:48,970 --> 00:31:51,180
Il pourrait être dans un endroit différent, mais
ça va être sur la page, à droite?

659
00:31:51,180 --> 00:31:52,860
Donc, vous venez de nouveau rendu
la chose entière virtuellement,

660
00:31:52,860 --> 00:31:55,540
et vous pourriez faire quelques
des modifications à la page elle-même.

661
00:31:55,540 --> 00:31:57,850
>> Donc, encore une fois, dans MVC vous
aurait à choisir

662
00:31:57,850 --> 00:32:01,840
entre la facilité d'utilisation et l'efficacité,
et réagir, vous obtenez à la fois.

663
00:32:01,840 --> 00:32:04,020
Il est donc préférable.

664
00:32:04,020 --> 00:32:05,220
Donner un sens?

665
00:32:05,220 --> 00:32:06,676
Solide.

666
00:32:06,676 --> 00:32:12,080
>> OK, alors voyons parlons
un peu plus sur l'étape 4,

667
00:32:12,080 --> 00:32:14,740
comment nous pouvons intégrer des composants.

668
00:32:14,740 --> 00:32:16,260
Donc, nous avons ce droit maintenant.

669
00:32:16,260 --> 00:32:19,420
Nous avons notre petite touche cool.

670
00:32:19,420 --> 00:32:23,157
Nous pouvons retourner en arrière et
de suite, et voilà tout ce qu'il fait.

671
00:32:23,157 --> 00:32:24,990
Disons que nous voulons
avoir un autre composant.

672
00:32:24,990 --> 00:32:28,730
Disons que notre application flashcard devrait
contenir une liste de toutes les cartes

673
00:32:28,730 --> 00:32:31,520
que vous avez, ce qui signifie que nous avons
devrait avoir un autre composant.

674
00:32:31,520 --> 00:32:32,970
Eh bien, peut-être appeler une vue de liste.

675
00:32:32,970 --> 00:32:36,200
Faisons une vue liste
coexiste avec l'CardView,

676
00:32:36,200 --> 00:32:39,680
et ce point de vue de liste et CardView
aimeront travailler ensemble.

677
00:32:39,680 --> 00:32:43,190
Et vous pouvez les combiner
pour rendre notre application pour vous.

678
00:32:43,190 --> 00:32:45,160
>> Alors d'abord, faisons un
couple plus de cartes à droite.

679
00:32:45,160 --> 00:32:46,370
Disons que, quelles cartes?

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

681
00:32:49,619 --> 00:32:51,910
Et juste pour que je ne dois pas
vous ennuyer avec le tapant dans,

682
00:32:51,910 --> 00:32:53,410
Je vais juste de le copier à partir d'ici.

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

684
00:33:01,664 --> 00:33:03,580
Et donc je vais pas
lui donner une seule carte.

685
00:33:03,580 --> 00:33:06,910
Je vais lui donner une gamme de cartes.

686
00:33:06,910 --> 00:33:10,240
Donc, les premières applications
va se casser pour le moment.

687
00:33:10,240 --> 00:33:14,717
Très bien, nous allons donc faire
cette mesure de gérer plusieurs cartes.

688
00:33:14,717 --> 00:33:17,800
Alors d'abord, nous allons lui donner, pas
juste une carte, mais une gamme de cartes,

689
00:33:17,800 --> 00:33:18,700
comme une liste de cartes.

690
00:33:18,700 --> 00:33:20,980
Et dans ce cas, nous avons trois d'entre eux.

691
00:33:20,980 --> 00:33:27,280
>> Très bien, alors si l'application est
aller pour obtenir une liste des cartes,

692
00:33:27,280 --> 00:33:29,870
et il va décider
l'un pour montrer au CardView.

693
00:33:29,870 --> 00:33:33,740
Le CardView ne peut
rendre une carte, mais l'application

694
00:33:33,740 --> 00:33:37,610
obtient une liste de toutes les cartes, à droite?

695
00:33:37,610 --> 00:33:40,820
>> Alors, quand vous comprenez l'un
carte à donner à CardView,

696
00:33:40,820 --> 00:33:44,660
comment voulez-vous deviner que vous pourriez être en mesure
pour prendre une décision à propos de la carte qui

697
00:33:44,660 --> 00:33:47,064
montrer?

698
00:33:47,064 --> 00:33:49,980
Pour vous donner une idée, il est temporairement
Vous serez affichez une certaine carte.

699
00:33:49,980 --> 00:33:53,260
Si vous actualisez la page, vous allez
juste revenir à la première carte.

700
00:33:53,260 --> 00:33:55,464
Voilà OK parce qu'il est temporaire.

701
00:33:55,464 --> 00:33:56,630
Quelle technique pourrions-nous utiliser?

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

703
00:34:02,534 --> 00:34:08,760
>> AUDIENCE: Vous pourriez faire une variable
Ainsi, tout comme vous aviez avant.

704
00:34:08,760 --> 00:34:11,989
Est-ce vrai, vous pourriez
ont carte actuelle est égale à 1?

705
00:34:11,989 --> 00:34:14,150
>> NEEL MEHTA: Ouais, donc nous
voulez avoir l'état, non?

706
00:34:14,150 --> 00:34:16,080
Vous souhaitez utiliser Etat dans le
composante de comprendre

707
00:34:16,080 --> 00:34:17,288
quelle carte voulons-nous obtenir.

708
00:34:17,288 --> 00:34:19,290
Comme nous avons une liste de
toutes les cartes, nous allons

709
00:34:19,290 --> 00:34:21,630
utiliser l'état de comprendre
une de la première carte,

710
00:34:21,630 --> 00:34:23,710
seconde carte, la troisième carte, et ainsi de suite.

711
00:34:23,710 --> 00:34:28,760
>> Donc, une application pour une application obtiendra une
avoir la fonction getInitialState,

712
00:34:28,760 --> 00:34:35,020
getInitialState retour de la fonction.

713
00:34:35,020 --> 00:34:39,929
Et nous dirons juste activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Alors maintenant, notre application a son propre état.

715
00:34:42,889 --> 00:34:47,179
>> Et donc maintenant rendre, à comprendre
une carte, nous allons simplement aller à la gamme

716
00:34:47,179 --> 00:34:49,969
et de saisir la chose à cet index.

717
00:34:49,969 --> 00:34:53,580
Sélectionnez carte this.props.cards égales
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
Donc, comme vous voyez ici, les accessoires et
l'état effectivement travailler ensemble.

720
00:35:00,162 --> 00:35:08,990
Alors, maintenant que nous avons notre ActiveCard,
nous l'appellerons ActiveCard,

721
00:35:08,990 --> 00:35:10,470
et nous allons voir si cela fonctionne.

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

723
00:35:20,320 --> 00:35:20,820
[INAUDIBLE]

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

725
00:35:41,504 --> 00:35:44,900
>> Oh, ce fut une erreur de texte.

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

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

728
00:35:51,420 --> 00:35:54,840
>> Cool, yep, alors maintenant nous étions de retour
à l'endroit où nous étions avant, non?

729
00:35:54,840 --> 00:35:57,100
Ancien programme même, sauf
maintenant nous pouvons soutenir

730
00:35:57,100 --> 00:35:59,390
une liste des cartes, et pas seulement une seule carte.

731
00:35:59,390 --> 00:36:04,130
Et maintenant, encore une fois, si nous changeons le
activeIndex, nous pouvons aller de 0 à 1,

732
00:36:04,130 --> 00:36:07,330
et maintenant que la deuxième carte,
puis nous sommes allés à 0.

733
00:36:07,330 --> 00:36:10,390
Alors, voici une nouvelle
gonflée version de notre.

734
00:36:10,390 --> 00:36:16,000
>> OK, alors maintenant nous allons avoir une vue de liste
montre toutes les cartes dans votre programme,

735
00:36:16,000 --> 00:36:19,980
donc nous allons faire une nouvelle
composant appelé listView.

736
00:36:19,980 --> 00:36:22,155
Laissez listView égale react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
Donc, nous voulons rendre un non ordonnée
liste avec un élément de la liste pour chaque carte.

739
00:36:38,800 --> 00:36:41,490
Et donc nous avons un tas de cartes.

740
00:36:41,490 --> 00:36:44,990
Nous voulons un élément de la liste
pour chaque carte, à droite?

741
00:36:44,990 --> 00:36:47,490
Nous pourrions faire une boucle ou
quelque chose à faire un nouvel élément de liste.

742
00:36:47,490 --> 00:36:50,522
Mais la façon dont vous le faites dans
Réagir, utiliser une chose appelée carte.

743
00:36:50,522 --> 00:36:57,150
La carte est un outil ou une fonction que vous utilisez
que, pour chaque article, exécute une fonction,

744
00:36:57,150 --> 00:36:59,510
prend valeur de retour, et
vous donne que de retour.

745
00:36:59,510 --> 00:37:06,310
>> Ainsi, à titre d'exemple, on a le tableau
1, 2, et ce 3.map function--

746
00:37:06,310 --> 00:37:12,120
est un raccourci pour une
function-- x flèches x fois x.

747
00:37:12,120 --> 00:37:16,110
Ce dit, pour chaque numéro
en 1, 2, 3, prendre.

748
00:37:16,110 --> 00:37:17,800
Carré, et lui redonner.

749
00:37:17,800 --> 00:37:22,090
Alors, que pensez-vous 1,
2, 3.map x va à x fois

750
00:37:22,090 --> 00:37:25,480
x vous donne retour donné
que cette fonction est

751
00:37:25,480 --> 00:37:27,680
exécuter sur chaque élément de ce tableau.

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

753
00:37:30,837 --> 00:37:32,190
>> Public: 1, 4 9?

754
00:37:32,190 --> 00:37:35,709
>> NEEL MEHTA: Yep, 1, 4, 9
parce que vous faites 1 fois 1.

755
00:37:35,709 --> 00:37:36,500
Cela vous donne un.

756
00:37:36,500 --> 00:37:37,690
Voilà le premier élément.

757
00:37:37,690 --> 00:37:38,530
>> 2 fois 2 est 4.

758
00:37:38,530 --> 00:37:39,570
Voilà un deuxième élément.

759
00:37:39,570 --> 00:37:40,310
3 fois 3 est neuf.

760
00:37:40,310 --> 00:37:41,540
Voilà un troisième élément.

761
00:37:41,540 --> 00:37:42,640
Donner un sens?

762
00:37:42,640 --> 00:37:45,015
Donc, la carte dispose d'une technique que vous
utiliser dans les programmeurs fonctionnels,

763
00:37:45,015 --> 00:37:48,090
le nouveau style de
programmation à faire quelque chose

764
00:37:48,090 --> 00:37:50,500
à chaque élément dans votre liste.

765
00:37:50,500 --> 00:37:51,970
Et si cela vous semble familier.

766
00:37:51,970 --> 00:37:53,370
Nous avons une liste de cartes.

767
00:37:53,370 --> 00:37:56,860
Nous voulons obtenir un élément de la liste pour chaque
l'un, donc nous allons simplement utiliser la carte ici.

768
00:37:56,860 --> 00:38:00,250
Nous dirons, laissez liste égaux
this.props, cartes, carte.

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

770
00:38:10,580 --> 00:38:15,070
>> Et donc donné une carte, nous sommes
va générer un élément de la liste

771
00:38:15,070 --> 00:38:17,580
avec le contenu du côté de cette carte de celui-ci.

772
00:38:17,580 --> 00:38:20,660
Disons que nous voulons donner à
les cartes question afin card.question.

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

774
00:38:24,990 --> 00:38:30,649
Donc, cette liste contient une
tableau des Li ou mettre des articles

775
00:38:30,649 --> 00:38:32,440
où il ya une liste
point pour chaque carte,

776
00:38:32,440 --> 00:38:35,150
et qui contient les cartes question.

777
00:38:35,150 --> 00:38:37,640
Donner un sens?

778
00:38:37,640 --> 00:38:39,450
>> Cool, alors maintenant nous allons
fait imprimer cela.

779
00:38:39,450 --> 00:38:46,521
Donc, nous allons revenir un ul.

780
00:38:46,521 --> 00:38:49,020
A l'intérieur de cette liste non ordonnée,
nous allons juste coller la liste complète

781
00:38:49,020 --> 00:38:49,890
qu'ils nous ont donné.

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

783
00:38:52,851 --> 00:38:53,350
Cool.

784
00:38:53,350 --> 00:38:56,060
>> Très bien, alors maintenant ce
de liste fonctionne tout trouver.

785
00:38:56,060 --> 00:38:59,842
Une question sur l'affichage de la liste?

786
00:38:59,842 --> 00:39:01,270
Vous avez un tas de cartes.

787
00:39:01,270 --> 00:39:02,800
Vous faites un élément de la liste pour chaque carte.

788
00:39:02,800 --> 00:39:05,466
Et vous les mettez à l'intérieur d'un non ordonnée
liste, et vous lui redonner.

789
00:39:05,466 --> 00:39:09,410
Donc, maintenant nous allons agir de sorte que nous intégrons
ceci à l'intérieur de notre application,

790
00:39:09,410 --> 00:39:14,310
afin que nous puissions le faire, de liste.

791
00:39:14,310 --> 00:39:17,070
Quel argument ne nous passons à la vue de liste?

792
00:39:17,070 --> 00:39:18,320
Quelles sont les propriétés ne nous lui donnons?

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

794
00:39:25,111 --> 00:39:26,860
Rappelez-vous, si vous donnez
un tas de cartes,

795
00:39:26,860 --> 00:39:29,590
ça va faire la liste
voir pour ces cartes.

796
00:39:29,590 --> 00:39:32,267
Alors, que pourrions-nous passer
ici comme argument?

797
00:39:32,267 --> 00:39:33,350
PUBLIC: Une liste des cartes?

798
00:39:33,350 --> 00:39:37,130
NEEL MEHTA: Ouais, donc les cartes
this.props.cards égaux, non?

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

800
00:39:39,850 --> 00:39:44,370
Et si le seul problème
est que vous ne pouvez

801
00:39:44,370 --> 00:39:48,600
tourné un élément de niveau supérieur dans rendre,
si vous avez de l'envelopper dans un div.

802
00:39:48,600 --> 00:39:49,100
C'est étrange.

803
00:39:49,100 --> 00:39:56,190

804
00:39:56,190 --> 00:39:57,530
Voyons donc si ce.

805
00:39:57,530 --> 00:40:09,790

806
00:40:09,790 --> 00:40:10,560
Ça marche?

807
00:40:10,560 --> 00:40:29,774

808
00:40:29,774 --> 00:40:31,030
>> Yep, là vous allez.

809
00:40:31,030 --> 00:40:33,700
Alors maintenant, nous avons une liste
des cartes à la base,

810
00:40:33,700 --> 00:40:36,180
puis nous avons notre
Se CardView sur le dessus,

811
00:40:36,180 --> 00:40:40,486
et qui va retourner entre
les deux côtés de la carte.

812
00:40:40,486 --> 00:40:42,610
Maintenant, cela fait-il sens comment je l'ai fait?

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
Ouais, donc encore une fois, nous avons deux composants.

815
00:40:46,790 --> 00:40:49,666
Les premières impressions de composants
sur chaque carte dans la liste.

816
00:40:49,666 --> 00:40:50,540
Voilà la vue de liste.

817
00:40:50,540 --> 00:40:54,770
Et le deuxième composant
imprime simplement cette carte.

818
00:40:54,770 --> 00:40:58,840
Si vous lui donnez une certaine carte, il va
imprimer des informations à propos de cette carte

819
00:40:58,840 --> 00:41:01,870
et laissez-vous aller et venir.

820
00:41:01,870 --> 00:41:05,850
>> Donc, si nous voulons, nous pouvons essayer de parler
sur l'ajout de nouvelles fonctionnalités à cette.

821
00:41:05,850 --> 00:41:09,482
Sinon, nous pouvons parler un peu plus
environ de la vitesse de réacteur,

822
00:41:09,482 --> 00:41:11,190
ou nous pouvons répondre
questions que vous pourriez avoir

823
00:41:11,190 --> 00:41:15,050
Parce que ce sont toutes les pièces de base
de réagir que je veux parler.

824
00:41:15,050 --> 00:41:16,540
Nous pouvons aller de l'avant.

825
00:41:16,540 --> 00:41:17,590
Nous pouvons répondre à des questions.

826
00:41:17,590 --> 00:41:18,560
Tout ce que vous voulez.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> AUDIENCE: Pouvez-vous utiliser
JSX dans normale JavaScript?

829
00:41:24,205 --> 00:41:27,150
Ou est-ce quelque chose qui
est venu avec la [inaudible]?

830
00:41:27,150 --> 00:41:30,760
>> NEEL MEHTA: La question est: pouvez-
vous utilisez JSX avec JavaScript normale?

831
00:41:30,760 --> 00:41:32,620
La réponse est oui.

832
00:41:32,620 --> 00:41:41,070
JSX est juste une façon de cela prend votre
JavaScript qui a HTML à l'intérieur de celui-ci,

833
00:41:41,070 --> 00:41:44,215
et il compile en JavaScript
n'a pas HTML à l'intérieur.

834
00:41:44,215 --> 00:41:47,880
Donc remarquer that-- donc noter ici.

835
00:41:47,880 --> 00:41:50,820
Ce semble que vous avez comme div
et vous avez des choses à l'intérieur de celui-ci.

836
00:41:50,820 --> 00:41:54,970
>> Qui compile de JavaScript qui
comme génère la même chose.

837
00:41:54,970 --> 00:41:59,590
Je suppose que ce que je dis est que
JSX est juste un syntaxique, comme il est

838
00:41:59,590 --> 00:42:03,530
un préprocesseur JavaScript beaucoup
comme PHP est un préprocesseur pour HTML.

839
00:42:03,530 --> 00:42:05,490
JSC est un préprocesseur
JavaScript qui vous permet

840
00:42:05,490 --> 00:42:12,970
vous mettez HTML à l'intérieur de votre JavaScript.

841
00:42:12,970 --> 00:42:16,425
Et donc si vous avez le droit transformateur
qui est une chose appelée [inaudible],

842
00:42:16,425 --> 00:42:17,300
qui va transformer.

843
00:42:17,300 --> 00:42:19,360
Le préprocesseur droite,
il va vous laisser faire cela.

844
00:42:19,360 --> 00:42:20,235
>> AUDIENCE: [inaudible]

845
00:42:20,235 --> 00:42:23,026
NEEL MEHTA: Habituellement, vous ne devez pas
de mettre HTML à l'intérieur de JavaScript

846
00:42:23,026 --> 00:42:24,110
sauf si votre faire réagir.

847
00:42:24,110 --> 00:42:27,146
Mais vous pouvez le faire de toute façon.

848
00:42:27,146 --> 00:42:27,645
Oui?

849
00:42:27,645 --> 00:42:29,353
>> AUDIENCE: Je pense que vous
avait décrit Réagir

850
00:42:29,353 --> 00:42:31,970
comme un langage de programmation fonctionnel.

851
00:42:31,970 --> 00:42:35,646
Nous avons appris C dans CS50.

852
00:42:35,646 --> 00:42:38,032
C est aussi un langage fonctionnel?

853
00:42:38,032 --> 00:42:39,990
NEEL MEHTA: Donc la question
est sur le point fonctionnel

854
00:42:39,990 --> 00:42:43,010
par rapport à une autre chose appelée
la programmation impérative ou de procédure.

855
00:42:43,010 --> 00:42:44,820
Il ya deux sortes de programmes populaires.

856
00:42:44,820 --> 00:42:48,550
Un est ce qu'on appelle la procédure, qui
est tout au sujet comme les commandes faites,

857
00:42:48,550 --> 00:42:51,510
et une est fonctionnelle, ce qui est tout
d'avoir des fonctions et ayant

858
00:42:51,510 --> 00:42:52,930
entrée et la sortie de ceux-ci.

859
00:42:52,930 --> 00:42:55,930
Réagir est un paradigme fonctionnel.

860
00:42:55,930 --> 00:42:58,010
C est un paradigme très procédurale.

861
00:42:58,010 --> 00:43:02,360
>> Et titre d'exemple, par exemple C,
vous ne faites pas de cette façon déclarative

862
00:43:02,360 --> 00:43:04,390
de rendre le programme, non?

863
00:43:04,390 --> 00:43:06,826
Vous avez à dire, imprimer.

864
00:43:06,826 --> 00:43:07,950
Changer cette structure de données.

865
00:43:07,950 --> 00:43:08,530
Imprimer cette.

866
00:43:08,530 --> 00:43:10,160
Il est tout au sujet des commandes.

867
00:43:10,160 --> 00:43:12,640
>> Dans Réagir, il n'y a pas
que de nombreuses commandes.

868
00:43:12,640 --> 00:43:15,145
Il est tout d'avoir
composants mis ensemble.

869
00:43:15,145 --> 00:43:16,300
Ils sont comme des fonctions.

870
00:43:16,300 --> 00:43:26,360
Vous avez comme une fonction
appelé CardView,

871
00:43:26,360 --> 00:43:28,680
qui est une fonction
qui a entrée, de sortie,

872
00:43:28,680 --> 00:43:30,660
et ainsi est tout Réagir
sur cette philosophie

873
00:43:30,660 --> 00:43:32,700
nous de having-- vous avez données.

874
00:43:32,700 --> 00:43:34,910
Vous passez à travers cette
algorithme, et il va

875
00:43:34,910 --> 00:43:36,800
sortie HTML que vous
juste la page imprimée,

876
00:43:36,800 --> 00:43:39,180
et donc vous devez
construire pièce par pièce.

877
00:43:39,180 --> 00:43:42,800
>> Donc, pour en tirer une métaphore pour ce que
Je l'ai dit avant, vous savez comment

878
00:43:42,800 --> 00:43:47,050
sur Facebook si vous recevez un message,
et que vous choisissez quelles parties de mettre à jour,

879
00:43:47,050 --> 00:43:47,882
qui est procédural.

880
00:43:47,882 --> 00:43:48,840
Il est impératif, non?

881
00:43:48,840 --> 00:43:49,806
OK, je suis arrivé un message.

882
00:43:49,806 --> 00:43:50,930
Changeons compte là-bas.

883
00:43:50,930 --> 00:43:52,110
>> Disons une fenêtre pop ici.

884
00:43:52,110 --> 00:43:52,780
Changeons compte là-bas.

885
00:43:52,780 --> 00:43:53,700
Tirons cela ici.

886
00:43:53,700 --> 00:43:55,220
Voilà une approche procédurale.

887
00:43:55,220 --> 00:44:00,240
>> Voilà ce que des choses comme angulaire,
Boost, Backbone, d'autres cadres utilisent.

888
00:44:00,240 --> 00:44:01,200
Réagir est fonctionnel.

889
00:44:01,200 --> 00:44:03,324
Il est une façon très différente
de penser à des choses.

890
00:44:03,324 --> 00:44:07,950
Il prend cette idée de nous allons avoir
des fonctions ou des algorithmes qui vous

891
00:44:07,950 --> 00:44:08,800
donner des données.

892
00:44:08,800 --> 00:44:11,820
Il va cracher ce qu'il
devrait être, et l'ordinateur

893
00:44:11,820 --> 00:44:13,490
prendra soin de pesée.

894
00:44:13,490 --> 00:44:15,890
Vous ne le manipulez pas vous-même.

895
00:44:15,890 --> 00:44:18,470
Est-ce que faire un peu de bon sens?

896
00:44:18,470 --> 00:44:18,970
Oui?

897
00:44:18,970 --> 00:44:24,180
>> AUDIENCE: Dans un langage fonctionnel,
tout se passe à la fois?

898
00:44:24,180 --> 00:44:26,800
>> NEEL MEHTA: Non, les choses se passent dans l'ordre.

899
00:44:26,800 --> 00:44:29,320
Comme ici il ya encore
commander, mais il ne le fait pas

900
00:44:29,320 --> 00:44:32,390
produire afin de comme
féliciter, commande, commande.

901
00:44:32,390 --> 00:44:36,459
Il arrive dans l'ordre de
fonction vous donne la sortie.

902
00:44:36,459 --> 00:44:37,750
Mettez ça dans une autre fonction.

903
00:44:37,750 --> 00:44:39,550
Mettez ça dans un autre
fonction, une autre fonction.

904
00:44:39,550 --> 00:44:41,470
>> Si vous faites CS51, vous aurez
apprendre programmes fonctionnels

905
00:44:41,470 --> 00:44:42,886
un peu hors de la portée de cette.

906
00:44:42,886 --> 00:44:45,090
Mais fondamentalement, ce qui rend
Réagir fraîche est non seulement

907
00:44:45,090 --> 00:44:46,840
le flux de données unidirectionnel
et le Dom virtuel,

908
00:44:46,840 --> 00:44:48,700
mais aussi cette idée de
la programmation fonctionnelle.

909
00:44:48,700 --> 00:44:51,720
Et la programmation fonctionnelle est très facile
pour composer et faire des trucs cool sur,

910
00:44:51,720 --> 00:44:53,844
et il est très facile de penser
propos et la raison à propos.

911
00:44:53,844 --> 00:44:55,450
Donc, il est un autre bon match nul de réagir.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Autres questions?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Oui?

916
00:45:03,150 --> 00:45:06,840
>> AUDIENCE: Euh, pourquoi voulez-vous
utiliser let par opposition à var?

917
00:45:06,840 --> 00:45:10,450
>> NEEL MEHTA: Donc la question est
Pourquoi utilisez-vous laisser au lieu de var?

918
00:45:10,450 --> 00:45:13,220
Ceci est une chose appelée
ES6 ou ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Il est la nouvelle version de JavaScript.

920
00:45:15,820 --> 00:45:19,050
Il ya un tas de raisons techniques,
Mais permettez est une meilleure version de var.

921
00:45:19,050 --> 00:45:20,724
>> Il est comment vous déclarez des variables.

922
00:45:20,724 --> 00:45:21,390
Vous pouvez utiliser laisser.

923
00:45:21,390 --> 00:45:22,140
Vous pouvez utiliser var.

924
00:45:22,140 --> 00:45:23,825
Soit a un tas de techniques
reasons-- vous pouvez les regarder

925
00:45:23,825 --> 00:45:25,610
jusqu'à later-- pour pourquoi il est préférable.

926
00:45:25,610 --> 00:45:28,780
Fondamentalement, ES6 possède quelques belles
nouvelle syntaxe, quelques nouvelles fonctionnalités

927
00:45:28,780 --> 00:45:30,720
sur le dessus de la vieille JavaScript.

928
00:45:30,720 --> 00:45:32,782
>> Nous avons donc comme cinq minutes.

929
00:45:32,782 --> 00:45:34,990
Je voulais juste parler
encore une chose très vite.

930
00:45:34,990 --> 00:45:36,450
Si vous aviez des questions,
Parlons après cette.

931
00:45:36,450 --> 00:45:38,366
Mais juste pour que cela devient
pris à la caméra, je viens

932
00:45:38,366 --> 00:45:41,550
vouloir parler un peu de la façon dont vous
Réagir réellement utiliser dans vos applications.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Si vous allez ici,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
ce est la page d'accueil pour réagir et
ça va vous montrer comment vous utilisez réellement

936
00:46:03,320 --> 00:46:05,320
Réagir dans vos pages.

937
00:46:05,320 --> 00:46:08,845
Fondamentalement, il est un peu
essayer compliqué à installer React.

938
00:46:08,845 --> 00:46:12,300
Il est pas aussi facile que vous faites glisser simplement
et déposer un JavaScript là.

939
00:46:12,300 --> 00:46:15,890
>> Vous devez avoir votre transformateur
mettre en place, qui, comme il l'a fait avant,

940
00:46:15,890 --> 00:46:18,120
transformer votre JSX en
JavaScript normale.

941
00:46:18,120 --> 00:46:21,030
Vous avez à la chose qui va
compilez vous ES6 à la normale.

942
00:46:21,030 --> 00:46:24,720
JavaScript il ya beaucoup de mouvement
pièces que vous avez à faire, donc il est une chose

943
00:46:24,720 --> 00:46:27,200
appelé Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
Et cela est un outil de ligne de commande qui va
vous aider échafaudage votre Réagir

945
00:46:31,110 --> 00:46:32,380
projets facilement.

946
00:46:32,380 --> 00:46:38,660
>> Ainsi, vous pouvez lire à ce sujet
plus tard, mais il existe des outils

947
00:46:38,660 --> 00:46:40,160
que Yeoman offre.

948
00:46:40,160 --> 00:46:43,280
Ils vous permettent de créer un Réagir
app avec tout intégré.

949
00:46:43,280 --> 00:46:46,030
Comme il va avoir construit
dans, construite en composants.

950
00:46:46,030 --> 00:46:47,880
Il aurez votre transformateur intégré.

951
00:46:47,880 --> 00:46:50,699
Ils ont beaucoup de fraîcheur
trucs construit automatiquement

952
00:46:50,699 --> 00:46:52,240
l'utilisation de ces choses appelées générateurs.

953
00:46:52,240 --> 00:46:54,620
>> Alors, lisez à ce sujet si vous le souhaitez.

954
00:46:54,620 --> 00:46:59,110
Il suffit d'aller sur Yeoman, Y-E-O-M-A-N, et
vous pouvez trouver des générateurs de ce genre.

955
00:46:59,110 --> 00:47:01,263
Et avec comme générateurs
ceux-ci, vous voulez juste un

956
00:47:01,263 --> 00:47:03,010
est jouit d'une ligne de commande de couple.

957
00:47:03,010 --> 00:47:05,530
Il va échafaudage sur un
Réagir toute application pour vous.

958
00:47:05,530 --> 00:47:10,470
Il va avoir toute la tuyauterie d'emploi,
et le travail de grognement fait pour vous,

959
00:47:10,470 --> 00:47:13,010
et ceci est la raison pour laquelle vous vous concentrez seulement
sur écrivant simplement dans React.

960
00:47:13,010 --> 00:47:16,739
>> Donc, fondamentalement, la construction d'un
Réagir application est triviale.

961
00:47:16,739 --> 00:47:19,530
Il est câblé tous ensemble, mais il
sont des outils qui vais le faire pour vous.

962
00:47:19,530 --> 00:47:23,070
Donc, si vous souhaitez effectuer une Réagir
application, essayer de le faire de cette façon.

963
00:47:23,070 --> 00:47:26,360
Si vous voulez juste tester,
vous pouvez essayer d'utiliser cette CodePen

964
00:47:26,360 --> 00:47:28,550
parce que cela a CodePen
tout le câblage réagir.

965
00:47:28,550 --> 00:47:30,240
Je l'ai fait tout le travail pour vous déjà.

966
00:47:30,240 --> 00:47:34,610
>> Donc, si vous voulez faire comme un
la production de libérer Réagir application,

967
00:47:34,610 --> 00:47:37,220
essayer un de ces générateurs.

968
00:47:37,220 --> 00:47:40,240
Si vous voulez juste jouer
autour, il est souvent la peine juste

969
00:47:40,240 --> 00:47:44,490
comme essayer de jouer autour sur CodePen ici.

970
00:47:44,490 --> 00:47:45,470
Bon son?

971
00:47:45,470 --> 00:47:45,970
Cool.

972
00:47:45,970 --> 00:47:47,890
>> Voilà donc tout ce que je dois.

973
00:47:47,890 --> 00:47:52,470
Encore une fois, tout le code et les exemples sont
va être sur ce site ici.

974
00:47:52,470 --> 00:47:55,509
Donc, encore une fois, nous ne parlions pas
à propos de beaucoup de syntaxe Réagir,

975
00:47:55,509 --> 00:47:57,550
mais de trouver tous ceux
petits détails syntaxiques,

976
00:47:57,550 --> 00:48:00,320
Tout va être disponible
sur ce site ici.

977
00:48:00,320 --> 00:48:02,660
>> Donc, je vous recommande comme
prendre la première étape.

978
00:48:02,660 --> 00:48:06,277
Mettez-la dans votre CodePen.

979
00:48:06,277 --> 00:48:08,110
Essayez de travailler pour faire
à la deuxième étape.

980
00:48:08,110 --> 00:48:11,310
Il ya une quatrième étape, et juste
voir où vous obtenez à partir de cela.

981
00:48:11,310 --> 00:48:14,840
>> D'autres questions, vérifier
sur cette page ou écrivez-moi.

982
00:48:14,840 --> 00:48:16,490
Voilà mon email.

983
00:48:16,490 --> 00:48:19,885
Mais je serais ravi de vous aider avec toute
questions que vous pourriez avoir à propos de réagir.

984
00:48:19,885 --> 00:48:21,010
Donc, oui, voilà tout ce que je dois.

985
00:48:21,010 --> 00:48:23,410
Je vous remercie tous beaucoup pour
regarder ou pour assister.

986
00:48:23,410 --> 00:48:26,820
Et je prends des questions
vous pourriez avoir après cela maintenant.

987
00:48:26,820 --> 00:48:29,140
Donc, merci à vous tous pour regarder.

988
00:48:29,140 --> 00:48:31,270