1
00:00:00,000 --> 00:00:02,910
>> [REPRODUCCIÓN DE MÚSICA]

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

3
00:00:04,850 --> 00:00:07,275
>> NEEL MEHTA: Aquí va.

4
00:00:07,275 --> 00:00:11,070
>> Bueno, todo el mundo, la bienvenida a la web
aplicaciones del futuro con reaccionan.

5
00:00:11,070 --> 00:00:11,870
Esto es CS50.

6
00:00:11,870 --> 00:00:12,930
Mi nombre es Neel.

7
00:00:12,930 --> 00:00:17,689
Soy un TA para CS50 y un estudiante de segundo año
en Harvard College y un muy, muy

8
00:00:17,689 --> 00:00:18,730
desarrollador web apasionado.

9
00:00:18,730 --> 00:00:20,730
Así que estoy muy emocionante
estar hablando con ustedes hoy,

10
00:00:20,730 --> 00:00:24,550
si usted está aquí o en casa
viendo, sobre Reaccionar, que es, de nuevo

11
00:00:24,550 --> 00:00:27,270
como ya he dicho, el futuro de las aplicaciones web.

12
00:00:27,270 --> 00:00:29,055
>> Así Reaccionar es un framework web.

13
00:00:29,055 --> 00:00:30,930
Y como he estado diciendo
para algunas personas aquí,

14
00:00:30,930 --> 00:00:33,400
un marco es sólo una
un conjunto de herramientas que puede utilizar

15
00:00:33,400 --> 00:00:35,770
para estructurar y construir su aplicación web.

16
00:00:35,770 --> 00:00:39,010
Y las aplicaciones web son, de nuevo, los sitios web
que son interactivos como Facebook,

17
00:00:39,010 --> 00:00:42,330
Twitter.com, Instagram.com, lo que sea.

18
00:00:42,330 --> 00:00:45,590
>> Así que Facebook es un framework web
que fue desarrollado por Facebook

19
00:00:45,590 --> 00:00:48,060
un par de años parte posterior-- reaccionan es.

20
00:00:48,060 --> 00:00:50,830
Desde entonces se ha utilizado en
Facebook en sus aplicaciones móviles

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

22
00:00:52,460 --> 00:00:56,350
Khan Academy es otro
prominente de los primeros de React.

23
00:00:56,350 --> 00:00:58,630
>> Realmente ha sido conseguir
extremadamente popular.

24
00:00:58,630 --> 00:01:03,420
Si alguna vez utiliza cosas como angular o
Backbone, esto es de la misma familia,

25
00:01:03,420 --> 00:01:05,830
pero lo ha hecho desde el momento
superando su popularidad.

26
00:01:05,830 --> 00:01:06,890
Es la cosa más nueva caliente.

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

28
00:01:09,590 --> 00:01:13,470
>> Y así Reaccionar es bueno no sólo como un
framework web para interfaces de construcción.

29
00:01:13,470 --> 00:01:16,020
Es bueno para la construcción de interfaces web.

30
00:01:16,020 --> 00:01:18,350
También hay una cosa
llamada Reaccionar nativo que

31
00:01:18,350 --> 00:01:22,200
le permite crear interfaces de
para Android y iOS

32
00:01:22,200 --> 00:01:26,390
y tal vez otras plataformas en el futuro
utilizando sólo el mismo código JavaScript.

33
00:01:26,390 --> 00:01:31,130
Usted podría utilizar la misma exacta
Código JavaScript para render sitios web,

34
00:01:31,130 --> 00:01:33,040
para hacer aplicaciones de Android y aplicaciones de iOS.

35
00:01:33,040 --> 00:01:35,000
>> Es un momento muy, muy emocionante.

36
00:01:35,000 --> 00:01:37,070
Es una oportunidad muy, muy fresco.

37
00:01:37,070 --> 00:01:42,020
Es realmente una red universal
herramienta de desarrollo de interfaz,

38
00:01:42,020 --> 00:01:44,420
por lo que es un muy, muy
cosa importante a saber.

39
00:01:44,420 --> 00:01:46,949
Y, como le decía a la gente
antes, esto, creo,

40
00:01:46,949 --> 00:01:48,990
va a cambiar la forma en que
construir aplicaciones web siempre.

41
00:01:48,990 --> 00:01:55,820
Por lo que es tal vez un poco hipérbole, pero yo
Creo que es una buena cosa para saber.

42
00:01:55,820 --> 00:01:57,580
>> OK, así que lo que es Reaccionar?

43
00:01:57,580 --> 00:02:01,020
Reaccionar es un marco que puede
utilizar para la construcción de interfaces.

44
00:02:01,020 --> 00:02:03,240
Una interfaz es, de nuevo,
una página web, ¿no?

45
00:02:03,240 --> 00:02:06,340
Así que aquí está Instagram.com, usos reaccionan.

46
00:02:06,340 --> 00:02:08,740
>> Reaccionar se basa en el
idea de los componentes.

47
00:02:08,740 --> 00:02:11,900
Un componente es un HTML
elemento con esteroides,

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

49
00:02:14,470 --> 00:02:15,250
Es un párrafo.

50
00:02:15,250 --> 00:02:17,500
Es una cabecera, ¿verdad?

51
00:02:17,500 --> 00:02:22,740
Y Instagram utilizará estos, pero
también utilizará componentes de React.

52
00:02:22,740 --> 00:02:25,740
>> Reaccionar componentes son
elementos HTML trucados

53
00:02:25,740 --> 00:02:28,100
que tienen su propio comportamiento
contenida dentro de ellos.

54
00:02:28,100 --> 00:02:31,800
Así, como ejemplo, podríamos tener
un elemento de tiempo, un componente de tiempo,

55
00:02:31,800 --> 00:02:34,095
que contendrá como
la marca de tiempo, ya sabes,

56
00:02:34,095 --> 00:02:37,170
un componente de perfil que
contendrá la imagen de perfil

57
00:02:37,170 --> 00:02:38,820
y el nombre de la persona.

58
00:02:38,820 --> 00:02:42,930
Puede tener un contador similares, los cuales
puede contar como el número de gustos,

59
00:02:42,930 --> 00:02:45,610
y si hace clic en él, que va a
aumentar el número de gustos.

60
00:02:45,610 --> 00:02:48,200
Un componente es sólo un
montón de código HTML que

61
00:02:48,200 --> 00:02:50,520
tiene algunas funciones
envuelta en el interior de la misma.

62
00:02:50,520 --> 00:02:53,770
Así que es como un elemento HTML
en los esteroides, como he dicho antes.

63
00:02:53,770 --> 00:02:56,270
Usted puede tomar estos componentes,
y usted puede ponerlos juntos

64
00:02:56,270 --> 00:02:59,060
hacer nuevos componentes,
este caso, un componente de correos,

65
00:02:59,060 --> 00:03:00,505
que contiene todas estas cosas.

66
00:03:00,505 --> 00:03:04,050
Contendría Tiempo, Perfil,
LikeCounter, tal vez el comentario

67
00:03:04,050 --> 00:03:06,100
y tal vez la propia imagen.

68
00:03:06,100 --> 00:03:10,810
Y por lo que las aplicaciones web son sólo construyeron tomando
componentes y ponerlos juntos.

69
00:03:10,810 --> 00:03:15,620
Una alimentación de Instagram es nada más que
un grupo de puestos uno tras otro,

70
00:03:15,620 --> 00:03:19,032
cada post contiene como el Tiempo,
Perfil, LikeCounter, y así sucesivamente.

71
00:03:19,032 --> 00:03:20,490
Es una especie de como construir una casa.

72
00:03:20,490 --> 00:03:22,660
No se construye la
casa de arriba a abajo.

73
00:03:22,660 --> 00:03:24,960
Se toma usted components--
tomar al igual que el baño.

74
00:03:24,960 --> 00:03:28,320
Usted toma el bedroom-- les pegan
juntos, y usted tiene un nuevo componente.

75
00:03:28,320 --> 00:03:29,760
Usted tiene una nueva parte de la casa.

76
00:03:29,760 --> 00:03:32,860
>> Así Reaccionar está todo construido alrededor
esta idea de componentes que

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

78
00:03:36,600 --> 00:03:39,650
Al igual que usted acaba de decir lo que es un
el perfil es, y la hace.

79
00:03:39,650 --> 00:03:40,600
Son componibles.

80
00:03:40,600 --> 00:03:43,880
Usted puede tomar un tiempo y un perfil, pone
juntos, hacen algo mejor.

81
00:03:43,880 --> 00:03:47,770
Y son reutilizables, por lo que si
tener el código fuente de un puesto,

82
00:03:47,770 --> 00:03:49,440
usted podría integrar a cualquier parte.

83
00:03:49,440 --> 00:03:53,160
>> Puede incrustar un Instagram
cosa en su propio sitio web.

84
00:03:53,160 --> 00:03:56,830
Puede incrustar en Facebook, por ejemplo,
siempre y cuando se utiliza Reaccionar también.

85
00:03:56,830 --> 00:04:00,360
Así que los componentes son muy, muy, muy
poderosos bloques de construcción de la web

86
00:04:00,360 --> 00:04:04,180
que puede ser utilizado en cualquier lugar y poner
juntos para hacer nuevos bloques de construcción.

87
00:04:04,180 --> 00:04:07,159
Eso es muy, muy
visión general de alto nivel.

88
00:04:07,159 --> 00:04:09,200
Así que, de nuevo, si usted tiene
cualquier pregunta en cualquier momento

89
00:04:09,200 --> 00:04:14,470
sobre la filosofía de reactor, el
codificación, que me detenga, y que me haga saber.

90
00:04:14,470 --> 00:04:18,420
>> OK, así que reaccionar es genial, ya que
tiene una manera diferente de ver

91
00:04:18,420 --> 00:04:19,870
en la forma de construir aplicaciones web.

92
00:04:19,870 --> 00:04:23,620
Usted probablemente ha oído hablar de MVC, un
modelo a controlar en CS50 o lo que sea

93
00:04:23,620 --> 00:04:25,940
otras clases de sondeo que utiliza.

94
00:04:25,940 --> 00:04:29,000
Y la mayoría de los marcos son
construido alrededor de la idea de la MVC.

95
00:04:29,000 --> 00:04:30,410
Reaccionar no lo es.

96
00:04:30,410 --> 00:04:32,980
Reaccionar se construye alrededor de la idea
del flujo de datos unidireccional

97
00:04:32,980 --> 00:04:36,510
como se ve por esta tabla o gráfico aquí.

98
00:04:36,510 --> 00:04:38,260
>> Básicamente, usted tiene una fuente de datos.

99
00:04:38,260 --> 00:04:42,380
Y la fuente de datos decidirá
cómo diseñar ciertos componentes.

100
00:04:42,380 --> 00:04:45,452
Y los componentes
entonces, cuando cambian,

101
00:04:45,452 --> 00:04:47,160
ellos le dirán la
fuente de datos para cambiar.

102
00:04:47,160 --> 00:04:49,350
>> Para utilizar el Instagram
ejemplo, es posible que tenga

103
00:04:49,350 --> 00:04:52,050
una lista de objetos postales como
en una base de datos o algo así.

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

105
00:04:53,310 --> 00:04:57,600
Y entonces nuestros componentes de correos
se llevará a esos datos,

106
00:04:57,600 --> 00:05:01,830
y utilizar esos datos para hacer
una cosa en la pantalla.

107
00:05:01,830 --> 00:05:04,300
Eso es lo que la flecha
a partir de datos de componente es,

108
00:05:04,300 --> 00:05:07,930
y luego se utiliza ese mismo datos
para hacer un montón de componentes.

109
00:05:07,930 --> 00:05:10,290
>> En Facebook Messenger, para
ejemplo, que es Reaccionar,

110
00:05:10,290 --> 00:05:13,410
es posible que tenga una lista de
mensajes como el origen de datos.

111
00:05:13,410 --> 00:05:15,927
Y eso no se rinden
sólo la lista de mensajes

112
00:05:15,927 --> 00:05:17,510
sino también la lista de los amigos que tiene.

113
00:05:17,510 --> 00:05:19,200
Usted tiene el recuento no leído.

114
00:05:19,200 --> 00:05:23,330
Quizás también hacer que la cosa Facebook
eso es en el fondo de Facebook.com.

115
00:05:23,330 --> 00:05:25,610
Los mismos datos es una
única fuente de la verdad

116
00:05:25,610 --> 00:05:28,290
y que provoca una gran cantidad de
componentes que se prestarán.

117
00:05:28,290 --> 00:05:30,290
Y cada vez que uno de los
componentes se cambia,

118
00:05:30,290 --> 00:05:32,320
que se remonta y
cambia la fuente de datos.

119
00:05:32,320 --> 00:05:33,460
>> Usted envía un mensaje, ¿no?

120
00:05:33,460 --> 00:05:34,780
Eso cambia la fuente de datos.

