1
00:00:00,000 --> 00:00:02,910
>> [Música tocando]

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

3
00:00:04,850 --> 00:00:07,275
>> Neel Mehta ,: Aquí vai.

4
00:00:07,275 --> 00:00:11,070
>> Ben, todo o mundo, Benvido ao web
aplicacións do futuro con Contestar.

5
00:00:11,070 --> 00:00:11,870
Este é CS50.

6
00:00:11,870 --> 00:00:12,930
O meu nome é Neel.

7
00:00:12,930 --> 00:00:17,689
Eu son unha TA para CS50 e un estudante de segundo ano
na facultade de Harvard e un moi, moi

8
00:00:17,689 --> 00:00:18,730
programador web apaixonado.

9
00:00:18,730 --> 00:00:20,730
Entón, eu estou moi emocionante
estar falando contigo hoxe,

10
00:00:20,730 --> 00:00:24,550
se está aquí ou na casa
asistir, sobre Contestar, que é, de novo

11
00:00:24,550 --> 00:00:27,270
como dixen, o futuro das aplicacións web.

12
00:00:27,270 --> 00:00:29,055
>> Entón Contestar é un framework web.

13
00:00:29,055 --> 00:00:30,930
E como eu dixen
para algunhas persoas aquí,

14
00:00:30,930 --> 00:00:33,400
un cadro é só unha
conxunto de ferramentas que se poden utilizar

15
00:00:33,400 --> 00:00:35,770
para estruturar e construír a súa aplicación web.

16
00:00:35,770 --> 00:00:39,010
E aplicacións web son, de novo, os sitios
que son interactivos como Facebook,

17
00:00:39,010 --> 00:00:42,330
Twitter.com, Instagram.com, calquera que sexa.

18
00:00:42,330 --> 00:00:45,590
>> Así, Facebook é un framework web
que foi desenvolvido polo Facebook

19
00:00:45,590 --> 00:00:48,060
un par de anos traseira-- Contestar é.

20
00:00:48,060 --> 00:00:50,830
El xa foi usado en
Facebook en súas aplicacións móbiles

21
00:00:50,830 --> 00:00:52,460
ea aplicación web, Instagram.

22
00:00:52,460 --> 00:00:56,350
Khan Academy é outro
destacado dos primeiros a adoptar Contestar.

23
00:00:56,350 --> 00:00:58,630
>> Foi realmente a recibir
moi popular.

24
00:00:58,630 --> 00:01:03,420
Se nunca usar cousas como Angular ou
Backbone, este é da mesma familia,

25
00:01:03,420 --> 00:01:05,830
pero ten desde agora
superar a súa popularidade.

26
00:01:05,830 --> 00:01:06,890
É a cousa nova quente.

27
00:01:06,890 --> 00:01:09,590
É realmente, realmente enorme.

28
00:01:09,590 --> 00:01:13,470
>> E así Contestar é bo non só como un
framework web para interfaces de construción.

29
00:01:13,470 --> 00:01:16,020
É bo para a construción de interfaces web.

30
00:01:16,020 --> 00:01:18,350
Hai tamén unha cousa
Reaccionar chamado Native que

31
00:01:18,350 --> 00:01:22,200
permite construír interfaces
para Android e iOS

32
00:01:22,200 --> 00:01:26,390
e quizais outras plataformas no futuro
usando só o mesmo código JavaScript.

33
00:01:26,390 --> 00:01:31,130
Podes usar exactamente o mesmo
Código JavaScript para renderizar sitios,

34
00:01:31,130 --> 00:01:33,040
para facer os apps Android e IOS apps.

35
00:01:33,040 --> 00:01:35,000
>> É un momento moi, moi emocionante.

36
00:01:35,000 --> 00:01:37,070
É unha oportunidade moi, moi legal.

37
00:01:37,070 --> 00:01:42,020
É realmente unha tea universal
ferramenta de desenvolvemento de interface,

38
00:01:42,020 --> 00:01:44,420
polo que é moi, moi
cousa importante a saber.

39
00:01:44,420 --> 00:01:46,949
E, como eu estaba dicindo ás persoas
antes, este, penso eu,

40
00:01:46,949 --> 00:01:48,990
vai cambiar o modo como
construír aplicacións web para sempre.

41
00:01:48,990 --> 00:01:55,820
Polo que é posible que unha esaxeración pouco, pero eu
creo que é unha cousa moi boa para saber.

42
00:01:55,820 --> 00:01:57,580
>> OK, entón o que é Contestar?

43
00:01:57,580 --> 00:02:01,020
Reaccionar é un cadro que pode
empregar para a construción de interfaces.

44
00:02:01,020 --> 00:02:03,240
Unha interface é, de novo,
unha páxina web, non?

45
00:02:03,240 --> 00:02:06,340
Entón aquí está Instagram.com, usos Contestar.

46
00:02:06,340 --> 00:02:08,740
>> Reaccionar está construído sobre a
idea de compoñentes.

47
00:02:08,740 --> 00:02:11,900
Un compoñente é un HTML
elemento en esteroides,

48
00:02:11,900 --> 00:02:14,470
polo que un elemento HTML é como un botón.

49
00:02:14,470 --> 00:02:15,250
É un parágrafo.

50
00:02:15,250 --> 00:02:17,500
É unha cabeceira, non?

51
00:02:17,500 --> 00:02:22,740
E Instagram vai usalos, pero
utilizar compoñentes de React.

52
00:02:22,740 --> 00:02:25,740
>> Reaccionar compoñentes son
elementos HTML souped-up

53
00:02:25,740 --> 00:02:28,100
que teñen o seu propio comportamento
contido dentro delas.

54
00:02:28,100 --> 00:02:31,800
Así, como exemplo, que se podería
un elemento de tempo, un compoñente de tempo,

55
00:02:31,800 --> 00:02:34,095
que conterá como
o selo de tempo, xa sabe,

56
00:02:34,095 --> 00:02:37,170
un compoñente que perfil
contén a imaxe de perfil

57
00:02:37,170 --> 00:02:38,820
eo nome da persoa.

58
00:02:38,820 --> 00:02:42,930
Pode ter un contador similares, os cales
pode contar como o número de gustos,

59
00:02:42,930 --> 00:02:45,610
e se fai clic nel, que vai
incrementar o número de gustos.

60
00:02:45,610 --> 00:02:48,200
Un compoñente é só un
chea de código HTML que

61
00:02:48,200 --> 00:02:50,520
ten algunhas funcións
embrulhado dentro del.

62
00:02:50,520 --> 00:02:53,770
Entón, é como un elemento HTML
en esteroides, como dixen antes.

63
00:02:53,770 --> 00:02:56,270
Pode tomar estes compoñentes,
e pode poñer-los xuntos

64
00:02:56,270 --> 00:02:59,060
para facer novos compoñentes,
Neste caso, un compoñente post,

65
00:02:59,060 --> 00:03:00,505
que contén todas esas cousas.

66
00:03:00,505 --> 00:03:04,050
Sería conter Tempo, perfil,
LikeCounter, quizais o comentario

67
00:03:04,050 --> 00:03:06,100
e quizais a propia imaxe.

68
00:03:06,100 --> 00:03:10,810
E así aplicacións web son só construído tomando
compoñentes e poñer-los xuntos.

69
00:03:10,810 --> 00:03:15,620
Unha fonte Instagram é máis que
unha morea de lugares, un tras outro,

70
00:03:15,620 --> 00:03:19,032
cada post contén como a Time,
Perfil, LikeCounter, e así por diante.

71
00:03:19,032 --> 00:03:20,490
É unha especie de como construír unha casa.

72
00:03:20,490 --> 00:03:22,660
Non constrúe a
casa de arriba abaixo.

73
00:03:22,660 --> 00:03:24,960
Se toma components-- vostede
tomar como o baño.

74
00:03:24,960 --> 00:03:28,320
Colle o bedroom-- vostede fura-los
xuntos, e ten un novo compoñente.

75
00:03:28,320 --> 00:03:29,760
Ten unha nova parte da casa.

76
00:03:29,760 --> 00:03:32,860
>> Entón Contestar é todo construído en torno a
esa idea de compoñentes que

77
00:03:32,860 --> 00:03:36,600
son interactivos, que son declarativas.

78
00:03:36,600 --> 00:03:39,650
Como acaba de dicir o que un
perfil, ela fai-lo.

79
00:03:39,650 --> 00:03:40,600
Son combináveis.

80
00:03:40,600 --> 00:03:43,880
Pode tomar un tempo e un perfil, poñer
xuntos, facer algo mellor.

81
00:03:43,880 --> 00:03:47,770
E son reutilizables, polo tanto, se
ten o código fonte dun post,

82
00:03:47,770 --> 00:03:49,440
podería incorporar iso en calquera lugar.

83
00:03:49,440 --> 00:03:53,160
>> Pode embutir un Instagram
cousa no seu sitio web.

84
00:03:53,160 --> 00:03:56,830
Pode embutir en Facebook, por exemplo,
sempre que utiliza React ben.

85
00:03:56,830 --> 00:04:00,360
Entón compoñentes son realmente, realmente, realmente
bloques de construción poderosos web

86
00:04:00,360 --> 00:04:04,180
que se pode usar en calquera lugar e colocá-
xuntos para facer novos bloques de construción.

87
00:04:04,180 --> 00:04:07,159
Iso é moi, moi
visión xeral de alto nivel.

88
00:04:07,159 --> 00:04:09,200
Entón, de novo, se ten
calquera preguntas en calquera punto

89
00:04:09,200 --> 00:04:14,470
sobre a filosofía do reactor, o
codificación, para me deixar, e deixe-me saber.

90
00:04:14,470 --> 00:04:18,420
>> OK, polo tanto, reaccionar é legal porque
ten un xeito diferente de ollar

91
00:04:18,420 --> 00:04:19,870
en como construír aplicacións web.

92
00:04:19,870 --> 00:04:23,620
Probablemente xa escoitou falar de MVC, un
modelo que controla na CS50 ou o que quere

93
00:04:23,620 --> 00:04:25,940
outras clases de sondaxe que usa.

94
00:04:25,940 --> 00:04:29,000
E a maioría dos cadros son
construído en torno á idea de MVC.

95
00:04:29,000 --> 00:04:30,410
Reaccionar non é.

96
00:04:30,410 --> 00:04:32,980
Reaccionar está construído en torno á idea
do fluxo de datos unidirecional

97
00:04:32,980 --> 00:04:36,510
como visto por este gráfico ou gráfico aquí.

98
00:04:36,510 --> 00:04:38,260
>> Basicamente, ten unha fonte de datos.

99
00:04:38,260 --> 00:04:42,380
E a fonte de datos pode decidir
como pór para fóra determinados compoñentes.

100
00:04:42,380 --> 00:04:45,452
E os compoñentes serán
entón, cando cambian,

101
00:04:45,452 --> 00:04:47,160
eles van che dicir o
fonte de datos para cambiar.

102
00:04:47,160 --> 00:04:49,350
>> Para utilizar o Instagram
exemplo, pode que

103
00:04:49,350 --> 00:04:52,050
unha lista de obxectos como pos-
nunha base de datos ou algo así.

104
00:04:52,050 --> 00:04:53,310
Que os datos.

105
00:04:53,310 --> 00:04:57,600
E entón nosos compoñentes pos-
vai levar eses datos,

106
00:04:57,600 --> 00:05:01,830
e utilizar estes datos para procesar
unha cousa na pantalla.

107
00:05:01,830 --> 00:05:04,300
Iso é o que a frecha
a partir dos datos de compoñente é,

108
00:05:04,300 --> 00:05:07,930
e, a continuación, que a mesma información é usada
para procesar un grupo de compoñentes.

109
00:05:07,930 --> 00:05:10,290
>> En Facebook Messenger, para
exemplo, que é Contestar,

110
00:05:10,290 --> 00:05:13,410
pode ter unha lista de
mensaxes como a súa fonte de datos.

111
00:05:13,410 --> 00:05:15,927
E iso non renden
só a lista de mensaxes

112
00:05:15,927 --> 00:05:17,510
pero tamén a lista de amigos que ten.

113
00:05:17,510 --> 00:05:19,200
Ten a conta non lida.

114
00:05:19,200 --> 00:05:23,330
Quizais tamén facer a cousa Facebook
que está no fondo do Facebook.com.

115
00:05:23,330 --> 00:05:25,610
Os mesmos datos é un
fonte única de verdade

116
00:05:25,610 --> 00:05:28,290
e que fai que unha gran cantidade de
compoñentes a seren prestados.

