[Música tocando] 

Neel Mehta ,: Aquí vai. 

Ben, todo o mundo, Benvido ao web aplicacións do futuro con Contestar. Este é CS50. O meu nome é Neel. Eu son unha TA para CS50 e un estudante de segundo ano na facultade de Harvard e un moi, moi programador web apaixonado. Entón, eu estou moi emocionante estar falando contigo hoxe, se está aquí ou na casa asistir, sobre Contestar, que é, de novo como dixen, o futuro das aplicacións web. 

Entón Contestar é un framework web. E como eu dixen para algunhas persoas aquí, un cadro é só unha conxunto de ferramentas que se poden utilizar para estruturar e construír a súa aplicación web. E aplicacións web son, de novo, os sitios que son interactivos como Facebook, Twitter.com, Instagram.com, calquera que sexa. 

Así, Facebook é un framework web que foi desenvolvido polo Facebook un par de anos traseira-- Contestar é. El xa foi usado en Facebook en súas aplicacións móbiles ea aplicación web, Instagram. Khan Academy é outro destacado dos primeiros a adoptar Contestar. 

Foi realmente a recibir moi popular. Se nunca usar cousas como Angular ou Backbone, este é da mesma familia, pero ten desde agora superar a súa popularidade. É a cousa nova quente. É realmente, realmente enorme. 

E así Contestar é bo non só como un framework web para interfaces de construción. É bo para a construción de interfaces web. Hai tamén unha cousa Reaccionar chamado Native que permite construír interfaces para Android e iOS e quizais outras plataformas no futuro usando só o mesmo código JavaScript. Podes usar exactamente o mesmo Código JavaScript para renderizar sitios, para facer os apps Android e IOS apps. 

É un momento moi, moi emocionante. É unha oportunidade moi, moi legal. É realmente unha tea universal ferramenta de desenvolvemento de interface, polo que é moi, moi cousa importante a saber. E, como eu estaba dicindo ás persoas antes, este, penso eu, vai cambiar o modo como construír aplicacións web para sempre. Polo que é posible que unha esaxeración pouco, pero eu creo que é unha cousa moi boa para saber. 

OK, entón o que é Contestar? Reaccionar é un cadro que pode empregar para a construción de interfaces. Unha interface é, de novo, unha páxina web, non? Entón aquí está Instagram.com, usos Contestar. 

Reaccionar está construído sobre a idea de compoñentes. Un compoñente é un HTML elemento en esteroides, polo que un elemento HTML é como un botón. É un parágrafo. É unha cabeceira, non? E Instagram vai usalos, pero utilizar compoñentes de React. 

Reaccionar compoñentes son elementos HTML souped-up que teñen o seu propio comportamento contido dentro delas. Así, como exemplo, que se podería un elemento de tempo, un compoñente de tempo, que conterá como o selo de tempo, xa sabe, un compoñente que perfil contén a imaxe de perfil eo nome da persoa. Pode ter un contador similares, os cales pode contar como o número de gustos, e se fai clic nel, que vai incrementar o número de gustos. Un compoñente é só un chea de código HTML que ten algunhas funcións embrulhado dentro del. Entón, é como un elemento HTML en esteroides, como dixen antes. Pode tomar estes compoñentes, e pode poñer-los xuntos para facer novos compoñentes, Neste caso, un compoñente post, que contén todas esas cousas. Sería conter Tempo, perfil, LikeCounter, quizais o comentario e quizais a propia imaxe. E así aplicacións web son só construído tomando compoñentes e poñer-los xuntos. Unha fonte Instagram é máis que unha morea de lugares, un tras outro, cada post contén como a Time, Perfil, LikeCounter, e así por diante. É unha especie de como construír unha casa. Non constrúe a casa de arriba abaixo. Se toma components-- vostede tomar como o baño. Colle o bedroom-- vostede fura-los xuntos, e ten un novo compoñente. Ten unha nova parte da casa. 

Entón Contestar é todo construído en torno a esa idea de compoñentes que son interactivos, que son declarativas. Como acaba de dicir o que un perfil, ela fai-lo. Son combináveis. Pode tomar un tempo e un perfil, poñer xuntos, facer algo mellor. E son reutilizables, polo tanto, se ten o código fonte dun post, podería incorporar iso en calquera lugar. 

Pode embutir un Instagram cousa no seu sitio web. Pode embutir en Facebook, por exemplo, sempre que utiliza React ben. Entón compoñentes son realmente, realmente, realmente bloques de construción poderosos web que se pode usar en calquera lugar e colocá- xuntos para facer novos bloques de construción. Iso é moi, moi visión xeral de alto nivel. Entón, de novo, se ten calquera preguntas en calquera punto sobre a filosofía do reactor, o codificación, para me deixar, e deixe-me saber. 

OK, polo tanto, reaccionar é legal porque ten un xeito diferente de ollar en como construír aplicacións web. Probablemente xa escoitou falar de MVC, un modelo que controla na CS50 ou o que quere outras clases de sondaxe que usa. E a maioría dos cadros son construído en torno á idea de MVC. Reaccionar non é. Reaccionar está construído en torno á idea do fluxo de datos unidirecional como visto por este gráfico ou gráfico aquí. 

Basicamente, ten unha fonte de datos. E a fonte de datos pode decidir como pór para fóra determinados compoñentes. E os compoñentes serán entón, cando cambian, eles van che dicir o fonte de datos para cambiar. 

Para utilizar o Instagram exemplo, pode que unha lista de obxectos como pos- nunha base de datos ou algo así. Que os datos. E entón nosos compoñentes pos- vai levar eses datos, e utilizar estes datos para procesar unha cousa na pantalla. Iso é o que a frecha a partir dos datos de compoñente é, e, a continuación, que a mesma información é usada para procesar un grupo de compoñentes. 

En Facebook Messenger, para exemplo, que é Contestar, pode ter unha lista de mensaxes como a súa fonte de datos. E iso non renden só a lista de mensaxes pero tamén a lista de amigos que ten. Ten a conta non lida. Quizais tamén facer a cousa Facebook que está no fondo do Facebook.com. Os mesmos datos é un fonte única de verdade e que fai que unha gran cantidade de compoñentes a seren prestados. E cada vez que un destes compoñentes é alterado, vai volver e cambia a fonte de datos. 