121
00:05:34,780 --> 00:05:39,490
Usted lee sus mensajes,
así se establece sin leer a 0.

122
00:05:39,490 --> 00:05:41,136
Eso cambia la fuente de datos.

123
00:05:41,136 --> 00:05:44,010
Y darse cuenta de que todo esto de una sola
flecha que se remonta a los mismos datos

124
00:05:44,010 --> 00:05:47,662
fuente, así que ya sabes,
dado un determinado conjunto de datos,

125
00:05:47,662 --> 00:05:49,870
usted sabe exactamente lo que el
página va a ser similar.

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

127
00:05:50,700 --> 00:05:53,451
Ya sabes, dados ciertos datos, lo que
la página se va a parecer.

128
00:05:53,451 --> 00:05:56,158
Se puede predecir cómo va a
se comportan y cómo van las cosas

129
00:05:56,158 --> 00:05:57,650
a trabajar cuando están juntos.

130
00:05:57,650 --> 00:06:00,410
>> Y si tuviera un millón de componentes
aquí, se comportaría de la misma, ¿no?

131
00:06:00,410 --> 00:06:02,290
Usted no tiene ninguna
interconexiones extraños.

132
00:06:02,290 --> 00:06:04,120
Uno datos rindió un millón de componentes.

133
00:06:04,120 --> 00:06:06,879
Un millón de componentes posible
volver atrás y editar los datos.

134
00:06:06,879 --> 00:06:07,920
Y por lo que este es muy agradable.

135
00:06:07,920 --> 00:06:10,870
Estamos construyendo composable,
fácilmente aplicaciones web escalables.

136
00:06:10,870 --> 00:06:13,150
>> Usted tiene una fuente de datos,
la fuente de la verdad.

137
00:06:13,150 --> 00:06:15,790
Eso le dice a sus componentes
cómo diseñar la página,

138
00:06:15,790 --> 00:06:18,190
y los componentes de la voluntad
manejar la interacción.

139
00:06:18,190 --> 00:06:20,150
Y si quieren cambiar
cosas, sólo tiene que ir de vuelta

140
00:06:20,150 --> 00:06:21,750
y di a la fuente de datos para cambiar.

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

142
00:06:22,850 --> 00:06:26,010
Así Reaccionar es todo acerca de la comprensión
cómo construir un componente

143
00:06:26,010 --> 00:06:29,540
y cómo hacer que su componente
interactuar con el mundo exterior.

144
00:06:29,540 --> 00:06:31,850
>> Hacer interactúan componente
con el mundo exterior

145
00:06:31,850 --> 00:06:34,490
utiliza otra tecnología
llamado Flux, que

146
00:06:34,490 --> 00:06:36,872
es un marco que es
añadido en la parte superior de React.

147
00:06:36,872 --> 00:06:38,330
No vamos a hablar de eso.

148
00:06:38,330 --> 00:06:42,990
Vamos a hablar más sobre, dada
datos, ¿cómo se puede hacer que un componente?

149
00:06:42,990 --> 00:06:47,010
>> Y así Reaccionar es realmente genial porque
puede utilizarlo con cualquier parte final que desea.

150
00:06:47,010 --> 00:06:50,480
Si usted tiene como un back-end de Python,
si su Python puede escupir algunos datos,

151
00:06:50,480 --> 00:06:51,610
Reaccionar puede hacerla.

152
00:06:51,610 --> 00:06:54,700
Si usted es no hay salidas de JS
de los datos, Reaccionar renders ella.

153
00:06:54,700 --> 00:06:56,890
Rubí carriles con
datos, Reaccionar la hace.

154
00:06:56,890 --> 00:07:01,860
>> Así Reaccionar es básicamente una web
juicio- una interfaz con componentes

155
00:07:01,860 --> 00:07:03,910
para cualquier fuente de datos en absoluto.

156
00:07:03,910 --> 00:07:07,145
Y así va desde la fuente de datos para
reaccionar componentes es bastante fácil.

157
00:07:07,145 --> 00:07:08,770
Yendo la otra forma es un poco más difícil.

158
00:07:08,770 --> 00:07:10,462
Que utiliza Flux como he mencionado antes.

159
00:07:10,462 --> 00:07:11,420
No vamos a entrar en eso.

160
00:07:11,420 --> 00:07:13,740
Nos centraremos más en la
datos-a-componente lateral.

161
00:07:13,740 --> 00:07:15,880
De esta manera usted puede hacer
, aplicaciones web divertidas frescas.

162
00:07:15,880 --> 00:07:19,870
No afectará al mundo exterior
por ahora, pero eso es otra historia.

163
00:07:19,870 --> 00:07:22,210
>> OK, así que si usted estuviera aquí
para mi último seminario

164
00:07:22,210 --> 00:07:26,610
usted sabrá que todo el código de
la charla de hoy va a ser en esta dirección URL

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

166
00:07:29,320 --> 00:07:32,730
Y básicamente vamos a ir
a través de cuatro pasos, tal vez cinco,

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

168
00:07:33,510 --> 00:07:37,300
Nos movemos a través de cuatro pasos
de la construcción de una muestra Reaccionar aplicación.

169
00:07:37,300 --> 00:07:39,550
Y así todo el código fuente
para cada paso del camino

170
00:07:39,550 --> 00:07:42,216
va a estar aquí, así que si
estás siguiendo en casa,

171
00:07:42,216 --> 00:07:43,991
no dude en leer detenidamente este código.

172
00:07:43,991 --> 00:07:46,740
Si usted está siguiendo a lo largo de aquí,
vamos a estar mostrando en la pantalla,

173
00:07:46,740 --> 00:07:47,739
así que no te preocupes por eso.

174
00:07:47,739 --> 00:07:50,930
Pero si estás en casa, se siente
no dude en visitar este sitio web.

175
00:07:50,930 --> 00:07:56,400
Y, sí, usted debería ser capaz de obtener
todo el código que jamás necesitaría aquí.

176
00:07:56,400 --> 00:08:01,380
Así que es una buena hoja de trucos, así
para sus futuras aventuras con React.

177
00:08:01,380 --> 00:08:04,490
Fresco, por lo que si todos los que están aquí,
e incluso si estás en casa,

178
00:08:04,490 --> 00:08:11,580
tire hacia arriba de esta página web, is.gd/cs50react,
sin capital, sin guión, sin nada.

179
00:08:11,580 --> 00:08:15,849
>> Verás una página que se ve
un poco como esto.

180
00:08:15,849 --> 00:08:17,140
Esto es una cosa que se llama CodePen.

181
00:08:17,140 --> 00:08:20,030
CodePen es una colaboración
entorno de codificación

182
00:08:20,030 --> 00:08:23,364
con el que puedo escribir código aquí, y
que va a ser enviado automáticamente a usted.

183
00:08:23,364 --> 00:08:24,780
Y de esta manera, puedo escribir código.

184
00:08:24,780 --> 00:08:26,920
Puedo correr código aquí.

185
00:08:26,920 --> 00:08:33,470
>> Para ejemplo-- y si reloads-- ver,
Estoy corriendo el código JavaScript en la página

186
00:08:33,470 --> 00:08:36,390
aquí, y va a
hacer automáticamente una página web

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

188
00:08:37,980 --> 00:08:40,039
Y por lo que esta es una forma
para nosotros para probar código

189
00:08:40,039 --> 00:08:43,089
muy rápido sin tener que utilizar
nuestra identidad o usar nuestra máquina local

190
00:08:43,089 --> 00:08:44,290
o lo que sea.

191
00:08:44,290 --> 00:08:47,670
Es una manera muy rápida para que usted pueda maqueta
y probar diferentes tipos de código.

192
00:08:47,670 --> 00:08:50,560
>> Así que voy a estar tomando
ejemplo de código, poniendo aquí.

193
00:08:50,560 --> 00:08:52,374
Vamos a trabajar a través de él.

194
00:08:52,374 --> 00:08:54,540
Y si estás en casa,
puede tirar de esto también.

195
00:08:54,540 --> 00:08:57,530
Y yo ya he instalado
Reaccionar aquí, así que usted puede apenas

196
00:08:57,530 --> 00:09:00,770
escribir su propio código aquí, y
probarlo como su propia zona de juegos.

197
00:09:00,770 --> 00:09:04,940
>> Sí, si todo el mundo a
abrir este enlace aquí.

198
00:09:04,940 --> 00:09:08,080
Por favor, dame un pulgar
una vez que lo tienes abierto.

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

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

201
00:09:13,770 --> 00:09:16,914
No hay nada aquí por ahora, pero
vamos a cambiar eso muy pronto.

202
00:09:16,914 --> 00:09:21,250
>> OK, así Reaccionar es un JavaScript
biblioteca, y como tal,

203
00:09:21,250 --> 00:09:24,480
requiere el conocimiento de JavaScript,
que es el lenguaje de programación web.

204
00:09:24,480 --> 00:09:27,660
Y está siendo utilizado para otras cosas
ahora también, pero principalmente el desarrollo de la web

205
00:09:27,660 --> 00:09:32,040
idioma, por lo que si no está familiarizado con
que, leyó un sitio llamado JSforCats.com.

206
00:09:32,040 --> 00:09:32,700
Es maravilloso.

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

208
00:09:34,240 --> 00:09:34,990
Es increíble.

209
00:09:34,990 --> 00:09:36,420
>> Así que darle una lectura.

210
00:09:36,420 --> 00:09:39,960
También es una gran cantidad de HTML aquí porque
estamos diseñando páginas web, por supuesto.

211
00:09:39,960 --> 00:09:43,890
Así que si usted no está familiarizado con
HTML, visita HTMLdog.com.

212
00:09:43,890 --> 00:09:46,520
Creo que aprendiendo Reaccionar es un
millón de veces más fácil si ya

213
00:09:46,520 --> 00:09:47,892
conocer los elementos básicos.

214
00:09:47,892 --> 00:09:50,600
Si usted tiene los componentes, es
Fácil de hacer un componente más grande.

215
00:09:50,600 --> 00:09:51,860
Eso es Reaccionar idioma para usted.

216
00:09:51,860 --> 00:09:54,270
>> Así que adelante y darle
estas cosas una lectura.

217
00:09:54,270 --> 00:09:55,070
Pausa el vídeo.

218
00:09:55,070 --> 00:09:57,440
Darle una lectura si usted es
en su casa si usted no está

219
00:09:57,440 --> 00:10:00,794
familiarizado con HTML o JavaScript

220
00:10:00,794 --> 00:10:02,960
OK, así que lo que vamos a
hacer es que vamos a hacer

221
00:10:02,960 --> 00:10:06,470
una aplicación muy básica flashcard usando Reaccionar.

222
00:10:06,470 --> 00:10:08,210
Vamos a tener una tarjeta de memoria flash.

223
00:10:08,210 --> 00:10:09,880
Usted puede voltear la tarjeta de un lado a otro.

224
00:10:09,880 --> 00:10:12,399
Y también tendremos una lista de
todas las cartas que tenemos,

225
00:10:12,399 --> 00:10:14,190
y si nos sentimos
ambicioso, que podría ser

226
00:10:14,190 --> 00:10:17,060
capaz de cambiar entre
automóviles haciendo clic sobre ellos.

227
00:10:17,060 --> 00:10:20,360
>> Pero esto es, de su desnudo
huesos, una muy simple Reaccionar aplicación.

228
00:10:20,360 --> 00:10:22,560
Y por lo que este es en realidad
no trivial de implementar,

229
00:10:22,560 --> 00:10:26,030
pero vamos a demostrar que, si lo hace
esto, es muy, muy fácil ampliarlo

230
00:10:26,030 --> 00:10:27,680
si otras personas le ayuden con ella.

231
00:10:27,680 --> 00:10:33,750
Así que vamos a ir a través de cuatro pasos
empezar desde cero a construir esto.

232
00:10:33,750 --> 00:10:36,740
>> Ok, así que los cuatro pasos, vamos a
comenzar con el primer paso.

233
00:10:36,740 --> 00:10:39,790
El primer paso va a ser
la construcción de su primer componente.

234
00:10:39,790 --> 00:10:44,830
Como he dicho antes, un componente en Reaccionar
es sólo un elemento HTML en los esteroides.

235
00:10:44,830 --> 00:10:49,660
Especifica el código HTML
y un cierto comportamiento, y

236
00:10:49,660 --> 00:10:52,600
especificará cómo la gente
puede interactuar con él cómo

237
00:10:52,600 --> 00:10:54,270
tendría estado interno.

238
00:10:54,270 --> 00:10:57,630
Al igual que un botón se conocer como cuántos
veces que se ha hecho clic, por ejemplo,

239
00:10:57,630 --> 00:11:01,010
y sabrá cómo poner a sí misma.

240
00:11:01,010 --> 00:11:04,430
>> Así que vamos a seguir adelante y construir nuestra
primer componente utilizando JavaScript.