117
00:05:28,290 --> 00:05:30,290
E cada vez que un destes
compoñentes é alterado,

118
00:05:30,290 --> 00:05:32,320
vai volver e
cambia a fonte de datos.

119
00:05:32,320 --> 00:05:33,460
>> Enviar unha mensaxe, non?

120
00:05:33,460 --> 00:05:34,780
Isto cambia a fonte de datos.

121
00:05:34,780 --> 00:05:39,490
Ler as súas mensaxes,
para que non trata definir a 0.

122
00:05:39,490 --> 00:05:41,136
Isto cambia a fonte de datos.

123
00:05:41,136 --> 00:05:44,010
E teña en conta que todos estes dunha
arrow voltar os mesmos datos

124
00:05:44,010 --> 00:05:47,662
fonte, así vostede sabe,
dado un determinado conxunto de datos,

125
00:05:47,662 --> 00:05:49,870
vostede sabe exactamente o que o
A páxina está indo ollar como.

126
00:05:49,870 --> 00:05:50,700
É determinista.

127
00:05:50,700 --> 00:05:53,451
Vostede sabe, dadas certas datos, o que
a páxina vai ollar como.

128
00:05:53,451 --> 00:05:56,158
Pode prever como vai
se comportan e como as cousas están indo

129
00:05:56,158 --> 00:05:57,650
para o traballo cando están xuntos.

130
00:05:57,650 --> 00:06:00,410
>> E se tivese un millón de compoñentes
aquí, ía comportarse o mesmo, non?

131
00:06:00,410 --> 00:06:02,290
Non tería calquera
interconexiones estrañas.

132
00:06:02,290 --> 00:06:04,120
Unha datos rendeu un millón de compoñentes.

133
00:06:04,120 --> 00:06:06,879
Un millón de compoñentes podería
voltar e editar os datos.

134
00:06:06,879 --> 00:06:07,920
E así que é moi bo.

135
00:06:07,920 --> 00:06:10,870
Estamos construíndo composable,
facilmente aplicacións web escalabades.

136
00:06:10,870 --> 00:06:13,150
>> Ten unha fonte de datos,
a fonte da verdade.

137
00:06:13,150 --> 00:06:15,790
Que informa os seus compoñentes
como poñer a páxina,

138
00:06:15,790 --> 00:06:18,190
e os compoñentes serán
xestionar interacción.

139
00:06:18,190 --> 00:06:20,150
E si queren cambiar
cousas, simplemente volver

140
00:06:20,150 --> 00:06:21,750
e dicir a fonte de datos para cambiar.

141
00:06:21,750 --> 00:06:22,850
Ten sentido?

142
00:06:22,850 --> 00:06:26,010
Entón Contestar é todo sobre a comprensión
como construír un compoñente

143
00:06:26,010 --> 00:06:29,540
e como facer o seu compoñente
interactuar co mundo exterior.

144
00:06:29,540 --> 00:06:31,850
>> Facer o interactúan compoñente
co mundo exterior

145
00:06:31,850 --> 00:06:34,490
utiliza outra tecnoloxía
Fluxo chamada, que

146
00:06:34,490 --> 00:06:36,872
é unha estrutura que é
engadido na parte superior da React.

147
00:06:36,872 --> 00:06:38,330
Non imos falar sobre iso.

148
00:06:38,330 --> 00:06:42,990
Imos falar máis sobre, dado
datos, como pode facer un compoñente?

149
00:06:42,990 --> 00:06:47,010
>> E así Contestar é moi legal porque
Pode usalo con calquera back-end que quere.

150
00:06:47,010 --> 00:06:50,480
Se tes un back-end como Python,
se o Python pode cuspir algúns datos,

151
00:06:50,480 --> 00:06:51,610
Reaccionar pode facelo.

152
00:06:51,610 --> 00:06:54,700
Se hai saídas JS
de datos, fai React.

153
00:06:54,700 --> 00:06:56,890
Ruby Rails con
datos, fai React.

154
00:06:56,890 --> 00:07:01,860
>> Entón Contestar é basicamente unha web
view-- un front-end con compoñentes

155
00:07:01,860 --> 00:07:03,910
para calquera fonte de datos que sexa.

156
00:07:03,910 --> 00:07:07,145
E así vai dende fonte de datos para
reaccionan compoñentes é moi fácil.

157
00:07:07,145 --> 00:07:08,770
Indo a outra forma é un pouco máis difícil.

158
00:07:08,770 --> 00:07:10,462
Que usa corrente como mencionei antes.

159
00:07:10,462 --> 00:07:11,420
Non imos entrar niso.

160
00:07:11,420 --> 00:07:13,740
Imos concentrar máis no
datos a lado dos compoñentes.

161
00:07:13,740 --> 00:07:15,880
Desta forma, pode facer
legal, desfrute aplicacións web.

162
00:07:15,880 --> 00:07:19,870
Non vai afectar o mundo exterior
por agora, pero iso é outra historia.

163
00:07:19,870 --> 00:07:22,210
>> OK, entón se está aquí
para o meu último seminario

164
00:07:22,210 --> 00:07:26,610
vai saber que todo o código para
A charla de hoxe vai ser neste URL

165
00:07:26,610 --> 00:07:29,320
aquí, desculpe, este URL aquí.

166
00:07:29,320 --> 00:07:32,730
E, basicamente, nós estamos indo a ir
por catro etapas, quizais cinco,

167
00:07:32,730 --> 00:07:33,510
probablemente non cinco.

168
00:07:33,510 --> 00:07:37,300
Nós imos pasar por catro etapas
de construción dunha mostra Contestar app.

169
00:07:37,300 --> 00:07:39,550
E así todo o código fonte
para cada paso do camiño

170
00:07:39,550 --> 00:07:42,216
será aquí, entón se
está acompañando na casa,

171
00:07:42,216 --> 00:07:43,991
Sinto-se a liberdade de ler este código.

172
00:07:43,991 --> 00:07:46,740
Se está seguindo ao longo aquí,
estaremos mostrando na pantalla,

173
00:07:46,740 --> 00:07:47,739
polo que non se preocupe con iso.

174
00:07:47,739 --> 00:07:50,930
Pero se está na casa, sentir
libre para visitar esta web.

175
00:07:50,930 --> 00:07:56,400
E, si, ten que ser capaz de obter
todo o código que xa ten aquí.

176
00:07:56,400 --> 00:08:01,380
Polo tanto, é unha boa folla de fraude, así
para as súas futuras aventuras con Contestar.

177
00:08:01,380 --> 00:08:04,490
Cool, polo que se todo o mundo que está aquí,
e aínda se está na casa,

178
00:08:04,490 --> 00:08:11,580
puxar arriba esta web, is.gd/cs50react,
sen capital, sen subliñado, sen nada.

179
00:08:11,580 --> 00:08:15,849
>> Podes ver unha páxina que parece
algo como isto.

180
00:08:15,849 --> 00:08:17,140
Esta é unha cousa chamada CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen é un colaborativa
ambiente de codificación

182
00:08:20,030 --> 00:08:23,364
co cal podo escribir o código aquí, e
será enviado automaticamente para ti.

183
00:08:23,364 --> 00:08:24,780
E deste xeito, podo escribir código.

184
00:08:24,780 --> 00:08:26,920
Podo realizar o código aquí.

185
00:08:26,920 --> 00:08:33,470
>> Para example-- e reloads-- ver,
Estou executando o código JavaScript na páxina

186
00:08:33,470 --> 00:08:36,390
aquí, e só pode
facer automaticamente unha páxina web

187
00:08:36,390 --> 00:08:37,980
con este código JavaScript.

188
00:08:37,980 --> 00:08:40,039
E así esta é unha forma
para nós para probar código

189
00:08:40,039 --> 00:08:43,089
realmente rápido sen ter que usar
nosa ID ou utilice nosa máquina local

190
00:08:43,089 --> 00:08:44,290
ou o que quere.

191
00:08:44,290 --> 00:08:47,670
É un xeito moi rápido para ti maqueta
e probar diferentes tipos de código.

192
00:08:47,670 --> 00:08:50,560
>> Entón, eu estou indo tomar
exemplo de código, colocándose o aquí.

193
00:08:50,560 --> 00:08:52,374
Nós imos estar traballando con el.

194
00:08:52,374 --> 00:08:54,540
E se está na casa,
pode tirar iso tamén.

195
00:08:54,540 --> 00:08:57,530
E eu xa instalado
Reaccionar aquí, entón podes só

196
00:08:57,530 --> 00:09:00,770
escribir o seu propio código aquí, e
probalo como o seu propio parque infantil.

197
00:09:00,770 --> 00:09:04,940
>> Si, todos
abrir este enlace aquí.

198
00:09:04,940 --> 00:09:08,080
Por favor me dea os polgares
xa que ten que abrir.

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
Non hai nada aquí para agora, pero
imos cambiar isto moi pronto.

202
00:09:16,914 --> 00:09:21,250
>> OK, entón Contestar é un JavaScript
biblioteca, e como tal,

203
00:09:21,250 --> 00:09:24,480
require o coñecemento de JavaScript,
que é a linguaxe de programación web.

204
00:09:24,480 --> 00:09:27,660
E está a ser usado para outras cousas
Agora tamén, pero sobre todo a desenvolver web

205
00:09:27,660 --> 00:09:32,040
lingua, por iso, se non está familiarizado con
que, ler un sitio chamado JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
É marabilloso.

207
00:09:32,700 --> 00:09:34,240
Podes aprender JavaScript
en media hora.

208
00:09:34,240 --> 00:09:34,990
É incrible.

209
00:09:34,990 --> 00:09:36,420
>> Entón, bótalle un lida.

210
00:09:36,420 --> 00:09:39,960
Tamén unha morea de HTML aquí porque
estamos proxectando páxinas web, por suposto.

211
00:09:39,960 --> 00:09:43,890
Polo tanto, se non está familiarizado con
HTML, vai a HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Eu creo que aprender Contestar é un
millón de veces máis fácil se xa

213
00:09:46,520 --> 00:09:47,892
coñecer os bloques de construción.

214
00:09:47,892 --> 00:09:50,600
Se ten os compoñentes, é
fácil de facer un compoñente máis grande.

215
00:09:50,600 --> 00:09:51,860
Isto é Contestar linguaxe para ti.

216
00:09:51,860 --> 00:09:54,270
>> Entón vai adiante e dar-
isto dunha lectura.

217
00:09:54,270 --> 00:09:55,070
Deter este vídeo.

218
00:09:55,070 --> 00:09:57,440
Bótalle un trata, se é
na casa, se non está

219
00:09:57,440 --> 00:10:00,794
familiarizados con HTML ou JavaScript

220
00:10:00,794 --> 00:10:02,960
OK, entón o que nós estamos indo a
facer é que imos facer

221
00:10:02,960 --> 00:10:06,470
un app flashcard moi básico usando Contestar.

222
00:10:06,470 --> 00:10:08,210
Nós imos ter un flashcard.

223
00:10:08,210 --> 00:10:09,880
Pode virar a tarxeta e cara atrás.

224
00:10:09,880 --> 00:10:12,399
E nós tamén imos ter unha lista de
todas as cartas que temos,

225
00:10:12,399 --> 00:10:14,190
e estamos sentindo
ambicioso, poderiamos estar

226
00:10:14,190 --> 00:10:17,060
capaz de cambiar entre
coches, premendo sobre eles.

227
00:10:17,060 --> 00:10:20,360
>> Pero este é, da súa espida
ósos, dun xeito moi sinxelo Contestar app.

228
00:10:20,360 --> 00:10:22,560
E polo que esta é, en realidade,
non trivial de aplicar,

229
00:10:22,560 --> 00:10:26,030
pero imos amosar que, se fai
este, é moi, moi fácil de estendela lo

230
00:10:26,030 --> 00:10:27,680
outras persoas axudar con iso.

231
00:10:27,680 --> 00:10:33,750
Entón, imos pasar por catro etapas
comezando de cero para construír este.

232
00:10:33,750 --> 00:10:36,740
>> OK, entón as catro etapas, imos
comezar co primeiro paso.

233
00:10:36,740 --> 00:10:39,790
O primeiro paso será
a construción do seu primeiro compoñente.

234
00:10:39,790 --> 00:10:44,830
Como dixen antes, un compoñente en Contestar
é só un elemento HTML con esteroides.

235
00:10:44,830 --> 00:10:49,660
Especifica o código HTML
e algún comportamento, e

236
00:10:49,660 --> 00:10:52,600
vai especificar como a xente
pode interactuar con el como