Enviar unha mensaxe, non? Isto cambia a fonte de datos. Ler as súas mensaxes, para que non trata definir a 0. Isto cambia a fonte de datos. E teña en conta que todos estes dunha arrow voltar os mesmos datos fonte, así vostede sabe, dado un determinado conxunto de datos, vostede sabe exactamente o que o A páxina está indo ollar como. É determinista. Vostede sabe, dadas certas datos, o que a páxina vai ollar como. Pode prever como vai se comportan e como as cousas están indo para o traballo cando están xuntos. 

E se tivese un millón de compoñentes aquí, ía comportarse o mesmo, non? Non tería calquera interconexiones estrañas. Unha datos rendeu un millón de compoñentes. Un millón de compoñentes podería voltar e editar os datos. E así que é moi bo. Estamos construíndo composable, facilmente aplicacións web escalabades. 

Ten unha fonte de datos, a fonte da verdade. Que informa os seus compoñentes como poñer a páxina, e os compoñentes serán xestionar interacción. E si queren cambiar cousas, simplemente volver e dicir a fonte de datos para cambiar. Ten sentido? Entón Contestar é todo sobre a comprensión como construír un compoñente e como facer o seu compoñente interactuar co mundo exterior. 

Facer o interactúan compoñente co mundo exterior utiliza outra tecnoloxía Fluxo chamada, que é unha estrutura que é engadido na parte superior da React. Non imos falar sobre iso. Imos falar máis sobre, dado datos, como pode facer un compoñente? 

E así Contestar é moi legal porque Pode usalo con calquera back-end que quere. Se tes un back-end como Python, se o Python pode cuspir algúns datos, Reaccionar pode facelo. Se hai saídas JS de datos, fai React. Ruby Rails con datos, fai React. 

Entón Contestar é basicamente unha web view-- un front-end con compoñentes para calquera fonte de datos que sexa. E así vai dende fonte de datos para reaccionan compoñentes é moi fácil. Indo a outra forma é un pouco máis difícil. Que usa corrente como mencionei antes. Non imos entrar niso. Imos concentrar máis no datos a lado dos compoñentes. Desta forma, pode facer legal, desfrute aplicacións web. Non vai afectar o mundo exterior por agora, pero iso é outra historia. 

OK, entón se está aquí para o meu último seminario vai saber que todo o código para A charla de hoxe vai ser neste URL aquí, desculpe, este URL aquí. E, basicamente, nós estamos indo a ir por catro etapas, quizais cinco, probablemente non cinco. Nós imos pasar por catro etapas de construción dunha mostra Contestar app. E así todo o código fonte para cada paso do camiño será aquí, entón se está acompañando na casa, Sinto-se a liberdade de ler este código. Se está seguindo ao longo aquí, estaremos mostrando na pantalla, polo que non se preocupe con iso. Pero se está na casa, sentir libre para visitar esta web. E, si, ten que ser capaz de obter todo o código que xa ten aquí. Polo tanto, é unha boa folla de fraude, así para as súas futuras aventuras con Contestar. Cool, polo que se todo o mundo que está aquí, e aínda se está na casa, puxar arriba esta web, is.gd/cs50react, sen capital, sen subliñado, sen nada. 

Podes ver unha páxina que parece algo como isto. Esta é unha cousa chamada CodePen. CodePen é un colaborativa ambiente de codificación co cal podo escribir o código aquí, e será enviado automaticamente para ti. E deste xeito, podo escribir código. Podo realizar o código aquí. 

Para example-- e reloads-- ver, Estou executando o código JavaScript na páxina aquí, e só pode facer automaticamente unha páxina web con este código JavaScript. E así esta é unha forma para nós para probar código realmente rápido sen ter que usar nosa ID ou utilice nosa máquina local ou o que quere. É un xeito moi rápido para ti maqueta e probar diferentes tipos de código. 

Entón, eu estou indo tomar exemplo de código, colocándose o aquí. Nós imos estar traballando con el. E se está na casa, pode tirar iso tamén. E eu xa instalado Reaccionar aquí, entón podes só escribir o seu propio código aquí, e probalo como o seu propio parque infantil. 

Si, todos abrir este enlace aquí. Por favor me dea os polgares xa que ten que abrir. Cool, cool cool. Non hai nada aquí para agora, pero imos cambiar isto moi pronto. 

OK, entón Contestar é un JavaScript biblioteca, e como tal, require o coñecemento de JavaScript, que é a linguaxe de programación web. E está a ser usado para outras cousas Agora tamén, pero sobre todo a desenvolver web lingua, por iso, se non está familiarizado con que, ler un sitio chamado JSforCats.com. É marabilloso. Podes aprender JavaScript en media hora. É incrible. 

Entón, bótalle un lida. Tamén unha morea de HTML aquí porque estamos proxectando páxinas web, por suposto. Polo tanto, se non está familiarizado con HTML, vai a HTMLdog.com. Eu creo que aprender Contestar é un millón de veces máis fácil se xa coñecer os bloques de construción. Se ten os compoñentes, é fácil de facer un compoñente máis grande. Isto é Contestar linguaxe para ti. 

Entón vai adiante e dar- isto dunha lectura. Deter este vídeo. Bótalle un trata, se é na casa, se non está familiarizados con HTML ou JavaScript OK, entón o que nós estamos indo a facer é que imos facer un app flashcard moi básico usando Contestar. Nós imos ter un flashcard. Pode virar a tarxeta e cara atrás. E nós tamén imos ter unha lista de todas as cartas que temos, e estamos sentindo ambicioso, poderiamos estar capaz de cambiar entre coches, premendo sobre eles. 

Pero este é, da súa espida ósos, dun xeito moi sinxelo Contestar app. E polo que esta é, en realidade, non trivial de aplicar, pero imos amosar que, se fai este, é moi, moi fácil de estendela lo outras persoas axudar con iso. Entón, imos pasar por catro etapas comezando de cero para construír este. 