241
00:11:04,430 --> 00:11:09,711
Así que si la sintaxis se ve raro,
eso es porque es como que es.

242
00:11:09,711 --> 00:11:11,710
Así que, de nuevo, vamos
para hacer una variable llamada

243
00:11:11,710 --> 00:11:14,580
aplicación usando la palabra clave dejó,
lo cual hace que una variable,

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

245
00:11:18,210 --> 00:11:22,609
>> Reaccionar es una biblioteca y tiene
la función Crear clase.

246
00:11:22,609 --> 00:11:24,400
Y esta función es
un poco de código que

247
00:11:24,400 --> 00:11:29,090
puede utilizar para crear una nueva
Reaccionar tipo de componente.

248
00:11:29,090 --> 00:11:32,780
Y así React.createClass
hace que un componente,

249
00:11:32,780 --> 00:11:35,270
y este componente
ser capaz de hacer cosas.

250
00:11:35,270 --> 00:11:40,460
Lo más importante que puede hacer es render
algo, render como una función.

251
00:11:40,460 --> 00:11:44,500
>> De nuevo, si este índice no es evidente para
usted, le recomiendo que vaya en JS para gatos

252
00:11:44,500 --> 00:11:45,682
y comprobar que funciona.

253
00:11:45,682 --> 00:11:47,710
¿Es que has en lo suficientemente bien?

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

255
00:11:48,490 --> 00:11:50,670
>> Así que todas las necesidades de componentes
tener una función render.

256
00:11:50,670 --> 00:11:53,010
La función render dice,
lo puedo imprimir en la pantalla?

257
00:11:53,010 --> 00:11:54,760
Pero el componente es
inútil si no lo hace

258
00:11:54,760 --> 00:11:58,060
saber lo que desea imprimir en la pantalla, por lo que
es necesario tener una función render.

259
00:11:58,060 --> 00:12:01,904
>> Así que en lo render, que
sólo tiene que devolver algo de HTML.

260
00:12:01,904 --> 00:12:03,820
Y lo que es interesante es que
hay una cosa que se llama

261
00:12:03,820 --> 00:12:08,660
JSX, que es una extensión de
JavaScript que es utilizado por reaccionar.

262
00:12:08,660 --> 00:12:11,845
Es de dejar de escribir HTML dentro
de su JavaScript, lo que

263
00:12:11,845 --> 00:12:13,970
suena un poco raro cuando
usted piensa primero sobre él,

264
00:12:13,970 --> 00:12:15,553
pero hace un montón de sentido después.

265
00:12:15,553 --> 00:12:17,430
Por lo que podemos hacer esto.

266
00:12:17,430 --> 00:12:21,360
Si está familiarizado con HTML, ya lo sé
tenemos un div con un propósito general

267
00:12:21,360 --> 00:12:22,790
contenedor para la materia.

268
00:12:22,790 --> 00:12:26,380
Podemos devolver un div, y en el interior
este div, podemos poner cosas.

269
00:12:26,380 --> 00:12:32,390
>> Así que digamos que queremos rendir justo
una tarjeta de memoria flash recto-para arriba por ahora.

270
00:12:32,390 --> 00:12:34,890
La tarjeta de memoria flash, yo diría,
tendrá una pregunta y respuesta.

271
00:12:34,890 --> 00:12:37,530
Así que dentro de este div, vamos a
imprimir un párrafo

272
00:12:37,530 --> 00:12:42,155
que dice pregunta-- ¿Cuál es el
respuesta definitiva a la vida, el universo?

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

274
00:12:47,640 --> 00:12:50,345
Y entonces la respuesta es
va a ser, por supuesto, de 42 años.

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

276
00:12:56,880 --> 00:12:59,730
>> Eso no vienen bien en absoluto.

277
00:12:59,730 --> 00:13:04,164
Sí, así que básicamente se puede realmente
escribir HTML dentro de tu JavaScript.

278
00:13:04,164 --> 00:13:06,330
Y esto va a ser
impreso en la pantalla.

279
00:13:06,330 --> 00:13:08,250
Así que vamos a probarlo.

280
00:13:08,250 --> 00:13:09,520
>> Así que tenemos nuestro componente.

281
00:13:09,520 --> 00:13:12,210
Tenemos que decirle Reaccionar a poner
el componente en la pantalla

282
00:13:12,210 --> 00:13:18,990
así React.render, para darse cuenta de que nos
tratar la aplicación como cualquier otro elemento.

283
00:13:18,990 --> 00:13:21,010
Escribimos, ya que era un elemento HTML.

284
00:13:21,010 --> 00:13:25,100
Al igual que en lugar de decir como img
para una imagen o p para el párrafo,

285
00:13:25,100 --> 00:13:28,120
usted escribe App, así App
tratado como un elemento HTML.

286
00:13:28,120 --> 00:13:30,380
Como he dicho antes, es
un elemento en los esteroides.

287
00:13:30,380 --> 00:13:32,870
>> Así rindes App, y usted
darle un lugar para ponerlo.

288
00:13:32,870 --> 00:13:37,170
Y esto es como se puede
decirle dónde ponerlo.

289
00:13:37,170 --> 00:13:46,200
He creado un div simple en la
página llamada con un ID de la página,

290
00:13:46,200 --> 00:13:48,300
y ahí es donde la
elemento va a ir.

291
00:13:48,300 --> 00:13:49,841
>> Y no vamos a correr con HTML.

292
00:13:49,841 --> 00:13:53,145
Básicamente esto se va a poner
poner dentro de este elemento de página

293
00:13:53,145 --> 00:13:54,270
que tenemos en la pantalla.

294
00:13:54,270 --> 00:13:59,210
Así que se ejecuta este código, y señala este
cosa en la pantalla, así que aquí estamos.

295
00:13:59,210 --> 00:14:01,770
Hemos hecho nuestro primer componente Reaccionar.

296
00:14:01,770 --> 00:14:08,000
>> Así que al igual que un resumen, hicimos suavemente
un nuevo tipo de componente, ¿verdad?

297
00:14:08,000 --> 00:14:10,145
Eso es lo que el React.createClass.

298
00:14:10,145 --> 00:14:12,680
Y en ese componente, nos
dijo que lo que debe hacer.

299
00:14:12,680 --> 00:14:15,590
Siempre que este componente es
ser impresa sobre la pantalla,

300
00:14:15,590 --> 00:14:19,300
se imprimirá el div con
los dos apartados dentro de ella.

301
00:14:19,300 --> 00:14:24,460
>> Y lo que hicimos, hicimos una nueva aplicación
usando la notación aplicación paréntesis angular.

302
00:14:24,460 --> 00:14:27,160
Nos dijeron que para decirlo
dentro del elemento de la página.

303
00:14:27,160 --> 00:14:29,867
Y así lo hice, creó
una nueva aplicación de esa plantilla.

304
00:14:29,867 --> 00:14:31,200
Y entonces me dije que para hacerlo.

305
00:14:31,200 --> 00:14:33,680
Por lo tanto, dijo, OK, app,
¿qué debo imprimir?

306
00:14:33,680 --> 00:14:36,970
App dice, vaya imprimir un div
con dos párrafos en el interior de la misma.

307
00:14:36,970 --> 00:14:40,420
Y voilá, ahí está nuestro div con
dos párrafos dentro de ella.

308
00:14:40,420 --> 00:14:43,180
Tiene sentido hasta ahora?

309
00:14:43,180 --> 00:14:46,690
>> Así, de nuevo, todo el reto de Reaccionar
es el hecho de saber cómo hacer componentes.

310
00:14:46,690 --> 00:14:48,500
Cómo hacer que el
componentes trabajan juntos.

311
00:14:48,500 --> 00:14:51,780
Ahora que hemos hecho nuestra primera
componente, volvamos

312
00:14:51,780 --> 00:14:54,284
y hacer que los componentes personalizable.

313
00:14:54,284 --> 00:14:56,700
Así que ya sabes cómo en HTML
puede dar sus clases botones?

314
00:14:56,700 --> 00:14:59,146
Usted puede dar a sus anclajes del href.

315
00:14:59,146 --> 00:15:00,770
Usted puede dar a sus entradas de un tipo, ¿no?

316
00:15:00,770 --> 00:15:04,740
Puede dar más personalizada
propiedades a todos sus elementos

317
00:15:04,740 --> 00:15:06,490
para que sea más interesante.

318
00:15:06,490 --> 00:15:09,030
Y en realidad podemos hacer
exactamente lo mismo.

319
00:15:09,030 --> 00:15:17,500
>> Así que digamos que queremos que nuestro
aplicación para ir render cualquier tarjeta.

320
00:15:17,500 --> 00:15:19,630
Ahora que acabamos de
rendido una tarjeta codificada.

321
00:15:19,630 --> 00:15:22,530
Sabemos que sólo hay una
tarjeta que puede hacer, así que estamos

322
00:15:22,530 --> 00:15:25,960
va a tratar de cambiar esta ahora tan
que solo podemos darle un poco de tarjeta.

323
00:15:25,960 --> 00:15:27,410
Se va a imprimir la tarjeta.

324
00:15:27,410 --> 00:15:29,380
>> Usted debe tratar de hacer que su
componentes un propósito muy general.

325
00:15:29,380 --> 00:15:31,654
Así de esta manera me podría enviar por correo electrónico
este mi amigo y ser como,

326
00:15:31,654 --> 00:15:33,820
lo flashcard que tiene,
simplemente alimentar en aquí,

327
00:15:33,820 --> 00:15:35,290
y va a hacerlo por sí mismo.

328
00:15:35,290 --> 00:15:37,650
Usted puede poner otro
cosas en su propia aplicación.

329
00:15:37,650 --> 00:15:40,600
>> Pero primero, vamos a romper este
en dos componentes,

330
00:15:40,600 --> 00:15:44,500
pero queremos separar la tarjeta
parte la impresión de la parte real de la aplicación.

331
00:15:44,500 --> 00:15:46,660
Así que lo que podemos hacer es que
puede cambiar esto desde App

332
00:15:46,660 --> 00:15:51,300
a CardView, sólo un
nuevo nombre para la aplicación,

333
00:15:51,300 --> 00:15:54,450
y podemos hacer una nueva
componente llamado App,

334
00:15:54,450 --> 00:15:56,336
que no debe confundirse con el viejo App.

335
00:15:56,336 --> 00:16:00,730
Tenemos los createClass,
y al igual que en HTML,

336
00:16:00,730 --> 00:16:03,590
puedes nido Reaccionar componentes
una dentro de otra.

337
00:16:03,590 --> 00:16:16,430
>> Así que en esta función render,
función CardView retorno,

338
00:16:16,430 --> 00:16:18,234
y esto es exactamente lo mismo.

339
00:16:18,234 --> 00:16:19,400
Ver por eso que es la misma cosa?

340
00:16:19,400 --> 00:16:22,590
En lugar de hacer sólo la aplicación que
tiene el div y el emparejamiento en el interior de la misma,

341
00:16:22,590 --> 00:16:26,194
la aplicación hace que el CardView, y el
CardView hace que el div y el párrafo.

342
00:16:26,194 --> 00:16:29,110
Así que este es nuestro primer ejemplo de
elementos de anidación dentro de la otra.

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

344
00:16:32,177 --> 00:16:33,760
Así que, de nuevo, tenemos un elemento CardView.

345
00:16:33,760 --> 00:16:37,250
Tenemos elementos app
que es más grande que.

346
00:16:37,250 --> 00:16:40,990
>> OK, así que queremos que nuestro CardView-- si
dar una buena CardView cierta tarjeta,

347
00:16:40,990 --> 00:16:43,370
que va a imprimir para usted, ¿no?

348
00:16:43,370 --> 00:16:48,050
Así que primero, tenemos que hacer una tarjeta,
así que vamos a hacer un objeto tarjeta.

349
00:16:48,050 --> 00:17:02,930
Así que mi tarjeta equal--
si eres todos conocemos,

350
00:17:02,930 --> 00:17:05,260
esto es sólo la notación de decisiones
objeto en JavaScript.

351
00:17:05,260 --> 00:17:09,280
Es algo así como una estructura
en C, así que hicimos una tarjeta,

352
00:17:09,280 --> 00:17:15,920
y por lo que ahora podemos pasar esta tarjeta como
una propiedad o como un atributo en HTML

353
00:17:15,920 --> 00:17:17,290
terminología para nuestra aplicación.

354
00:17:17,290 --> 00:17:20,210
Por lo que podemos hacer esto, App
tarjeta es igual MyCard.

355
00:17:20,210 --> 00:17:23,200
>> Ya sabes cómo en la entrada, lo hace
tipo de entrada es igual a texto o botón

356
00:17:23,200 --> 00:17:25,240
clase es igual btn de arranque ,?

357
00:17:25,240 --> 00:17:29,500
La misma idea, equals-- tarjeta App
tienes que poner llaves aquí--