237
00:10:52,600 --> 00:10:54,270
el estaría interno.

238
00:10:54,270 --> 00:10:57,630
Como un botón vai saber como cantas
veces foi premendo por exemplo,

239
00:10:57,630 --> 00:11:01,010
e vai saber como poñer a si mesmo.

240
00:11:01,010 --> 00:11:04,430
>> Entón, imos adiante e construír o noso
primeiro compoñente usando JavaScript.

241
00:11:04,430 --> 00:11:09,711
Entón, se a sintaxe parece estraño,
iso é porque é tipo de.

242
00:11:09,711 --> 00:11:11,710
Entón, unha vez máis, imos
para facer unha variable chamada

243
00:11:11,710 --> 00:11:14,580
aplicación usando a palabra chave deixar,
que fai que unha variable,

244
00:11:14,580 --> 00:11:18,210
deixe App igual React.createClass.

245
00:11:18,210 --> 00:11:22,609
>> Reaccionar é unha biblioteca e posúe
a crear función de clase.

246
00:11:22,609 --> 00:11:24,400
E esta función é
un pouco de código que

247
00:11:24,400 --> 00:11:29,090
pode usar para crear un novo
Reaccionar tipo de compoñente.

248
00:11:29,090 --> 00:11:32,780
E así React.createClass
fai que un compoñente,

249
00:11:32,780 --> 00:11:35,270
e este compoñente
ser capaz de facer cousas.

250
00:11:35,270 --> 00:11:40,460
A principal cousa que pode facer é facer
algo, render como unha función.

251
00:11:40,460 --> 00:11:44,500
>> Unha vez máis, si este contido non é evidente para
ti, eu recomendo que vaia sobre JS para gatos

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

253
00:11:45,682 --> 00:11:47,710
Que é grande ben o suficiente?

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

255
00:11:48,490 --> 00:11:50,670
>> Así, cada necesidades de compoñentes
para ter unha función de renderización.

256
00:11:50,670 --> 00:11:53,010
A función de facer di,
o que podo imprimir na pantalla?

257
00:11:53,010 --> 00:11:54,760
Pero é o compoñente
inútil se iso non acontecer

258
00:11:54,760 --> 00:11:58,060
sabe o que imprimir na pantalla, así
ten que ter unha función de renderización.

259
00:11:58,060 --> 00:12:01,904
>> Entón, na cousa rende, vostede
Só ten voltar algún HTML.

260
00:12:01,904 --> 00:12:03,820
E o que é legal é que
hai unha cousa chamada

261
00:12:03,820 --> 00:12:08,660
JSX, que é unha extensión de
JavaScript que se usa por reaccionar.

262
00:12:08,660 --> 00:12:11,845
Permite que escribe Saúdos
do seu JavaScript, que

263
00:12:11,845 --> 00:12:13,970
soa medio raro cando
primeiro pensar sobre iso,

264
00:12:13,970 --> 00:12:15,553
pero fai moito sentido despois.

265
00:12:15,553 --> 00:12:17,430
Así, podemos facelo.

266
00:12:17,430 --> 00:12:21,360
Se está familiarizado con HTML, sei
temos un div cun propósito xeral

267
00:12:21,360 --> 00:12:22,790
recipiente para o material.

268
00:12:22,790 --> 00:12:26,380
Podemos volver un div, e no interior
este div, podemos poñer cousas.

269
00:12:26,380 --> 00:12:32,390
>> Entón, imos dicir que queremos facer só
un flashcard straight-up para o momento.

270
00:12:32,390 --> 00:12:34,890
O flashcard, eu diría,
terá unha pregunta e resposta.

271
00:12:34,890 --> 00:12:37,530
Entón, neste div, imos
imprimir un parágrafo

272
00:12:37,530 --> 00:12:42,155
que di question-- Cal é o
resposta final á vida, o universo?

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

274
00:12:47,640 --> 00:12:50,345
E entón a resposta é
será, por suposto, 42.

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

276
00:12:56,880 --> 00:12:59,730
>> Que non veu ben a todos.

277
00:12:59,730 --> 00:13:04,164
Si, entón basicamente pode realmente
escribir HTML no seu JavaScript.

278
00:13:04,164 --> 00:13:06,330
E iso vai ser
impresas en pantalla.

279
00:13:06,330 --> 00:13:08,250
Entón, imos probalo.

280
00:13:08,250 --> 00:13:09,520
>> Entón temos noso compoñente.

281
00:13:09,520 --> 00:13:12,210
Necesitamos dicir Contestar a poñer
o compoñente na pantalla

282
00:13:12,210 --> 00:13:18,990
así React.render, polo que entender que nós
app tratar como calquera outro elemento.

283
00:13:18,990 --> 00:13:21,010
Nós escribir-lo como el era un elemento HTML.

284
00:13:21,010 --> 00:13:25,100
Como en vez de dicir como img
á imaxe ou p para o parágrafo

285
00:13:25,100 --> 00:13:28,120
escribe App, polo que é App
tratado como un elemento HTML.

286
00:13:28,120 --> 00:13:30,380
Como dixen antes, é
un elemento en esteroides.

287
00:13:30,380 --> 00:13:32,870
>> Entón procesar App, e
darlle un lugar para poñelas.

288
00:13:32,870 --> 00:13:37,170
E é así que poida
diga a el onde poñelas.

289
00:13:37,170 --> 00:13:46,200
Eu creei un div simple na
páxina chamada cunha ID de páxina,

290
00:13:46,200 --> 00:13:48,300
e é aí onde o
elemento está indo a ir.

291
00:13:48,300 --> 00:13:49,841
>> E nós non estamos indo a executar con HTML.

292
00:13:49,841 --> 00:13:53,145
Basicamente, isto pode ir
poñer dentro deste elemento de páxina

293
00:13:53,145 --> 00:13:54,270
que temos na pantalla.

294
00:13:54,270 --> 00:13:59,210
Entón, el corre este código, e deseña esta
cousa na pantalla, entón aquí estamos.

295
00:13:59,210 --> 00:14:01,770
Fixemos o noso primeiro compoñente Contestar.

296
00:14:01,770 --> 00:14:08,000
>> Entón, así como un resumo, fixemos delicada
un novo tipo de compoñente, non?

297
00:14:08,000 --> 00:14:10,145
Iso é o que o React.createClass.

298
00:14:10,145 --> 00:14:12,680
E en que compoñente, nós
díxolle o que debe facer.

299
00:14:12,680 --> 00:14:15,590
Sempre que este compoñente é o de
ser impresa sobre a pantalla,

300
00:14:15,590 --> 00:14:19,300
ha imprimir o div con
os dous parágrafos dentro del.

301
00:14:19,300 --> 00:14:24,460
>> E o que fixemos, fixemos unha nova aplicación
usando a notación app ángulo de montaxe.

302
00:14:24,460 --> 00:14:27,160
Nós dixemos a el para poñelas
dentro do elemento principal.

303
00:14:27,160 --> 00:14:29,867
E así que eu fixen, el creou
unha nova aplicación a partir dese modelo.

304
00:14:29,867 --> 00:14:31,200
E entón eu dixen a el para facelo.

305
00:14:31,200 --> 00:14:33,680
Por iso, dixo, OK, app,
o que debo imprimir?

306
00:14:33,680 --> 00:14:36,970
App di, vai imprimir unha div
con dous parágrafos dentro dela.

307
00:14:36,970 --> 00:14:40,420
E listo, hai nosa div con
dous parágrafos dentro del.

308
00:14:40,420 --> 00:14:43,180
Ter sentido ata agora?

309
00:14:43,180 --> 00:14:46,690
>> Así, unha vez máis, todo o desafío de React
é só saber como facer compoñentes.

310
00:14:46,690 --> 00:14:48,500
Como facer que o
compoñentes traballan en conxunto.

311
00:14:48,500 --> 00:14:51,780
Agora que fixemos o noso primeiro
compoñente, imos volver

312
00:14:51,780 --> 00:14:54,284
e facer compoñentes personalizable.

313
00:14:54,284 --> 00:14:56,700
Entón vostede sabe como HTML vostede
pode dar as súas clases botóns?

314
00:14:56,700 --> 00:14:59,146
Pode dar aos seus áncoras a href.

315
00:14:59,146 --> 00:15:00,770
Pode dar aos seus inputs un tipo, non?

316
00:15:00,770 --> 00:15:04,740
Pode dar máis personalizado
Propiedades para todos os seus elementos

317
00:15:04,740 --> 00:15:06,490
para facelo máis interesante.

318
00:15:06,490 --> 00:15:09,030
E nós, de feito, pode facer
exactamente o mesmo.

319
00:15:09,030 --> 00:15:17,500
>> Entón, digamos que queremos que o noso
app para ir prestar calquera tarxeta.

320
00:15:17,500 --> 00:15:19,630
Agora só
rendeu unha tarxeta codificado.

321
00:15:19,630 --> 00:15:22,530
Sabemos que hai só un
tarxeta que pode facer, polo que estamos

322
00:15:22,530 --> 00:15:25,960
vai cambiar isto agora así
que podemos só darlle algún cartón.

323
00:15:25,960 --> 00:15:27,410
Vai imprimir a tarxeta.

324
00:15:27,410 --> 00:15:29,380
>> Debería tentar e facer o seu
compoñentes a un propósito moi xeral.

325
00:15:29,380 --> 00:15:31,654
Entón, desta maneira podería enviar correo-e
este meu amigo e ser como,

326
00:15:31,654 --> 00:15:33,820
o que quere que ten flashcard,
só alimento-lo aquí,

327
00:15:33,820 --> 00:15:35,290
e só pode facelo por si só.

328
00:15:35,290 --> 00:15:37,650
Pode pór outro
as cousas no seu propio programa.

329
00:15:37,650 --> 00:15:40,600
>> Pero primeiro, imos romper ese
Se en dúas compoñentes,

330
00:15:40,600 --> 00:15:44,500
pero queremos separar a tarxeta
impresión de parte a parte real app.

331
00:15:44,500 --> 00:15:46,660
Entón o que podemos facer é nos
Pode cambiar isto desde a App

332
00:15:46,660 --> 00:15:51,300
para CardView, só un
novo nome para a aplicación,

333
00:15:51,300 --> 00:15:54,450
e podemos facer un novo
compoñente chamado App,

334
00:15:54,450 --> 00:15:56,336
para non ser confundido co antigo App.

335
00:15:56,336 --> 00:16:00,730
Temos os createClass,
e como HTML,

336
00:16:00,730 --> 00:16:03,590
podes niño Contestar compoñentes
un dentro do outro.

337
00:16:03,590 --> 00:16:16,430
>> Entón, nesta función renderse,
función CardView retorno,

338
00:16:16,430 --> 00:16:18,234
e esta é exactamente a mesma cousa.

339
00:16:18,234 --> 00:16:19,400
Vexa por que é o mesmo?

340
00:16:19,400 --> 00:16:22,590
No canto de prestar só o app que
ten a div e vinculación dentro del,

341
00:16:22,590 --> 00:16:26,194
o app fai o CardView, eo
CardView fai a div e parágrafo.

342
00:16:26,194 --> 00:16:29,110
Polo tanto, este é o noso primeiro exemplo de
elementos de nidificación dentro de si.

343
00:16:29,110 --> 00:16:32,177
Isto ten sentido?

344
00:16:32,177 --> 00:16:33,760
Entón, de novo, temos un elemento CardView.

345
00:16:33,760 --> 00:16:37,250
Temos elementos app
que é maior que.

346
00:16:37,250 --> 00:16:40,990
>> OK, por iso queremos que o noso CardView-- se
dar unha boa CardView un determinado tarxeta,

347
00:16:40,990 --> 00:16:43,370
vai imprimir para fóra para vostede, non?

348
00:16:43,370 --> 00:16:48,050
Entón, primeiro, temos que facer unha tarxeta,
entón imos facer un obxecto de tarxeta.

349
00:16:48,050 --> 00:17:02,930
Entón deixe miña tarxeta equal--
todos vostedes están familiarizados,

350
00:17:02,930 --> 00:17:05,260
este é só o proceso de toma de notación
obxecto en JavaScript.

351
00:17:05,260 --> 00:17:09,280
É como unha especie de struct
en C, entón fixemos unha tarxeta,

352
00:17:09,280 --> 00:17:15,920
e agora podemos pasar esta tarxeta como
unha propiedade ou como un atributo HTML

353
00:17:15,920 --> 00:17:17,290
terminoloxía para o noso programa.