OK, entón as catro etapas, imos comezar co primeiro paso. O primeiro paso será a construción do seu primeiro compoñente. Como dixen antes, un compoñente en Contestar é só un elemento HTML con esteroides. Especifica o código HTML e algún comportamento, e vai especificar como a xente pode interactuar con el como el estaría interno. Como un botón vai saber como cantas veces foi premendo por exemplo, e vai saber como poñer a si mesmo. 

Entón, imos adiante e construír o noso primeiro compoñente usando JavaScript. Entón, se a sintaxe parece estraño, iso é porque é tipo de. Entón, unha vez máis, imos para facer unha variable chamada aplicación usando a palabra chave deixar, que fai que unha variable, deixe App igual React.createClass. 

Reaccionar é unha biblioteca e posúe a crear función de clase. E esta función é un pouco de código que pode usar para crear un novo Reaccionar tipo de compoñente. E así React.createClass fai que un compoñente, e este compoñente ser capaz de facer cousas. A principal cousa que pode facer é facer algo, render como unha función. 

Unha vez máis, si este contido non é evidente para ti, eu recomendo que vaia sobre JS para gatos e check-out. Que é grande ben o suficiente? Legal. 

Así, cada necesidades de compoñentes para ter unha función de renderización. A función de facer di, o que podo imprimir na pantalla? Pero é o compoñente inútil se iso non acontecer sabe o que imprimir na pantalla, así ten que ter unha función de renderización. 

Entón, na cousa rende, vostede Só ten voltar algún HTML. E o que é legal é que hai unha cousa chamada JSX, que é unha extensión de JavaScript que se usa por reaccionar. Permite que escribe Saúdos do seu JavaScript, que soa medio raro cando primeiro pensar sobre iso, pero fai moito sentido despois. Así, podemos facelo. Se está familiarizado con HTML, sei temos un div cun propósito xeral recipiente para o material. Podemos volver un div, e no interior este div, podemos poñer cousas. 

Entón, imos dicir que queremos facer só un flashcard straight-up para o momento. O flashcard, eu diría, terá unha pregunta e resposta. Entón, neste div, imos imprimir un parágrafo que di question-- Cal é o resposta final á vida, o universo? E entón a resposta é será, por suposto, 42. 

Que non veu ben a todos. Si, entón basicamente pode realmente escribir HTML no seu JavaScript. E iso vai ser impresas en pantalla. Entón, imos probalo. 

Entón temos noso compoñente. Necesitamos dicir Contestar a poñer o compoñente na pantalla así React.render, polo que entender que nós app tratar como calquera outro elemento. Nós escribir-lo como el era un elemento HTML. Como en vez de dicir como img á imaxe ou p para o parágrafo escribe App, polo que é App tratado como un elemento HTML. Como dixen antes, é un elemento en esteroides. 

Entón procesar App, e darlle un lugar para poñelas. E é así que poida diga a el onde poñelas. Eu creei un div simple na páxina chamada cunha ID de páxina, e é aí onde o elemento está indo a ir. 

E nós non estamos indo a executar con HTML. Basicamente, isto pode ir poñer dentro deste elemento de páxina que temos na pantalla. Entón, el corre este código, e deseña esta cousa na pantalla, entón aquí estamos. Fixemos o noso primeiro compoñente Contestar. 

Entón, así como un resumo, fixemos delicada un novo tipo de compoñente, non? Iso é o que o React.createClass. E en que compoñente, nós díxolle o que debe facer. Sempre que este compoñente é o de ser impresa sobre a pantalla, ha imprimir o div con os dous parágrafos dentro del. 

E o que fixemos, fixemos unha nova aplicación usando a notación app ángulo de montaxe. Nós dixemos a el para poñelas dentro do elemento principal. E así que eu fixen, el creou unha nova aplicación a partir dese modelo. E entón eu dixen a el para facelo. Por iso, dixo, OK, app, o que debo imprimir? App di, vai imprimir unha div con dous parágrafos dentro dela. E listo, hai nosa div con dous parágrafos dentro del. Ter sentido ata agora? 

Así, unha vez máis, todo o desafío de React é só saber como facer compoñentes. Como facer que o compoñentes traballan en conxunto. Agora que fixemos o noso primeiro compoñente, imos volver e facer compoñentes personalizable. Entón vostede sabe como HTML vostede pode dar as súas clases botóns? Pode dar aos seus áncoras a href. Pode dar aos seus inputs un tipo, non? Pode dar máis personalizado Propiedades para todos os seus elementos para facelo máis interesante. E nós, de feito, pode facer exactamente o mesmo. 

Entón, digamos que queremos que o noso app para ir prestar calquera tarxeta. Agora só rendeu unha tarxeta codificado. Sabemos que hai só un tarxeta que pode facer, polo que estamos vai cambiar isto agora así que podemos só darlle algún cartón. Vai imprimir a tarxeta. 

Debería tentar e facer o seu compoñentes a un propósito moi xeral. Entón, desta maneira podería enviar correo-e este meu amigo e ser como, o que quere que ten flashcard, só alimento-lo aquí, e só pode facelo por si só. Pode pór outro as cousas no seu propio programa. 

Pero primeiro, imos romper ese Se en dúas compoñentes, pero queremos separar a tarxeta impresión de parte a parte real app. Entón o que podemos facer é nos Pode cambiar isto desde a App para CardView, só un novo nome para a aplicación, e podemos facer un novo compoñente chamado App, para non ser confundido co antigo App. Temos os createClass, e como HTML, podes niño Contestar compoñentes un dentro do outro. 

Entón, nesta función renderse, función CardView retorno, e esta é exactamente a mesma cousa. Vexa por que é o mesmo? No canto de prestar só o app que ten a div e vinculación dentro del, o app fai o CardView, eo CardView fai a div e parágrafo. Polo tanto, este é o noso primeiro exemplo de elementos de nidificación dentro de si. Isto ten sentido? Entón, de novo, temos un elemento CardView. Temos elementos app que é maior que. 

OK, por iso queremos que o noso CardView-- se dar unha boa CardView un determinado tarxeta, vai imprimir para fóra para vostede, non? Entón, primeiro, temos que facer unha tarxeta, entón imos facer un obxecto de tarxeta. Entón deixe miña tarxeta equal-- todos vostedes están familiarizados, este é só o proceso de toma de notación obxecto en JavaScript. É como unha especie de struct en C, entón fixemos unha tarxeta, e agora podemos pasar esta tarxeta como unha propiedade ou como un atributo HTML terminoloxía para o noso programa. Así, podemos facelo, App tarxeta é igual MyCard. 