358
00:17:29,500 --> 00:17:33,830
Tarjeta de App equivale MyCard, por lo que este
dice que tenemos este objeto tarjeta.

359
00:17:33,830 --> 00:17:39,149
Voy a pasarlo como
propiedad para el componente de aplicación.

360
00:17:39,149 --> 00:17:41,440
Y este componente App
ser capaz de acceder a ella y hacer

361
00:17:41,440 --> 00:17:43,580
cosas interesantes con él.

362
00:17:43,580 --> 00:17:47,650
>> Así que nuestra aplicación va a ser
recibe la tarjeta, así que por ahora,

363
00:17:47,650 --> 00:17:49,980
vamos a tener la aplicación acaba de dar
la tarjeta a la CardView

364
00:17:49,980 --> 00:17:53,110
sí porque al igual que la aplicación no es
va a saber qué hacer con ella,

365
00:17:53,110 --> 00:17:54,850
así que sólo vamos a dar a la CardView.

366
00:17:54,850 --> 00:18:00,050
Así que vamos a pasar que el
misma manera, la tarjeta es igual,

367
00:18:00,050 --> 00:18:05,426
y por lo que cada componente puede acceder a la
las cosas que se ha dado a la misma.

368
00:18:05,426 --> 00:18:07,800
Pueden acceder a las propiedades
que se les ha dado a él

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

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

371
00:18:12,010 --> 00:18:14,920
>> Así que lo que pasa aquí es
usted tiene el objeto MyCard.

372
00:18:14,920 --> 00:18:18,250
Se pasa en la aplicación
usando tarjeta de App equivale MyCard.

373
00:18:18,250 --> 00:18:21,420
Ese objeto tarjeta se le da a su aplicación.

374
00:18:21,420 --> 00:18:24,400
La aplicación se puede acceder a él
como this.props.card.

375
00:18:24,400 --> 00:18:28,780
Es algo así como una imagen
sabe lo que es fuente es.

376
00:18:28,780 --> 00:18:31,972
>> Esta aplicación sabe lo que es la tarjeta
es, y puede hacer cosas con él.

377
00:18:31,972 --> 00:18:32,930
Se puede hacer cálculos.

378
00:18:32,930 --> 00:18:35,290
Se puede tomar decisiones basadas fuera de ella.

379
00:18:35,290 --> 00:18:39,950
>> Por ahora, me iba a pasar
this.props.card sobre la CardView.

380
00:18:39,950 --> 00:18:43,420
Tiene sentido hasta ahora?

381
00:18:43,420 --> 00:18:45,210
Se va a hacer más sentido ahora.

382
00:18:45,210 --> 00:18:46,990
>> OK, así que ahora estamos en CardView.

383
00:18:46,990 --> 00:18:51,719
Nuestra CardView, dada la tarjeta, debe
imprimir su pregunta y respuesta.

384
00:18:51,719 --> 00:18:54,510
Ahora mismo acabamos imprimimos algunos
preguntas y respuestas codificadas.

385
00:18:54,510 --> 00:18:57,720
Tenemos que averiguar fuera-- necesitamos
para pedir la tarjeta que nos dieron

386
00:18:57,720 --> 00:19:01,360
¿cuál es la pregunta y la respuesta, y
a continuación, imprimir esto en la pantalla.

387
00:19:01,360 --> 00:19:02,470
>> Por lo que podemos hacer esto aquí.

388
00:19:02,470 --> 00:19:06,135
En render begin-- primero hacer igual.

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

390
00:19:08,710 --> 00:19:13,050
Así que lo que estamos haciendo aquí es que sabemos que
las cartas nos dan a una propiedad,

391
00:19:13,050 --> 00:19:13,580
¿correcto?

392
00:19:13,580 --> 00:19:15,930
Ha dado a nosotros como una entrada.

393
00:19:15,930 --> 00:19:19,440
Como es casi como
argumentos a una función.

394
00:19:19,440 --> 00:19:22,810
La tarjeta es un argumento
casi a este CardView.

395
00:19:22,810 --> 00:19:25,239
>> Vamos a extraer de eso, y ponemos
en la cuestión variable.

396
00:19:25,239 --> 00:19:27,280
Asegúrese de que la respuesta fue
a la respuesta variable.

397
00:19:27,280 --> 00:19:31,130
Indica que la tarjeta para responder.

398
00:19:31,130 --> 00:19:35,072
Y ahora que tenemos estos,
en lugar de imprimir el texto,

399
00:19:35,072 --> 00:19:37,030
vamos a imprimir
lo que nos dieron.

400
00:19:37,030 --> 00:19:43,580
>> Así que este stuff-- así que vamos
para apagar Pregunta Respuesta.

401
00:19:43,580 --> 00:19:46,380
Vamos a ver si esto funciona.

402
00:19:46,380 --> 00:19:52,800
Fresco, así que vamos a dar un paso a través de él
una vez más, sólo para estar seguro.

403
00:19:52,800 --> 00:20:00,470
>> Así que mi tarjeta es objeto de la tarjeta, y nosotros
están dando esa carta a la aplicación.

404
00:20:00,470 --> 00:20:04,790
Y la aplicación va a tomar la
tarjeta y le dan a la CardView.

405
00:20:04,790 --> 00:20:09,190
Y esto CardView dice, si usted
dame cualquier objeto flashcard,

406
00:20:09,190 --> 00:20:11,920
Voy a imprimir a cabo su pregunta
y su respuesta, ¿verdad?

407
00:20:11,920 --> 00:20:14,590
>> Así que lo que podría hacer es que puedo
enviar este código, el primero

408
00:20:14,590 --> 00:20:16,580
como 10 líneas de mi código, a mi amigo.

409
00:20:16,580 --> 00:20:18,820
Podía incrustarlo en
su propia aplicación.

410
00:20:18,820 --> 00:20:27,200
Y mientras él hacía lo mismo,
como la tarjeta CardView equivale esto,

411
00:20:27,200 --> 00:20:30,580
siempre y cuando se creó la CardView
y le dio la información correcta,

412
00:20:30,580 --> 00:20:31,987
él podría hacer su propia tarjeta.

413
00:20:31,987 --> 00:20:34,320
Y así, de esta manera, es una realidad
manera fresca para que usted construya

414
00:20:34,320 --> 00:20:35,906
componentes que utilizan entre sí, ¿no?

415
00:20:35,906 --> 00:20:38,280
Esta tarjeta, que podría publicar
este CardView en el Internet,

416
00:20:38,280 --> 00:20:39,790
y la gente sería capaz de usarlo.

417
00:20:39,790 --> 00:20:45,070
Así que, básicamente, es como uno de los
funciones estándar de la biblioteca C.

418
00:20:45,070 --> 00:20:47,280
>> Es una función donde
alguien ha escrito.

419
00:20:47,280 --> 00:20:48,419
Usted da una cierta entrada.

420
00:20:48,419 --> 00:20:49,710
Se va a producir un determinado producto.

421
00:20:49,710 --> 00:20:50,890
No le importa cómo funciona internamente.

422
00:20:50,890 --> 00:20:53,790
Siempre y cuando usted le da el derecho
de entrada, que va a hacer la salida correcta.

423
00:20:53,790 --> 00:20:57,850
>> Y un componente puede ser
pensado de la misma manera.

424
00:20:57,850 --> 00:21:00,280
Este CardView es como
una función de biblioteca.

425
00:21:00,280 --> 00:21:03,400
Si usted le da un poco de la tarjeta
como una propiedad, que va a

426
00:21:03,400 --> 00:21:05,095
imprimir el contenido de esa carta.

427
00:21:05,095 --> 00:21:16,820
Al igual que si cambio mi tarjeta para
en cambio ser como lo que es 5 más de 37 años,

428
00:21:16,820 --> 00:21:19,210
se actualizará en consecuencia.

429
00:21:19,210 --> 00:21:21,955
Así que con sólo cambiar la entrada,
se pone una cierta salida.

430
00:21:21,955 --> 00:21:24,830
Así que usted puede pensar en componentes casi
como funciones de esta manera, que

431
00:21:24,830 --> 00:21:25,920
se puede armar.

432
00:21:25,920 --> 00:21:29,440
Tienes la oportunidad de entrada, como este CardView
como entrada, se obtiene la salida.

433
00:21:29,440 --> 00:21:31,900
En este caso, la salida es el HTML.

434
00:21:31,900 --> 00:21:34,404
Tiene sentido hasta ahora?

435
00:21:34,404 --> 00:21:36,890
Fresco, así que de nuevo, las propiedades son
cómo se puede pasar información

436
00:21:36,890 --> 00:21:40,900
dentro y fuera de los componentes.

437
00:21:40,900 --> 00:21:42,740
>> OK, así que vamos a hacer esto
Lo interactiva.

438
00:21:42,740 --> 00:21:44,450
Ahora mismo es un poco aburrido.

439
00:21:44,450 --> 00:21:45,520
¿Qué es [inaudible]?

440
00:21:45,520 --> 00:21:48,210
Puede imprimir algunos fuera,
pero eso es todo lo que puede hacer.

441
00:21:48,210 --> 00:21:51,550
>> Así que vamos a volver a la
vieja pregunta sólo por ahora.

442
00:21:51,550 --> 00:21:54,405
OK, así que ahora mismo estos componentes
son aburridos, porque todo lo que hacen,

443
00:21:54,405 --> 00:21:55,030
que reciben de entrada.

444
00:21:55,030 --> 00:21:56,100
Hacen de salida, ¿no?

445
00:21:56,100 --> 00:21:57,049
Eso es un poco aburrido.

446
00:21:57,049 --> 00:21:59,090
Queremos tener nuestra
componentes para ser capaz de tener

447
00:21:59,090 --> 00:22:02,150
una especie de estado interno,
como recordar algo.

448
00:22:02,150 --> 00:22:05,320
>> Para una tarjeta de memoria flash, por
ejemplo, ¿qué tipo de estado

449
00:22:05,320 --> 00:22:07,550
puede ser que usted desee
recordará durante flashcard?

450
00:22:07,550 --> 00:22:09,740
¿Qué estatus temporal
puede ser que usted quiere recordar

451
00:22:09,740 --> 00:22:12,491
para una tarjeta de memoria flash en una aplicación de tarjeta de memoria flash?

452
00:22:12,491 --> 00:22:13,990
AUDIENCIA: Ya sea que ha sido volteado?

453
00:22:13,990 --> 00:22:14,990
NEEL MEHTA: Sí, claro.

454
00:22:14,990 --> 00:22:17,665
Así que es posible que desee mantener
seguimiento de son que se enfrenta o está

455
00:22:17,665 --> 00:22:19,100
te enfrentas a abajo en la tarjeta.

456
00:22:19,100 --> 00:22:23,420
En Facebook, por ejemplo, que lo haría
quiero recordar en que parte del canal de noticias

457
00:22:23,420 --> 00:22:25,870
son usted o como quién es el perfil
está haciendo ahora mismo.

458
00:22:25,870 --> 00:22:30,127
>> El Mensajero, al igual que lo que el texto que
escriba en el cuadro de entrada, ¿no?

459
00:22:30,127 --> 00:22:31,710
Si actualiza la página, se va.

460
00:22:31,710 --> 00:22:32,793
Pero en realidad no importa.

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

462
00:22:33,770 --> 00:22:34,548
¿Sí?

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

464
00:22:36,152 --> 00:22:38,360
NEEL MEHTA: Como un flash
tarjeta, como se puede estar viendo

465
00:22:38,360 --> 00:22:40,290
el lado de la pregunta o el lado respuesta?

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

467
00:22:41,070 --> 00:22:43,270
>> NEEL MEHTA: Como una
flashcard de dos caras, ¿no?

468
00:22:43,270 --> 00:22:46,370
Sí, por lo que desea
tener esta idea de ahora

469
00:22:46,370 --> 00:22:50,370
Tengo propiedades, que es como los insumos,
sino del Estado, que es temporal, uh,

470
00:22:50,370 --> 00:22:51,839
donde estés en la página, a la derecha?

471
00:22:51,839 --> 00:22:54,380
Una vez más, he dicho en Facebook
Messenger, tengo como qué persona

472
00:22:54,380 --> 00:22:56,550
que estás viendo Facebook
o que es el perfil, ¿verdad?

473
00:22:56,550 --> 00:22:58,030
>> Esto es sólo temporal.

474
00:22:58,030 --> 00:23:01,200
Es importante mostrar al usuario
lo que está pasando, pero actualice la página.

475
00:23:01,200 --> 00:23:02,250
En realidad no importa.

476
00:23:02,250 --> 00:23:04,530
Así que es un estado temporal,
así que todo Estado que.

477
00:23:04,530 --> 00:23:06,250
>> Así que, de nuevo, no hay Estado y accesorios.

478
00:23:06,250 --> 00:23:09,084
Atrezzo se da entrada
desde el origen de datos.