354
00:17:17,290 --> 00:17:20,210
Así, podemos facelo, App
tarxeta é igual MyCard.

355
00:17:20,210 --> 00:17:23,200
>> Vostede sabe como na entrada, fai
tipo de entrada é igual a de texto ou botón

356
00:17:23,200 --> 00:17:25,240
clase é igual a btn para arranque,?

357
00:17:25,240 --> 00:17:29,500
A mesma idea, equals-- tarxeta App
ten que poñer as cintas aqui--

358
00:17:29,500 --> 00:17:33,830
Tarxeta App igual MyCard, de xeito que este
di que temos ese obxecto tarxeta.

359
00:17:33,830 --> 00:17:39,149
Vou pasalo como un
propiedade para o compoñente app.

360
00:17:39,149 --> 00:17:41,440
E este compoñente App
poder acceder a ela e fazê-

361
00:17:41,440 --> 00:17:43,580
cousas interesantes con el.

362
00:17:43,580 --> 00:17:47,650
>> Así, o noso app será
dado unha tarxeta, entón polo de agora,

363
00:17:47,650 --> 00:17:49,980
teremos o app só dar-
a tarxeta para a CardView

364
00:17:49,980 --> 00:17:53,110
si mesmo, porque como o app non é
vai saber o que facer con el,

365
00:17:53,110 --> 00:17:54,850
así que imos darlle co CardView.

366
00:17:54,850 --> 00:18:00,050
Entón, imos pasalo a
Así mesmo, a tarxeta é igual,

367
00:18:00,050 --> 00:18:05,426
e de xeito que cada compoñente pode acceder a
cousas que foi dado a el.

368
00:18:05,426 --> 00:18:07,800
Poden acceder as propiedades
que foron dados a el

369
00:18:07,800 --> 00:18:09,470
usando esta sintaxe, this.props.card.

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

371
00:18:12,010 --> 00:18:14,920
>> Entón o que ocorre aquí é
ten o obxecto MyCard.

372
00:18:14,920 --> 00:18:18,250
Vostede pasalo para a aplicación
usando tarxeta App igual MyCard.

373
00:18:18,250 --> 00:18:21,420
Ese obxecto tarxeta é dada ao seu app.

374
00:18:21,420 --> 00:18:24,400
A aplicación pode acceder a ela
como this.props.card.

375
00:18:24,400 --> 00:18:28,780
É como unha especie de imaxe
sabe o que é fonte é.

376
00:18:28,780 --> 00:18:31,972
>> Esta aplicación sabe o que é tarxeta
é, e pode facer cousas con el.

377
00:18:31,972 --> 00:18:32,930
Pode facer cálculos.

378
00:18:32,930 --> 00:18:35,290
Pode tomar decisións baseadas fóra del.

379
00:18:35,290 --> 00:18:39,950
>> De momento, eu ía pasar
this.props.card na CardView.

380
00:18:39,950 --> 00:18:43,420
Ter sentido ata agora?

381
00:18:43,420 --> 00:18:45,210
Vai facer máis sentido agora.

382
00:18:45,210 --> 00:18:46,990
>> OK, entón agora estamos en CardView.

383
00:18:46,990 --> 00:18:51,719
O noso CardView, dado a tarxeta, debe
imprimir a súa pregunta e resposta.

384
00:18:51,719 --> 00:18:54,510
Agora só impreso algunhas
preguntas e respostas codificadas.

385
00:18:54,510 --> 00:18:57,720
Necesitamos descubrir out-- necesitamos
para pedir a tarxeta que nos deron

386
00:18:57,720 --> 00:19:01,360
cal é a pregunta e resposta, e
a continuación, imprimir iso na pantalla.

387
00:19:01,360 --> 00:19:02,470
>> Así, podemos facelo aquí.

388
00:19:02,470 --> 00:19:06,135
En facer begin-- primeiro facer igual.

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

390
00:19:08,710 --> 00:19:13,050
Entón, o que estamos facendo aquí é sabemos que
as cartas son connosco dado a unha propiedade,

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

392
00:19:13,580 --> 00:19:15,930
Énos dada como entrada.

393
00:19:15,930 --> 00:19:19,440
Como é case como
argumentos a unha función.

394
00:19:19,440 --> 00:19:22,810
A tarxeta é un argumento
case a esta CardView.

395
00:19:22,810 --> 00:19:25,239
>> Nós imos extraer iso, e poñer
en que a pregunta variable.

396
00:19:25,239 --> 00:19:27,280
Asegúrese de que a resposta foi
para a resposta variable.

397
00:19:27,280 --> 00:19:31,130
Solicita que a tarxeta de responder.

398
00:19:31,130 --> 00:19:35,072
E agora que temos estes,
en vez de imprimir o texto,

399
00:19:35,072 --> 00:19:37,030
nós estamos indo a imprimir
o que quere que eles nos deron.

400
00:19:37,030 --> 00:19:43,580
>> Polo tanto, este stuff-- entón imos
para pór para fóra Pregunta Resposta.

401
00:19:43,580 --> 00:19:46,380
A ver se funciona.

402
00:19:46,380 --> 00:19:52,800
Legal, entón imos percorrelo lo
unha vez só para estar seguro.

403
00:19:52,800 --> 00:20:00,470
>> Entón, meu tarxeta é a súa tarxeta de obxecto, e nós
están dando ese tarxeta para a aplicación.

404
00:20:00,470 --> 00:20:04,790
E o app vai levar a
tarxeta e dalo ao CardView.

405
00:20:04,790 --> 00:20:09,190
E este CardView di, se
dáme calquera obxecto flashcard,

406
00:20:09,190 --> 00:20:11,920
Vou imprimir a súa pregunta
ea súa resposta, non?

407
00:20:11,920 --> 00:20:14,590
>> Entón, o que eu podería facer é que podo
enviar este código, o primeiro

408
00:20:14,590 --> 00:20:16,580
como 10 liñas de meu código, para o meu amigo.

409
00:20:16,580 --> 00:20:18,820
Podería incorpora-lo en
súa propia aplicación.

410
00:20:18,820 --> 00:20:27,200
E mentres el facía o mesmo,
como tarxeta de CardView é igual a este,

411
00:20:27,200 --> 00:20:30,580
sempre que el creou o CardView
e deulle a información correcta,

412
00:20:30,580 --> 00:20:31,987
podería facer o seu propio tarxeta.

413
00:20:31,987 --> 00:20:34,320
E así deste xeito, é realmente un
forma legal para construír

414
00:20:34,320 --> 00:20:35,906
compoñentes que usan uns a outros, non?

415
00:20:35,906 --> 00:20:38,280
Esta tarxeta, eu podería publicar
este CardView en internet,

416
00:20:38,280 --> 00:20:39,790
e as persoas serían capaces de usalo.

417
00:20:39,790 --> 00:20:45,070
Entón, basicamente, é como un dos
funcións estándar na biblioteca C.

418
00:20:45,070 --> 00:20:47,280
>> É unha función onde
alguén escribiu el.

419
00:20:47,280 --> 00:20:48,419
Dá unha certa entrada.

420
00:20:48,419 --> 00:20:49,710
Vai producir un determinado produto.

421
00:20:49,710 --> 00:20:50,890
Non importa como funciona internamente.

422
00:20:50,890 --> 00:20:53,790
Sempre que dea a el o dereito
entrada, que vai facer a saída correcta.

423
00:20:53,790 --> 00:20:57,850
>> E un compoñente pode ser
pensado do mesmo xeito.

424
00:20:57,850 --> 00:21:00,280
Isto é debido a CardView
unha función de biblioteca.

425
00:21:00,280 --> 00:21:03,400
Se darlle algún tarxeta
como unha propiedade, que vai

426
00:21:03,400 --> 00:21:05,095
imprimir o contido desta carta.

427
00:21:05,095 --> 00:21:16,820
Como se eu cambiar a miña tarxeta de
en vez diso ser como o que é 5 plus 37,

428
00:21:16,820 --> 00:21:19,210
ha actualizar de conformidade.

429
00:21:19,210 --> 00:21:21,955
Entón, só cambiando a entrada,
gaña unha certa saída.

430
00:21:21,955 --> 00:21:24,830
Así, pode pensar en compoñentes case
como funcións deste xeito, que

431
00:21:24,830 --> 00:21:25,920
pode pór xuntos.

432
00:21:25,920 --> 00:21:29,440
Comeza entrada, como este CardView
como a entrada, recibe saída.

433
00:21:29,440 --> 00:21:31,900
Neste caso, a saída é o código HTML.

434
00:21:31,900 --> 00:21:34,404
Ter sentido ata agora?

435
00:21:34,404 --> 00:21:36,890
Cool, entón, de novo, as propiedades son
como pode pasar información

436
00:21:36,890 --> 00:21:40,900
a dentro e fóra de compoñentes.

437
00:21:40,900 --> 00:21:42,740
>> OK, entón imos facelo
cousa interactiva.

438
00:21:42,740 --> 00:21:44,450
Agora é medio aburrido.

439
00:21:44,450 --> 00:21:45,520
¿Que é [inaudível]?

440
00:21:45,520 --> 00:21:48,210
Pode imprimir algúns para fóra,
pero iso é todo o que podo facer.

441
00:21:48,210 --> 00:21:51,550
>> Entón, imos voltar para o
vella cuestión só de momento.

442
00:21:51,550 --> 00:21:54,405
Ok, entón agora mesmo estes compoñentes
son chat porque todo o que eles fan,

443
00:21:54,405 --> 00:21:55,030
eles están de entrada.

444
00:21:55,030 --> 00:21:56,100
Fan de saída, non?

445
00:21:56,100 --> 00:21:57,049
Iso é medio aburrido.

446
00:21:57,049 --> 00:21:59,090
Queremos ter a nosa
compoñentes para poder ter

447
00:21:59,090 --> 00:22:02,150
algún tipo de estado interno,
como lembrar de algo.

448
00:22:02,150 --> 00:22:05,320
>> Para un flashcard, por
exemplo, que tipo de estado

449
00:22:05,320 --> 00:22:07,550
pode queres
Teña en conta que para un flashcard?

450
00:22:07,550 --> 00:22:09,740
O estatuto temporal
pode querer lembrar

451
00:22:09,740 --> 00:22:12,491
para un flashcard nun flashcard app?

452
00:22:12,491 --> 00:22:13,990
Audiencia: Se xa virou?

453
00:22:13,990 --> 00:22:14,990
Neel Mehta ,: Si, certo.

454
00:22:14,990 --> 00:22:17,665
Entón podes querer manter
pista de que está orientado cara a arriba ou son

455
00:22:17,665 --> 00:22:19,100
vostede cara abaixo na tarxeta.

456
00:22:19,100 --> 00:22:23,420
En Facebook, por exemplo, faría
quere lembrar onde o comentario de noticias

457
00:22:23,420 --> 00:22:25,870
é desexa ou que é perfil
que está facendo agora.

458
00:22:25,870 --> 00:22:30,127
>> No Messenger, como o texto que
escriba no cadro de entrada, non?

459
00:22:30,127 --> 00:22:31,710
Se actualizar a páxina, el vai.

460
00:22:31,710 --> 00:22:32,793
Pero realmente non me importa.

461
00:22:32,793 --> 00:22:33,770
É só temporal.

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

463
00:22:34,548 --> 00:22:36,152
>> Audiencia: [inaudível]

464
00:22:36,152 --> 00:22:38,360
Neel Mehta ,: Como un flash
tarxeta, como pode estar a ver

465
00:22:38,360 --> 00:22:40,290
o lado pregunta ou banda a resposta?

466
00:22:40,290 --> 00:22:41,070
>> Audiencia: Aceptar.

467
00:22:41,070 --> 00:22:43,270
>> Neel Mehta ,: Como unha
flashcard dous lados, non?

468
00:22:43,270 --> 00:22:46,370
Si, así que quere
teñen esta idea de empresa

469
00:22:46,370 --> 00:22:50,370
Teño propiedades, que é como entradas,
pero o estado, que é temporal, uh,

470
00:22:50,370 --> 00:22:51,839
onde está na páxina, non?

471
00:22:51,839 --> 00:22:54,380
Unha vez máis, eu dixen en Facebook
Messenger, eu teño como que persoa

472
00:22:54,380 --> 00:22:56,550
está a ver Facebook
ou quen é o perfil, non?

473
00:22:56,550 --> 00:22:58,030
>> Isto é só temporal.

474
00:22:58,030 --> 00:23:01,200
É importante para amosar ao usuario
o que está a suceder, pero actualizar a páxina.