Vostede sabe como na entrada, fai tipo de entrada é igual a de texto ou botón clase é igual a btn para arranque,? A mesma idea, equals-- tarxeta App ten que poñer as cintas aqui-- Tarxeta App igual MyCard, de xeito que este di que temos ese obxecto tarxeta. Vou pasalo como un propiedade para o compoñente app. E este compoñente App poder acceder a ela e fazê- cousas interesantes con el. 

Así, o noso app será dado unha tarxeta, entón polo de agora, teremos o app só dar- a tarxeta para a CardView si mesmo, porque como o app non é vai saber o que facer con el, así que imos darlle co CardView. Entón, imos pasalo a Así mesmo, a tarxeta é igual, e de xeito que cada compoñente pode acceder a cousas que foi dado a el. Poden acceder as propiedades que foron dados a el usando esta sintaxe, this.props.card. 

Entón o que ocorre aquí é ten o obxecto MyCard. Vostede pasalo para a aplicación usando tarxeta App igual MyCard. Ese obxecto tarxeta é dada ao seu app. A aplicación pode acceder a ela como this.props.card. É como unha especie de imaxe sabe o que é fonte é. 

Esta aplicación sabe o que é tarxeta é, e pode facer cousas con el. Pode facer cálculos. Pode tomar decisións baseadas fóra del. 

De momento, eu ía pasar this.props.card na CardView. Ter sentido ata agora? Vai facer máis sentido agora. 

OK, entón agora estamos en CardView. O noso CardView, dado a tarxeta, debe imprimir a súa pregunta e resposta. Agora só impreso algunhas preguntas e respostas codificadas. Necesitamos descubrir out-- necesitamos para pedir a tarxeta que nos deron cal é a pregunta e resposta, e a continuación, imprimir iso na pantalla. 

Así, podemos facelo aquí. En facer begin-- primeiro facer igual. Entón, o que estamos facendo aquí é sabemos que as cartas son connosco dado a unha propiedade, non? Énos dada como entrada. Como é case como argumentos a unha función. A tarxeta é un argumento case a esta CardView. 

Nós imos extraer iso, e poñer en que a pregunta variable. Asegúrese de que a resposta foi para a resposta variable. Solicita que a tarxeta de responder. E agora que temos estes, en vez de imprimir o texto, nós estamos indo a imprimir o que quere que eles nos deron. 

Polo tanto, este stuff-- entón imos para pór para fóra Pregunta Resposta. A ver se funciona. Legal, entón imos percorrelo lo unha vez só para estar seguro. 

Entón, meu tarxeta é a súa tarxeta de obxecto, e nós están dando ese tarxeta para a aplicación. E o app vai levar a tarxeta e dalo ao CardView. E este CardView di, se dáme calquera obxecto flashcard, Vou imprimir a súa pregunta ea súa resposta, non? 

Entón, o que eu podería facer é que podo enviar este código, o primeiro como 10 liñas de meu código, para o meu amigo. Podería incorpora-lo en súa propia aplicación. E mentres el facía o mesmo, como tarxeta de CardView é igual a este, sempre que el creou o CardView e deulle a información correcta, podería facer o seu propio tarxeta. E así deste xeito, é realmente un forma legal para construír compoñentes que usan uns a outros, non? Esta tarxeta, eu podería publicar este CardView en internet, e as persoas serían capaces de usalo. Entón, basicamente, é como un dos funcións estándar na biblioteca C. 

É unha función onde alguén escribiu el. Dá unha certa entrada. Vai producir un determinado produto. Non importa como funciona internamente. Sempre que dea a el o dereito entrada, que vai facer a saída correcta. 

E un compoñente pode ser pensado do mesmo xeito. Isto é debido a CardView unha función de biblioteca. Se darlle algún tarxeta como unha propiedade, que vai imprimir o contido desta carta. Como se eu cambiar a miña tarxeta de en vez diso ser como o que é 5 plus 37, ha actualizar de conformidade. Entón, só cambiando a entrada, gaña unha certa saída. Así, pode pensar en compoñentes case como funcións deste xeito, que pode pór xuntos. Comeza entrada, como este CardView como a entrada, recibe saída. Neste caso, a saída é o código HTML. Ter sentido ata agora? Cool, entón, de novo, as propiedades son como pode pasar información a dentro e fóra de compoñentes. 

OK, entón imos facelo cousa interactiva. Agora é medio aburrido. ¿Que é [inaudível]? Pode imprimir algúns para fóra, pero iso é todo o que podo facer. 

Entón, imos voltar para o vella cuestión só de momento. Ok, entón agora mesmo estes compoñentes son chat porque todo o que eles fan, eles están de entrada. Fan de saída, non? Iso é medio aburrido. Queremos ter a nosa compoñentes para poder ter algún tipo de estado interno, como lembrar de algo. 

Para un flashcard, por exemplo, que tipo de estado pode queres Teña en conta que para un flashcard? O estatuto temporal pode querer lembrar para un flashcard nun flashcard app? Audiencia: Se xa virou? Neel Mehta ,: Si, certo. Entón podes querer manter pista de que está orientado cara a arriba ou son vostede cara abaixo na tarxeta. En Facebook, por exemplo, faría quere lembrar onde o comentario de noticias é desexa ou que é perfil que está facendo agora. 

No Messenger, como o texto que escriba no cadro de entrada, non? Se actualizar a páxina, el vai. Pero realmente non me importa. É só temporal. Si? 

Audiencia: [inaudível] Neel Mehta ,: Como un flash tarxeta, como pode estar a ver o lado pregunta ou banda a resposta? 

Audiencia: Aceptar. 

Neel Mehta ,: Como unha flashcard dous lados, non? Si, así que quere teñen esta idea de empresa Teño propiedades, que é como entradas, pero o estado, que é temporal, uh, onde está na páxina, non? Unha vez máis, eu dixen en Facebook Messenger, eu teño como que persoa está a ver Facebook ou quen é o perfil, non? 