479
00:23:09,084 --> 00:23:10,250
Estado es como valores predeterminados.

480
00:23:10,250 --> 00:23:13,700
Es como materia que
hace que la cosa interactiva.

481
00:23:13,700 --> 00:23:17,720
>> Así que en nuestro CardView-- echemos
nuestra CardView-- así que era agradable.

482
00:23:17,720 --> 00:23:21,420
Lo que vamos a hacer aquí, vamos
tocar CardView y sólo CardView.

483
00:23:21,420 --> 00:23:25,105
Y por lo que mi amigo que tiene esto,
no notará ninguna diferencia.

484
00:23:25,105 --> 00:23:27,230
Ellos no tendrían que cambiar
cualquiera de su propio código,

485
00:23:27,230 --> 00:23:29,410
pero que verían su
CardView consiguió souped.

486
00:23:29,410 --> 00:23:31,270
Eso es una parte agradable sobre componentes.

487
00:23:31,270 --> 00:23:35,290
>> Aceptar, por lo que en nuestra CardView, vamos a tratar de
llevar un registro de si estamos fase que atravesamos hasta

488
00:23:35,290 --> 00:23:36,560
o boca abajo.

489
00:23:36,560 --> 00:23:40,480
En Reaccionar hacemos esto por primera
que especifica el estado inicial.

490
00:23:40,480 --> 00:23:42,070
¿Dónde comienza la tarjeta?

491
00:23:42,070 --> 00:23:48,480
>> Así que tenga una función llamada getInitialState
funcionamos, y volvemos un objeto.

492
00:23:48,480 --> 00:23:53,310
Este objeto contiene algún estado, y
un Estado es sólo un par clave-valor.

493
00:23:53,310 --> 00:23:56,950
Al igual que en instruir, usted tiene una clave y un
valor, que tiene como nombre es una cadena.

494
00:23:56,950 --> 00:24:01,410
>> En este caso, vamos a decir frente es cierto.

495
00:24:01,410 --> 00:24:03,760
Este dice que tenemos un estado.

496
00:24:03,760 --> 00:24:06,570
Uno de los componentes del estado
es un atributo llamado frente.

497
00:24:06,570 --> 00:24:09,649
[Inaudible], por lo que de forma predeterminada,
estamos en el frente de la tarjeta,

498
00:24:09,649 --> 00:24:11,440
y podemos cambiar esta
como lanzamos la tarjeta.

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

500
00:24:13,380 --> 00:24:18,190
>> OK, así que en prestamos, ahora mismo, estamos
que muestra la pregunta y la respuesta.

501
00:24:18,190 --> 00:24:20,860
Ahora lo que debemos hacer
se mostrará la pregunta

502
00:24:20,860 --> 00:24:24,370
si estamos en la parte frontal de la tarjeta de modo
la respuesta es para la parte posterior de la tarjeta.

503
00:24:24,370 --> 00:24:26,850
Es por eso que todos cometemos
la tarjeta interactiva.

504
00:24:26,850 --> 00:24:28,100
Así que vamos a tratar de que esto aquí.

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

506
00:24:31,600 --> 00:24:33,620
Bueno, primero acaba de hacer una variable.

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

508
00:24:37,790 --> 00:24:42,010
Accedemos a declarar el mismo que
apoyos de acceso, por lo this.state.front.

509
00:24:42,010 --> 00:24:45,870
>> Si estamos delante, entonces el texto
es this.props.card.question.

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

511
00:24:48,777 --> 00:24:51,360
Si estamos en el frente de la
tarjeta, vamos a tratar de agarrar

512
00:24:51,360 --> 00:24:52,485
la cuestión de la tarjeta.

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

514
00:24:54,782 --> 00:24:57,240
De lo contrario, si estamos en la parte posterior
de la tarjeta, ¿qué hacemos?

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

516
00:25:01,830 --> 00:25:02,750
>> AUDIENCIA: ¿La respuesta?

517
00:25:02,750 --> 00:25:05,041
>> NEEL MEHTA: Sí, por lo que el texto
iguales this.props.card.answer.

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

519
00:25:08,472 --> 00:25:10,930
Pero si te das cuenta, que estamos utilizando
el estado para tomar una decisión

520
00:25:10,930 --> 00:25:14,420
porque ahora el componente
se verá diferente

521
00:25:14,420 --> 00:25:16,710
con sede fuera cómo éstos interactúan con él.

522
00:25:16,710 --> 00:25:20,355
Así que en lugar de imprimir esto,
sólo tendremos que imprimir el texto.

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

524
00:25:25,270 --> 00:25:28,650
Fresco, por lo que ahora, como usted ve,
vemos sólo la cuestión.

525
00:25:28,650 --> 00:25:37,720
Y si cambio el estado aquí manualmente
al frente es falsa obtenemos 42 espalda.

526
00:25:37,720 --> 00:25:39,720
>> Así, de nuevo, este componente
tiene su propio estado.

527
00:25:39,720 --> 00:25:43,440
Como un botón sabe si
que ha sido presionado o no,

528
00:25:43,440 --> 00:25:46,080
esta cosa sabe lo que está en
el frente o en la espalda.

529
00:25:46,080 --> 00:25:48,320
De forma predeterminada, es en el frente.

530
00:25:48,320 --> 00:25:50,840
Y luego, si es en el frente,
vamos a imprimir la pregunta.

531
00:25:50,840 --> 00:25:53,106
Si está en la parte de atrás, vamos a
imprimir la respuesta.

532
00:25:53,106 --> 00:25:54,980
Así, de nuevo, la información
dado es la misma.

533
00:25:54,980 --> 00:25:59,090
Sólo se ve diferente
en función de cómo se programa.

534
00:25:59,090 --> 00:26:02,670
Así, por ejemplo, Facebook Messenger,
incluso si se obtiene la misma fuente de datos,

535
00:26:02,670 --> 00:26:05,170
puede parecer diferente
porque el Estado es diferente.

536
00:26:05,170 --> 00:26:08,421
Se encuentra en un
El mensaje de diferente persona.

537
00:26:08,421 --> 00:26:10,930
>> OK, así que esto es todo bien y
bueno, pero ahora lo que en realidad es

538
00:26:10,930 --> 00:26:15,940
hacernos capaces de cambiar, ya sea
nuestra tarjeta es delantera o trasera.

539
00:26:15,940 --> 00:26:19,010
Podemos hacer esto mediante la adición de un flip
botón, un botón a la tarjeta que

540
00:26:19,010 --> 00:26:22,950
le dará la vuelta la tarjeta si es [inaudible].

541
00:26:22,950 --> 00:26:31,770
Así que vamos a añadir un botón de aquí, esto
botón y este botón dirá flip.

542
00:26:31,770 --> 00:26:35,650
>> Y así, en este momento,
no hace nada.

543
00:26:35,650 --> 00:26:37,075
Sólo se ve bien.

544
00:26:37,075 --> 00:26:43,650
Lo que podemos hacer es que podemos añadir un clic
manejador onClick es igual this.flip,

545
00:26:43,650 --> 00:26:44,820
y vamos a definir flip después.

546
00:26:44,820 --> 00:26:47,120
Pero, básicamente, onClick
es una función que

547
00:26:47,120 --> 00:26:48,675
se llama cuando el usuario hace clic en él.

548
00:26:48,675 --> 00:26:52,330
>> Así el botón sabrá
cuando se ha hecho clic.

549
00:26:52,330 --> 00:26:54,750
Went que ha sido pulsado,
que le dará la vuelta la tarjeta.

550
00:26:54,750 --> 00:26:58,382
Es un poco como tu
repartidor de pizza.

551
00:26:58,382 --> 00:27:01,590
Eres como, bien, cada vez que alguien
me llama, voy a entregar la pizza, ¿verdad?

552
00:27:01,590 --> 00:27:03,420
>> Usted se registra este oyente.

553
00:27:03,420 --> 00:27:04,530
Usted escucha para un evento.

554
00:27:04,530 --> 00:27:07,657
Te llaman, y cuando el
evento ocurre, se hace algo.

555
00:27:07,657 --> 00:27:08,240
Tienes la oportunidad de pizza.

556
00:27:08,240 --> 00:27:11,480
En este caso, cuando estás
se hace clic, se tapa la tarjeta.

557
00:27:11,480 --> 00:27:14,560
>> Y así tenemos que definir un
función que le dará la vuelta la tarjeta,

558
00:27:14,560 --> 00:27:17,930
así que vamos a escribir ese derecho
aquí, la función flip.

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

560
00:27:20,850 --> 00:27:23,680
Y así, ¿qué te parece flip hará?

561
00:27:23,680 --> 00:27:27,180
De nuevo, esto se llama cuando
hacemos clic en el botón de solapa.

562
00:27:27,180 --> 00:27:29,406
¿Qué debe hacer el flip función?

563
00:27:29,406 --> 00:27:34,136
>> AUDIENCIA: Cambio this.state.front
de true a false, false a true.

564
00:27:34,136 --> 00:27:38,420
>> NEEL MEHTA: Sí, a fin de tomar lo que sea
this.front es-- el estado frente es.

565
00:27:38,420 --> 00:27:40,930
Tome el estado delante, si
es verdad, que sea falsa.

566
00:27:40,930 --> 00:27:42,530
Si es falsa, que sea verdad, ¿no?

567
00:27:42,530 --> 00:27:45,330
Así que vamos a intentar eso.

568
00:27:45,330 --> 00:27:48,240
>> No se puede cambiar el estado
sólo por hacer this.state.

569
00:27:48,240 --> 00:27:50,380
No se puede hacer esto.

570
00:27:50,380 --> 00:27:52,030
Usted no puede hacer eso.

571
00:27:52,030 --> 00:27:55,810
Usted tiene que usar una función
llamada this.setState.

572
00:27:55,810 --> 00:28:03,230
>> Así que se puede decir this.setState frontal
de colon este donde, de nuevo, la exclamación

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

574
00:28:04,330 --> 00:28:07,420
Supongo que si esto. state.front
Es cierto, va a resultar falsa.

575
00:28:07,420 --> 00:28:09,170
Así que vamos a establecer el estado
de verdadero a falso.

576
00:28:09,170 --> 00:28:11,430
Si es falsa, vamos a
configurarlo falso a verdadero.

577
00:28:11,430 --> 00:28:17,210
>> Sólo notamos que nos propusimos y conseguimos un poco
de otra manera, y así vamos a tratar esto.

578
00:28:17,210 --> 00:28:18,675
Bada Bing, mira esto.

579
00:28:18,675 --> 00:28:21,810
El botón FLIP ahora
conmutar el frente hacia atrás estado.

580
00:28:21,810 --> 00:28:24,990
>> Y así que aquí es donde se ve una
poco de la magia de React.

581
00:28:24,990 --> 00:28:28,420
Como nunca nos dijeron que para volver a hacer.

582
00:28:28,420 --> 00:28:30,910
Nunca nos dijeron que volver a dibujar nada.

583
00:28:30,910 --> 00:28:32,630
Si usted está haciendo esto
sin reaccionar, te

584
00:28:32,630 --> 00:28:34,588
han a-- como cuando el
se hace clic en el botón del tirón,

585
00:28:34,588 --> 00:28:37,290
usted tendría que decirle que
manualmente volver a hacer, ¿verdad?

586
00:28:37,290 --> 00:28:43,050
>> Reaccionar es realmente genial en el que si se
darle un cierto estado y las propiedades,

587
00:28:43,050 --> 00:28:45,760
siempre va a hacer
exactamente lo mismo.

588
00:28:45,760 --> 00:28:48,690
Y así, cuando alguna vez cambiamos
el estado y las propiedades,

589
00:28:48,690 --> 00:28:50,819
reaccionar sólo re-renders todo el asunto.

590
00:28:50,819 --> 00:28:52,860
Se sabe que hay una
uno a uno la correspondencia

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

592
00:28:57,270 --> 00:29:00,110
Así que cada vez que cualquiera de los
cambios por medio de un estado conjunto,

593
00:29:00,110 --> 00:29:03,750
que va a cambiar la forma en la
pago es re-prestados.

594
00:29:03,750 --> 00:29:06,650
Y así es como básicamente Reaccionar
esperando para que usted cambie.

595
00:29:06,650 --> 00:29:09,870
>> Siempre que cambia algo,
que va a volver a hacer toda la página.

596
00:29:09,870 --> 00:29:12,480
Y si suena ineficiente,
es porque sería,

597
00:29:12,480 --> 00:29:15,050
pero reaccionar utiliza una cosa
llamado DOM Sombra.

598
00:29:15,050 --> 00:29:19,950
En vez de dibujar la página directamente,
mantiene el árbol de HTML virtual en la memoria.

599
00:29:19,950 --> 00:29:23,620
>> Ya sabes, el HTML es como un árbol,
como una estructura de datos jerárquica.

600
00:29:23,620 --> 00:29:28,990
Mantiene un árbol falso en la memoria,
y cada vez que se actualiza la página,

