>> [REPRODUCCIÓN DE MÚSICA]
>> NEEL MEHTA: Aquí va.
>> Bueno, todo el mundo, la bienvenida a la web aplicaciones del futuro con reaccionan.
Esto es CS50.
Mi nombre es Neel.
Soy un TA para CS50 y un estudiante de segundo año en Harvard College y un muy, muy
desarrollador web apasionado.
Así que estoy muy emocionante estar hablando con ustedes hoy,
si usted está aquí o en casa viendo, sobre Reaccionar, que es, de nuevo
como ya he dicho, el futuro de las aplicaciones web.
>> Así Reaccionar es un framework web.
Y como he estado diciendo para algunas personas aquí,
un marco es sólo una un conjunto de herramientas que puede utilizar
para estructurar y construir su aplicación web.
Y las aplicaciones web son, de nuevo, los sitios web que son interactivos como Facebook,
Twitter.com, Instagram.com, lo que sea.
>> Así que Facebook es un framework web que fue desarrollado por Facebook
un par de años parte posterior-- reaccionan es.
Desde entonces se ha utilizado en Facebook en sus aplicaciones móviles
y la aplicación web, Instagram.
Khan Academy es otro prominente de los primeros de React.
>> Realmente ha sido conseguir extremadamente popular.
Si alguna vez utiliza cosas como angular o Backbone, esto es de la misma familia,
pero lo ha hecho desde el momento superando su popularidad.
Es la cosa más nueva caliente.
Es realmente, realmente enorme.
>> Y así Reaccionar es bueno no sólo como un framework web para interfaces de construcción.
Es bueno para la construcción de interfaces web.
También hay una cosa llamada Reaccionar nativo que
le permite crear interfaces de para Android y iOS
y tal vez otras plataformas en el futuro utilizando sólo el mismo código JavaScript.
Usted podría utilizar la misma exacta Código JavaScript para render sitios web,
para hacer aplicaciones de Android y aplicaciones de iOS.
>> Es un momento muy, muy emocionante.
Es una oportunidad muy, muy fresco.
Es realmente una red universal herramienta de desarrollo de interfaz,
por lo que es un muy, muy cosa importante a saber.
Y, como le decía a la gente antes, esto, creo,
va a cambiar la forma en que construir aplicaciones web siempre.
Por lo que es tal vez un poco hipérbole, pero yo Creo que es una buena cosa para saber.
>> OK, así que lo que es Reaccionar?
Reaccionar es un marco que puede utilizar para la construcción de interfaces.
Una interfaz es, de nuevo, una página web, ¿no?
Así que aquí está Instagram.com, usos reaccionan.
>> Reaccionar se basa en el idea de los componentes.
Un componente es un HTML elemento con esteroides,
por lo que un elemento HTML es como un botón.
Es un párrafo.
Es una cabecera, ¿verdad?
Y Instagram utilizará estos, pero también utilizará componentes de React.
>> Reaccionar componentes son elementos HTML trucados
que tienen su propio comportamiento contenida dentro de ellos.
Así, como ejemplo, podríamos tener un elemento de tiempo, un componente de tiempo,
que contendrá como la marca de tiempo, ya sabes,
un componente de perfil que contendrá la imagen de perfil
y el nombre de la persona.
Puede tener un contador similares, los cuales puede contar como el número de gustos,
y si hace clic en él, que va a aumentar el número de gustos.
Un componente es sólo un montón de código HTML que
tiene algunas funciones envuelta en el interior de la misma.
Así que es como un elemento HTML en los esteroides, como he dicho antes.
Usted puede tomar estos componentes, y usted puede ponerlos juntos
hacer nuevos componentes, este caso, un componente de correos,
que contiene todas estas cosas.
Contendría Tiempo, Perfil, LikeCounter, tal vez el comentario
y tal vez la propia imagen.
Y por lo que las aplicaciones web son sólo construyeron tomando componentes y ponerlos juntos.
Una alimentación de Instagram es nada más que un grupo de puestos uno tras otro,
cada post contiene como el Tiempo, Perfil, LikeCounter, y así sucesivamente.
Es una especie de como construir una casa.
No se construye la casa de arriba a abajo.
Se toma usted components-- tomar al igual que el baño.
Usted toma el bedroom-- les pegan juntos, y usted tiene un nuevo componente.
Usted tiene una nueva parte de la casa.
>> Así Reaccionar está todo construido alrededor esta idea de componentes que
son interactivos, que son declarativos.
Al igual que usted acaba de decir lo que es un el perfil es, y la hace.
Son componibles.
Usted puede tomar un tiempo y un perfil, pone juntos, hacen algo mejor.
Y son reutilizables, por lo que si tener el código fuente de un puesto,
usted podría integrar a cualquier parte.
>> Puede incrustar un Instagram cosa en su propio sitio web.
Puede incrustar en Facebook, por ejemplo, siempre y cuando se utiliza Reaccionar también.
Así que los componentes son muy, muy, muy poderosos bloques de construcción de la web
que puede ser utilizado en cualquier lugar y poner juntos para hacer nuevos bloques de construcción.
Eso es muy, muy visión general de alto nivel.
Así que, de nuevo, si usted tiene cualquier pregunta en cualquier momento
sobre la filosofía de reactor, el codificación, que me detenga, y que me haga saber.
>> OK, así que reaccionar es genial, ya que tiene una manera diferente de ver
en la forma de construir aplicaciones web.
Usted probablemente ha oído hablar de MVC, un modelo a controlar en CS50 o lo que sea
otras clases de sondeo que utiliza.
Y la mayoría de los marcos son construido alrededor de la idea de la MVC.
Reaccionar no lo es.
Reaccionar se construye alrededor de la idea del flujo de datos unidireccional
como se ve por esta tabla o gráfico aquí.
>> Básicamente, usted tiene una fuente de datos.
Y la fuente de datos decidirá cómo diseñar ciertos componentes.
Y los componentes entonces, cuando cambian,
ellos le dirán la fuente de datos para cambiar.
>> Para utilizar el Instagram ejemplo, es posible que tenga
una lista de objetos postales como en una base de datos o algo así.
Que los datos.
Y entonces nuestros componentes de correos se llevará a esos datos,
y utilizar esos datos para hacer una cosa en la pantalla.
Eso es lo que la flecha a partir de datos de componente es,
y luego se utiliza ese mismo datos para hacer un montón de componentes.
>> En Facebook Messenger, para ejemplo, que es Reaccionar,
es posible que tenga una lista de mensajes como el origen de datos.
Y eso no se rinden sólo la lista de mensajes
sino también la lista de los amigos que tiene.
Usted tiene el recuento no leído.
Quizás también hacer que la cosa Facebook eso es en el fondo de Facebook.com.
Los mismos datos es una única fuente de la verdad
y que provoca una gran cantidad de componentes que se prestarán.
Y cada vez que uno de los componentes se cambia,
que se remonta y cambia la fuente de datos.
>> Usted envía un mensaje, ¿no?
Eso cambia la fuente de datos.
Usted lee sus mensajes, así se establece sin leer a 0.
Eso cambia la fuente de datos.
Y darse cuenta de que todo esto de una sola flecha que se remonta a los mismos datos
fuente, así que ya sabes, dado un determinado conjunto de datos,
usted sabe exactamente lo que el página va a ser similar.
Es determinista.
Ya sabes, dados ciertos datos, lo que la página se va a parecer.
Se puede predecir cómo va a se comportan y cómo van las cosas
a trabajar cuando están juntos.
>> Y si tuviera un millón de componentes aquí, se comportaría de la misma, ¿no?
Usted no tiene ninguna interconexiones extraños.
Uno datos rindió un millón de componentes.
Un millón de componentes posible volver atrás y editar los datos.
Y por lo que este es muy agradable.
Estamos construyendo composable, fácilmente aplicaciones web escalables.
>> Usted tiene una fuente de datos, la fuente de la verdad.
Eso le dice a sus componentes cómo diseñar la página,
y los componentes de la voluntad manejar la interacción.
Y si quieren cambiar cosas, sólo tiene que ir de vuelta
y di a la fuente de datos para cambiar.
¿Tener sentido?
Así Reaccionar es todo acerca de la comprensión cómo construir un componente
y cómo hacer que su componente interactuar con el mundo exterior.
>> Hacer interactúan componente con el mundo exterior
utiliza otra tecnología llamado Flux, que
es un marco que es añadido en la parte superior de React.
No vamos a hablar de eso.
Vamos a hablar más sobre, dada datos, ¿cómo se puede hacer que un componente?
>> Y así Reaccionar es realmente genial porque puede utilizarlo con cualquier parte final que desea.
Si usted tiene como un back-end de Python, si su Python puede escupir algunos datos,
Reaccionar puede hacerla.
Si usted es no hay salidas de JS de los datos, Reaccionar renders ella.
Rubí carriles con datos, Reaccionar la hace.
>> Así Reaccionar es básicamente una web juicio- una interfaz con componentes
para cualquier fuente de datos en absoluto.
Y así va desde la fuente de datos para reaccionar componentes es bastante fácil.
Yendo la otra forma es un poco más difícil.
Que utiliza Flux como he mencionado antes.
No vamos a entrar en eso.
Nos centraremos más en la datos-a-componente lateral.
De esta manera usted puede hacer , aplicaciones web divertidas frescas.
No afectará al mundo exterior por ahora, pero eso es otra historia.
>> OK, así que si usted estuviera aquí para mi último seminario
usted sabrá que todo el código de la charla de hoy va a ser en esta dirección URL
aquí, lo siento, este URL aquí.
Y básicamente vamos a ir a través de cuatro pasos, tal vez cinco,
probablemente no cinco.
Nos movemos a través de cuatro pasos de la construcción de una muestra Reaccionar aplicación.
Y así todo el código fuente para cada paso del camino
va a estar aquí, así que si estás siguiendo en casa,
no dude en leer detenidamente este código.
Si usted está siguiendo a lo largo de aquí, vamos a estar mostrando en la pantalla,
así que no te preocupes por eso.
Pero si estás en casa, se siente no dude en visitar este sitio web.
Y, sí, usted debería ser capaz de obtener todo el código que jamás necesitaría aquí.
Así que es una buena hoja de trucos, así para sus futuras aventuras con React.
Fresco, por lo que si todos los que están aquí, e incluso si estás en casa,
tire hacia arriba de esta página web, is.gd/cs50react, sin capital, sin guión, sin nada.
>> Verás una página que se ve un poco como esto.
Esto es una cosa que se llama CodePen.
CodePen es una colaboración entorno de codificación
con el que puedo escribir código aquí, y que va a ser enviado automáticamente a usted.
Y de esta manera, puedo escribir código.
Puedo correr código aquí.
>> Para ejemplo-- y si reloads-- ver, Estoy corriendo el código JavaScript en la página
aquí, y va a hacer automáticamente una página web
con este código JavaScript.
Y por lo que esta es una forma para nosotros para probar código
muy rápido sin tener que utilizar nuestra identidad o usar nuestra máquina local
o lo que sea.
Es una manera muy rápida para que usted pueda maqueta y probar diferentes tipos de código.
>> Así que voy a estar tomando ejemplo de código, poniendo aquí.
Vamos a trabajar a través de él.
Y si estás en casa, puede tirar de esto también.
Y yo ya he instalado Reaccionar aquí, así que usted puede apenas
escribir su propio código aquí, y probarlo como su propia zona de juegos.
>> Sí, si todo el mundo a abrir este enlace aquí.
Por favor, dame un pulgar una vez que lo tienes abierto.
Fresco, cool cool.
No hay nada aquí por ahora, pero vamos a cambiar eso muy pronto.
>> OK, así Reaccionar es un JavaScript biblioteca, y como tal,
requiere el conocimiento de JavaScript, que es el lenguaje de programación web.
Y está siendo utilizado para otras cosas ahora también, pero principalmente el desarrollo de la web
idioma, por lo que si no está familiarizado con que, leyó un sitio llamado JSforCats.com.
Es maravilloso.
Usted puede aprender JavaScript en media hora.
Es increíble.
>> Así que darle una lectura.
También es una gran cantidad de HTML aquí porque estamos diseñando páginas web, por supuesto.
Así que si usted no está familiarizado con HTML, visita HTMLdog.com.
Creo que aprendiendo Reaccionar es un millón de veces más fácil si ya
conocer los elementos básicos.
Si usted tiene los componentes, es Fácil de hacer un componente más grande.
Eso es Reaccionar idioma para usted.
>> Así que adelante y darle estas cosas una lectura.
Pausa el vídeo.
Darle una lectura si usted es en su casa si usted no está
familiarizado con HTML o JavaScript
OK, así que lo que vamos a hacer es que vamos a hacer
una aplicación muy básica flashcard usando Reaccionar.
Vamos a tener una tarjeta de memoria flash.
Usted puede voltear la tarjeta de un lado a otro.
Y también tendremos una lista de todas las cartas que tenemos,
y si nos sentimos ambicioso, que podría ser
capaz de cambiar entre automóviles haciendo clic sobre ellos.
>> Pero esto es, de su desnudo huesos, una muy simple Reaccionar aplicación.
Y por lo que este es en realidad no trivial de implementar,
pero vamos a demostrar que, si lo hace esto, es muy, muy fácil ampliarlo
si otras personas le ayuden con ella.
Así que vamos a ir a través de cuatro pasos empezar desde cero a construir esto.
>> Ok, así que los cuatro pasos, vamos a comenzar con el primer paso.
El primer paso va a ser la construcción de su primer componente.
Como he dicho antes, un componente en Reaccionar es sólo un elemento HTML en los esteroides.
Especifica el código HTML y un cierto comportamiento, y
especificará cómo la gente puede interactuar con él cómo
tendría estado interno.
Al igual que un botón se conocer como cuántos veces que se ha hecho clic, por ejemplo,
y sabrá cómo poner a sí misma.
>> Así que vamos a seguir adelante y construir nuestra primer componente utilizando JavaScript.
Así que si la sintaxis se ve raro, eso es porque es como que es.
Así que, de nuevo, vamos para hacer una variable llamada
aplicación usando la palabra clave dejó, lo cual hace que una variable,
dejar App igual React.createClass.
>> Reaccionar es una biblioteca y tiene la función Crear clase.
Y esta función es un poco de código que
puede utilizar para crear una nueva Reaccionar tipo de componente.
Y así React.createClass hace que un componente,
y este componente ser capaz de hacer cosas.
Lo más importante que puede hacer es render algo, render como una función.
>> De nuevo, si este índice no es evidente para usted, le recomiendo que vaya en JS para gatos
y comprobar que funciona.
¿Es que has en lo suficientemente bien?
Guay.
>> Así que todas las necesidades de componentes tener una función render.
La función render dice, lo puedo imprimir en la pantalla?
Pero el componente es inútil si no lo hace
saber lo que desea imprimir en la pantalla, por lo que es necesario tener una función render.
>> Así que en lo render, que sólo tiene que devolver algo de HTML.
Y lo que es interesante es que hay una cosa que se llama
JSX, que es una extensión de JavaScript que es utilizado por reaccionar.
Es de dejar de escribir HTML dentro de su JavaScript, lo que
suena un poco raro cuando usted piensa primero sobre él,
pero hace un montón de sentido después.
Por lo que podemos hacer esto.
Si está familiarizado con HTML, ya lo sé tenemos un div con un propósito general
contenedor para la materia.
Podemos devolver un div, y en el interior este div, podemos poner cosas.
>> Así que digamos que queremos rendir justo una tarjeta de memoria flash recto-para arriba por ahora.
La tarjeta de memoria flash, yo diría, tendrá una pregunta y respuesta.
Así que dentro de este div, vamos a imprimir un párrafo
que dice pregunta-- ¿Cuál es el respuesta definitiva a la vida, el universo?
Y entonces la respuesta es va a ser, por supuesto, de 42 años.
>> Eso no vienen bien en absoluto.
Sí, así que básicamente se puede realmente escribir HTML dentro de tu JavaScript.
Y esto va a ser impreso en la pantalla.
Así que vamos a probarlo.
>> Así que tenemos nuestro componente.
Tenemos que decirle Reaccionar a poner el componente en la pantalla
así React.render, para darse cuenta de que nos tratar la aplicación como cualquier otro elemento.
Escribimos, ya que era un elemento HTML.
Al igual que en lugar de decir como img para una imagen o p para el párrafo,
usted escribe App, así App tratado como un elemento HTML.
Como he dicho antes, es un elemento en los esteroides.
>> Así rindes App, y usted darle un lugar para ponerlo.
Y esto es como se puede decirle dónde ponerlo.
He creado un div simple en la página llamada con un ID de la página,
y ahí es donde la elemento va a ir.
>> Y no vamos a correr con HTML.
Básicamente esto se va a poner poner dentro de este elemento de página
que tenemos en la pantalla.
Así que se ejecuta este código, y señala este cosa en la pantalla, así que aquí estamos.
Hemos hecho nuestro primer componente Reaccionar.
>> Así que al igual que un resumen, hicimos suavemente un nuevo tipo de componente, ¿verdad?
Eso es lo que el React.createClass.
Y en ese componente, nos dijo que lo que debe hacer.
Siempre que este componente es ser impresa sobre la pantalla,
se imprimirá el div con los dos apartados dentro de ella.
>> Y lo que hicimos, hicimos una nueva aplicación usando la notación aplicación paréntesis angular.
Nos dijeron que para decirlo dentro del elemento de la página.
Y así lo hice, creó una nueva aplicación de esa plantilla.
Y entonces me dije que para hacerlo.
Por lo tanto, dijo, OK, app, ¿qué debo imprimir?
App dice, vaya imprimir un div con dos párrafos en el interior de la misma.
Y voilá, ahí está nuestro div con dos párrafos dentro de ella.
Tiene sentido hasta ahora?
>> Así, de nuevo, todo el reto de Reaccionar es el hecho de saber cómo hacer componentes.
Cómo hacer que el componentes trabajan juntos.
Ahora que hemos hecho nuestra primera componente, volvamos
y hacer que los componentes personalizable.
Así que ya sabes cómo en HTML puede dar sus clases botones?
Usted puede dar a sus anclajes del href.
Usted puede dar a sus entradas de un tipo, ¿no?
Puede dar más personalizada propiedades a todos sus elementos
para que sea más interesante.
Y en realidad podemos hacer exactamente lo mismo.
>> Así que digamos que queremos que nuestro aplicación para ir render cualquier tarjeta.
Ahora que acabamos de rendido una tarjeta codificada.
Sabemos que sólo hay una tarjeta que puede hacer, así que estamos
va a tratar de cambiar esta ahora tan que solo podemos darle un poco de tarjeta.
Se va a imprimir la tarjeta.
>> Usted debe tratar de hacer que su componentes un propósito muy general.
Así de esta manera me podría enviar por correo electrónico este mi amigo y ser como,
lo flashcard que tiene, simplemente alimentar en aquí,
y va a hacerlo por sí mismo.
Usted puede poner otro cosas en su propia aplicación.
>> Pero primero, vamos a romper este en dos componentes,
pero queremos separar la tarjeta parte la impresión de la parte real de la aplicación.
Así que lo que podemos hacer es que puede cambiar esto desde App
a CardView, sólo un nuevo nombre para la aplicación,
y podemos hacer una nueva componente llamado App,
que no debe confundirse con el viejo App.
Tenemos los createClass, y al igual que en HTML,
puedes nido Reaccionar componentes una dentro de otra.
>> Así que en esta función render, función CardView retorno,
y esto es exactamente lo mismo.
Ver por eso que es la misma cosa?
En lugar de hacer sólo la aplicación que tiene el div y el emparejamiento en el interior de la misma,
la aplicación hace que el CardView, y el CardView hace que el div y el párrafo.
Así que este es nuestro primer ejemplo de elementos de anidación dentro de la otra.
Tiene sentido?
Así que, de nuevo, tenemos un elemento CardView.
Tenemos elementos app que es más grande que.
>> OK, así que queremos que nuestro CardView-- si dar una buena CardView cierta tarjeta,
que va a imprimir para usted, ¿no?
Así que primero, tenemos que hacer una tarjeta, así que vamos a hacer un objeto tarjeta.
Así que mi tarjeta equal-- si eres todos conocemos,
esto es sólo la notación de decisiones objeto en JavaScript.
Es algo así como una estructura en C, así que hicimos una tarjeta,
y por lo que ahora podemos pasar esta tarjeta como una propiedad o como un atributo en HTML
terminología para nuestra aplicación.
Por lo que podemos hacer esto, App tarjeta es igual MyCard.
>> Ya sabes cómo en la entrada, lo hace tipo de entrada es igual a texto o botón
clase es igual btn de arranque ,?
La misma idea, equals-- tarjeta App tienes que poner llaves aquí--
Tarjeta de App equivale MyCard, por lo que este dice que tenemos este objeto tarjeta.
Voy a pasarlo como propiedad para el componente de aplicación.
Y este componente App ser capaz de acceder a ella y hacer
cosas interesantes con él.
>> Así que nuestra aplicación va a ser recibe la tarjeta, así que por ahora,
vamos a tener la aplicación acaba de dar la tarjeta a la CardView
sí porque al igual que la aplicación no es va a saber qué hacer con ella,
así que sólo vamos a dar a la CardView.
Así que vamos a pasar que el misma manera, la tarjeta es igual,
y por lo que cada componente puede acceder a la las cosas que se ha dado a la misma.
Pueden acceder a las propiedades que se les ha dado a él
usando esta sintaxis, this.props.card.
>> Así que lo que pasa aquí es usted tiene el objeto MyCard.
Se pasa en la aplicación usando tarjeta de App equivale MyCard.
Ese objeto tarjeta se le da a su aplicación.
La aplicación se puede acceder a él como this.props.card.
Es algo así como una imagen sabe lo que es fuente es.
>> Esta aplicación sabe lo que es la tarjeta es, y puede hacer cosas con él.
Se puede hacer cálculos.
Se puede tomar decisiones basadas fuera de ella.
>> Por ahora, me iba a pasar this.props.card sobre la CardView.
Tiene sentido hasta ahora?
Se va a hacer más sentido ahora.
>> OK, así que ahora estamos en CardView.
Nuestra CardView, dada la tarjeta, debe imprimir su pregunta y respuesta.
Ahora mismo acabamos imprimimos algunos preguntas y respuestas codificadas.
Tenemos que averiguar fuera-- necesitamos para pedir la tarjeta que nos dieron
¿cuál es la pregunta y la respuesta, y a continuación, imprimir esto en la pantalla.
>> Por lo que podemos hacer esto aquí.
En render begin-- primero hacer igual.
Así que lo que estamos haciendo aquí es que sabemos que las cartas nos dan a una propiedad,
¿correcto?
Ha dado a nosotros como una entrada.
Como es casi como argumentos a una función.
La tarjeta es un argumento casi a este CardView.
>> Vamos a extraer de eso, y ponemos en la cuestión variable.
Asegúrese de que la respuesta fue a la respuesta variable.
Indica que la tarjeta para responder.
Y ahora que tenemos estos, en lugar de imprimir el texto,
vamos a imprimir lo que nos dieron.
>> Así que este stuff-- así que vamos para apagar Pregunta Respuesta.
Vamos a ver si esto funciona.
Fresco, así que vamos a dar un paso a través de él una vez más, sólo para estar seguro.
>> Así que mi tarjeta es objeto de la tarjeta, y nosotros están dando esa carta a la aplicación.
Y la aplicación va a tomar la tarjeta y le dan a la CardView.
Y esto CardView dice, si usted dame cualquier objeto flashcard,
Voy a imprimir a cabo su pregunta y su respuesta, ¿verdad?
>> Así que lo que podría hacer es que puedo enviar este código, el primero
como 10 líneas de mi código, a mi amigo.
Podía incrustarlo en su propia aplicación.
Y mientras él hacía lo mismo, como la tarjeta CardView equivale esto,
siempre y cuando se creó la CardView y le dio la información correcta,
él podría hacer su propia tarjeta.
Y así, de esta manera, es una realidad manera fresca para que usted construya
componentes que utilizan entre sí, ¿no?
Esta tarjeta, que podría publicar este CardView en el Internet,
y la gente sería capaz de usarlo.
Así que, básicamente, es como uno de los funciones estándar de la biblioteca C.
>> Es una función donde alguien ha escrito.
Usted da una cierta entrada.
Se va a producir un determinado producto.
No le importa cómo funciona internamente.
Siempre y cuando usted le da el derecho de entrada, que va a hacer la salida correcta.
>> Y un componente puede ser pensado de la misma manera.
Este CardView es como una función de biblioteca.
Si usted le da un poco de la tarjeta como una propiedad, que va a
imprimir el contenido de esa carta.
Al igual que si cambio mi tarjeta para en cambio ser como lo que es 5 más de 37 años,
se actualizará en consecuencia.
Así que con sólo cambiar la entrada, se pone una cierta salida.
Así que usted puede pensar en componentes casi como funciones de esta manera, que
se puede armar.
Tienes la oportunidad de entrada, como este CardView como entrada, se obtiene la salida.
En este caso, la salida es el HTML.
Tiene sentido hasta ahora?
Fresco, así que de nuevo, las propiedades son cómo se puede pasar información
dentro y fuera de los componentes.
>> OK, así que vamos a hacer esto Lo interactiva.
Ahora mismo es un poco aburrido.
¿Qué es [inaudible]?
Puede imprimir algunos fuera, pero eso es todo lo que puede hacer.
>> Así que vamos a volver a la vieja pregunta sólo por ahora.
OK, así que ahora mismo estos componentes son aburridos, porque todo lo que hacen,
que reciben de entrada.
Hacen de salida, ¿no?
Eso es un poco aburrido.
Queremos tener nuestra componentes para ser capaz de tener
una especie de estado interno, como recordar algo.
>> Para una tarjeta de memoria flash, por ejemplo, ¿qué tipo de estado
puede ser que usted desee recordará durante flashcard?
¿Qué estatus temporal puede ser que usted quiere recordar
para una tarjeta de memoria flash en una aplicación de tarjeta de memoria flash?
AUDIENCIA: Ya sea que ha sido volteado?
NEEL MEHTA: Sí, claro.
Así que es posible que desee mantener seguimiento de son que se enfrenta o está
te enfrentas a abajo en la tarjeta.
En Facebook, por ejemplo, que lo haría quiero recordar en que parte del canal de noticias
son usted o como quién es el perfil está haciendo ahora mismo.
>> El Mensajero, al igual que lo que el texto que escriba en el cuadro de entrada, ¿no?
Si actualiza la página, se va.
Pero en realidad no importa.
Es sólo temporal.
¿Sí?
>> AUDIENCIA: [inaudible]
NEEL MEHTA: Como un flash tarjeta, como se puede estar viendo
el lado de la pregunta o el lado respuesta?
>> AUDIENCIA: OK.
>> NEEL MEHTA: Como una flashcard de dos caras, ¿no?
Sí, por lo que desea tener esta idea de ahora
Tengo propiedades, que es como los insumos, sino del Estado, que es temporal, uh,
donde estés en la página, a la derecha?
Una vez más, he dicho en Facebook Messenger, tengo como qué persona
que estás viendo Facebook o que es el perfil, ¿verdad?
>> Esto es sólo temporal.
Es importante mostrar al usuario lo que está pasando, pero actualice la página.
En realidad no importa.
Así que es un estado temporal, así que todo Estado que.
>> Así que, de nuevo, no hay Estado y accesorios.
Atrezzo se da entrada desde el origen de datos.
Estado es como valores predeterminados.
Es como materia que hace que la cosa interactiva.
>> Así que en nuestro CardView-- echemos nuestra CardView-- así que era agradable.
Lo que vamos a hacer aquí, vamos tocar CardView y sólo CardView.
Y por lo que mi amigo que tiene esto, no notará ninguna diferencia.
Ellos no tendrían que cambiar cualquiera de su propio código,
pero que verían su CardView consiguió souped.
Eso es una parte agradable sobre componentes.
>> Aceptar, por lo que en nuestra CardView, vamos a tratar de llevar un registro de si estamos fase que atravesamos hasta
o boca abajo.
En Reaccionar hacemos esto por primera que especifica el estado inicial.
¿Dónde comienza la tarjeta?
>> Así que tenga una función llamada getInitialState funcionamos, y volvemos un objeto.
Este objeto contiene algún estado, y un Estado es sólo un par clave-valor.
Al igual que en instruir, usted tiene una clave y un valor, que tiene como nombre es una cadena.
>> En este caso, vamos a decir frente es cierto.
Este dice que tenemos un estado.
Uno de los componentes del estado es un atributo llamado frente.
[Inaudible], por lo que de forma predeterminada, estamos en el frente de la tarjeta,
y podemos cambiar esta como lanzamos la tarjeta.
¿Tener sentido?
>> OK, así que en prestamos, ahora mismo, estamos que muestra la pregunta y la respuesta.
Ahora lo que debemos hacer se mostrará la pregunta
si estamos en la parte frontal de la tarjeta de modo la respuesta es para la parte posterior de la tarjeta.
Es por eso que todos cometemos la tarjeta interactiva.
Así que vamos a tratar de que esto aquí.
Bueno, primero acaba de hacer una variable.
Podemos preguntarnos ahora this.state.front.
Accedemos a declarar el mismo que apoyos de acceso, por lo this.state.front.
>> Si estamos delante, entonces el texto es this.props.card.question.
Si estamos en el frente de la tarjeta, vamos a tratar de agarrar
la cuestión de la tarjeta.
De lo contrario, si estamos en la parte posterior de la tarjeta, ¿qué hacemos?
>> AUDIENCIA: ¿La respuesta?
>> NEEL MEHTA: Sí, por lo que el texto iguales this.props.card.answer.
Pero si te das cuenta, que estamos utilizando el estado para tomar una decisión
porque ahora el componente se verá diferente
con sede fuera cómo éstos interactúan con él.
Así que en lugar de imprimir esto, sólo tendremos que imprimir el texto.
Fresco, por lo que ahora, como usted ve, vemos sólo la cuestión.
Y si cambio el estado aquí manualmente al frente es falsa obtenemos 42 espalda.
>> Así, de nuevo, este componente tiene su propio estado.
Como un botón sabe si que ha sido presionado o no,
esta cosa sabe lo que está en el frente o en la espalda.
De forma predeterminada, es en el frente.
Y luego, si es en el frente, vamos a imprimir la pregunta.
Si está en la parte de atrás, vamos a imprimir la respuesta.
Así, de nuevo, la información dado es la misma.
Sólo se ve diferente en función de cómo se programa.
Así, por ejemplo, Facebook Messenger, incluso si se obtiene la misma fuente de datos,
puede parecer diferente porque el Estado es diferente.
Se encuentra en un El mensaje de diferente persona.
>> OK, así que esto es todo bien y bueno, pero ahora lo que en realidad es
hacernos capaces de cambiar, ya sea nuestra tarjeta es delantera o trasera.
Podemos hacer esto mediante la adición de un flip botón, un botón a la tarjeta que
le dará la vuelta la tarjeta si es [inaudible].
Así que vamos a añadir un botón de aquí, esto botón y este botón dirá flip.
>> Y así, en este momento, no hace nada.
Sólo se ve bien.
Lo que podemos hacer es que podemos añadir un clic manejador onClick es igual this.flip,
y vamos a definir flip después.
Pero, básicamente, onClick es una función que
se llama cuando el usuario hace clic en él.
>> Así el botón sabrá cuando se ha hecho clic.
Went que ha sido pulsado, que le dará la vuelta la tarjeta.
Es un poco como tu repartidor de pizza.
Eres como, bien, cada vez que alguien me llama, voy a entregar la pizza, ¿verdad?
>> Usted se registra este oyente.
Usted escucha para un evento.
Te llaman, y cuando el evento ocurre, se hace algo.
Tienes la oportunidad de pizza.
En este caso, cuando estás se hace clic, se tapa la tarjeta.
>> Y así tenemos que definir un función que le dará la vuelta la tarjeta,
así que vamos a escribir ese derecho aquí, la función flip.
Y así, ¿qué te parece flip hará?
De nuevo, esto se llama cuando hacemos clic en el botón de solapa.
¿Qué debe hacer el flip función?
>> AUDIENCIA: Cambio this.state.front de true a false, false a true.
>> NEEL MEHTA: Sí, a fin de tomar lo que sea this.front es-- el estado frente es.
Tome el estado delante, si es verdad, que sea falsa.
Si es falsa, que sea verdad, ¿no?
Así que vamos a intentar eso.
>> No se puede cambiar el estado sólo por hacer this.state.
No se puede hacer esto.
Usted no puede hacer eso.
Usted tiene que usar una función llamada this.setState.
>> Así que se puede decir this.setState frontal de colon este donde, de nuevo, la exclamación
punto significa lo contrario.
Supongo que si esto. state.front Es cierto, va a resultar falsa.
Así que vamos a establecer el estado de verdadero a falso.
Si es falsa, vamos a configurarlo falso a verdadero.
>> Sólo notamos que nos propusimos y conseguimos un poco de otra manera, y así vamos a tratar esto.
Bada Bing, mira esto.
El botón FLIP ahora conmutar el frente hacia atrás estado.
>> Y así que aquí es donde se ve una poco de la magia de React.
Como nunca nos dijeron que para volver a hacer.
Nunca nos dijeron que volver a dibujar nada.
Si usted está haciendo esto sin reaccionar, te
han a-- como cuando el se hace clic en el botón del tirón,
usted tendría que decirle que manualmente volver a hacer, ¿verdad?
>> Reaccionar es realmente genial en el que si se darle un cierto estado y las propiedades,
siempre va a hacer exactamente lo mismo.
Y así, cuando alguna vez cambiamos el estado y las propiedades,
reaccionar sólo re-renders todo el asunto.
Se sabe que hay una uno a uno la correspondencia
entre el Estado y el parámetro y HTML.
Así que cada vez que cualquiera de los cambios por medio de un estado conjunto,
que va a cambiar la forma en la pago es re-prestados.
Y así es como básicamente Reaccionar esperando para que usted cambie.
>> Siempre que cambia algo, que va a volver a hacer toda la página.
Y si suena ineficiente, es porque sería,
pero reaccionar utiliza una cosa llamado DOM Sombra.
En vez de dibujar la página directamente, mantiene el árbol de HTML virtual en la memoria.
>> Ya sabes, el HTML es como un árbol, como una estructura de datos jerárquica.
Mantiene un árbol falso en la memoria, y cada vez que se actualiza la página,
que va a dibujar otra falsa árbol, y que va a calcular
¿Qué cambio se debe hacer el Página para hacer los dos árboles iguales.
Así que, básicamente, es prácticamente re-renders mucho.
Y entonces sólo gustaría cambia el página en pequeños ajustes según sea necesario,
por lo que es muy, muy, muy eficiente.
>> Así que, básicamente, lo hará Reaccionar cada vez que cambie algo,
que va a volver a hacer la página de forma virtual.
Va a averiguar qué es lo que necesito cambiar para hacer la página real de reflejar
la página virtual, y que va a hacer eso.
Ese es el DOM virtual.
Es uno de los más grandes características de reaccionar.
>> Tiene sentido?
¿Alguna pregunta?
¿Sí?
>> AUDIENCIA: ¿Cómo funciona comparar aún a la MVC
que hablamos antes de recursos similares.
>> NEEL MEHTA: Sí, la pregunta es cómo se compara a MVC?
Usted preguntó acerca de los recursos.
Bueno, vamos a hablar de cómo funciona.
>> En MVC, usted actualiza el modelo.
En este caso tendríamos un modelo de tarjeta.
La vista tendría el botón de la moneda, y el control
tendría la función flip.
Así que la vista sería decir la controlador para voltear flip.
Voltear diría a la modelo de cambiar, ¿no?
>> Y así, cuando usted hace una MVC, que escuchar para que el modelo cambia,
y volver a hacer la vista en consecuencia.
O simplemente tiene que gustar tener el controlador.
Espere a que el modelo cambie, y luego escoger y elegir una parte de una cosa
cambiar.
Aquí tenemos una cosa, pero en una gran aplicación,
te tiene que gustar recordar lo el cambio en cada lugar,
así que es un poco molesto.
Y así Reaccionar es agradable porque tiene un Dom Sombra.
Puede darse el lujo de simplemente reescribir la cosa entera.
Usted no tiene que selectivamente como supongo que lo actualice.
>> En Facebook, si te gusta conseguir un nuevo mensaje, en MVC,
habría que recordar, OK, cambiar las cosas
en la parte superior de la página, el icono de mensaje.
También aparecerá una nueva ventana en la parte inferior.
También hacer una cosa nueva en esa ventana.
También se reproduzca un sonido.
>> Eso es un montón de cosas salir al mismo tiempo.
Y por lo que si usted no lo hace tener un Dom Sombra, que había
tiene que hacerlo manualmente porque usted no puede deshacerse de toda la página.
Usted no puede permitirse, por lo que tiene cambiar cada cosa manualmente,
que es realmente molesto en MVC.
>> Así que para ser ahorrativo, que selectivamente
actualizar la página, que es eficiente, pero también molesto.
En Reaccionar, a causa de la Sombra Dom, se obtiene ambas cosas de forma gratuita.
Es eficiente porque de la Sombra Dom.
El cuello de botella es la actualización de la página.
No está haciendo la manipulación árbol.
Usted consigue la eficiencia.
También tendrá la facilidad de uso, ya si usted acaba de volver a escribir toda la página,
pero que acaba de saber, está bien, las cosas van a estar en la página en alguna parte.
Puede ser que sea en un lugar diferente, pero que va a estar en la página, a la derecha?
Así que sólo re-renderizados toda la cosa prácticamente,
y usted podría hacer un par cambios en la propia página.
>> Así, de nuevo, en que MVC tendría que elegir
entre la facilidad de uso y la eficiencia, y reaccionar, se obtiene tanto.
Así que es mejor.
¿Tener sentido?
Sólido.
>> OK, así que vamos a ver que vamos a hablar un poco sobre el paso 4,
cómo podemos integrar componentes.
Así que tenemos esto ahora mismo.
Tenemos nuestro pequeño botón fresco.
Podemos darle la espalda y adelante, y eso es todo lo que hace.
Digamos que queremos tener otro componente.
Digamos que nuestra aplicación flashcard debe contiene una lista de todas las tarjetas
que tiene, así que eso significa que debe tener un componente más.
Bueno, tal vez lo llaman una vista de lista.
Vamos a hacer una vista de lista que coexiste con la CardView,
y este punto de vista de lista y CardView le gustaría trabajar juntos.
Y usted puede combinarlos para que nuestra aplicación para usted.
>> Así que primero, vamos a hacer una par más cartas.
Digamos, lo que las tarjetas?
Y sólo para que yo no tengo que aburrir con escribiéndola en,
Yo sólo voy a copiar desde aquí.
Y así voy a no darle una sola tarjeta.
Voy a darle una serie de cartas.
Así que primero las aplicaciones va a romper por ahora.
Muy bien, así que vamos a hacer esta capaz de manejar múltiples tarjetas.
Así que primero, vamos a darle, no sólo una tarjeta, pero una serie de tarjetas,
como una lista de las tarjetas.
Y en este caso, tenemos tres de ellos.
>> De acuerdo, así que la aplicación es va a obtener una lista de tarjetas,
y que va a decidir qué una para mostrar a la CardView.
El CardView sólo puede hacer una tarjeta, pero la aplicación
para crear una lista de todas las cartas, ¿no?
>> Así que cuando usted averiguar un solo Tarjeta para dar a CardView,
¿cómo adivinar es posible que pueda para tomar una decisión sobre qué tarjeta
¿mostrar?
Para darle un toque, es temporalmente Estarás viendo una cierta tarjeta.
Si actualiza la página, podrás sólo tiene que ir de nuevo a la primera tarjeta.
Eso está bien, porque es temporal.
¿Qué técnica podríamos usar?
>> AUDIENCIA: Usted podría hacer una variable así como que tenía delante.
¿Es esto cierto, podría tiene tarjeta actual es igual a 1?
>> NEEL MEHTA: Sí, por lo que quiero tener el estado, ¿no?
Se podría utilizar el estado en el componente de averiguar
qué tarjeta hacen que queremos conseguir.
Al igual que tenemos una lista de todas las cartas, vamos a
utilizar el estado de averiguar una de la primera tarjeta,
segunda tarjeta, tercera tarjeta, y así sucesivamente.
>> Así que una aplicación para una aplicación tendrá un tienen la función getInitialState,
regreso función getInitialState.
Y sólo tendremos que decir activeIndex 0.
Así que ahora nuestra aplicación tiene su propio estado.
>> Y por lo que ahora el render, de averiguar una tarjeta, vamos a ir a la matriz
y apoderarse de la cosa en ese índice.
Seleccione la tarjeta de this.props.cards iguales this.state.activeIndex.
Así como se ve aquí, los apoyos y el estado de hecho de trabajar juntos.
Así que ahora que tenemos nuestro ActiveCard, lo llamaremos ActiveCard,
y vamos a ver si esto funciona.
[INAUDIBLE]
>> Oh, eso fue un error de texto.
Ah.
>> Fresco, sí, por lo que ahora estábamos de regreso a donde estábamos antes, ¿no?
Programa La misma vieja excepción ahora podemos apoyar
una lista de tarjetas, no sólo una tarjeta.
Y ahora, de nuevo, si cambiamos el activeIndex, que puede ir de 0 a 1,
y ahora que la segunda tarjeta, y luego nos fuimos a 0.
Así que aquí está una nueva trucado versión de nuestro.
>> OK, así que ahora vamos a tener una vista de lista que muestra todas las cartas en su programa,
así que vamos a hacer una nueva componente llamado ListView.
Deje ListView es igual react.createClass.
Así que queremos rendir desordenada lista con un elemento de la lista para cada tarjeta.
Y así que tenemos un montón de cartas.
Queremos un solo elemento de la lista para cada tarjeta, ¿verdad?
Podríamos hacer un bucle for o algo para hacer un nuevo elemento de la lista.
Pero la forma en que lo hace en Reaccionar, utilizar una cosa que se llama mapa.
Mapa es una herramienta o una función que utilice que por cada elemento, se ejecuta alguna función,
tiene valor de retorno, y le da que volver.
>> Así por ejemplo, tenemos la matriz 1, 2, function-- 3.map y esto
es la abreviatura de un function-- x flecha x veces x.
Esto, dice, para cada número en 1, 2, 3, tomarlo.
Square, y dar de nuevo.
Entonces, ¿qué cree usted que 1, 2, 3.map x va a x veces
x da vuelta dada que esta función es
ejecutar en cada elemento de la matriz.
>> AUDIENCIA: 1, 4 9?
>> NEEL MEHTA: Sí, 1, 4, 9 porque haces 1 Tiempos 1.
Eso te da una.
Ese es el primer elemento.
>> 2 veces 2 es 4.
Eso es un segundo elemento.
3 veces 3 es 9.
Eso es un tercer elemento.
¿Tener sentido?
Así mapa tiene una técnica que utilizar en los programadores funcionales,
el nuevo estilo de programación que hacer algo
a cada elemento de la lista.
Y así esto suena familiar.
Tenemos una lista de tarjetas.
Queremos conseguir un elemento de la lista para cada uno, así que sólo vamos a usar un mapa aquí.
Vamos a decir, dejar que la lista de los iguales this.props, tarjetas, mapa.
>> Y así recibe la tarjeta, estamos va a generar un elemento de la lista
con contenidos lado de esa carta de la misma.
Digamos que queremos dar a conocer las cartas cuestionan lo card.question.
Así que esta lista contiene un gama de LI de o elementos de lista
donde hay una sola lista elemento para cada tarjeta,
y que contiene la pregunta tarjetas.
¿Tener sentido?
>> Fresco, así que ahora vamos a de hecho imprimir eso.
Así que vamos a devolver un ul.
Dentro de esa lista desordenada, sólo tendremos que mantenemos toda la lista
que nos dieron.
Guay.
>> Muy bien, así que ahora esta vista de lista de trabajos acaba de encontrar.
Una pregunta sobre la vista de lista?
Usted tiene un montón de cartas.
Usted hace un elemento de la lista para cada tarjeta.
Y se los pone dentro de una desordenada lista, y le dará de nuevo.
Así que ahora vamos a actuar así que integramos esto dentro de nuestra aplicación,
por lo que podemos hacer esto, la vista de lista.
Lo que argumento es lo que pasa a vista de lista?
¿Qué propiedades Por qué le damos?
Recuerde, si usted da es un montón de tarjetas,
que va a hacer la lista ver de esas tarjetas.
Entonces, ¿qué íbamos a pasar aquí como argumento?
AUDIENCIA: Una lista de las tarjetas?
NEEL MEHTA: Sí, así que las tarjetas iguales this.props.cards, ¿verdad?
Y por lo que el único problema es que sólo se puede
resultó un elemento de nivel superior en el render, así que hay que envolverlo en un div.
Es raro.
Así que vamos a ver si eso.
¿Eso funciona?
>> Sí, ahí lo tienes.
Así que ahora tenemos una lista de tarjetas en la parte inferior,
y luego tenemos nuestro CardView sí en la parte superior,
y que va a dar la vuelta entre las dos caras de la tarjeta.
Ahora sí que tiene sentido cómo lo hice?
Sí, así que una vez más, tenemos dos componentes.
Las primeras impresiones de componentes fuera cada tarjeta en la lista.
Esa es la vista de lista.
Y el segundo componente imprime simplemente esa tarjeta.
Si le das una determinada tarjeta, que va a imprimir información sobre la tarjeta
y dejar que le da la vuelta hacia atrás y adelante.
>> Así que si queremos, podemos tratar y hablar sobre la adición de algunas nuevas características a este.
De lo contrario, podemos hablar un poco más acerca de la velocidad del reactor,
o podemos contestar preguntas que pueda tener
porque éstas son todas las piezas de la base de reaccionar que quiero hablar.
Podemos ir por delante.
Podemos contestar preguntas.
Lo que quieras.
>> AUDIENCIA: ¿Se puede utilizar JSX en JavaScript normal?
¿O es que algo que vino con el [inaudible]?
>> NEEL MEHTA: La pregunta es lata utiliza JSX con JavaScript normal?
La respuesta es sí.
JSX es sólo una forma de que se necesita su JavaScript que tiene HTML dentro de la misma,
y se compila en JavaScript que no tiene HTML dentro de la misma.
Así notar que-- lo cuenta aquí.
Esto parece que tiene como div y que tiene cosas en el interior de la misma.
>> Que compila a JavaScript que al igual que genera la misma cosa.
Supongo que lo que estoy diciendo es que JSX es sólo una sintáctica, como si fuera
un preprocesador JavaScript mucho como PHP es un preprocesador de HTML.
JSC es un preprocesador JavaScript que permite
pones HTML dentro de tu JavaScript.
Y por lo que si usted tiene el derecho de transformador que es una cosa que se llama [inaudible],
que transformará.
El preprocesador derecha, que va a dejar que hagas eso.
>> AUDIENCIA: [inaudible]
NEEL MEHTA: Por lo general no es necesario poner HTML dentro de JavaScript
a menos que estás haciendo reaccionar.
Pero usted puede hacerlo de todos modos.
¿Sí?
>> AUDIENCIA: Creo que había descrito Reaccionar
como un lenguaje de programación funcional.
Hemos estado aprendiendo C en CS50.
Es el C también un lenguaje funcional?
NEEL MEHTA: Así que la pregunta es de aproximadamente funcional
frente a otra cosa llamada programación imperativa o de procedimiento.
Hay dos tipos de programas populares.
Uno se llama procedimental, que es todo acerca de como los comandos que hacen,
y uno es funcional, que es todo por tener funciones y tener
entrada y salida de esos.
Reaccionar es un paradigma funcional.
C es un paradigma muy procesal.
>> Y como ejemplo, C por ejemplo, no lo haces de esta manera declarativa
de hacer el programa, ¿no?
Hay que decir, imprimir esta.
Cambie esta estructura de datos.
Imprimir esta.
Es todo acerca de los comandos.
>> En Reaccionar, no hay que muchos comandos.
Todo es cuestión de tener componentes que juntos.
Son como funciones.
Tiene como función llamada CardView,
que es una función que tiene entrada, salida,
y así Reaccionar es todo sobre esta filosofía
nos de having-- tiene datos.
Se pasa a través de este algoritmo, y que va a
HTML de salida que acaba de imprimir la página,
y lo que tiene que construir pieza por pieza.
>> Así que para dibujar una metáfora para lo He dicho antes, ya sabes cómo
en Facebook, si usted recibe un mensaje, y usted decide qué partes de actualizar,
eso es de procedimiento.
Es imperativo, ¿no?
OK, recibí un mensaje.
Cambiemos cuenta allí.
>> Vamos a estallar una ventana aquí.
Cambiemos cuenta allí.
Dibujemos esto aquí.
Eso es un enfoque de procedimiento.
>> Eso es lo que cosas como angular, Boost, Backbone, otros marcos utilizan.
Reaccionar es funcional.
Es una manera muy diferente de pensar sobre las cosas.
Toma esta idea de que vamos a tener funciones o algoritmos que le
darle datos.
Se va a escupir lo que debe ser, y el ordenador
se hará cargo de pesando.
No maneje usted mismo.
¿Tiene que hacer un poco de sentido?
¿Sí?
>> AUDIENCIA: En un lenguaje funcional, todo sucede a la vez?
>> NEEL MEHTA: No, las cosas suceden en orden.
Al igual que aquí todavía hay orden, pero no lo hace
pasar en orden de como felicitar, comando, comando.
Sucede con el fin de función que da salida.
Pon eso en otra función.
Pon eso en otro función, otra función.
>> Si lo hace CS51, podrás aprender programas funcionales
un poco fuera del alcance de este.
Pero, básicamente, lo que hace Reaccionar fresco no es sólo
el flujo de datos de una sola vía y el Dom virtual,
sino también la idea de programación funcional.
Y la programación funcional es muy fácil para componer y hacer cosas interesantes fuera de,
y es muy fácil pensar sobre y razonar sobre.
Así que es otro buen sorteo de React.
¿Alguna otra pregunta?
¿Sí?
>> AUDIENCIA: Um, ¿por qué usted utilice dejar que a diferencia de var?
>> NEEL MEHTA: Así que la pregunta es ¿Por qué se utiliza en lugar de dejar que var?
Esto es una cosa que se llama ES6 o ECMAScript 6.
Es la nueva versión de JavaScript.
Hay un montón de razones técnicas, Pero vamos es una mejor versión de var.
>> Es la forma de declarar variables.
Puede utilizar deje.
Puede usar var.
Let tiene un montón de técnicos reasons-- puedes mirarlos
hasta tarde-- por eso que es mejor.
Básicamente, ES6 tiene algunas buenas nueva sintaxis, algunas nuevas características
en la parte superior de la antigua JavaScript.
>> Así que tenemos como cinco minutos.
Sólo quería hablar una cosa más real rápido.
Si tuviera alguna pregunta, vamos a hablar de ello después de esto.
Pero para que esto se pone captado por la cámara, sólo
quiero hablar un poco acerca de cómo se utilizar realmente Reaccionar en sus aplicaciones.
>> Si vas allí, Facebook.GitHub.IO/react,
esta es la página de inicio para reaccionar, y que voy a mostrar cómo usted utiliza
Reaccionar en sus páginas.
Básicamente, es un poco complicado intentar instalar React.
No es tan fácil como usted acaba de arrastrar y colocar un JavaScript en allí.
>> Usted tiene que tener su transformador establecido, que, como lo hacía antes,
convertir su JSX en el JavaScript normal.
Tienes que lo que va a compilar usted ES6 a la normalidad.
JavaScript hay mucho movimiento piezas que tienes que hacer, así que hay una cosa
llamada Yeoman, Yeoman.io.
Y esta es una herramienta de línea de comandos que va a ayudarle a Andamios tu Reaccionar
proyectos fácilmente.
>> Así que usted puede leer sobre esto más tarde, pero hay algunas herramientas
que Yeoman ofrece.
Ellos te permiten crear un Reaccionar aplicación con todo lo construido en.
Al igual que va a haber construido en, componentes incorporado.
Tendrá su transformador incorporado.
Tienen un montón de fresco cosas construido en forma automática
el uso de estas cosas llamadas generadores.
>> Así que leer sobre esto, si quieres.
Sólo tienes que ir en Yeoman, Y-E-O-M-A-N, y usted puede encontrar los generadores como estos.
Y como con los generadores estos, como uno
Es manda una línea de comandos pareja.
Va andamio a cabo una toda Reaccionar aplicación para usted.
Se va a obtener toda la tubería manual, y trabajo duro hecho por ti,
y es por eso que sólo se centran en sólo escribir en React.
>> Así que básicamente la construcción de una Reaccionar aplicación es trivial.
Ha conectado todos juntos, pero hay son herramientas que haré por ti.
Así que si usted desea hacer una Reaccionar aplicación, trate de hacerlo de esa manera.
Si lo que desea es experimentar, usted puede intentar usar esta CodePen
porque este tiene CodePen todo el cableado reaccionan.
He hecho todo el trabajo por usted ya.
>> Así que si usted desea hacer como un producción para liberar Reaccionar aplicación,
probar uno de estos generadores.
Si lo que desea es jugar alrededor, es a menudo vale solo
como tratar de jugar en CodePen aquí.
¿Suena bien?
Guay.
>> Así que eso es todo lo que tengo.
Una vez más, todo el código y los ejemplos son va a ser en este sitio web aquí.
Así que, de nuevo, no hablamos acerca mucho sintaxis del Reaccionar,
sino para encontrar todos aquellos pequeños detalles sintácticos,
que todo va a estar disponible en este sitio web aquí.
>> Así que me gustaría recomendar como da el primer paso.
Póngalo en su CodePen.
Trate de trabajar en la fabricación a la segunda etapa.
Hay una cuarta etapa, y justo ver dónde se obtiene de eso.
>> Más preguntas, comprobar que página o enviarme un correo electrónico.
Esa es mi correo electrónico.
Pero me encantaría ayudarte con cualquier pregunta que pueda tener acerca de reaccionar.
Así que, sí, eso es todo lo que tengo.
Gracias todos por viendo o por asistir.
Y me quedo con cualquier pregunta usted puede tener después de esto ahora.
Así que gracias a todos por su atención.