Isto é só temporal. É importante para amosar ao usuario o que está a suceder, pero actualizar a páxina. Realmente non importa. Polo tanto, é estado temporal, por iso, todo o estado del. 

Entón, de novo, non hai estado e adereços. Props é dada entrada a partir da súa fonte de datos. Estado é como patróns. É como cousas que fai a cousa interactiva. 

Así, no noso CardView-- teremos nosa CardView-- por iso era bo. O que imos facer aquí, imos para tocar CardView e só CardView. E por iso o meu amigo que ten iso, non notar calquera diferenza. Non terían que cambiar calquera dos seu propio código, pero verían a CardView foi envelenado. Isto é unha parte agradable sobre compoñentes. 

OK, polo tanto, no noso CardView, imos tratar e controlar si estamos fase up ou mirando cara abaixo. En Contestar facemos iso por primeira especificando o estado inicial. Onde é que a tarxeta de comezar? 

Entón, ser unha función chamada getInitialState funciona, e nós voltar un obxecto. Este obxecto contén algún estado, e un estado é só un par clave-valor. Como en instruír, ten unha chave e un valor, ten como nome é unha cadea. 

Neste caso, imos dicir fronte é certo. Este di que temos un Estado. Un dos compoñentes do estado é un atributo chamado fronte. [Inaudível], entón por defecto, estamos diante da tarxeta, e podemos cambiar isto como nós virar a tarxeta. Ten sentido? 

OK, por iso, render, agora, estamos mostrando a pregunta ea resposta. Agora o que temos que facer é mostrar a cuestión se estamos diante da tarxeta para a resposta é a parte de atrás da tarxeta. É por iso que todos fan a tarxeta interactiva. Entón, imos tratar e para este aquí. Ben, primeiro faga só unha variable. Podemos preguntar agora this.state.front. Temos acceso a afirmar o mesmo que adereços de acceso, para this.state.front. 

Se estamos á cabeza, a continuación, o texto é this.props.card.question. Se estamos diante do tarxeta, imos tratar e garra a cuestión da tarxeta. Se non, se estamos na parte de atrás da tarxeta, o que imos facer? 

Audiencia: A resposta? 

Neel Mehta ,: Si, así que o texto é igual a this.props.card.answer. Pero se notar, estamos usando o Estado a tomar unha decisión porque agora o compoñente terá un aspecto diferente baseado fóra que estes interactúan con el. Entón, en vez de imprimir iso, imos só imprimir o texto. Cool, así agora, como se ve, vemos só a cuestión. E se eu cambiar o estado manualmente aquí adiante é falsa temos 42 volta. 

Entón, de novo, este compoñente ten o seu propio estado. Como un botón sabe se foi presionado ou non, esta cousa sabe cal é a parte dianteira ou na parte de atrás. Por defecto, está diante. E, a continuación, se é na parte da fronte, imos imprimir a cuestión. Se é na parte de atrás, imos imprimir a resposta. Así, unha vez máis, a información dada é a mesma. El só parece diferente en base a como programa-lo. Así, por exemplo, Facebook Messenger, mesmo se recibe a mesma fonte de datos, pode ser diferente porque o estado é diferente. Está mirando para un A mensaxe de diferente persoa. 

OK, entón iso é todo ben e bo, pero agora o que é, en realidade, facer-nos capaces de cambiar, si nosa tarxeta é fronte ou cara atrás. Podemos facelo engadindo un flip botón, un botón para que a tarxeta vai virar a tarxeta, se é [inaudível]. Entón, imos engadir un botón aquí, este botón, e este botón pode dicir flip. 

E así agora, non fai nada. El só parece bo. O que podemos facer é que podemos engadir un click manipulador, onclick é igual this.flip, e imos definir aleta máis tarde. Pero, basicamente, onclick é unha función que é chamada cando o usuario fai clic nel. 

Así, o botón vai saber cando foi premendo. Fun foi premendo, vai virar a tarxeta. É unha especie de como a súa entregador de pizza. Vostede é como, así, sempre que alguén me chama, eu vou entregar pizza, non? 

Rexistrar este ouvinte. Vostede escoita a un evento. Vostede é chamado, e cando o evento ocorre, facer algo. Comeza pizza. Neste caso, cando está premendo, virar a tarxeta. 

E por iso necesitamos definir un función que vai virar a tarxeta, entón imos escribir este dereito aquí, flip función. E entón o que pensas que virar vai facer? De novo, isto é chamada cando prememos no botón flip. O que debe o flip función facer? 

Audiencia: Cambio this.state.front de certo para falso, falso para certo. 

Neel Mehta ,: Si, así que tomar o que quere this.front é-- o estado fronte é. Levar o estado á fronte, se é verdade, facela falsa. Se é falso, facelo realidade, non? Entón, imos tentar iso. 

Non pode cambiar o estado só facendo this.state. Non pode facelo. Non pode facelo. Tes que usar unha función chamado this.setState. 

Entón pode dicir this.setState fronte colon, onde esta, unha vez máis, a exclamación punto significa o contrario. Eu creo que si iso. state.front É certo, que vai virar falsa. Entón, imos definir o estado de certo para falso. Se é falso, imos configure-lo teito para certo. 

Basta sinalar que definir e obter un pouco diferente, e entón imos tentar iso. Bada Bing, mire para isto. O botón FLIP agora cambiar a fronte cara atrás Estado. 

E iso aquí é onde se ve un pouco da maxia do Contestar. Como nunca dixo a el para volver a facer. Nunca dixen que redeseñar nada. Se está facendo iso sen reaccionar, vostede ter como cando o a-- aleta botón é premendo, que tería que dicirlle para manualmente renderizar novo, non? 

Reaccionar é moi legal en que se darlle un certo estado e propiedades, el sempre ha procesar exactamente o mesmo. E así, cando nós xa cambiamos o Estado e as propiedades, reaccionan só re-fai a cousa toda. El sabe que hai unha un-para-un correo entre Estado e de parámetro e HTML. Así, sempre que un deses cambios a través dun conxunto de estado, vai cambiar o xeito no que o salario é re-procesado. E entón basicamente Contestar é como esperando por ti para cambiar. 