475
00:23:01,200 --> 00:23:02,250
Realmente non importa.

476
00:23:02,250 --> 00:23:04,530
Polo tanto, é estado temporal,
por iso, todo o estado del.

477
00:23:04,530 --> 00:23:06,250
>> Entón, de novo, non hai estado e adereços.

478
00:23:06,250 --> 00:23:09,084
Props é dada entrada
a partir da súa fonte de datos.

479
00:23:09,084 --> 00:23:10,250
Estado é como patróns.

480
00:23:10,250 --> 00:23:13,700
É como cousas que
fai a cousa interactiva.

481
00:23:13,700 --> 00:23:17,720
>> Así, no noso CardView-- teremos
nosa CardView-- por iso era bo.

482
00:23:17,720 --> 00:23:21,420
O que imos facer aquí, imos
para tocar CardView e só CardView.

483
00:23:21,420 --> 00:23:25,105
E por iso o meu amigo que ten iso,
non notar calquera diferenza.

484
00:23:25,105 --> 00:23:27,230
Non terían que cambiar
calquera dos seu propio código,

485
00:23:27,230 --> 00:23:29,410
pero verían a
CardView foi envelenado.

486
00:23:29,410 --> 00:23:31,270
Isto é unha parte agradable sobre compoñentes.

487
00:23:31,270 --> 00:23:35,290
>> OK, polo tanto, no noso CardView, imos tratar e
controlar si estamos fase up

488
00:23:35,290 --> 00:23:36,560
ou mirando cara abaixo.

489
00:23:36,560 --> 00:23:40,480
En Contestar facemos iso por primeira
especificando o estado inicial.

490
00:23:40,480 --> 00:23:42,070
Onde é que a tarxeta de comezar?

491
00:23:42,070 --> 00:23:48,480
>> Entón, ser unha función chamada getInitialState
funciona, e nós voltar un obxecto.

492
00:23:48,480 --> 00:23:53,310
Este obxecto contén algún estado, e
un estado é só un par clave-valor.

493
00:23:53,310 --> 00:23:56,950
Como en instruír, ten unha chave e un
valor, ten como nome é unha cadea.

494
00:23:56,950 --> 00:24:01,410
>> Neste caso, imos dicir fronte é certo.

495
00:24:01,410 --> 00:24:03,760
Este di que temos un Estado.

496
00:24:03,760 --> 00:24:06,570
Un dos compoñentes do estado
é un atributo chamado fronte.

497
00:24:06,570 --> 00:24:09,649
[Inaudível], entón por defecto,
estamos diante da tarxeta,

498
00:24:09,649 --> 00:24:11,440
e podemos cambiar isto
como nós virar a tarxeta.

499
00:24:11,440 --> 00:24:13,380
Ten sentido?

500
00:24:13,380 --> 00:24:18,190
>> OK, por iso, render, agora, estamos
mostrando a pregunta ea resposta.

501
00:24:18,190 --> 00:24:20,860
Agora o que temos que facer
é mostrar a cuestión

502
00:24:20,860 --> 00:24:24,370
se estamos diante da tarxeta para
a resposta é a parte de atrás da tarxeta.

503
00:24:24,370 --> 00:24:26,850
É por iso que todos fan
a tarxeta interactiva.

504
00:24:26,850 --> 00:24:28,100
Entón, imos tratar e para este aquí.

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

506
00:24:31,600 --> 00:24:33,620
Ben, primeiro faga só unha variable.

507
00:24:33,620 --> 00:24:37,790
Podemos preguntar agora this.state.front.

508
00:24:37,790 --> 00:24:42,010
Temos acceso a afirmar o mesmo que
adereços de acceso, para this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Se estamos á cabeza, a continuación, o texto
é this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
Se estamos diante do
tarxeta, imos tratar e garra

512
00:24:51,360 --> 00:24:52,485
a cuestión da tarxeta.

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

514
00:24:54,782 --> 00:24:57,240
Se non, se estamos na parte de atrás
da tarxeta, o que imos facer?

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

516
00:25:01,830 --> 00:25:02,750
>> Audiencia: A resposta?

517
00:25:02,750 --> 00:25:05,041
>> Neel Mehta ,: Si, así que o texto
é igual a this.props.card.answer.

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

519
00:25:08,472 --> 00:25:10,930
Pero se notar, estamos usando
o Estado a tomar unha decisión

520
00:25:10,930 --> 00:25:14,420
porque agora o compoñente
terá un aspecto diferente

521
00:25:14,420 --> 00:25:16,710
baseado fóra que estes interactúan con el.

522
00:25:16,710 --> 00:25:20,355
Entón, en vez de imprimir iso,
imos só imprimir o texto.

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

524
00:25:25,270 --> 00:25:28,650
Cool, así agora, como se ve,
vemos só a cuestión.

525
00:25:28,650 --> 00:25:37,720
E se eu cambiar o estado manualmente aquí
adiante é falsa temos 42 volta.

526
00:25:37,720 --> 00:25:39,720
>> Entón, de novo, este compoñente
ten o seu propio estado.

527
00:25:39,720 --> 00:25:43,440
Como un botón sabe se
foi presionado ou non,

528
00:25:43,440 --> 00:25:46,080
esta cousa sabe cal é a
parte dianteira ou na parte de atrás.

529
00:25:46,080 --> 00:25:48,320
Por defecto, está diante.

530
00:25:48,320 --> 00:25:50,840
E, a continuación, se é na parte da fronte,
imos imprimir a cuestión.

531
00:25:50,840 --> 00:25:53,106
Se é na parte de atrás, imos
imprimir a resposta.

532
00:25:53,106 --> 00:25:54,980
Así, unha vez máis, a información
dada é a mesma.

533
00:25:54,980 --> 00:25:59,090
El só parece diferente
en base a como programa-lo.

534
00:25:59,090 --> 00:26:02,670
Así, por exemplo, Facebook Messenger,
mesmo se recibe a mesma fonte de datos,

535
00:26:02,670 --> 00:26:05,170
pode ser diferente
porque o estado é diferente.

536
00:26:05,170 --> 00:26:08,421
Está mirando para un
A mensaxe de diferente persoa.

537
00:26:08,421 --> 00:26:10,930
>> OK, entón iso é todo ben e
bo, pero agora o que é, en realidade,

538
00:26:10,930 --> 00:26:15,940
facer-nos capaces de cambiar, si
nosa tarxeta é fronte ou cara atrás.

539
00:26:15,940 --> 00:26:19,010
Podemos facelo engadindo un flip
botón, un botón para que a tarxeta

540
00:26:19,010 --> 00:26:22,950
vai virar a tarxeta, se é [inaudível].

541
00:26:22,950 --> 00:26:31,770
Entón, imos engadir un botón aquí, este
botón, e este botón pode dicir flip.

542
00:26:31,770 --> 00:26:35,650
>> E así agora,
non fai nada.

543
00:26:35,650 --> 00:26:37,075
El só parece bo.

544
00:26:37,075 --> 00:26:43,650
O que podemos facer é que podemos engadir un click
manipulador, onclick é igual this.flip,

545
00:26:43,650 --> 00:26:44,820
e imos definir aleta máis tarde.

546
00:26:44,820 --> 00:26:47,120
Pero, basicamente, onclick
é unha función que

547
00:26:47,120 --> 00:26:48,675
é chamada cando o usuario fai clic nel.

548
00:26:48,675 --> 00:26:52,330
>> Así, o botón vai saber
cando foi premendo.

549
00:26:52,330 --> 00:26:54,750
Fun foi premendo,
vai virar a tarxeta.

550
00:26:54,750 --> 00:26:58,382
É unha especie de como a súa
entregador de pizza.

551
00:26:58,382 --> 00:27:01,590
Vostede é como, así, sempre que alguén
me chama, eu vou entregar pizza, non?

552
00:27:01,590 --> 00:27:03,420
>> Rexistrar este ouvinte.

553
00:27:03,420 --> 00:27:04,530
Vostede escoita a un evento.

554
00:27:04,530 --> 00:27:07,657
Vostede é chamado, e cando o
evento ocorre, facer algo.

555
00:27:07,657 --> 00:27:08,240
Comeza pizza.

556
00:27:08,240 --> 00:27:11,480
Neste caso, cando está
premendo, virar a tarxeta.

557
00:27:11,480 --> 00:27:14,560
>> E por iso necesitamos definir un
función que vai virar a tarxeta,

558
00:27:14,560 --> 00:27:17,930
entón imos escribir este dereito
aquí, flip función.

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

560
00:27:20,850 --> 00:27:23,680
E entón o que pensas que virar vai facer?

561
00:27:23,680 --> 00:27:27,180
De novo, isto é chamada cando
prememos no botón flip.

562
00:27:27,180 --> 00:27:29,406
O que debe o flip función facer?

563
00:27:29,406 --> 00:27:34,136
>> Audiencia: Cambio this.state.front
de certo para falso, falso para certo.

564
00:27:34,136 --> 00:27:38,420
>> Neel Mehta ,: Si, así que tomar o que quere
this.front é-- o estado fronte é.

565
00:27:38,420 --> 00:27:40,930
Levar o estado á fronte, se
é verdade, facela falsa.

566
00:27:40,930 --> 00:27:42,530
Se é falso, facelo realidade, non?

567
00:27:42,530 --> 00:27:45,330
Entón, imos tentar iso.

568
00:27:45,330 --> 00:27:48,240
>> Non pode cambiar o estado
só facendo this.state.

569
00:27:48,240 --> 00:27:50,380
Non pode facelo.

570
00:27:50,380 --> 00:27:52,030
Non pode facelo.

571
00:27:52,030 --> 00:27:55,810
Tes que usar unha función
chamado this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Entón pode dicir this.setState fronte
colon, onde esta, unha vez máis, a exclamación

573
00:28:03,230 --> 00:28:04,330
punto significa o contrario.

574
00:28:04,330 --> 00:28:07,420
Eu creo que si iso. state.front
É certo, que vai virar falsa.

575
00:28:07,420 --> 00:28:09,170
Entón, imos definir o estado
de certo para falso.

576
00:28:09,170 --> 00:28:11,430
Se é falso, imos
configure-lo teito para certo.

577
00:28:11,430 --> 00:28:17,210
>> Basta sinalar que definir e obter un pouco
diferente, e entón imos tentar iso.

578
00:28:17,210 --> 00:28:18,675
Bada Bing, mire para isto.

579
00:28:18,675 --> 00:28:21,810
O botón FLIP agora
cambiar a fronte cara atrás Estado.

580
00:28:21,810 --> 00:28:24,990
>> E iso aquí é onde se ve un
pouco da maxia do Contestar.

581
00:28:24,990 --> 00:28:28,420
Como nunca dixo a el para volver a facer.

582
00:28:28,420 --> 00:28:30,910
Nunca dixen que redeseñar nada.

583
00:28:30,910 --> 00:28:32,630
Se está facendo iso
sen reaccionar, vostede

584
00:28:32,630 --> 00:28:34,588
ter como cando o a--
aleta botón é premendo,

585
00:28:34,588 --> 00:28:37,290
que tería que dicirlle para
manualmente renderizar novo, non?

586
00:28:37,290 --> 00:28:43,050
>> Reaccionar é moi legal en que se
darlle un certo estado e propiedades,

587
00:28:43,050 --> 00:28:45,760
el sempre ha procesar
exactamente o mesmo.

588
00:28:45,760 --> 00:28:48,690
E así, cando nós xa cambiamos
o Estado e as propiedades,

589
00:28:48,690 --> 00:28:50,819
reaccionan só re-fai a cousa toda.

590
00:28:50,819 --> 00:28:52,860
El sabe que hai unha
un-para-un correo

591
00:28:52,860 --> 00:28:57,270
entre Estado e de parámetro e HTML.

592
00:28:57,270 --> 00:29:00,110
Así, sempre que un deses
cambios a través dun conxunto de estado,

593
00:29:00,110 --> 00:29:03,750
vai cambiar o xeito no que o
salario é re-procesado.

594
00:29:03,750 --> 00:29:06,650
E entón basicamente Contestar é como
esperando por ti para cambiar.

595
00:29:06,650 --> 00:29:09,870
>> Sempre que se muda algo,
vai volver a procesar a páxina enteira.

596
00:29:09,870 --> 00:29:12,480
E se iso soa ineficiente,
é porque sería,

597
00:29:12,480 --> 00:29:15,050
pero reaccionan usa unha cousa
chamado DOM Shadow.