601
00:29:28,990 --> 00:29:31,940
que va a dibujar otra falsa
árbol, y que va a calcular

602
00:29:31,940 --> 00:29:35,120
¿Qué cambio se debe hacer el
Página para hacer los dos árboles iguales.

603
00:29:35,120 --> 00:29:38,540
Así que, básicamente, es prácticamente
re-renders mucho.

604
00:29:38,540 --> 00:29:41,540
Y entonces sólo gustaría cambia el
página en pequeños ajustes según sea necesario,

605
00:29:41,540 --> 00:29:44,240
por lo que es muy, muy, muy eficiente.

606
00:29:44,240 --> 00:29:46,970
>> Así que, básicamente, lo hará Reaccionar
cada vez que cambie algo,

607
00:29:46,970 --> 00:29:49,010
que va a volver a hacer la página de forma virtual.

608
00:29:49,010 --> 00:29:52,830
Va a averiguar qué es lo que necesito
cambiar para hacer la página real de reflejar

609
00:29:52,830 --> 00:29:55,602
la página virtual, y que va a hacer eso.

610
00:29:55,602 --> 00:29:56,560
Ese es el DOM virtual.

611
00:29:56,560 --> 00:29:59,350
Es uno de los más grandes
características de reaccionar.

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

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

614
00:30:01,540 --> 00:30:02,040
¿Sí?

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

616
00:30:05,568 --> 00:30:08,969
>> AUDIENCIA: ¿Cómo funciona
comparar aún a la MVC

617
00:30:08,969 --> 00:30:10,760
que hablamos
antes de recursos similares.

618
00:30:10,760 --> 00:30:13,527
>> NEEL MEHTA: Sí, la pregunta
es cómo se compara a MVC?

619
00:30:13,527 --> 00:30:14,610
Usted preguntó acerca de los recursos.

620
00:30:14,610 --> 00:30:16,445
Bueno, vamos a hablar de cómo funciona.

621
00:30:16,445 --> 00:30:18,190
>> En MVC, usted actualiza el modelo.

622
00:30:18,190 --> 00:30:20,560
En este caso tendríamos un modelo de tarjeta.

623
00:30:20,560 --> 00:30:24,540
La vista tendría el
botón de la moneda, y el control

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

625
00:30:26,310 --> 00:30:28,450
Así que la vista sería decir la
controlador para voltear flip.

626
00:30:28,450 --> 00:30:30,370
Voltear diría a la
modelo de cambiar, ¿no?

627
00:30:30,370 --> 00:30:33,915
>> Y así, cuando usted hace una MVC, que
escuchar para que el modelo cambia,

628
00:30:33,915 --> 00:30:37,150
y volver a hacer la vista en consecuencia.

629
00:30:37,150 --> 00:30:39,210
O simplemente tiene que gustar
tener el controlador.

630
00:30:39,210 --> 00:30:42,418
Espere a que el modelo cambie, y luego
escoger y elegir una parte de una cosa

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

632
00:30:44,032 --> 00:30:45,740
Aquí tenemos una cosa,
pero en una gran aplicación,

633
00:30:45,740 --> 00:30:48,510
te tiene que gustar recordar lo
el cambio en cada lugar,

634
00:30:48,510 --> 00:30:50,290
así que es un poco molesto.

635
00:30:50,290 --> 00:30:53,670
Y así Reaccionar es agradable
porque tiene un Dom Sombra.

636
00:30:53,670 --> 00:30:56,040
Puede darse el lujo de simplemente
reescribir la cosa entera.

637
00:30:56,040 --> 00:30:58,680
Usted no tiene que selectivamente
como supongo que lo actualice.

638
00:30:58,680 --> 00:31:02,186
>> En Facebook, si te gusta
conseguir un nuevo mensaje, en MVC,

639
00:31:02,186 --> 00:31:04,060
habría que recordar,
OK, cambiar las cosas

640
00:31:04,060 --> 00:31:06,260
en la parte superior de la
página, el icono de mensaje.

641
00:31:06,260 --> 00:31:08,290
También aparecerá una nueva ventana en la parte inferior.

642
00:31:08,290 --> 00:31:10,070
También hacer una cosa nueva en esa ventana.

643
00:31:10,070 --> 00:31:11,060
También se reproduzca un sonido.

644
00:31:11,060 --> 00:31:13,150
>> Eso es un montón de cosas
salir al mismo tiempo.

645
00:31:13,150 --> 00:31:15,320
Y por lo que si usted no lo hace
tener un Dom Sombra, que había

646
00:31:15,320 --> 00:31:18,740
tiene que hacerlo manualmente porque
usted no puede deshacerse de toda la página.

647
00:31:18,740 --> 00:31:21,430
Usted no puede permitirse, por lo que tiene
cambiar cada cosa manualmente,

648
00:31:21,430 --> 00:31:23,990
que es realmente molesto en MVC.

649
00:31:23,990 --> 00:31:27,640
>> Así que para ser
ahorrativo, que selectivamente

650
00:31:27,640 --> 00:31:30,750
actualizar la página, que es
eficiente, pero también molesto.

651
00:31:30,750 --> 00:31:34,002
En Reaccionar, a causa de la Sombra
Dom, se obtiene ambas cosas de forma gratuita.

652
00:31:34,002 --> 00:31:35,710
Es eficiente porque
de la Sombra Dom.

653
00:31:35,710 --> 00:31:37,210
El cuello de botella es la actualización de la página.

654
00:31:37,210 --> 00:31:40,292
No está haciendo la manipulación árbol.

655
00:31:40,292 --> 00:31:41,250
Usted consigue la eficiencia.

656
00:31:41,250 --> 00:31:45,420
También tendrá la facilidad de uso, ya
si usted acaba de volver a escribir toda la página,

657
00:31:45,420 --> 00:31:48,970
pero que acaba de saber, está bien, las cosas
van a estar en la página en alguna parte.

658
00:31:48,970 --> 00:31:51,180
Puede ser que sea en un lugar diferente, pero
que va a estar en la página, a la derecha?

659
00:31:51,180 --> 00:31:52,860
Así que sólo re-renderizados
toda la cosa prácticamente,

660
00:31:52,860 --> 00:31:55,540
y usted podría hacer un par
cambios en la propia página.

661
00:31:55,540 --> 00:31:57,850
>> Así, de nuevo, en que MVC
tendría que elegir

662
00:31:57,850 --> 00:32:01,840
entre la facilidad de uso y la eficiencia,
y reaccionar, se obtiene tanto.

663
00:32:01,840 --> 00:32:04,020
Así que es mejor.

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

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

666
00:32:06,676 --> 00:32:12,080
>> OK, así que vamos a ver que vamos a hablar
un poco sobre el paso 4,

667
00:32:12,080 --> 00:32:14,740
cómo podemos integrar componentes.

668
00:32:14,740 --> 00:32:16,260
Así que tenemos esto ahora mismo.

669
00:32:16,260 --> 00:32:19,420
Tenemos nuestro pequeño botón fresco.

670
00:32:19,420 --> 00:32:23,157
Podemos darle la espalda y
adelante, y eso es todo lo que hace.

671
00:32:23,157 --> 00:32:24,990
Digamos que queremos
tener otro componente.

672
00:32:24,990 --> 00:32:28,730
Digamos que nuestra aplicación flashcard debe
contiene una lista de todas las tarjetas

673
00:32:28,730 --> 00:32:31,520
que tiene, así que eso significa que
debe tener un componente más.

674
00:32:31,520 --> 00:32:32,970
Bueno, tal vez lo llaman una vista de lista.

675
00:32:32,970 --> 00:32:36,200
Vamos a hacer una vista de lista que
coexiste con la CardView,

676
00:32:36,200 --> 00:32:39,680
y este punto de vista de lista y CardView
le gustaría trabajar juntos.

677
00:32:39,680 --> 00:32:43,190
Y usted puede combinarlos
para que nuestra aplicación para usted.

678
00:32:43,190 --> 00:32:45,160
>> Así que primero, vamos a hacer una
par más cartas.

679
00:32:45,160 --> 00:32:46,370
Digamos, lo que las tarjetas?

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

681
00:32:49,619 --> 00:32:51,910
Y sólo para que yo no tengo que
aburrir con escribiéndola en,

682
00:32:51,910 --> 00:32:53,410
Yo sólo voy a copiar desde aquí.

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

684
00:33:01,664 --> 00:33:03,580
Y así voy a no
darle una sola tarjeta.

685
00:33:03,580 --> 00:33:06,910
Voy a darle una serie de cartas.

686
00:33:06,910 --> 00:33:10,240
Así que primero las aplicaciones
va a romper por ahora.

687
00:33:10,240 --> 00:33:14,717
Muy bien, así que vamos a hacer
esta capaz de manejar múltiples tarjetas.

688
00:33:14,717 --> 00:33:17,800
Así que primero, vamos a darle, no
sólo una tarjeta, pero una serie de tarjetas,

689
00:33:17,800 --> 00:33:18,700
como una lista de las tarjetas.

690
00:33:18,700 --> 00:33:20,980
Y en este caso, tenemos tres de ellos.

691
00:33:20,980 --> 00:33:27,280
>> De acuerdo, así que la aplicación es
va a obtener una lista de tarjetas,

692
00:33:27,280 --> 00:33:29,870
y que va a decidir qué
una para mostrar a la CardView.

693
00:33:29,870 --> 00:33:33,740
El CardView sólo puede
hacer una tarjeta, pero la aplicación

694
00:33:33,740 --> 00:33:37,610
para crear una lista de todas las cartas, ¿no?

695
00:33:37,610 --> 00:33:40,820
>> Así que cuando usted averiguar un solo
Tarjeta para dar a CardView,

696
00:33:40,820 --> 00:33:44,660
¿cómo adivinar es posible que pueda
para tomar una decisión sobre qué tarjeta

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

698
00:33:47,064 --> 00:33:49,980
Para darle un toque, es temporalmente
Estarás viendo una cierta tarjeta.

699
00:33:49,980 --> 00:33:53,260
Si actualiza la página, podrás
sólo tiene que ir de nuevo a la primera tarjeta.

700
00:33:53,260 --> 00:33:55,464
Eso está bien, porque es temporal.

701
00:33:55,464 --> 00:33:56,630
¿Qué técnica podríamos usar?

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

703
00:34:02,534 --> 00:34:08,760
>> AUDIENCIA: Usted podría hacer una variable
así como que tenía delante.

704
00:34:08,760 --> 00:34:11,989
¿Es esto cierto, podría
tiene tarjeta actual es igual a 1?

705
00:34:11,989 --> 00:34:14,150
>> NEEL MEHTA: Sí, por lo que
quiero tener el estado, ¿no?

706
00:34:14,150 --> 00:34:16,080
Se podría utilizar el estado en el
componente de averiguar

707
00:34:16,080 --> 00:34:17,288
qué tarjeta hacen que queremos conseguir.

708
00:34:17,288 --> 00:34:19,290
Al igual que tenemos una lista de
todas las cartas, vamos a

709
00:34:19,290 --> 00:34:21,630
utilizar el estado de averiguar
una de la primera tarjeta,

710
00:34:21,630 --> 00:34:23,710
segunda tarjeta, tercera tarjeta, y así sucesivamente.

711
00:34:23,710 --> 00:34:28,760
>> Así que una aplicación para una aplicación tendrá un
tienen la función getInitialState,

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

713
00:34:35,020 --> 00:34:39,929
Y sólo tendremos que decir activeIndex 0.

714
00:34:39,929 --> 00:34:42,889
Así que ahora nuestra aplicación tiene su propio estado.

715
00:34:42,889 --> 00:34:47,179
>> Y por lo que ahora el render, de averiguar
una tarjeta, vamos a ir a la matriz

716
00:34:47,179 --> 00:34:49,969
y apoderarse de la cosa en ese índice.

717
00:34:49,969 --> 00:34:53,580
Seleccione la tarjeta de this.props.cards iguales
this.state.activeIndex.

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

719
00:34:56,469 --> 00:35:00,162
Así como se ve aquí, los apoyos y
el estado de hecho de trabajar juntos.

720
00:35:00,162 --> 00:35:08,990
Así que ahora que tenemos nuestro ActiveCard,
lo llamaremos ActiveCard,

721
00:35:08,990 --> 00:35:10,470
y vamos a ver si esto funciona.

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, eso fue un error 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
>> Fresco, sí, por lo que ahora estábamos de regreso
a donde estábamos antes, ¿no?

729
00:35:54,840 --> 00:35:57,100
Programa La misma vieja excepción
ahora podemos apoyar

730
00:35:57,100 --> 00:35:59,390
una lista de tarjetas, no sólo una tarjeta.

731
00:35:59,390 --> 00:36:04,130
Y ahora, de nuevo, si cambiamos el
activeIndex, que puede ir de 0 a 1,