Sempre que se muda algo, vai volver a procesar a páxina enteira. E se iso soa ineficiente, é porque sería, pero reaccionan usa unha cousa chamado DOM Shadow. No canto de deseñar a páxina directamente, mantén a árbore HTML virtuais na memoria. 

Vostede sabe, HTML é como unha árbore, como unha estrutura de datos xerárquica. Mantén unha árbore falsa na memoria, e sempre que actualizar a páxina, vai chamar outra falsificación árbore, e só pode calcular o que necesita cambiar a facer o páxina para facer as dúas árbores iguais. Entón, basicamente, practicamente re-fai moito. E entón el só cambia o gusto páxina en pequenos axustes que corresponda, polo que é moi, moi, moi eficiente. 

Entón, basicamente Contestar vai sempre que cambiar algo, vai volver a procesar a páxina virtualmente. Vai descubrir o que eu teño cambiar para facer a páxina real reflexione a páxina virtual, e só pode facer iso. Ese é o DOM virtual. É un dos maiores características de React. 

Isto ten sentido? Algunha pregunta? Si? 

Audiencia: Como funciona comparar aínda ao MVC que falamos recursos como antes. 

Neel Mehta ,: Si, a cuestión é o xeito no que se compara a MVC? Vostede preguntou sobre recursos. Ben, imos falar sobre como funciona. 

En MVC, actualizar o modelo. Neste caso, nós teriamos un modelo de tarxeta. A vista tería o aleta botón, eo control tería a función de flip. Así, a vista contaría a controlador de flip flip. Virar diría ao modelo para cambiar, non? 

E así, cando fai un MVC, vostede escoite o modelo para cambiar, e re-procesar a visión de conformidade. Ou só ten que gustar ten o controlador. Agarde ata que o modelo de cambiar, e, a continuación, escoller unha parte como unha cousa a cambiar. Aquí temos unha cousa, pero nun gran app, ten que gusta de lembrar o que o cambio de cada lugar, polo que é un pouco aburrido. E así Contestar é bo porque ten un don sombra. Pode dar o luxo de só reescribir a cousa toda. Non ten que selectivamente como adiviñar o que para actualizar. 

En Facebook, se desexa obter unha nova mensaxe, en MVC, ten que lembrar, OK, cambiar as cousas na parte superior da páxina, a icona da mensaxe. Tamén pop unha nova ventá na parte inferior. Tamén facer unha cousa nova nesa ventá. Tamén reproducir un son. 

Iso é unha chea de cousas indo a fóra á vez. E por iso, se non fai iso ter un don sombra, ten que facelo manualmente porque non pode se librar de toda a páxina. Non pode dar ao luxo de, así que ten para cambiar cada cousa manualmente que é realmente irritante no MVC. 

Así, a fin de ser parcimonioso, eles selectivamente actualizar a páxina, o que é eficiente, pero tamén irritante. En Contestar, por mor da sombra Don, ten as dúas cousas de balde. É eficiente, pois da sombra Don. O pescozo está a actualizar a páxina. Non está facendo a manipulación de árbore. Comeza a eficiencia. Tamén terá a facilidade de uso, porque se acaba de reescribir a páxina enteira, pero só sabe, todo ben, as cousas estará na páxina en algún lugar. Pode ser nun lugar diferente, pero vai estar na páxina, non? Entón só re-renderizado a cousa toda virtualmente, e pode facer un par cambios na propia páxina. 

Entón, de novo, en MVC vostede tería que escoller entre facilidade de uso e eficiencia, e reaccionar, ten as dúas. Entón é mellor. Ten sentido? Sólido. 

OK, entón imos ver imos falar un pouco sobre o paso 4, como podemos incorporar compoñentes. Entón temos iso agora. Temos o noso pequeno botón legal. Podemos lanzalo cara atrás e diante, e iso é todo o que fai. Digamos que queremos ten outro compoñente. Digamos que o noso app flashcard debe contén unha lista de todas as tarxetas que ten, o que significa que debe ter outro compoñente. Ben, quizais chamalo dunha lista. Imos facer unha exhibición de lista que coexiste coa CardView, e esta visión de lista e CardView vai gusta de traballar en conxunto. E pode combina-los para facer o noso app para ti. 

Entón, primeiro, imos facer unha máis algunhas cartas dereito. Imos dicir, o que as tarxetas? E só entón eu non teño que aborrece-lo con escribindo-o, Eu só vou copialo dende aquí. E entón eu estou indo a non darlle só unha tarxeta. Vou darlle unha serie de cartas. Entón, primeiro as aplicacións vai romper de momento. Todo ben, entón imos facer este capaz de tratar con varios tarxetas. Entón, primeiro, imos dar-lle, non só unha tarxeta, pero unha serie de tarxetas, como unha lista de tarxetas. E neste caso, temos tres deles. 

Todo ben, entón é así app indo para obter unha lista de tarxetas, e só pode decidir que un para mostrar ao CardView. O CardView só pode facer unha tarxeta, pero o app obtén unha lista de todas as cartas, non? 

Entón, cando descubrir un tarxeta dando a CardView, como é que creo que pode ser capaz para tomar unha decisión sobre cal tarxeta ensinar? Para lle dar unha información, é temporalmente Vai estar a ver un determinado tarxeta. Se actualizar a páxina, vai só volver a primeira tarxeta. Iso é OK, porque iso é temporal. Que técnica poderiamos usar? 

Audiencia: Podería facer unha variable así como tiña diante. Isto é certo, podería ten tarxeta actual é igual a 1? 

Neel Mehta ,: Si, por iso, quere estar, non? Usaría Estado na compoñente para descubrir que tarxeta queremos chegar. Como temos unha lista de todas as cartas, imos usar o estado para descubrir un dos primeiro cartón, segundo cartón, cartón terceiro, e así por diante. 

Así, unha aplicación para unha aplicación terá unha teñen a función getInitialState, retorno función getInitialState. E nós imos só dicir activeIndex 0. Entón, agora a nosa aplicación ten o seu propio estado. 