598
00:29:15,050 --> 00:29:19,950
No canto de deseñar a páxina directamente,
mantén a árbore HTML virtuais na memoria.

599
00:29:19,950 --> 00:29:23,620
>> Vostede sabe, HTML é como unha árbore,
como unha estrutura de datos xerárquica.

600
00:29:23,620 --> 00:29:28,990
Mantén unha árbore falsa na memoria,
e sempre que actualizar a páxina,

601
00:29:28,990 --> 00:29:31,940
vai chamar outra falsificación
árbore, e só pode calcular

602
00:29:31,940 --> 00:29:35,120
o que necesita cambiar a facer o
páxina para facer as dúas árbores iguais.

603
00:29:35,120 --> 00:29:38,540
Entón, basicamente, practicamente
re-fai moito.

604
00:29:38,540 --> 00:29:41,540
E entón el só cambia o gusto
páxina en pequenos axustes que corresponda,

605
00:29:41,540 --> 00:29:44,240
polo que é moi, moi, moi eficiente.

606
00:29:44,240 --> 00:29:46,970
>> Entón, basicamente Contestar vai
sempre que cambiar algo,

607
00:29:46,970 --> 00:29:49,010
vai volver a procesar a páxina virtualmente.

608
00:29:49,010 --> 00:29:52,830
Vai descubrir o que eu teño
cambiar para facer a páxina real reflexione

609
00:29:52,830 --> 00:29:55,602
a páxina virtual, e só pode facer iso.

610
00:29:55,602 --> 00:29:56,560
Ese é o DOM virtual.

611
00:29:56,560 --> 00:29:59,350
É un dos maiores
características de React.

612
00:29:59,350 --> 00:30:00,880
>> Isto ten sentido?

613
00:30:00,880 --> 00:30:01,540
Algunha pregunta?

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

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

616
00:30:05,568 --> 00:30:08,969
>> Audiencia: Como funciona
comparar aínda ao MVC

617
00:30:08,969 --> 00:30:10,760
que falamos
recursos como antes.

618
00:30:10,760 --> 00:30:13,527
>> Neel Mehta ,: Si, a cuestión
é o xeito no que se compara a MVC?

619
00:30:13,527 --> 00:30:14,610
Vostede preguntou sobre recursos.

620
00:30:14,610 --> 00:30:16,445
Ben, imos falar sobre como funciona.

621
00:30:16,445 --> 00:30:18,190
>> En MVC, actualizar o modelo.

622
00:30:18,190 --> 00:30:20,560
Neste caso, nós teriamos un modelo de tarxeta.

623
00:30:20,560 --> 00:30:24,540
A vista tería o
aleta botón, eo control

624
00:30:24,540 --> 00:30:26,310
tería a función de flip.

625
00:30:26,310 --> 00:30:28,450
Así, a vista contaría a
controlador de flip flip.

626
00:30:28,450 --> 00:30:30,370
Virar diría ao
modelo para cambiar, non?

627
00:30:30,370 --> 00:30:33,915
>> E así, cando fai un MVC, vostede
escoite o modelo para cambiar,

628
00:30:33,915 --> 00:30:37,150
e re-procesar a visión de conformidade.

629
00:30:37,150 --> 00:30:39,210
Ou só ten que gustar
ten o controlador.

630
00:30:39,210 --> 00:30:42,418
Agarde ata que o modelo de cambiar, e, a continuación,
escoller unha parte como unha cousa

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

632
00:30:44,032 --> 00:30:45,740
Aquí temos unha cousa,
pero nun gran app,

633
00:30:45,740 --> 00:30:48,510
ten que gusta de lembrar o que
o cambio de cada lugar,

634
00:30:48,510 --> 00:30:50,290
polo que é un pouco aburrido.

635
00:30:50,290 --> 00:30:53,670
E así Contestar é bo
porque ten un don sombra.

636
00:30:53,670 --> 00:30:56,040
Pode dar o luxo de só
reescribir a cousa toda.

637
00:30:56,040 --> 00:30:58,680
Non ten que selectivamente
como adiviñar o que para actualizar.

638
00:30:58,680 --> 00:31:02,186
>> En Facebook, se desexa
obter unha nova mensaxe, en MVC,

639
00:31:02,186 --> 00:31:04,060
ten que lembrar,
OK, cambiar as cousas

640
00:31:04,060 --> 00:31:06,260
na parte superior da
páxina, a icona da mensaxe.

641
00:31:06,260 --> 00:31:08,290
Tamén pop unha nova ventá na parte inferior.

642
00:31:08,290 --> 00:31:10,070
Tamén facer unha cousa nova nesa ventá.

643
00:31:10,070 --> 00:31:11,060
Tamén reproducir un son.

644
00:31:11,060 --> 00:31:13,150
>> Iso é unha chea de cousas
indo a fóra á vez.

645
00:31:13,150 --> 00:31:15,320
E por iso, se non fai iso
ter un don sombra,

646
00:31:15,320 --> 00:31:18,740
ten que facelo manualmente porque
non pode se librar de toda a páxina.

647
00:31:18,740 --> 00:31:21,430
Non pode dar ao luxo de, así que ten
para cambiar cada cousa manualmente

648
00:31:21,430 --> 00:31:23,990
que é realmente irritante no MVC.

649
00:31:23,990 --> 00:31:27,640
>> Así, a fin de ser
parcimonioso, eles selectivamente

650
00:31:27,640 --> 00:31:30,750
actualizar a páxina, o que é
eficiente, pero tamén irritante.

651
00:31:30,750 --> 00:31:34,002
En Contestar, por mor da sombra
Don, ten as dúas cousas de balde.

652
00:31:34,002 --> 00:31:35,710
É eficiente, pois
da sombra Don.

653
00:31:35,710 --> 00:31:37,210
O pescozo está a actualizar a páxina.

654
00:31:37,210 --> 00:31:40,292
Non está facendo a manipulación de árbore.

655
00:31:40,292 --> 00:31:41,250
Comeza a eficiencia.

656
00:31:41,250 --> 00:31:45,420
Tamén terá a facilidade de uso, porque
se acaba de reescribir a páxina enteira,

657
00:31:45,420 --> 00:31:48,970
pero só sabe, todo ben, as cousas
estará na páxina en algún lugar.

658
00:31:48,970 --> 00:31:51,180
Pode ser nun lugar diferente, pero
vai estar na páxina, non?

659
00:31:51,180 --> 00:31:52,860
Entón só re-renderizado
a cousa toda virtualmente,

660
00:31:52,860 --> 00:31:55,540
e pode facer un par
cambios na propia páxina.

661
00:31:55,540 --> 00:31:57,850
>> Entón, de novo, en MVC vostede
tería que escoller

662
00:31:57,850 --> 00:32:01,840
entre facilidade de uso e eficiencia,
e reaccionar, ten as dúas.

663
00:32:01,840 --> 00:32:04,020
Entón é mellor.

664
00:32:04,020 --> 00:32:05,220
Ten sentido?

665
00:32:05,220 --> 00:32:06,676
Sólido.

666
00:32:06,676 --> 00:32:12,080
>> OK, entón imos ver imos falar
un pouco sobre o paso 4,

667
00:32:12,080 --> 00:32:14,740
como podemos incorporar compoñentes.

668
00:32:14,740 --> 00:32:16,260
Entón temos iso agora.

669
00:32:16,260 --> 00:32:19,420
Temos o noso pequeno botón legal.

670
00:32:19,420 --> 00:32:23,157
Podemos lanzalo cara atrás e
diante, e iso é todo o que fai.

671
00:32:23,157 --> 00:32:24,990
Digamos que queremos
ten outro compoñente.

672
00:32:24,990 --> 00:32:28,730
Digamos que o noso app flashcard debe
contén unha lista de todas as tarxetas

673
00:32:28,730 --> 00:32:31,520
que ten, o que significa que
debe ter outro compoñente.

674
00:32:31,520 --> 00:32:32,970
Ben, quizais chamalo dunha lista.

675
00:32:32,970 --> 00:32:36,200
Imos facer unha exhibición de lista que
coexiste coa CardView,

676
00:32:36,200 --> 00:32:39,680
e esta visión de lista e CardView
vai gusta de traballar en conxunto.

677
00:32:39,680 --> 00:32:43,190
E pode combina-los
para facer o noso app para ti.

678
00:32:43,190 --> 00:32:45,160
>> Entón, primeiro, imos facer unha
máis algunhas cartas dereito.

679
00:32:45,160 --> 00:32:46,370
Imos dicir, o que as tarxetas?

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

681
00:32:49,619 --> 00:32:51,910
E só entón eu non teño que
aborrece-lo con escribindo-o,

682
00:32:51,910 --> 00:32:53,410
Eu só vou copialo dende aquí.

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

684
00:33:01,664 --> 00:33:03,580
E entón eu estou indo a non
darlle só unha tarxeta.

685
00:33:03,580 --> 00:33:06,910
Vou darlle unha serie de cartas.

686
00:33:06,910 --> 00:33:10,240
Entón, primeiro as aplicacións
vai romper de momento.

687
00:33:10,240 --> 00:33:14,717
Todo ben, entón imos facer
este capaz de tratar con varios tarxetas.

688
00:33:14,717 --> 00:33:17,800
Entón, primeiro, imos dar-lle, non
só unha tarxeta, pero unha serie de tarxetas,

689
00:33:17,800 --> 00:33:18,700
como unha lista de tarxetas.

690
00:33:18,700 --> 00:33:20,980
E neste caso, temos tres deles.

691
00:33:20,980 --> 00:33:27,280
>> Todo ben, entón é así app
indo para obter unha lista de tarxetas,

692
00:33:27,280 --> 00:33:29,870
e só pode decidir que
un para mostrar ao CardView.

693
00:33:29,870 --> 00:33:33,740
O CardView só pode
facer unha tarxeta, pero o app

694
00:33:33,740 --> 00:33:37,610
obtén unha lista de todas as cartas, non?

695
00:33:37,610 --> 00:33:40,820
>> Entón, cando descubrir un
tarxeta dando a CardView,

696
00:33:40,820 --> 00:33:44,660
como é que creo que pode ser capaz
para tomar unha decisión sobre cal tarxeta

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

698
00:33:47,064 --> 00:33:49,980
Para lle dar unha información, é temporalmente
Vai estar a ver un determinado tarxeta.

699
00:33:49,980 --> 00:33:53,260
Se actualizar a páxina, vai
só volver a primeira tarxeta.

700
00:33:53,260 --> 00:33:55,464
Iso é OK, porque iso é temporal.

701
00:33:55,464 --> 00:33:56,630
Que técnica poderiamos usar?

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

703
00:34:02,534 --> 00:34:08,760
>> Audiencia: Podería facer unha variable
así como tiña diante.

704
00:34:08,760 --> 00:34:11,989
Isto é certo, podería
ten tarxeta actual é igual a 1?

705
00:34:11,989 --> 00:34:14,150
>> Neel Mehta ,: Si, por iso,
quere estar, non?

706
00:34:14,150 --> 00:34:16,080
Usaría Estado na
compoñente para descubrir

707
00:34:16,080 --> 00:34:17,288
que tarxeta queremos chegar.

708
00:34:17,288 --> 00:34:19,290
Como temos unha lista de
todas as cartas, imos

709
00:34:19,290 --> 00:34:21,630
usar o estado para descubrir
un dos primeiro cartón,

710
00:34:21,630 --> 00:34:23,710
segundo cartón, cartón terceiro, e así por diante.

711
00:34:23,710 --> 00:34:28,760
>> Así, unha aplicación para unha aplicación terá unha
teñen a función getInitialState,

712
00:34:28,760 --> 00:34:35,020
retorno función getInitialState.

713
00:34:35,020 --> 00:34:39,929
E nós imos só dicir activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Entón, agora a nosa aplicación ten o seu propio estado.

715
00:34:42,889 --> 00:34:47,179
>> E agora sobre render, para descubrir
unha tarxeta, imos só ir á matriz

716
00:34:47,179 --> 00:34:49,969
e coller a cousa nese índice.

717
00:34:49,969 --> 00:34:53,580
Escolla unha tarxeta this.props.cards iguais
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
Entón, como ve aquí, os adereços e
o estado realmente traballar xuntos.

720
00:35:00,162 --> 00:35:08,990
Polo tanto, agora que temos o noso ActiveCard,
imos chamalo ActiveCard,

721
00:35:08,990 --> 00:35:10,470
e veremos se funciona.

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

723
00:35:20,320 --> 00:35:20,820
[Inaudível]

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