732
00:36:04,130 --> 00:36:07,330
y ahora que la segunda tarjeta,
y luego nos fuimos a 0.

733
00:36:07,330 --> 00:36:10,390
Así que aquí está una nueva
trucado versión de nuestro.

734
00:36:10,390 --> 00:36:16,000
>> OK, así que ahora vamos a tener una vista de lista que
muestra todas las cartas en su programa,

735
00:36:16,000 --> 00:36:19,980
así que vamos a hacer una nueva
componente llamado ListView.

736
00:36:19,980 --> 00:36:22,155
Deje ListView es igual react.createClass.

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

738
00:36:32,890 --> 00:36:38,800
Así que queremos rendir desordenada
lista con un elemento de la lista para cada tarjeta.

739
00:36:38,800 --> 00:36:41,490
Y así que tenemos un montón de cartas.

740
00:36:41,490 --> 00:36:44,990
Queremos un solo elemento de la lista
para cada tarjeta, ¿verdad?

741
00:36:44,990 --> 00:36:47,490
Podríamos hacer un bucle for o
algo para hacer un nuevo elemento de la lista.

742
00:36:47,490 --> 00:36:50,522
Pero la forma en que lo hace en
Reaccionar, utilizar una cosa que se llama mapa.

743
00:36:50,522 --> 00:36:57,150
Mapa es una herramienta o una función que utilice
que por cada elemento, se ejecuta alguna función,

744
00:36:57,150 --> 00:36:59,510
tiene valor de retorno, y
le da que volver.

745
00:36:59,510 --> 00:37:06,310
>> Así por ejemplo, tenemos la matriz
1, 2, function-- 3.map y esto

746
00:37:06,310 --> 00:37:12,120
es la abreviatura de un
function-- x flecha x veces x.

747
00:37:12,120 --> 00:37:16,110
Esto, dice, para cada número
en 1, 2, 3, tomarlo.

748
00:37:16,110 --> 00:37:17,800
Square, y dar de nuevo.

749
00:37:17,800 --> 00:37:22,090
Entonces, ¿qué cree usted que 1,
2, 3.map x va a x veces

750
00:37:22,090 --> 00:37:25,480
x da vuelta dada
que esta función es

751
00:37:25,480 --> 00:37:27,680
ejecutar en cada elemento de la 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: Sí, 1, 4, 9
porque haces 1 Tiempos 1.

755
00:37:35,709 --> 00:37:36,500
Eso te da una.

756
00:37:36,500 --> 00:37:37,690
Ese es el primer elemento.

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

758
00:37:38,530 --> 00:37:39,570
Eso es un segundo elemento.

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

760
00:37:40,310 --> 00:37:41,540
Eso es un tercer elemento.

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

762
00:37:42,640 --> 00:37:45,015
Así mapa tiene una técnica que
utilizar en los programadores funcionales,

763
00:37:45,015 --> 00:37:48,090
el nuevo estilo de
programación que hacer algo

764
00:37:48,090 --> 00:37:50,500
a cada elemento de la lista.

765
00:37:50,500 --> 00:37:51,970
Y así esto suena familiar.

766
00:37:51,970 --> 00:37:53,370
Tenemos una lista de tarjetas.

767
00:37:53,370 --> 00:37:56,860
Queremos conseguir un elemento de la lista para cada
uno, así que sólo vamos a usar un mapa aquí.

768
00:37:56,860 --> 00:38:00,250
Vamos a decir, dejar que la lista de los iguales
this.props, tarjetas, mapa.

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

770
00:38:10,580 --> 00:38:15,070
>> Y así recibe la tarjeta, estamos
va a generar un elemento de la lista

771
00:38:15,070 --> 00:38:17,580
con contenidos lado de esa carta de la misma.

772
00:38:17,580 --> 00:38:20,660
Digamos que queremos dar a conocer
las cartas cuestionan lo card.question.

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

774
00:38:24,990 --> 00:38:30,649
Así que esta lista contiene un
gama de LI de o elementos de lista

775
00:38:30,649 --> 00:38:32,440
donde hay una sola lista
elemento para cada tarjeta,

776
00:38:32,440 --> 00:38:35,150
y que contiene la pregunta tarjetas.

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

778
00:38:37,640 --> 00:38:39,450
>> Fresco, así que ahora vamos a
de hecho imprimir eso.

779
00:38:39,450 --> 00:38:46,521
Así que vamos a devolver un ul.

780
00:38:46,521 --> 00:38:49,020
Dentro de esa lista desordenada,
sólo tendremos que mantenemos toda la lista

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

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

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

784
00:38:53,350 --> 00:38:56,060
>> Muy bien, así que ahora esta
vista de lista de trabajos acaba de encontrar.

785
00:38:56,060 --> 00:38:59,842
Una pregunta sobre la vista de lista?

786
00:38:59,842 --> 00:39:01,270
Usted tiene un montón de cartas.

787
00:39:01,270 --> 00:39:02,800
Usted hace un elemento de la lista para cada tarjeta.

788
00:39:02,800 --> 00:39:05,466
Y se los pone dentro de una desordenada
lista, y le dará de nuevo.

789
00:39:05,466 --> 00:39:09,410
Así que ahora vamos a actuar así que integramos
esto dentro de nuestra aplicación,

790
00:39:09,410 --> 00:39:14,310
por lo que podemos hacer esto, la vista de lista.

791
00:39:14,310 --> 00:39:17,070
Lo que argumento es lo que pasa a vista de lista?

792
00:39:17,070 --> 00:39:18,320
¿Qué propiedades Por qué le damos?

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

794
00:39:25,111 --> 00:39:26,860
Recuerde, si usted da
es un montón de tarjetas,

795
00:39:26,860 --> 00:39:29,590
que va a hacer la lista
ver de esas tarjetas.

796
00:39:29,590 --> 00:39:32,267
Entonces, ¿qué íbamos a pasar
aquí como argumento?

797
00:39:32,267 --> 00:39:33,350
AUDIENCIA: Una lista de las tarjetas?

798
00:39:33,350 --> 00:39:37,130
NEEL MEHTA: Sí, así que las tarjetas
iguales this.props.cards, ¿verdad?

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

800
00:39:39,850 --> 00:39:44,370
Y por lo que el único problema
es que sólo se puede

801
00:39:44,370 --> 00:39:48,600
resultó un elemento de nivel superior en el render,
así que hay que envolverlo en un div.

802
00:39:48,600 --> 00:39:49,100
Es raro.

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

804
00:39:56,190 --> 00:39:57,530
Así que vamos a ver si eso.

805
00:39:57,530 --> 00:40:09,790

806
00:40:09,790 --> 00:40:10,560
¿Eso funciona?

807
00:40:10,560 --> 00:40:29,774

808
00:40:29,774 --> 00:40:31,030
>> Sí, ahí lo tienes.

809
00:40:31,030 --> 00:40:33,700
Así que ahora tenemos una lista
de tarjetas en la parte inferior,

810
00:40:33,700 --> 00:40:36,180
y luego tenemos nuestro
CardView sí en la parte superior,

811
00:40:36,180 --> 00:40:40,486
y que va a dar la vuelta entre
las dos caras de la tarjeta.

812
00:40:40,486 --> 00:40:42,610
Ahora sí que tiene sentido cómo lo hice?

813
00:40:42,610 --> 00:40:45,165

814
00:40:45,165 --> 00:40:46,790
Sí, así que una vez más, tenemos dos componentes.

815
00:40:46,790 --> 00:40:49,666
Las primeras impresiones de componentes
fuera cada tarjeta en la lista.

816
00:40:49,666 --> 00:40:50,540
Esa es la vista de lista.

817
00:40:50,540 --> 00:40:54,770
Y el segundo componente
imprime simplemente esa tarjeta.

818
00:40:54,770 --> 00:40:58,840
Si le das una determinada tarjeta, que va a
imprimir información sobre la tarjeta

819
00:40:58,840 --> 00:41:01,870
y dejar que le da la vuelta hacia atrás y adelante.

820
00:41:01,870 --> 00:41:05,850
>> Así que si queremos, podemos tratar y hablar
sobre la adición de algunas nuevas características a este.

821
00:41:05,850 --> 00:41:09,482
De lo contrario, podemos hablar un poco más
acerca de la velocidad del reactor,

822
00:41:09,482 --> 00:41:11,190
o podemos contestar
preguntas que pueda tener

823
00:41:11,190 --> 00:41:15,050
porque éstas son todas las piezas de la base
de reaccionar que quiero hablar.

824
00:41:15,050 --> 00:41:16,540
Podemos ir por delante.

825
00:41:16,540 --> 00:41:17,590
Podemos contestar preguntas.

826
00:41:17,590 --> 00:41:18,560
Lo que quieras.

827
00:41:18,560 --> 00:41:21,694

828
00:41:21,694 --> 00:41:24,205
>> AUDIENCIA: ¿Se puede utilizar
JSX en JavaScript normal?

829
00:41:24,205 --> 00:41:27,150
¿O es que algo que
vino con el [inaudible]?

830
00:41:27,150 --> 00:41:30,760
>> NEEL MEHTA: La pregunta es lata
utiliza JSX con JavaScript normal?

831
00:41:30,760 --> 00:41:32,620
La respuesta es sí.

832
00:41:32,620 --> 00:41:41,070
JSX es sólo una forma de que se necesita su
JavaScript que tiene HTML dentro de la misma,

833
00:41:41,070 --> 00:41:44,215
y se compila en JavaScript que
no tiene HTML dentro de la misma.

834
00:41:44,215 --> 00:41:47,880
Así notar que-- lo cuenta aquí.

835
00:41:47,880 --> 00:41:50,820
Esto parece que tiene como div
y que tiene cosas en el interior de la misma.

836
00:41:50,820 --> 00:41:54,970
>> Que compila a JavaScript que
al igual que genera la misma cosa.

837
00:41:54,970 --> 00:41:59,590
Supongo que lo que estoy diciendo es que
JSX es sólo una sintáctica, como si fuera

838
00:41:59,590 --> 00:42:03,530
un preprocesador JavaScript mucho
como PHP es un preprocesador de HTML.

839
00:42:03,530 --> 00:42:05,490
JSC es un preprocesador
JavaScript que permite

840
00:42:05,490 --> 00:42:12,970
pones HTML dentro de tu JavaScript.

841
00:42:12,970 --> 00:42:16,425
Y por lo que si usted tiene el derecho de transformador
que es una cosa que se llama [inaudible],

842
00:42:16,425 --> 00:42:17,300
que transformará.

843
00:42:17,300 --> 00:42:19,360
El preprocesador derecha,
que va a dejar que hagas eso.

844
00:42:19,360 --> 00:42:20,235
>> AUDIENCIA: [inaudible]

845
00:42:20,235 --> 00:42:23,026
NEEL MEHTA: Por lo general no es necesario
poner HTML dentro de JavaScript

846
00:42:23,026 --> 00:42:24,110
a menos que estás haciendo reaccionar.

847
00:42:24,110 --> 00:42:27,146
Pero usted puede hacerlo de todos modos.

848
00:42:27,146 --> 00:42:27,645
¿Sí?

849
00:42:27,645 --> 00:42:29,353
>> AUDIENCIA: Creo que
había descrito Reaccionar

850
00:42:29,353 --> 00:42:31,970
como un lenguaje de programación funcional.

851
00:42:31,970 --> 00:42:35,646
Hemos estado aprendiendo C en CS50.

852
00:42:35,646 --> 00:42:38,032
Es el C también un lenguaje funcional?

853
00:42:38,032 --> 00:42:39,990
NEEL MEHTA: Así que la pregunta
es de aproximadamente funcional

854
00:42:39,990 --> 00:42:43,010
frente a otra cosa llamada
programación imperativa o de procedimiento.

855
00:42:43,010 --> 00:42:44,820
Hay dos tipos de programas populares.

856
00:42:44,820 --> 00:42:48,550
Uno se llama procedimental, que
es todo acerca de como los comandos que hacen,

857
00:42:48,550 --> 00:42:51,510
y uno es funcional, que es todo
por tener funciones y tener

858
00:42:51,510 --> 00:42:52,930
entrada y salida de esos.

859
00:42:52,930 --> 00:42:55,930
Reaccionar es un paradigma funcional.

860
00:42:55,930 --> 00:42:58,010
C es un paradigma muy procesal.

861
00:42:58,010 --> 00:43:02,360
>> Y como ejemplo, C por ejemplo,
no lo haces de esta manera declarativa

862
00:43:02,360 --> 00:43:04,390
de hacer el programa, ¿no?

863
00:43:04,390 --> 00:43:06,826
Hay que decir, imprimir esta.

864
00:43:06,826 --> 00:43:07,950
Cambie esta estructura de datos.

865
00:43:07,950 --> 00:43:08,530
Imprimir esta.

866
00:43:08,530 --> 00:43:10,160
Es todo acerca de los comandos.