E agora sobre render, para descubrir unha tarxeta, imos só ir á matriz e coller a cousa nese índice. Escolla unha tarxeta this.props.cards iguais this.state.activeIndex. Entón, como ve aquí, os adereços e o estado realmente traballar xuntos. Polo tanto, agora que temos o noso ActiveCard, imos chamalo ActiveCard, e veremos se funciona. [Inaudível] 

Oh, que foi un erro de texto. Ah. 

Cool, si, entón agora estabamos de volta onde estabamos antes, non? Programa antigo mesmo, excepto agora podemos apoiar unha lista de tarxetas, e non só unha tarxeta. E agora, unha vez máis, se cambiamos o activeIndex podemos ir de 0 a 1, e agora que segundo cartón, e despois fomos a 0. Entón aquí está o novo turbinado coa versión do noso. 

OK, entón agora imos dar unha vista de lista que mostra todas as tarxetas no seu programa, así que imos facer unha nova compoñente chamado listView. Imos listView igual react.createClass. Por iso, queremos prestar desordenada lista con un elemento da lista para cada tarxeta. E así temos unha morea de tarxetas. Queremos un elemento da lista para cada tarxeta, non? Poderiamos facer un loop for ou algo para facer un novo elemento da lista. Pero o xeito no que facelo en Reaccionar, usar unha cousa chamada mapa. Map é unha ferramenta ou unha función que utiliza que, para cada elemento, executa algunha función, toma valor de retorno, e dálle de volta. 

Así, como exemplo, temos a matriz 1, 2, e este function-- 3.map é un atallo para un function-- x frecha x veces x. Este di, para cada número en 1, 2, 3, toma-lo. Cadrado-lo e devolve-lo. Entón, o que pensas que 1, 2, vai 3.map x x tempos x dálle ao dada que esta función é executado en cada elemento desta matriz. 

Audiencia: 1, 4 9? 

Neel Mehta ,: Si, 1, 4, 9 porque fai 1 veces 1. Isto dálle un. Ese é o primeiro elemento. 

2 veces 2 é 4. Isto é un segundo elemento. 3 veces 3 é 9. Isto é un terceiro elemento. Ten sentido? Así mapa ten unha técnica que usar na programadores funcionais, o novo estilo de programación para facer algo para cada elemento na súa lista. E así que soa familiar. Temos unha lista de tarxetas. Queremos obter un elemento da lista para cada un, así que imos usar o mapa aquí. Imos dicir, imos lista equals this.props, tarxetas, mapa. 

E así dado unha tarxeta, estamos vai xerar un elemento de lista con contidos que lado da tarxeta do mesmo. Nós só dicir que queremos dar a fóra as tarxetas de cuestionar tan card.question. Polo tanto, esta lista mostra unha variedade de elementos de lista ou de LI onde hai unha lista elemento para cada tarxeta, e que contén o tema tarxetas. Ten sentido? 

Cool, entón agora imos realmente imprimir iso. Entón, imos voltar un ul. Dentro desta lista non ordenada, nós só vou ir a listaxe que nos deron. Legal. 

Todo ben, entón agora este exhibición de lista funciona só atopar. Dúbidas sobre a exhibición de lista? Ten unha morea de tarxetas. Fai un elemento da lista para cada tarxeta. E poñer-los dentro dun non-ordenada lista, e dá-lo de volta. Entón agora imos actuar para que embutir iso dentro do noso programa, para que poidamos facelo, exhibición de lista. O argumento é que imos pasar á lista de exhibición? Que propiedades que imos darlle? Teña en conta que, se der que unha morea de tarxetas, vai facer a lista ver para as tarxetas. Entón o que nós pasamos aquí como o argumento? Audiencia: Unha lista de cartas? Neel Mehta ,: Si, entón tarxetas é igual a this.props.cards, non? E así o único problema é que só se pode virou un elemento de nivel superior en renderse, entón ten para envolve-lo nunha div. É estraño. Entón imos ver se iso. Será que isto funciona? 

Si, alí vai. Polo tanto, agora temos unha lista de cartas no fondo, e despois temos o noso CardView-se na parte superior, e que vai virar entre os dous lados da tarxeta. Agora que ten sentido como eu fixen iso? É, por tanto, de novo, temos dous compoñentes. As primeiras impresións de compoñentes fóra todas as tarxetas da lista. Esa é a exhibición de lista. E o segundo compoñente imprime só a tarxeta. Se darlle un certo tarxeta, que vai imprimir información sobre este tarxeta e deixalo pasar cara atrás e cara adiante. 

Polo tanto, se queremos, podemos probar e falar sobre a adición de algúns novos recursos para iso. Se non, podemos falar un pouco máis preto de velocidade do reactor, ou podemos responder dúbidas que poida ter porque estas son todas as partes centrais de reaccionar que quero falar. Podemos ir adiante. Podemos responder a preguntas. O que queiras. 

Audiencia: Pode usar JSX en JavaScript normal? Ou iso é algo que veu co [inaudível]? 

Neel Mehta ,: A cuestión é lata usa JSX con JavaScript normal? A resposta é si. JSX é só unha forma de que leva o seu JavaScript que ten HTML dentro del, e compila en JavaScript que Non ten HTML dentro del. Entón, observe isso-- así notar aquí. Isto parece que ten como div e ten cousas dentro dela. 

Que compila a JavaScript que como xera o mesmo. Eu creo que o que eu digo é que JSX é só unha sintáctica, como é un pre-procesador para JavaScript moi como PHP é un pre-procesador para HTML. JSC é un pre-procesador para JavaScript que permite poñer HTML no seu JavaScript. E por iso, se ten dereito transformador que é unha cousa chamada [inaudível] que ha transformar. O pre-procesador correcto, que vai deixar que facelo. 

Audiencia: [inaudível] Neel Mehta ,: Normalmente non é preciso para poñer HTML dentro JavaScript a menos que o seu facer Contestar. Pero pode facelo de calquera maneira. Yep? 

Audiencia: Eu creo que describira Contestar como unha linguaxe de programación funcional. Temos benvida a aprender C en CS50. C tamén é unha linguaxe funcional? Neel Mehta ,: Entón a cuestión é sobre funcional versus outro cousa chamada programación imperativa ou procesual. Hai dous tipos de programas populares. Un chámase procedemento, que é todo sobre como facer comandos, e un é funcional, que é todo de ter funcións e tendo entrada e saída das persoas. Reaccionar é un paradigma funcional. C é un paradigma moi procesual. 