725
00:35:41,504 --> 00:35:44,900
>> Oh, que foi un erro de texto.

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, si, entón agora estabamos de volta
onde estabamos antes, non?

729
00:35:54,840 --> 00:35:57,100
Programa antigo mesmo, excepto
agora podemos apoiar

730
00:35:57,100 --> 00:35:59,390
unha lista de tarxetas, e non só unha tarxeta.

731
00:35:59,390 --> 00:36:04,130
E agora, unha vez máis, se cambiamos o
activeIndex podemos ir de 0 a 1,

732
00:36:04,130 --> 00:36:07,330
e agora que segundo cartón,
e despois fomos a 0.

733
00:36:07,330 --> 00:36:10,390
Entón aquí está o novo
turbinado coa versión do noso.

734
00:36:10,390 --> 00:36:16,000
>> OK, entón agora imos dar unha vista de lista que
mostra todas as tarxetas no seu programa,

735
00:36:16,000 --> 00:36:19,980
así que imos facer unha nova
compoñente chamado listView.

736
00:36:19,980 --> 00:36:22,155
Imos listView igual react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
Por iso, queremos prestar desordenada
lista con un elemento da lista para cada tarxeta.

739
00:36:38,800 --> 00:36:41,490
E así temos unha morea de tarxetas.

740
00:36:41,490 --> 00:36:44,990
Queremos un elemento da lista
para cada tarxeta, non?

741
00:36:44,990 --> 00:36:47,490
Poderiamos facer un loop for ou
algo para facer un novo elemento da lista.

742
00:36:47,490 --> 00:36:50,522
Pero o xeito no que facelo en
Reaccionar, usar unha cousa chamada mapa.

743
00:36:50,522 --> 00:36:57,150
Map é unha ferramenta ou unha función que utiliza
que, para cada elemento, executa algunha función,

744
00:36:57,150 --> 00:36:59,510
toma valor de retorno, e
dálle de volta.

745
00:36:59,510 --> 00:37:06,310
>> Así, como exemplo, temos a matriz
1, 2, e este function-- 3.map

746
00:37:06,310 --> 00:37:12,120
é un atallo para un
function-- x frecha x veces x.

747
00:37:12,120 --> 00:37:16,110
Este di, para cada número
en 1, 2, 3, toma-lo.

748
00:37:16,110 --> 00:37:17,800
Cadrado-lo e devolve-lo.

749
00:37:17,800 --> 00:37:22,090
Entón, o que pensas que 1,
2, vai 3.map x x tempos

750
00:37:22,090 --> 00:37:25,480
x dálle ao dada
que esta función é

751
00:37:25,480 --> 00:37:27,680
executado en cada elemento desta matriz.

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

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

754
00:37:32,190 --> 00:37:35,709
>> Neel Mehta ,: Si, 1, 4, 9
porque fai 1 veces 1.

755
00:37:35,709 --> 00:37:36,500
Isto dálle un.

756
00:37:36,500 --> 00:37:37,690
Ese é o primeiro elemento.

757
00:37:37,690 --> 00:37:38,530
>> 2 veces 2 é 4.

758
00:37:38,530 --> 00:37:39,570
Isto é un segundo elemento.

759
00:37:39,570 --> 00:37:40,310
3 veces 3 é 9.

760
00:37:40,310 --> 00:37:41,540
Isto é un terceiro elemento.

761
00:37:41,540 --> 00:37:42,640
Ten sentido?

762
00:37:42,640 --> 00:37:45,015
Así mapa ten unha técnica que
usar na programadores funcionais,

763
00:37:45,015 --> 00:37:48,090
o novo estilo de
programación para facer algo

764
00:37:48,090 --> 00:37:50,500
para cada elemento na súa lista.

765
00:37:50,500 --> 00:37:51,970
E así que soa familiar.

766
00:37:51,970 --> 00:37:53,370
Temos unha lista de tarxetas.

767
00:37:53,370 --> 00:37:56,860
Queremos obter un elemento da lista para cada
un, así que imos usar o mapa aquí.

768
00:37:56,860 --> 00:38:00,250
Imos dicir, imos lista equals
this.props, tarxetas, mapa.

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

770
00:38:10,580 --> 00:38:15,070
>> E así dado unha tarxeta, estamos
vai xerar un elemento de lista

771
00:38:15,070 --> 00:38:17,580
con contidos que lado da tarxeta do mesmo.

772
00:38:17,580 --> 00:38:20,660
Nós só dicir que queremos dar a fóra
as tarxetas de cuestionar tan card.question.

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

774
00:38:24,990 --> 00:38:30,649
Polo tanto, esta lista mostra unha
variedade de elementos de lista ou de LI

775
00:38:30,649 --> 00:38:32,440
onde hai unha lista
elemento para cada tarxeta,

776
00:38:32,440 --> 00:38:35,150
e que contén o tema tarxetas.

777
00:38:35,150 --> 00:38:37,640
Ten sentido?

778
00:38:37,640 --> 00:38:39,450
>> Cool, entón agora imos
realmente imprimir iso.

779
00:38:39,450 --> 00:38:46,521
Entón, imos voltar un ul.

780
00:38:46,521 --> 00:38:49,020
Dentro desta lista non ordenada,
nós só vou ir a listaxe

781
00:38:49,020 --> 00:38:49,890
que nos deron.

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

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

784
00:38:53,350 --> 00:38:56,060
>> Todo ben, entón agora este
exhibición de lista funciona só atopar.

785
00:38:56,060 --> 00:38:59,842
Dúbidas sobre a exhibición de lista?

786
00:38:59,842 --> 00:39:01,270
Ten unha morea de tarxetas.

787
00:39:01,270 --> 00:39:02,800
Fai un elemento da lista para cada tarxeta.

788
00:39:02,800 --> 00:39:05,466
E poñer-los dentro dun non-ordenada
lista, e dá-lo de volta.

789
00:39:05,466 --> 00:39:09,410
Entón agora imos actuar para que embutir
iso dentro do noso programa,

790
00:39:09,410 --> 00:39:14,310
para que poidamos facelo, exhibición de lista.

791
00:39:14,310 --> 00:39:17,070
O argumento é que imos pasar á lista de exhibición?

792
00:39:17,070 --> 00:39:18,320
Que propiedades que imos darlle?

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

794
00:39:25,111 --> 00:39:26,860
Teña en conta que, se der
que unha morea de tarxetas,

795
00:39:26,860 --> 00:39:29,590
vai facer a lista
ver para as tarxetas.

796
00:39:29,590 --> 00:39:32,267
Entón o que nós pasamos
aquí como o argumento?

797
00:39:32,267 --> 00:39:33,350
Audiencia: Unha lista de cartas?

798
00:39:33,350 --> 00:39:37,130
Neel Mehta ,: Si, entón tarxetas
é igual a this.props.cards, non?

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

800
00:39:39,850 --> 00:39:44,370
E así o único problema
é que só se pode

801
00:39:44,370 --> 00:39:48,600
virou un elemento de nivel superior en renderse,
entón ten para envolve-lo nunha div.

802
00:39:48,600 --> 00:39:49,100
É estraño.

803
00:39:49,100 --> 00:39:56,190

804
00:39:56,190 --> 00:39:57,530
Entón imos ver se iso.

805
00:39:57,530 --> 00:40:09,790

806
00:40:09,790 --> 00:40:10,560
Será que isto funciona?

807
00:40:10,560 --> 00:40:29,774

808
00:40:29,774 --> 00:40:31,030
>> Si, alí vai.

809
00:40:31,030 --> 00:40:33,700
Polo tanto, agora temos unha lista
de cartas no fondo,

810
00:40:33,700 --> 00:40:36,180
e despois temos o noso
CardView-se na parte superior,

811
00:40:36,180 --> 00:40:40,486
e que vai virar entre
os dous lados da tarxeta.

812
00:40:40,486 --> 00:40:42,610
Agora que ten sentido como eu fixen iso?

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
É, por tanto, de novo, temos dous compoñentes.

815
00:40:46,790 --> 00:40:49,666
As primeiras impresións de compoñentes
fóra todas as tarxetas da lista.

816
00:40:49,666 --> 00:40:50,540
Esa é a exhibición de lista.

817
00:40:50,540 --> 00:40:54,770
E o segundo compoñente
imprime só a tarxeta.

818
00:40:54,770 --> 00:40:58,840
Se darlle un certo tarxeta, que vai
imprimir información sobre este tarxeta

819
00:40:58,840 --> 00:41:01,870
e deixalo pasar cara atrás e cara adiante.

820
00:41:01,870 --> 00:41:05,850
>> Polo tanto, se queremos, podemos probar e falar
sobre a adición de algúns novos recursos para iso.

821
00:41:05,850 --> 00:41:09,482
Se non, podemos falar un pouco máis
preto de velocidade do reactor,

822
00:41:09,482 --> 00:41:11,190
ou podemos responder
dúbidas que poida ter

823
00:41:11,190 --> 00:41:15,050
porque estas son todas as partes centrais
de reaccionar que quero falar.

824
00:41:15,050 --> 00:41:16,540
Podemos ir adiante.

825
00:41:16,540 --> 00:41:17,590
Podemos responder a preguntas.

826
00:41:17,590 --> 00:41:18,560
O que queiras.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> Audiencia: Pode usar
JSX en JavaScript normal?

829
00:41:24,205 --> 00:41:27,150
Ou iso é algo que
veu co [inaudível]?

830
00:41:27,150 --> 00:41:30,760
>> Neel Mehta ,: A cuestión é lata
usa JSX con JavaScript normal?

831
00:41:30,760 --> 00:41:32,620
A resposta é si.

832
00:41:32,620 --> 00:41:41,070
JSX é só unha forma de que leva o seu
JavaScript que ten HTML dentro del,

833
00:41:41,070 --> 00:41:44,215
e compila en JavaScript que
Non ten HTML dentro del.

834
00:41:44,215 --> 00:41:47,880
Entón, observe isso-- así notar aquí.

835
00:41:47,880 --> 00:41:50,820
Isto parece que ten como div
e ten cousas dentro dela.

836
00:41:50,820 --> 00:41:54,970
>> Que compila a JavaScript que
como xera o mesmo.

837
00:41:54,970 --> 00:41:59,590
Eu creo que o que eu digo é que
JSX é só unha sintáctica, como é

838
00:41:59,590 --> 00:42:03,530
un pre-procesador para JavaScript moi
como PHP é un pre-procesador para HTML.

839
00:42:03,530 --> 00:42:05,490
JSC é un pre-procesador
para JavaScript que permite

840
00:42:05,490 --> 00:42:12,970
poñer HTML no seu JavaScript.

841
00:42:12,970 --> 00:42:16,425
E por iso, se ten dereito transformador
que é unha cousa chamada [inaudível]

842
00:42:16,425 --> 00:42:17,300
que ha transformar.

843
00:42:17,300 --> 00:42:19,360
O pre-procesador correcto,
que vai deixar que facelo.

844
00:42:19,360 --> 00:42:20,235
>> Audiencia: [inaudível]

845
00:42:20,235 --> 00:42:23,026
Neel Mehta ,: Normalmente non é preciso
para poñer HTML dentro JavaScript

846
00:42:23,026 --> 00:42:24,110
a menos que o seu facer Contestar.

847
00:42:24,110 --> 00:42:27,146
Pero pode facelo de calquera maneira.

848
00:42:27,146 --> 00:42:27,645
Yep?

849
00:42:27,645 --> 00:42:29,353
>> Audiencia: Eu creo que
describira Contestar

850
00:42:29,353 --> 00:42:31,970
como unha linguaxe de programación funcional.

851
00:42:31,970 --> 00:42:35,646
Temos benvida a aprender C en CS50.

852
00:42:35,646 --> 00:42:38,032
C tamén é unha linguaxe funcional?

853
00:42:38,032 --> 00:42:39,990
Neel Mehta ,: Entón a cuestión
é sobre funcional

854
00:42:39,990 --> 00:42:43,010
versus outro cousa chamada
programación imperativa ou procesual.

855
00:42:43,010 --> 00:42:44,820
Hai dous tipos de programas populares.

856
00:42:44,820 --> 00:42:48,550
Un chámase procedemento, que
é todo sobre como facer comandos,

857
00:42:48,550 --> 00:42:51,510
e un é funcional, que é todo
de ter funcións e tendo

858
00:42:51,510 --> 00:42:52,930
entrada e saída das persoas.

859
00:42:52,930 --> 00:42:55,930
Reaccionar é un paradigma funcional.

860
00:42:55,930 --> 00:42:58,010
C é un paradigma moi procesual.