867
00:43:10,160 --> 00:43:12,640
>> En Reaccionar, no hay
que muchos comandos.

868
00:43:12,640 --> 00:43:15,145
Todo es cuestión de tener
componentes que juntos.

869
00:43:15,145 --> 00:43:16,300
Son como funciones.

870
00:43:16,300 --> 00:43:26,360
Tiene como función
llamada CardView,

871
00:43:26,360 --> 00:43:28,680
que es una función
que tiene entrada, salida,

872
00:43:28,680 --> 00:43:30,660
y así Reaccionar es todo
sobre esta filosofía

873
00:43:30,660 --> 00:43:32,700
nos de having-- tiene datos.

874
00:43:32,700 --> 00:43:34,910
Se pasa a través de este
algoritmo, y que va a

875
00:43:34,910 --> 00:43:36,800
HTML de salida que
acaba de imprimir la página,

876
00:43:36,800 --> 00:43:39,180
y lo que tiene que
construir pieza por pieza.

877
00:43:39,180 --> 00:43:42,800
>> Así que para dibujar una metáfora para lo
He dicho antes, ya sabes cómo

878
00:43:42,800 --> 00:43:47,050
en Facebook, si usted recibe un mensaje,
y usted decide qué partes de actualizar,

879
00:43:47,050 --> 00:43:47,882
eso es de procedimiento.

880
00:43:47,882 --> 00:43:48,840
Es imperativo, ¿no?

881
00:43:48,840 --> 00:43:49,806
OK, recibí un mensaje.

882
00:43:49,806 --> 00:43:50,930
Cambiemos cuenta allí.

883
00:43:50,930 --> 00:43:52,110
>> Vamos a estallar una ventana aquí.

884
00:43:52,110 --> 00:43:52,780
Cambiemos cuenta allí.

885
00:43:52,780 --> 00:43:53,700
Dibujemos esto aquí.

886
00:43:53,700 --> 00:43:55,220
Eso es un enfoque de procedimiento.

887
00:43:55,220 --> 00:44:00,240
>> Eso es lo que cosas como angular,
Boost, Backbone, otros marcos utilizan.

888
00:44:00,240 --> 00:44:01,200
Reaccionar es funcional.

889
00:44:01,200 --> 00:44:03,324
Es una manera muy diferente
de pensar sobre las cosas.

890
00:44:03,324 --> 00:44:07,950
Toma esta idea de que vamos a tener
funciones o algoritmos que le

891
00:44:07,950 --> 00:44:08,800
darle datos.

892
00:44:08,800 --> 00:44:11,820
Se va a escupir lo que
debe ser, y el ordenador

893
00:44:11,820 --> 00:44:13,490
se hará cargo de pesando.

894
00:44:13,490 --> 00:44:15,890
No maneje usted mismo.

895
00:44:15,890 --> 00:44:18,470
¿Tiene que hacer un poco de sentido?

896
00:44:18,470 --> 00:44:18,970
¿Sí?

897
00:44:18,970 --> 00:44:24,180
>> AUDIENCIA: En un lenguaje funcional,
todo sucede a la vez?

898
00:44:24,180 --> 00:44:26,800
>> NEEL MEHTA: No, las cosas suceden en orden.

899
00:44:26,800 --> 00:44:29,320
Al igual que aquí todavía hay
orden, pero no lo hace

900
00:44:29,320 --> 00:44:32,390
pasar en orden de como
felicitar, comando, comando.

901
00:44:32,390 --> 00:44:36,459
Sucede con el fin de
función que da salida.

902
00:44:36,459 --> 00:44:37,750
Pon eso en otra función.

903
00:44:37,750 --> 00:44:39,550
Pon eso en otro
función, otra función.

904
00:44:39,550 --> 00:44:41,470
>> Si lo hace CS51, podrás
aprender programas funcionales

905
00:44:41,470 --> 00:44:42,886
un poco fuera del alcance de este.

906
00:44:42,886 --> 00:44:45,090
Pero, básicamente, lo que hace
Reaccionar fresco no es sólo

907
00:44:45,090 --> 00:44:46,840
el flujo de datos de una sola vía
y el Dom virtual,

908
00:44:46,840 --> 00:44:48,700
sino también la idea de
programación funcional.

909
00:44:48,700 --> 00:44:51,720
Y la programación funcional es muy fácil
para componer y hacer cosas interesantes fuera de,

910
00:44:51,720 --> 00:44:53,844
y es muy fácil pensar
sobre y razonar sobre.

911
00:44:53,844 --> 00:44:55,450
Así que es otro buen sorteo de React.

912
00:44:55,450 --> 00:44:58,489

913
00:44:58,489 --> 00:44:59,280
¿Alguna otra pregunta?

914
00:44:59,280 --> 00:45:02,650

915
00:45:02,650 --> 00:45:03,150
¿Sí?

916
00:45:03,150 --> 00:45:06,840
>> AUDIENCIA: Um, ¿por qué usted
utilice dejar que a diferencia de var?

917
00:45:06,840 --> 00:45:10,450
>> NEEL MEHTA: Así que la pregunta es
¿Por qué se utiliza en lugar de dejar que var?

918
00:45:10,450 --> 00:45:13,220
Esto es una cosa que se llama
ES6 o ECMAScript 6.

919
00:45:13,220 --> 00:45:15,820
Es la nueva versión de JavaScript.

920
00:45:15,820 --> 00:45:19,050
Hay un montón de razones técnicas,
Pero vamos es una mejor versión de var.

921
00:45:19,050 --> 00:45:20,724
>> Es la forma de declarar variables.

922
00:45:20,724 --> 00:45:21,390
Puede utilizar deje.

923
00:45:21,390 --> 00:45:22,140
Puede usar var.

924
00:45:22,140 --> 00:45:23,825
Let tiene un montón de técnicos
reasons-- puedes mirarlos

925
00:45:23,825 --> 00:45:25,610
hasta tarde-- por eso que es mejor.

926
00:45:25,610 --> 00:45:28,780
Básicamente, ES6 tiene algunas buenas
nueva sintaxis, algunas nuevas características

927
00:45:28,780 --> 00:45:30,720
en la parte superior de la antigua JavaScript.

928
00:45:30,720 --> 00:45:32,782
>> Así que tenemos como cinco minutos.

929
00:45:32,782 --> 00:45:34,990
Sólo quería hablar
una cosa más real rápido.

930
00:45:34,990 --> 00:45:36,450
Si tuviera alguna pregunta,
vamos a hablar de ello después de esto.

931
00:45:36,450 --> 00:45:38,366
Pero para que esto se pone
captado por la cámara, sólo

932
00:45:38,366 --> 00:45:41,550
quiero hablar un poco acerca de cómo se
utilizar realmente Reaccionar en sus aplicaciones.

933
00:45:41,550 --> 00:45:47,220

934
00:45:47,220 --> 00:45:58,640
>> Si vas allí,
Facebook.GitHub.IO/react,

935
00:45:58,640 --> 00:46:03,320
esta es la página de inicio para reaccionar, y
que voy a mostrar cómo usted utiliza

936
00:46:03,320 --> 00:46:05,320
Reaccionar en sus páginas.

937
00:46:05,320 --> 00:46:08,845
Básicamente, es un poco
complicado intentar instalar React.

938
00:46:08,845 --> 00:46:12,300
No es tan fácil como usted acaba de arrastrar
y colocar un JavaScript en allí.

939
00:46:12,300 --> 00:46:15,890
>> Usted tiene que tener su transformador
establecido, que, como lo hacía antes,

940
00:46:15,890 --> 00:46:18,120
convertir su JSX en
el JavaScript normal.

941
00:46:18,120 --> 00:46:21,030
Tienes que lo que va a
compilar usted ES6 a la normalidad.

942
00:46:21,030 --> 00:46:24,720
JavaScript hay mucho movimiento
piezas que tienes que hacer, así que hay una cosa

943
00:46:24,720 --> 00:46:27,200
llamada Yeoman, Yeoman.io.

944
00:46:27,200 --> 00:46:31,110
Y esta es una herramienta de línea de comandos que va a
ayudarle a Andamios tu Reaccionar

945
00:46:31,110 --> 00:46:32,380
proyectos fácilmente.

946
00:46:32,380 --> 00:46:38,660
>> Así que usted puede leer sobre esto
más tarde, pero hay algunas herramientas

947
00:46:38,660 --> 00:46:40,160
que Yeoman ofrece.

948
00:46:40,160 --> 00:46:43,280
Ellos te permiten crear un Reaccionar
aplicación con todo lo construido en.

949
00:46:43,280 --> 00:46:46,030
Al igual que va a haber construido
en, componentes incorporado.

950
00:46:46,030 --> 00:46:47,880
Tendrá su transformador incorporado.

951
00:46:47,880 --> 00:46:50,699
Tienen un montón de fresco
cosas construido en forma automática

952
00:46:50,699 --> 00:46:52,240
el uso de estas cosas llamadas generadores.

953
00:46:52,240 --> 00:46:54,620
>> Así que leer sobre esto, si quieres.

954
00:46:54,620 --> 00:46:59,110
Sólo tienes que ir en Yeoman, Y-E-O-M-A-N, y
usted puede encontrar los generadores como estos.

955
00:46:59,110 --> 00:47:01,263
Y como con los generadores
estos, como uno

956
00:47:01,263 --> 00:47:03,010
Es manda una línea de comandos pareja.

957
00:47:03,010 --> 00:47:05,530
Va andamio a cabo una
toda Reaccionar aplicación para usted.

958
00:47:05,530 --> 00:47:10,470
Se va a obtener toda la tubería manual,
y trabajo duro hecho por ti,

959
00:47:10,470 --> 00:47:13,010
y es por eso que sólo se centran
en sólo escribir en React.

960
00:47:13,010 --> 00:47:16,739
>> Así que básicamente la construcción de una
Reaccionar aplicación es trivial.

961
00:47:16,739 --> 00:47:19,530
Ha conectado todos juntos, pero hay
son herramientas que haré por ti.

962
00:47:19,530 --> 00:47:23,070
Así que si usted desea hacer una Reaccionar
aplicación, trate de hacerlo de esa manera.

963
00:47:23,070 --> 00:47:26,360
Si lo que desea es experimentar,
usted puede intentar usar esta CodePen

964
00:47:26,360 --> 00:47:28,550
porque este tiene CodePen
todo el cableado reaccionan.

965
00:47:28,550 --> 00:47:30,240
He hecho todo el trabajo por usted ya.

966
00:47:30,240 --> 00:47:34,610
>> Así que si usted desea hacer como un
producción para liberar Reaccionar aplicación,

967
00:47:34,610 --> 00:47:37,220
probar uno de estos generadores.

968
00:47:37,220 --> 00:47:40,240
Si lo que desea es jugar
alrededor, es a menudo vale solo

969
00:47:40,240 --> 00:47:44,490
como tratar de jugar en CodePen aquí.

970
00:47:44,490 --> 00:47:45,470
¿Suena bien?

971
00:47:45,470 --> 00:47:45,970
Guay.

972
00:47:45,970 --> 00:47:47,890
>> Así que eso es todo lo que tengo.

973
00:47:47,890 --> 00:47:52,470
Una vez más, todo el código y los ejemplos son
va a ser en este sitio web aquí.

974
00:47:52,470 --> 00:47:55,509
Así que, de nuevo, no hablamos
acerca mucho sintaxis del Reaccionar,

975
00:47:55,509 --> 00:47:57,550
sino para encontrar todos aquellos
pequeños detalles sintácticos,

976
00:47:57,550 --> 00:48:00,320
que todo va a estar disponible
en este sitio web aquí.

977
00:48:00,320 --> 00:48:02,660
>> Así que me gustaría recomendar como
da el primer paso.

978
00:48:02,660 --> 00:48:06,277
Póngalo en su CodePen.

979
00:48:06,277 --> 00:48:08,110
Trate de trabajar en la fabricación
a la segunda etapa.

980
00:48:08,110 --> 00:48:11,310
Hay una cuarta etapa, y justo
ver dónde se obtiene de eso.

981
00:48:11,310 --> 00:48:14,840
>> Más preguntas, comprobar
que página o enviarme un correo electrónico.

982
00:48:14,840 --> 00:48:16,490
Esa es mi correo electrónico.

983
00:48:16,490 --> 00:48:19,885
Pero me encantaría ayudarte con cualquier
pregunta que pueda tener acerca de reaccionar.

984
00:48:19,885 --> 00:48:21,010
Así que, sí, eso es todo lo que tengo.

985
00:48:21,010 --> 00:48:23,410
Gracias todos por
viendo o por asistir.

986
00:48:23,410 --> 00:48:26,820
Y me quedo con cualquier pregunta
usted puede tener después de esto ahora.

987
00:48:26,820 --> 00:48:29,140
Así que gracias a todos por su atención.

988
00:48:29,140 --> 00:48:31,270