E como exemplo, C, por exemplo, non fai deste xeito declarativa de facer o programa, non? Ten que dicir, imprimir esta. Cambiar esta estrutura de datos. Imprimir esta. É todo sobre os comandos. 

En Contestar, non hai que moitos comandos. É todo sobre ter compoñentes que xuntos. Son como funcións. Ten como función chamado CardView, que é unha función que ten entrada, saída, e así por reaccionar é todo sobre esta filosofía nos de having-- ten datos. Vostede pasalo a través deste algoritmo, e só pode HTML de saída que só impreso da páxina, e entón tes que constrúe-lo peza por peza. 

Entón, para deseñar unha metáfora para o que Dixo antes, vostede sabe como en Facebook, se recibe unha mensaxe, e escolle que partes para actualizar, iso é procesual. É imperativo, non? OK, eu teño unha mensaxe. Imos cambiar conta alí. 

Imos aparecer un diálogo aquí. Imos cambiar conta alí. Imos chamar iso aquí. Esa é unha visión procesual. 

Iso é o que cousas como angular, Boost, Backbone, outros frameworks usar. Reaccionar é funcional. É un xeito moi diferente de pensar sobre as cousas. El leva esta idea de teremos funcións ou algoritmos que vostede darlle datos. Vai cuspir o que debe ser, eo ordenador vai coidar de pesaxe para fóra. Non tratar con isto só. Isto fai un pouco de sentido? Si? 

Audiencia: Nunha linguaxe funcional, todo pasa dunha soa vez? 

Neel Mehta ,: Non, as cousas acontecen en orde. Como aquí aínda hai orde, pero iso non acontece pasar por orde de como Recomendo, mando, comando. Isto acontece para función lle dá saída. Pon iso noutra función. Pon iso noutro función, outra función. 

Se fai CS51, vai aprender programas funcionais un pouco fóra do ámbito desta. Pero, basicamente, o que fai Reaccionar legal é non só o fluxo de datos unidirecional eo Don virtual, pero tamén esa idea de programación funcional. E a programación funcional é moi fácil para compoñer e facer cousas legais fóra de, e é moi fácil pensar sobre e razoar sobre. Polo tanto, é outro bo sorteo de Contestar. Máis preguntas? Si? 

Audiencia: Hum, por que faría usar en vez de deixar var? 

Neel Mehta ,: Entón a pregunta é por que usa no canto de deixar var? Esta é unha cousa chamada ES6 ou ECMAScript 6. É a nova versión de JavaScript. Hai unha morea de razóns técnicas, Pero imos é unha versión mellor de var. 

É como declarar variables. Podes usar o deixe. Podes usar var. Permitir ten un grupo de técnicos reasons-- podes buscalos later --- para por que é mellor. Basicamente, ES6 ten algún bo nova sintaxe, algunhas novas na parte superior do antigo Javascript. 

Polo tanto, temos como cinco minutos. Eu só quería falar unha cousa real rápido. Se tiña algunha dúbida, imos falar sobre iso máis tarde. Pero só para iso queda trabado na cámara, só quero falar un pouco sobre como Reaccionar realmente usar nos seus programas. 

Se aquí, Facebook.GitHub.IO/react, esta é a páxina principal para Contestar e vai amosar como realmente usar Reaccionar nas súas páxinas. Basicamente, é un pouco complicado tentando instalar Contestar. Non é tan fácil como pode arrastrar e solte un JavaScript alí. 

Ten que ter o seu transformador configurado, que, como facía antes, transformar o seu JSX en Javascript normal. Ten que que vou compilar vostede ES6 á normalidade. JavaScript hai unha gran cantidade de movemento pezas que ten que facer, polo que hai unha cousa chamado Yeoman, Yeoman.io. E esta é unha ferramenta de liña de comandos que axudar a scaffold o Contestar proxectos facilmente. 

Así, pode ler máis sobre este máis tarde, pero hai algunhas ferramentas Yeoman que ofrece. Eles permiten que cree un Contestar app con todo embutido. Como vai construír en, compoñentes embutidos. Terá o seu transformador construído en. Teñen unha chea de fresco material construído en automático usando isto chamadas xeradores. 

Entón lea sobre iso, se lle gusta. Só tes que ir en Yeoman, Y-E-Ou-M-A-N, e podes atopar xeradores como estes. E cos xeradores como estes, só lle gusta un é unha liña de comandos comandos parella. Vai fóra un andamio Reaccionar toda app para ti. Só pode ir toda a tubo manual e traballo duro feito para ti, e é por iso que concentrarse só en só escribir en Contestar. 

Entón, basicamente a construción dunha Reaccionar app non é trivial. É con fío todos xuntos, pero hai son ferramentas que vai facelo por vostede. Entón, se quere facer unha Contestar app, proba facelo dese xeito. Se simplemente quere experimentar, podes probar a usar este CodePen porque este ten CodePen toda a fiación reaccionar. Eu fixen todo o traballo para ti xa. 

Entón, se quere facer como un produción para liberar Contestar app, tentar un destes xeradores. Se só quere xogar arredor, é moitas veces vale só como tentar xogar en CodePen aquí. Parece bo? Legal. 

Entón, iso é todo o que eu teño. Unha vez máis, todos os códigos e son exemplos será neste sitio. Entón, unha vez máis, non falar sobre moi sintaxe de Contestar, pero para atopar todos os pequenos detalles sintácticos, todo vai estar dispoñible neste sitio. 

Entón, eu recomendo como dar o primeiro paso. Pon-o na súa CodePen. Probe traballar en facer Lo ao segundo paso. Hai unha cuarta etapa, e só ver onde comeza a partir de aí. 

Máis preguntas, comprobe que a páxina ou enviar correo-e me. Ese é o meu e-mail. Pero eu adoro axudar con calquera preguntas que pode ter sobre Contestar. Entón, si, iso é todo o que eu teño. Grazas a todos moito para vendo ou para asistir. E eu vou tirar dúbidas pode que despois desta agora. Entón, grazas a todos por asistir.