861
00:42:58,010 --> 00:43:02,360
>> E como exemplo, C, por exemplo,
non fai deste xeito declarativa

862
00:43:02,360 --> 00:43:04,390
de facer o programa, non?

863
00:43:04,390 --> 00:43:06,826
Ten que dicir, imprimir esta.

864
00:43:06,826 --> 00:43:07,950
Cambiar esta estrutura de datos.

865
00:43:07,950 --> 00:43:08,530
Imprimir esta.

866
00:43:08,530 --> 00:43:10,160
É todo sobre os comandos.

867
00:43:10,160 --> 00:43:12,640
>> En Contestar, non hai
que moitos comandos.

868
00:43:12,640 --> 00:43:15,145
É todo sobre ter
compoñentes que xuntos.

869
00:43:15,145 --> 00:43:16,300
Son como funcións.

870
00:43:16,300 --> 00:43:26,360
Ten como función
chamado CardView,

871
00:43:26,360 --> 00:43:28,680
que é unha función
que ten entrada, saída,

872
00:43:28,680 --> 00:43:30,660
e así por reaccionar é todo
sobre esta filosofía

873
00:43:30,660 --> 00:43:32,700
nos de having-- ten datos.

874
00:43:32,700 --> 00:43:34,910
Vostede pasalo a través deste
algoritmo, e só pode

875
00:43:34,910 --> 00:43:36,800
HTML de saída que
só impreso da páxina,

876
00:43:36,800 --> 00:43:39,180
e entón tes que
constrúe-lo peza por peza.

877
00:43:39,180 --> 00:43:42,800
>> Entón, para deseñar unha metáfora para o que
Dixo antes, vostede sabe como

878
00:43:42,800 --> 00:43:47,050
en Facebook, se recibe unha mensaxe,
e escolle que partes para actualizar,

879
00:43:47,050 --> 00:43:47,882
iso é procesual.

880
00:43:47,882 --> 00:43:48,840
É imperativo, non?

881
00:43:48,840 --> 00:43:49,806
OK, eu teño unha mensaxe.

882
00:43:49,806 --> 00:43:50,930
Imos cambiar conta alí.

883
00:43:50,930 --> 00:43:52,110
>> Imos aparecer un diálogo aquí.

884
00:43:52,110 --> 00:43:52,780
Imos cambiar conta alí.

885
00:43:52,780 --> 00:43:53,700
Imos chamar iso aquí.

886
00:43:53,700 --> 00:43:55,220
Esa é unha visión procesual.

887
00:43:55,220 --> 00:44:00,240
>> Iso é o que cousas como angular,
Boost, Backbone, outros frameworks usar.

888
00:44:00,240 --> 00:44:01,200
Reaccionar é funcional.

889
00:44:01,200 --> 00:44:03,324
É un xeito moi diferente
de pensar sobre as cousas.

890
00:44:03,324 --> 00:44:07,950
El leva esta idea de teremos
funcións ou algoritmos que vostede

891
00:44:07,950 --> 00:44:08,800
darlle datos.

892
00:44:08,800 --> 00:44:11,820
Vai cuspir o que
debe ser, eo ordenador

893
00:44:11,820 --> 00:44:13,490
vai coidar de pesaxe para fóra.

894
00:44:13,490 --> 00:44:15,890
Non tratar con isto só.

895
00:44:15,890 --> 00:44:18,470
Isto fai un pouco de sentido?

896
00:44:18,470 --> 00:44:18,970
Si?

897
00:44:18,970 --> 00:44:24,180
>> Audiencia: Nunha linguaxe funcional,
todo pasa dunha soa vez?

898
00:44:24,180 --> 00:44:26,800
>> Neel Mehta ,: Non, as cousas acontecen en orde.

899
00:44:26,800 --> 00:44:29,320
Como aquí aínda hai
orde, pero iso non acontece

900
00:44:29,320 --> 00:44:32,390
pasar por orde de como
Recomendo, mando, comando.

901
00:44:32,390 --> 00:44:36,459
Isto acontece para
función lle dá saída.

902
00:44:36,459 --> 00:44:37,750
Pon iso noutra función.

903
00:44:37,750 --> 00:44:39,550
Pon iso noutro
función, outra función.

904
00:44:39,550 --> 00:44:41,470
>> Se fai CS51, vai
aprender programas funcionais

905
00:44:41,470 --> 00:44:42,886
un pouco fóra do ámbito desta.

906
00:44:42,886 --> 00:44:45,090
Pero, basicamente, o que fai
Reaccionar legal é non só

907
00:44:45,090 --> 00:44:46,840
o fluxo de datos unidirecional
eo Don virtual,

908
00:44:46,840 --> 00:44:48,700
pero tamén esa idea de
programación funcional.

909
00:44:48,700 --> 00:44:51,720
E a programación funcional é moi fácil
para compoñer e facer cousas legais fóra de,

910
00:44:51,720 --> 00:44:53,844
e é moi fácil pensar
sobre e razoar sobre.

911
00:44:53,844 --> 00:44:55,450
Polo tanto, é outro bo sorteo de Contestar.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
Máis preguntas?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
Si?

916
00:45:03,150 --> 00:45:06,840
>> Audiencia: Hum, por que faría
usar en vez de deixar var?

917
00:45:06,840 --> 00:45:10,450
>> Neel Mehta ,: Entón a pregunta é
por que usa no canto de deixar var?

918
00:45:10,450 --> 00:45:13,220
Esta é unha cousa chamada
ES6 ou ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
É a nova versión de JavaScript.

920
00:45:15,820 --> 00:45:19,050
Hai unha morea de razóns técnicas,
Pero imos é unha versión mellor de var.

921
00:45:19,050 --> 00:45:20,724
>> É como declarar variables.

922
00:45:20,724 --> 00:45:21,390
Podes usar o deixe.

923
00:45:21,390 --> 00:45:22,140
Podes usar var.

924
00:45:22,140 --> 00:45:23,825
Permitir ten un grupo de técnicos
reasons-- podes buscalos

925
00:45:23,825 --> 00:45:25,610
later --- para por que é mellor.

926
00:45:25,610 --> 00:45:28,780
Basicamente, ES6 ten algún bo
nova sintaxe, algunhas novas

927
00:45:28,780 --> 00:45:30,720
na parte superior do antigo Javascript.

928
00:45:30,720 --> 00:45:32,782
>> Polo tanto, temos como cinco minutos.

929
00:45:32,782 --> 00:45:34,990
Eu só quería falar
unha cousa real rápido.

930
00:45:34,990 --> 00:45:36,450
Se tiña algunha dúbida,
imos falar sobre iso máis tarde.

931
00:45:36,450 --> 00:45:38,366
Pero só para iso queda
trabado na cámara, só

932
00:45:38,366 --> 00:45:41,550
quero falar un pouco sobre como
Reaccionar realmente usar nos seus programas.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Se aquí,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
esta é a páxina principal para Contestar e
vai amosar como realmente usar

936
00:46:03,320 --> 00:46:05,320
Reaccionar nas súas páxinas.

937
00:46:05,320 --> 00:46:08,845
Basicamente, é un pouco
complicado tentando instalar Contestar.

938
00:46:08,845 --> 00:46:12,300
Non é tan fácil como pode arrastrar
e solte un JavaScript alí.

939
00:46:12,300 --> 00:46:15,890
>> Ten que ter o seu transformador
configurado, que, como facía antes,

940
00:46:15,890 --> 00:46:18,120
transformar o seu JSX en
Javascript normal.

941
00:46:18,120 --> 00:46:21,030
Ten que que vou
compilar vostede ES6 á normalidade.

942
00:46:21,030 --> 00:46:24,720
JavaScript hai unha gran cantidade de movemento
pezas que ten que facer, polo que hai unha cousa

943
00:46:24,720 --> 00:46:27,200
chamado Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
E esta é unha ferramenta de liña de comandos que
axudar a scaffold o Contestar

945
00:46:31,110 --> 00:46:32,380
proxectos facilmente.

946
00:46:32,380 --> 00:46:38,660
>> Así, pode ler máis sobre este
máis tarde, pero hai algunhas ferramentas

947
00:46:38,660 --> 00:46:40,160
Yeoman que ofrece.

948
00:46:40,160 --> 00:46:43,280
Eles permiten que cree un Contestar
app con todo embutido.

949
00:46:43,280 --> 00:46:46,030
Como vai construír
en, compoñentes embutidos.

950
00:46:46,030 --> 00:46:47,880
Terá o seu transformador construído en.

951
00:46:47,880 --> 00:46:50,699
Teñen unha chea de fresco
material construído en automático

952
00:46:50,699 --> 00:46:52,240
usando isto chamadas xeradores.

953
00:46:52,240 --> 00:46:54,620
>> Entón lea sobre iso, se lle gusta.

954
00:46:54,620 --> 00:46:59,110
Só tes que ir en Yeoman, Y-E-Ou-M-A-N, e
podes atopar xeradores como estes.

955
00:46:59,110 --> 00:47:01,263
E cos xeradores como
estes, só lle gusta un

956
00:47:01,263 --> 00:47:03,010
é unha liña de comandos comandos parella.

957
00:47:03,010 --> 00:47:05,530
Vai fóra un andamio
Reaccionar toda app para ti.

958
00:47:05,530 --> 00:47:10,470
Só pode ir toda a tubo manual
e traballo duro feito para ti,

959
00:47:10,470 --> 00:47:13,010
e é por iso que concentrarse só
en só escribir en Contestar.

960
00:47:13,010 --> 00:47:16,739
>> Entón, basicamente a construción dunha
Reaccionar app non é trivial.

961
00:47:16,739 --> 00:47:19,530
É con fío todos xuntos, pero hai
son ferramentas que vai facelo por vostede.

962
00:47:19,530 --> 00:47:23,070
Entón, se quere facer unha Contestar
app, proba facelo dese xeito.

963
00:47:23,070 --> 00:47:26,360
Se simplemente quere experimentar,
podes probar a usar este CodePen

964
00:47:26,360 --> 00:47:28,550
porque este ten CodePen
toda a fiación reaccionar.

965
00:47:28,550 --> 00:47:30,240
Eu fixen todo o traballo para ti xa.

966
00:47:30,240 --> 00:47:34,610
>> Entón, se quere facer como un
produción para liberar Contestar app,

967
00:47:34,610 --> 00:47:37,220
tentar un destes xeradores.

968
00:47:37,220 --> 00:47:40,240
Se só quere xogar
arredor, é moitas veces vale só

969
00:47:40,240 --> 00:47:44,490
como tentar xogar en CodePen aquí.

970
00:47:44,490 --> 00:47:45,470
Parece bo?

971
00:47:45,470 --> 00:47:45,970
Legal.

972
00:47:45,970 --> 00:47:47,890
>> Entón, iso é todo o que eu teño.

973
00:47:47,890 --> 00:47:52,470
Unha vez máis, todos os códigos e son exemplos
será neste sitio.

974
00:47:52,470 --> 00:47:55,509
Entón, unha vez máis, non falar
sobre moi sintaxe de Contestar,

975
00:47:55,509 --> 00:47:57,550
pero para atopar todos os
pequenos detalles sintácticos,

976
00:47:57,550 --> 00:48:00,320
todo vai estar dispoñible
neste sitio.

977
00:48:00,320 --> 00:48:02,660
>> Entón, eu recomendo como
dar o primeiro paso.

978
00:48:02,660 --> 00:48:06,277
Pon-o na súa CodePen.

979
00:48:06,277 --> 00:48:08,110
Probe traballar en facer
Lo ao segundo paso.

980
00:48:08,110 --> 00:48:11,310
Hai unha cuarta etapa, e só
ver onde comeza a partir de aí.

981
00:48:11,310 --> 00:48:14,840
>> Máis preguntas, comprobe
que a páxina ou enviar correo-e me.

982
00:48:14,840 --> 00:48:16,490
Ese é o meu e-mail.

983
00:48:16,490 --> 00:48:19,885
Pero eu adoro axudar con calquera
preguntas que pode ter sobre Contestar.

984
00:48:19,885 --> 00:48:21,010
Entón, si, iso é todo o que eu teño.

985
00:48:21,010 --> 00:48:23,410
Grazas a todos moito para
vendo ou para asistir.

986
00:48:23,410 --> 00:48:26,820
E eu vou tirar dúbidas
pode que despois desta agora.

987
00:48:26,820 --> 00:48:29,140
Entón, grazas a todos por asistir.

988
00:48:29,140 --> 00:48:31,270