[Música tocando] 

Neel Mehta,: Aqui vai. 

Bem, todo mundo, bem-vindo ao web aplicativos do futuro com Reagir. Este é CS50. Meu nome é Neel. Eu sou uma TA para CS50 e um estudante de segundo ano na faculdade de Harvard e um muito, muito desenvolvedor web apaixonado. Então, eu estou muito emocionante estar falando com você hoje, se você está aqui ou em casa assistindo, sobre Reagir, que é, de novo como eu disse, o futuro dos aplicativos da web. 

Então Reagir é um framework web. E como eu tenho dito para algumas pessoas aqui, um quadro é apenas uma conjunto de ferramentas que pode utilizar para estruturar e construir seu aplicativo da web. E aplicações web são, novamente, os sites que são interativos como o Facebook, Twitter.com, Instagram.com, qualquer que seja. 

Assim, o Facebook é um framework web que foi desenvolvido pelo Facebook um par de anos traseira-- Reagir é. Ele já foi usado em Facebook em seus aplicativos móveis eo aplicativo web, Instagram. Khan Academy é outro proeminente dos primeiros a adotar Reagir. 

Tem sido realmente recebendo extremamente popular. Se você nunca usar coisas como Angular ou Backbone, este é da mesma família, mas tem desde agora superar a sua popularidade. É a coisa nova quente. É realmente, realmente enorme. 

E assim Reagir é bom não apenas como um framework web para interfaces de construção. É bom para a construção de interfaces web. Há também uma coisa Reagir chamado Native que permite construir interfaces para Android e iOS e talvez outras plataformas no futuro usando apenas o mesmo código JavaScript. Você pode usar exatamente o mesmo Código JavaScript para renderizar sites, para tornar os apps Android e iOS apps. 

É um momento muito, muito emocionante. É uma oportunidade muito, muito legal. É realmente uma teia universal ferramenta de desenvolvimento de interface, por isso é muito, muito coisa importante a saber. E, como eu estava dizendo às pessoas antes, este, penso eu, vai mudar o modo como construir aplicações web para sempre. Por isso é talvez um exagero pouco, mas eu acho que é uma coisa muito boa para saber. 

OK, então o que é Reagir? Reagir é um quadro que você pode utilizar para a construção de interfaces. Uma interface é, novamente, uma página da web, certo? Então aqui está Instagram.com, usos Reagir. 

Reagir é construído sobre a idéia de componentes. Um componente é um HTML elemento em esteróides, por isso um elemento HTML é como um botão. É um parágrafo. É um cabeçalho, certo? E Instagram vai usá-los, mas também utilizar componentes de React. 

Reagir componentes são elementos HTML souped-up que têm o seu próprio comportamento contido dentro delas. Assim, como exemplo, que se poderia um elemento de tempo, um componente de tempo, que conterá como o carimbo de tempo, você sabe, um componente que perfil irá conter a imagem do perfil e o nome da pessoa. Ele pode ter um contador semelhantes, os quais pode contar como o número de gostos, e se você clicar nele, ele vai aumentar o número de gostos. Um componente é apenas um monte de código HTML que tem algumas funcionalidades embrulhado dentro dele. Então, é como um elemento HTML em esteróides, como eu disse antes. Você pode tomar esses componentes, e você pode colocá-los juntos para fazer novos componentes, Neste caso, um componente post, que contém todas essas coisas. Seria conter Tempo, do perfil, LikeCounter, talvez o comentário e talvez a própria imagem. E assim aplicações web são apenas construído tomando componentes e colocá-los juntos. Um feed Instagram é nada mais do que um monte de lugares, um após outro, cada post contém como a Time, Perfil, LikeCounter, e assim por diante. É uma espécie de como construir uma casa. Você não constrói a casa de cima para baixo. Você toma components-- você tomar como o banheiro. Você pega o bedroom-- você furá-los juntos, e você tem um novo componente. Você tem uma nova parte da casa. 

Então Reagir é todo construído em torno de essa idéia de componentes que são interativos, que são declarativas. Como você acabou de dizer o que um perfil é, ela torna-lo. Eles são combináveis. Você pode tomar um tempo e um perfil, colocar los juntos, fazer algo melhor. E eles são reutilizáveis, portanto, se você tem o código-fonte de um post, você poderia incorporar isso em qualquer lugar. 

Você pode embutir um Instagram coisa em seu próprio site. Você pode embutir no Facebook, por exemplo, contanto que utiliza React bem. Então componentes são realmente, realmente, realmente blocos de construção poderosos da web que pode ser usado em qualquer lugar e colocá- juntos para fazer novos blocos de construção. Isso é muito, muito visão geral de alto nível. Então, novamente, se você tem quaisquer perguntas em qualquer ponto sobre a filosofia do reactor, o codificação, para me parar, e deixe-me saber. 

OK, portanto, reagir é legal porque tem uma maneira diferente de olhar em como você construir aplicações web. Você provavelmente já ouviu falar de MVC, um modelo que você controla na CS50 ou o que quer outras classes de sondagem que você usa. E a maioria dos quadros são construído em torno da idéia de MVC. Reagir não é. Reagir é construído em torno da idéia do fluxo de dados unidirecional como visto por este gráfico ou gráfico aqui. 

Basicamente, você tem uma fonte de dados. E a fonte de dados irá decidir como colocar para fora determinados componentes. E os componentes serão então, quando elas mudam, eles vão te dizer o fonte de dados para mudar. 

Para usar o Instagram exemplo, você pode ter uma lista de objetos como pós- em um banco de dados ou algo assim. Que os dados. E então nossos componentes pós- vai levar esses dados, e usar esses dados para processar uma coisa na tela. Isso é o que a seta a partir dos dados de componente é, e, em seguida, que a mesma informação é usada para processar um grupo de componentes. 

Em Facebook Messenger, para exemplo, que é Reagir, você pode ter uma lista de mensagens como sua fonte de dados. E isso não rendem somente a lista de mensagens mas também a lista de amigos que você tem. Você tem a contagem não lida. Talvez também tornar a coisa Facebook que está no fundo do Facebook.com. Os mesmos dados é um fonte única de verdade e que faz com que uma grande quantidade de componentes a serem prestados. E sempre que um desses componentes é alterado, ele vai voltar e muda a fonte de dados. 

Você enviar uma mensagem, certo? Isso muda a fonte de dados. Você ler as suas mensagens, para que você não lida definir a 0. Isso muda a fonte de dados. E note que todos estes de uma arrow voltar para os mesmos dados fonte, assim você sabe, dado um determinado conjunto de dados, você sabe exatamente o que o A página está indo olhar como. É determinista. Você sabe, dadas certas dados, o que a página está indo olhar como. Você pode prever como ele vai se comportam e como as coisas estão indo para o trabalho quando eles estão juntos. 

E se eu tivesse um milhão de componentes aqui, ele iria se comportar o mesmo, certo? Você não teria qualquer interconexões estranhas. Uma dados rendeu um milhão de componentes. Um milhão de componentes poderia voltar atrás e editar os dados. E assim isso é muito bom. Estamos construindo composable, facilmente aplicações web escaláveis. 

Você tem uma fonte de dados, a fonte da verdade. Que informa os seus componentes como colocar a página, e os componentes serão lidar com interação. E se eles querem mudar coisas, basta voltar e dizer a fonte de dados para mudar. Faz sentido? Então Reagir é toda sobre a compreensão como construir um componente e como fazer o seu componente interagir com o mundo exterior. 

Fazer o interagem componente com o mundo exterior utiliza outra tecnologia Fluxo chamada, que é uma estrutura que é adicionado no topo da React. Nós não vamos falar sobre isso. Vamos falar mais sobre, dado dados, como você pode tornar um componente? 

E assim Reagir é muito legal porque você pode usá-lo com qualquer back-end que você deseja. Se você tem um back-end como Python, se o seu Python pode cuspir alguns dados, Reagir pode torná-lo. Se você há saídas JS de dados, torna React. Ruby rails com dados, torna React. 

Então Reagir é basicamente uma web view-- um front-end com componentes para qualquer fonte de dados que seja. E assim vai a partir de fonte de dados para reagem componentes é muito fácil. Indo a outra maneira é um pouco mais difícil. Que usa Flux como eu mencionei antes. Nós não vamos entrar nisso. Vamos concentrar mais no dados-a-lado dos componentes. Desta forma, você pode fazer legal, divertimento aplicativos da web. Não vai afetar o mundo exterior por agora, mas isso é outra história. 

OK, então se você estivesse aqui para o meu último seminário você vai saber que todo o código para A palestra de hoje vai ser neste URL aqui, desculpe, este URL aqui. E, basicamente, nós estamos indo para ir por quatro etapas, talvez cinco, provavelmente não cinco. Nós vamos passar por quatro etapas de construção de uma amostra Reagir app. E assim todo o código-fonte para cada passo do caminho vai ser aqui mesmo, então se você está acompanhando em casa, sinta-se livre para ler este código. Se você está seguindo ao longo aqui, nós estaremos mostrando na tela, por isso não se preocupe com isso. Mas se você está em casa, sentir livre para visitar este site. E, sim, você deve ser capaz de obter todo o código que você já precisa aqui. Portanto, é uma boa folha de fraude, bem para as suas futuras aventuras com Reagir. Cool, por isso, se todo mundo que está aqui, e mesmo se você estiver em casa, puxar para cima este site, is.gd/cs50react, sem capital, sem sublinhado, sem nada. 

Você verá uma página que parece um pouco como isso. Esta é uma coisa chamada CodePen. CodePen é um colaborativa ambiente de codificação com o qual eu posso escrever o código aqui, e ele vai ser enviado automaticamente para você. E desta forma, eu posso escrever código. Eu posso executar o código aqui. 

Para example-- e se reloads-- ver, Estou executando o código JavaScript na página aqui, e ele vai tornar automaticamente uma página web com este código JavaScript. E assim esta é uma maneira para nós para experimentar código realmente rápido sem ter que usar nossa ID ou utilize nossa máquina local como queiras. É uma maneira muito rápida para você maquete e testar diferentes tipos de código. 

Então, eu estou indo tomar exemplo de código, colocando-o aqui. Nós vamos estar trabalhando com ele. E se você está em casa, você pode puxar isso também. E eu já instalado Reagir aqui, então você pode apenas escrever seu próprio código aqui, e experimentá-lo como seu próprio parque infantil. 

Sim, se todos abrir este link aqui. Por favor me dê os polegares uma vez que você tem que abrir. Cool, cool cool. Não há nada aqui para agora, mas vamos mudar isso muito em breve. 

OK, então Reagir é um JavaScript biblioteca, e como tal, requer o conhecimento de JavaScript, que é a linguagem de programação web. E ele está sendo usado para outras coisas Agora também, mas principalmente a desenvolver web língua, por isso, se você não estiver familiarizado com que, ler um site chamado JSforCats.com. É maravilhoso. Você pode aprender JavaScript em meia hora. É incrível. 

Então, dê uma lida. Nós também um monte de HTML aqui porque nós estamos projetando páginas da web, é claro. Portanto, se você não estiver familiarizado com HTML, vá para HTMLdog.com. Eu acho que aprender Reagir é um milhão de vezes mais fácil se você já conhecer os blocos de construção. Se você tiver os componentes, é fácil de fazer um componente maior. Isso é Reagir linguagem para você. 

Então vá em frente e dar- essas coisas de uma leitura. Pausar este vídeo. Dê uma lida, se você é em casa, se você não está familiarizados com HTML ou JavaScript OK, então o que nós estamos indo para fazer é que vamos fazer um app flashcard muito básico usando Reagir. Nós vamos ter um flashcard. Você pode virar o cartão e para trás. E nós também vamos ter uma lista de todas as cartas que temos, e se estamos nos sentindo ambicioso, poderíamos estar capaz de alternar entre carros, clicando sobre eles. 

Mas este é, de sua nua ossos, uma forma muito simples Reagir app. E por isso esta é, na verdade, não trivial de implementar, mas vamos mostrar que, se você fizer este, é muito, muito fácil de estendê-lo se outras pessoas ajudá-lo com isso. Então, vamos passar por quatro etapas começando do zero para construir este. 

OK, então as quatro etapas, vamos começar com o primeiro passo. O primeiro passo vai ser a construção de seu primeiro componente. Como eu disse antes, um componente em Reagir é apenas um elemento HTML com esteróides. Especifica o código HTML e algum comportamento, e ele vai especificar como as pessoas pode interagir com ele como ele teria estado interno. Como um botão vai saber como quantas vezes ele foi clicado por exemplo, e ele vai saber como colocar a si mesmo. 

Então, vamos em frente e construir o nosso primeiro componente usando JavaScript. Então, se a sintaxe parece estranho, isso é porque ele é tipo de. Então, mais uma vez, vamos para fazer uma variável chamada aplicativo usando a palavra-chave deixar, que faz com que uma variável, deixe App igual React.createClass. 

Reagir é uma biblioteca e possui a criar função de classe. E esta função é um pouco de código que você pode usar para criar um novo Reagir tipo de componente. E assim React.createClass faz com que um componente, e este componente ser capaz de fazer coisas. A principal coisa que pode fazer é torná algo, render como uma função. 

Mais uma vez, se este índice não é óbvio para você, eu recomendo que você vá sobre JS para gatos e check-out. Que é ampliada bem o suficiente? Frio. 

Assim, cada necessidades de componentes para ter uma função de renderização. A função de tornar diz, o que posso imprimir na tela? Mas é o componente inútil se isso não acontecer sabe o que imprimir na tela, assim você precisa ter uma função de renderização. 

Então, na coisa rende, você só precisa retornar algum HTML. E o que é legal é que há uma coisa chamada JSX, que é uma extensão de JavaScript que é usado por reagir. Ele permite que você escreve HTML para dentro de seu javascript, o que soa meio estranho quando primeiro você pensar sobre isso, mas faz muito sentido depois. Assim, podemos fazer isso. Se você estiver familiarizado com HTML, eu sei temos um div com um propósito geral recipiente para o material. Podemos voltar um div, e no interior este div, podemos colocar coisas. 

Então, vamos dizer que queremos tornar apenas um flashcard straight-up para agora. O flashcard, eu diria, terá uma pergunta e resposta. Então, dentro desta div, vamos imprimir um parágrafo que diz question-- Qual é o resposta final à vida, o universo? E então a resposta é vai ser, naturalmente, 42. 

Que não veio bem a todos. Sim, então basicamente você pode realmente escrever HTML dentro do seu JavaScript. E isso vai ser impressas na tela. Então, vamos experimentá-lo. 

Então nós temos nosso componente. Nós precisamos dizer Reagir a colocar o componente na tela assim React.render, por isso perceber que nós app tratar como qualquer outro elemento. Nós escrevê-lo como ele era um elemento HTML. Como em vez de dizer como img para imagem ou p para o parágrafo, você escreve App, por isso é App tratado como um elemento HTML. Como eu disse antes, é um elemento em esteróides. 

Então você processar App, e você dar-lhe um lugar para colocá-lo. E é assim que puder diga a ele onde colocá-lo. Eu criei um div simples na página chamada com uma ID de página, e é aí que o elemento está indo para ir. 

E nós não estamos indo para executar com HTML. Basicamente, isto vai ficar colocar dentro deste elemento de página que temos na tela. Então, ele é executado este código, e ele desenha esta coisa na tela, então aqui estamos. Fizemos o nosso primeiro componente Reagir. 

Então, assim como um resumo, fizemos delicadamente um novo tipo de componente, certo? Isso é o que o React.createClass. E em que componente, nós disse-lhe o que deve fazer. Sempre que este componente é o de ser impressa sobre a tela, ele irá imprimir o div com os dois parágrafos dentro dele. 

E o que fizemos, fizemos um novo aplicativo usando a notação app ângulo de montagem. Nós dissemos a ele para colocá-lo dentro do elemento principal. E assim que eu fiz, ele criou um novo aplicativo a partir desse modelo. E então eu disse a ele para torná-lo. Por isso, disse, OK, app, o que eu devo imprimir? App diz, vai imprimir uma div com dois parágrafos dentro dela. E voila, há nossa div com dois parágrafos dentro dele. Fazer sentido até agora? 

Assim, mais uma vez, todo o desafio de React é apenas saber como fazer componentes. Como fazer com que o componentes trabalham em conjunto. Agora que fizemos o nosso primeiro componente, vamos voltar e fazer componentes personalizável. Então você sabe como em HTML você pode dar suas aulas botões? Você pode dar a seus âncoras a href. Você pode dar a seus inputs um tipo, certo? Você pode dar mais personalizado Propriedades para todos os seus elementos para torná-lo mais interessante. E nós, na verdade, pode fazer exatamente a mesma coisa. 

Então, digamos que queremos que o nosso app para ir prestar qualquer cartão. Agora nós apenas rendeu um cartão codificado. Nós sabemos que há apenas um cartão que pode fazer, por isso estamos vai tentar mudar isso agora assim que nós podemos apenas dar-lhe algum cartão. Ele vai imprimir o cartão. 

Você deveria tentar e fazer o seu componentes a um propósito muito geral. Então, dessa maneira eu poderia enviar e-mail este meu amigo e ser como, o que quer que você tem flashcard, apenas alimentá-lo em aqui, e ele vai fazê-lo por si só. Você pode colocar outro as coisas em seu próprio aplicativo. 

Mas primeiro, vamos quebrar esse -se em duas componentes, mas queremos separar o cartão impressão de parte a parte real app. Então o que podemos fazer é nos pode mudar isso a partir da App para CardView, apenas um novo nome para o aplicativo, e nós podemos fazer um novo componente chamado App, para não ser confundido com o antigo App. Nós temos os createClass, e como em HTML, você pode ninho Reagir componentes um dentro do outro. 

Então, nesta função render, função CardView retorno, e esta é exatamente a mesma coisa. Veja por que é a mesma coisa? Em vez de prestar apenas o app que tem a div e emparelhamento dentro dele, o app torna o CardView, eo CardView torna a div e parágrafo. Portanto, este é o nosso primeiro exemplo de elementos de nidificação dentro de si. Isso faz sentido? Então, novamente, temos um elemento CardView. Temos elementos app que é maior do que. 

OK, por isso queremos que o nosso CardView-- se dar uma boa CardView um determinado cartão, ele vai imprimir para fora para você, certo? Então, primeiro, precisamos fazer um cartão, então vamos fazer um objeto de cartão. Então deixe meu cartão equal-- se todos vocês estão familiarizados, este é apenas o processo de tomada de notação objeto em JavaScript. É como uma espécie de struct em C, então fizemos um cartão, e agora nós podemos passar este cartão como uma propriedade ou como um atributo em HTML terminologia para nosso aplicativo. Assim, podemos fazer isso, App cartão é igual MyCard. 

Você sabe como na entrada, você faz tipo de entrada é igual a de texto ou botão classe é igual a btn para inicialização ,? A mesma idéia, equals-- cartão App você tem que colocar as cintas aqui-- Cartão App igual MyCard, de modo que este diz que temos esse objeto cartão. Vou passá-lo como um propriedade para o componente app. E este componente App ser capaz de acessá-lo e fazê- coisas interessantes com ele. 

Assim, o nosso app vai ser dado um cartão, então por enquanto, vamos ter o app apenas dar- a placa para a CardView si mesmo, porque como o app não é vai saber o que fazer com ele, por isso vamos dar-lhe com o CardView. Então, vamos passá-lo a mesma forma, o cartão é igual, e de modo que cada componente pode aceder a coisas que tem sido dado a ele. Eles podem acessar as propriedades que foram dados a ele usando esta sintaxe, this.props.card. 

Então o que acontece aqui é você tem o objeto MyCard. Você passá-lo para o aplicativo usando cartão App igual MyCard. Esse objeto cartão é dada ao seu app. O aplicativo pode acessá-lo como this.props.card. É como uma espécie de imagem sabe o que é fonte é. 

Este aplicativo sabe o que é cartão é, e ele pode fazer coisas com ele. Ele pode fazer cálculos. Pode tomar decisões baseadas fora dele. 

Por agora, eu ia passar this.props.card na CardView. Fazer sentido até agora? Ela vai fazer mais sentido agora. 

OK, então agora estamos em CardView. O nosso CardView, dado o cartão, deve imprimir sua pergunta e resposta. Agora nós apenas impresso algumas perguntas e respostas codificadas. Precisamos descobrir out-- precisamos para pedir o cartão que eles nos deram qual é a pergunta e resposta, e em seguida, imprimir isso na tela. 

Assim, podemos fazer isso aqui. Em tornar begin-- primeiro fazer igual. Então, o que estamos fazendo aqui é sabemos que as cartas são-nos dado a uma propriedade, certo? É-nos dada como entrada. Como é quase como argumentos para uma função. O cartão é um argumento quase a esta CardView. 

Nós vamos extrair isso, e colocar em que a pergunta variável. Certifique-se de que a resposta foi para a resposta variável. Solicita que o cartão de responder. E agora que temos estes, em vez de imprimir o texto, nós estamos indo para imprimir o que quer que eles nos deram. 

Portanto, este stuff-- então vamos para colocar para fora Pergunta Resposta. Vamos ver se isso funciona. Legal, então vamos percorrê-lo mais uma vez só para ter certeza. 

Então, meu cartão é o cartão de objeto, e nós estão dando esse cartão para o aplicativo. E o app vai levar a cartão e dá-lo ao CardView. E este CardView diz, se você dá-me qualquer objeto flashcard, Vou imprimir a sua pergunta e sua resposta, certo? 

Então, o que eu poderia fazer é que eu posso enviar este código, o primeiro como 10 linhas de meu código, para o meu amigo. Ele poderia incorporá-lo em sua própria aplicação. E enquanto ele fazia a mesma coisa, como cartão de CardView é igual a esta, contanto que ele criou o CardView e deu-lhe a informação correta, ele poderia tornar seu próprio cartão. E assim desta forma, é realmente um forma legal para você construir componentes que usam uns aos outros, certo? Este cartão, eu poderia publicar este CardView na internet, e as pessoas seriam capazes de usá-lo. Então, basicamente, é como um dos funções padrão na biblioteca C. 

É uma função onde alguém escreveu ele. Você dá uma certa entrada. Ela vai produzir um determinado produto. Você não se importa como ele funciona internamente. Contanto que você dê a ele o direito entrada, ele vai fazer a saída correta. 

E um componente pode ser pensado da mesma maneira. Isto é como CardView uma função de biblioteca. Se você dar-lhe algum cartão como uma propriedade, ele vai imprimir o conteúdo dessa carta. Como se eu mudar o meu cartão de em vez disso ser como o que é 5 plus 37, ele irá atualizar em conformidade. Então, só mudando a entrada, ele ganha uma certa saída. Assim, você pode pensar em componentes quase como funções desta forma, que você pode colocar juntos. Você começa entrada, como este CardView como a entrada, você recebe saída. Neste caso, a saída é o código HTML. Fazer sentido até agora? Cool, então, novamente, as propriedades são como você pode passar informações para dentro e para fora de componentes. 

OK, então vamos fazer isso coisa interativa. Agora é meio chato. O que é [inaudível]? Você pode imprimir alguns para fora, mas isso é tudo que posso fazer. 

Então, vamos voltar para o velha questão apenas por agora. Ok, então agora mesmo estes componentes são chatos porque tudo que eles fazem, eles ficam de entrada. Eles fazem de saída, certo? Isso é meio chato. Nós queremos ter a nossa componentes para ser capaz de ter algum tipo de estado interno, como se lembrar de algo. 

Para um flashcard, por exemplo, que tipo de estado pode você quiser lembre-se para um flashcard? O estatuto temporário você pode querer lembrar para um flashcard em um flashcard app? AUDIÊNCIA: Se ela já virou? Neel Mehta,: Sim, certo. Então você pode querer manter pista de que você está virado para cima ou são você face para baixo no cartão. No Facebook, por exemplo, você faria quer se lembrar onde no feed de notícias é você gosta ou que é perfil que você está fazendo agora. 

No Messenger, como o texto que você digite na caixa de entrada, certo? Se você atualizar a página, ele vai embora. Mas você realmente não me importo. É apenas temporário. Sim? 

AUDIÊNCIA: [inaudível] Neel Mehta,: Como um flash cartão, como você pode estar vendo o lado pergunta ou lado a resposta? 

AUDIÊNCIA: OK. 

Neel Mehta,: Como uma flashcard dois lados, certo? Sim, assim que você quer têm essa idéia de empresa Eu tenho propriedades, que é como entradas, mas o estado, que é temporária, uh, onde você está na página, certo? Mais uma vez, eu disse no Facebook Messenger, eu tenho como que pessoa você está vendo Facebook ou quem é o perfil, certo? 

Isto é apenas temporário. É importante para mostrar ao usuário o que está acontecendo, mas atualizar a página. Realmente não importa. Portanto, é estado temporário, por isso, todo o estado dele. 

Então, novamente, não há estado e adereços. Props é dada entrada a partir de sua fonte de dados. Estado é como padrões. É como coisas que faz a coisa interactiva. 

Assim, em nosso CardView-- vamos ter nossa CardView-- por isso era bom. O que nós vamos fazer aqui, nós vamos para tocar CardView e só CardView. E por isso o meu amigo que tem isso, eles não notar qualquer diferença. Eles não teriam que mudar qualquer um dos seu próprio código, mas eles veriam a sua CardView foi envenenado. Isso é uma parte agradável sobre componentes. 

OK, portanto, em nosso CardView, vamos tentar e controlar se estamos fase up ou virado para baixo. Em Reagir fazemos isso pela primeira especificando o estado inicial. Onde é que o cartão de começar? 

Então, ser uma função chamada getInitialState funcionar, e nós retornar um objeto. Este objeto contém algum estado, e um estado é apenas um par chave-valor. Como em instruir, você tem uma chave e um valor, você tem como nome é uma string. 

Neste caso, vamos dizer frente é verdadeiro. Este diz que temos um Estado. Um dos componentes do estado é um atributo chamado frente. [Inaudível], então por padrão, estamos na frente do cartão, e nós podemos mudar isso como nós virar o cartão. Faz sentido? 

OK, por isso, render, agora, estamos mostrando a pergunta ea resposta. Agora o que devemos fazer é mostrar a questão se estamos na frente do cartão de modo a resposta é para a parte de trás do cartão. É por isso que todos fazem o cartão interactiva. Então, vamos tentar e para este aqui. Bem, primeiro faça apenas uma variável. Podemos perguntar agora this.state.front. Temos acesso a afirmar o mesmo que adereços de acesso, de modo this.state.front. 

Se estamos à frente, em seguida, o texto é this.props.card.question. Se estamos na frente do cartão, vamos tentar e garra a questão do cartão. Caso contrário, se nós estamos na parte de trás do cartão, o que vamos fazer? 

AUDIÊNCIA: A resposta? 

Neel Mehta,: Sim, assim que o texto é igual a this.props.card.answer. Mas se você notar, estamos usando o Estado a tomar uma decisão porque agora o componente terá uma aparência diferente baseado fora como estes interagem com ele. Então, ao invés de imprimir isso, vamos apenas imprimir o texto. Cool, assim agora, como você vê, vemos apenas a questão. E se eu mudar o estado manualmente aqui a frente é falsa temos 42 volta. 

Então, novamente, este componente tem seu próprio estado. Como um botão sabe se ele foi pressionado ou não, esta coisa sabe qual é a parte da frente ou na parte de trás. Por padrão, ele está na frente. E, em seguida, se é na parte da frente, vamos imprimir a questão. Se é na parte de trás, vamos imprimir a resposta. Assim, mais uma vez, as informações dada é a mesma. Ele apenas parece diferente com base em como você programá-lo. Assim, por exemplo, Facebook Messenger, mesmo se você receber a mesma fonte de dados, ele pode ser diferente porque o estado é diferente. Você está olhando para um A mensagem de diferente pessoa. 

OK, então isso é tudo bem e bom, mas agora o que é, na verdade, tornar-nos capazes de mudar, se nosso cartão é frente ou para trás. Nós podemos fazer isso adicionando um flip botão, um botão para que o cartão vai virar o cartão, se é [inaudível]. Então, vamos adicionar um botão aqui, este botão, e este botão irá dizer flip. 

E assim agora, não faz nada. Ele só parece bom. O que podemos fazer é que podemos acrescentar um clique manipulador, onClick é igual this.flip, e vamos definir aleta mais tarde. Mas, basicamente, onClick é uma função que é chamada quando o usuário clica nele. 

Assim, o botão vai saber quando ele foi clicado. Fui ele foi clicado, ele vai virar o cartão. É uma espécie de como a sua entregador de pizza. Você é como, bem, sempre que alguém me chama, eu vou entregar pizza, certo? 

Você registrar este ouvinte. Você escuta para um evento. Você é chamado, e quando o evento acontece, você fazer alguma coisa. Você começa pizza. Neste caso, quando você está clicado, você virar o cartão. 

E por isso precisamos definir um função que vai virar o cartão, então vamos escrever esse direito aqui, flip função. E então o que você acha que virar vai fazer? Novamente, isto é chamada quando clicamos no botão flip. O que deve o flip função fazer? 

AUDIÊNCIA: Mudança this.state.front de verdadeiro para falso, falso para verdadeiro. 

Neel Mehta,: Sim, assim que tomar o que quer this.front é-- o estado frente é. Levar o estado à frente, se é verdade, torná-la falsa. Se é falso, torná-lo realidade, certo? Então, vamos tentar isso. 

Você não pode alterar o estado apenas fazendo this.state. Você não pode fazer isso. Você não pode fazer isso. Você tem que usar uma função chamado this.setState. 

Então você pode dizer this.setState frente cólon, onde esta, mais uma vez, a exclamação ponto significa o oposto. Eu acho que se isso. state.front É verdade, ele vai virar falsa. Então, vamos definir o estado de verdadeiro para falso. Se é falso, vamos configurá-lo falso para verdadeiro. 

Basta notar que definir e obter um pouco diferente, e então vamos tentar isso. Bada bing, olhe para isto. O botão FLIP agora alternar a frente para trás Estado. 

E isso aqui é onde você vê um pouco da magia do Reagir. Como nós nunca disse a ele para voltar a tornar. Nós nunca disse que redesenhar nada. Se você está fazendo isso sem reagir, você ter como quando o a-- aleta botão é clicado, você teria que dizer-lhe para manualmente renderizar novamente, certo? 

Reagir é muito legal em que se você dar-lhe um certo estado e propriedades, ele sempre irá processar exatamente a mesma coisa. E assim, quando nós já mudamos o Estado e as propriedades, reagem apenas re-torna a coisa toda. Ele sabe que há uma um-para-um correspondência entre Estado e de parâmetro e HTML. Assim, sempre que um desses mudanças por meio de um conjunto de estado, ele vai mudar a forma como o salário é re-processado. E então basicamente Reagir é como esperando por você para mudar. 

Sempre que se muda alguma coisa, ele vai voltar a processar a página inteira. E se isso soa ineficiente, é porque ele seria, mas reagem usa uma coisa chamado de DOM Shadow. Em vez de desenhar a página diretamente, mantém a árvore HTML virtuais na memória. 

Você sabe, HTML é como uma árvore, como uma estrutura de dados hierárquica. Ele mantém uma árvore falsa na memória, e sempre que você atualizar a página, ele vai chamar uma outra falsificação árvore, e ele vai calcular o que ele precisa mudar para tornar o página para fazer as duas árvores iguais. Então, basicamente, praticamente re-torna muito. E então ele só muda o gosto página em pequenos ajustes conforme necessário, por isso é muito, muito, muito eficiente. 

Então, basicamente Reagir vai sempre que mudar alguma coisa, ele vai voltar a processar a página virtualmente. Ele vai descobrir o que eu preciso mudar para tornar a página real refleta a página virtual, e ele vai fazer isso. Esse é o DOM virtual. É um dos maiores características de React. 

Isso faz sentido? Alguma pergunta? Sim? 

AUDIÊNCIA: Como funciona comparar ainda para o MVC que falamos recursos como antes. 

Neel Mehta,: Sim, a questão é a forma como ele se compara a MVC? Você perguntou sobre recursos. Bem, vamos falar sobre como ele funciona. 

Em MVC, você atualizar o modelo. Neste caso, nós teríamos um modelo de cartão. A vista teria o aleta botão, eo controle teria a função de flip. Assim, a vista contaria a controlador de flip flip. Virar diria ao modelo para mudar, certo? 

E assim, quando você faz um MVC, você ouça o modelo para mudar, e você re-processar a visão em conformidade. Ou você apenas tem que gostar tem o controlador. Aguarde até que o modelo de mudar, e, em seguida, escolher uma parte de como uma coisa mudar. Aqui nós temos uma coisa, mas em um grande app, você tem que gostar de lembrar o que a mudança de cada lugar, por isso é um pouco chato. E assim Reagir é bom porque tem um Dom sombra. Ele pode dar ao luxo de apenas reescrever a coisa toda. Você não tem que seletivamente como adivinhar o que para atualizar. 

No Facebook, se você gosta obter uma nova mensagem, em MVC, você tem que lembrar, OK, mudar as coisas na parte superior do página, o ícone da mensagem. Também pop uma nova janela na parte inferior. Também fazer uma coisa nova nessa janela. Também reproduzir um som. 

Isso é um monte de coisas indo para fora ao mesmo tempo. E por isso, se você não fizer isso ter um Dom sombra, você tem que fazer isso manualmente porque você não pode se livrar de toda a página. Você não pode dar ao luxo de, assim que você tem para mudar cada coisa manualmente, que é realmente irritante no MVC. 

Assim, a fim de ser parcimonioso, eles seletivamente atualizar a página, o que é eficiente, mas também irritante. Em Reagir, por causa da sombra Dom, você tem as duas coisas gratuitamente. É eficiente, pois da sombra Dom. O gargalo está atualizando a página. Ele não está fazendo a manipulação de árvore. Você começa a eficiência. Você também terá a facilidade de uso, porque se você acabou de reescrever a página inteira, mas você só sabe, tudo bem, as coisas vai estar na página em algum lugar. Pode ser em um lugar diferente, mas ele vai estar na página, certo? Então você só re-renderizado a coisa toda virtualmente, e você pode fazer um par alterações na própria página. 

Então, novamente, em MVC você teria que escolher entre facilidade de uso e eficiência, e reagir, você tem as duas. Então é melhor. Faz sentido? Sólido. 

OK, então vamos ver vamos falar um pouco sobre o passo 4, como podemos incorporar componentes. Então nós temos isso agora. Nós temos o nosso pequeno botão legal. Nós podemos lançá-lo para trás e diante, e isso é tudo que ele faz. Vamos dizer que nós queremos tem outro componente. Digamos que o nosso app flashcard deve contém uma lista de todos os cartões que você tem, o que significa que deve ter outro componente. Bem, talvez chamá-lo de uma lista. Vamos fazer uma exibição de lista que coexiste com a CardView, e esta visão de lista e CardView vai gostar de trabalhar em conjunto. E você pode combiná-los para tornar o nosso app para você. 

Então, primeiro, vamos fazer uma mais algumas cartas direito. Vamos dizer, o que os cartões? E só então eu não tenho que aborrecê-lo com digitando-o, Eu só vou copiá-lo a partir daqui. E então eu estou indo para não dar-lhe apenas um cartão. Eu vou dar-lhe uma série de cartas. Então, primeiro os aplicativos vai quebrar por enquanto. Tudo bem, então vamos fazer este capaz de lidar com vários cartões. Então, primeiro, vamos dar-lhe, não apenas um cartão, mas uma série de cartões, como uma lista de cartões. E, neste caso, temos três deles. 

Tudo bem, então é assim app indo para obter uma lista de cartões, e ele vai decidir qual um para mostrar ao CardView. O CardView só pode tornar um cartão, mas o app obtém uma lista de todas as cartas, certo? 

Então, quando você descobrir um cartão a dar a CardView, como é que você acho que você pode ser capaz para tomar uma decisão sobre qual cartão mostrar? Para lhe dar uma dica, é temporariamente Você vai estar vendo um determinado cartão. Se você atualizar a página, você vai apenas voltar para o primeiro cartão. Isso é OK, porque isso é temporário. Que técnica poderíamos usar? 

AUDIÊNCIA: Você poderia fazer uma variável assim como você tinha frente. Isso é verdade, você poderia tem cartão atual é igual a 1? 

Neel Mehta,: Sim, por isso, quer ter estado, certo? Você usaria Estado na componente para descobrir qual placa queremos chegar. Como nós temos uma lista de todas as cartas, vamos usar o estado para descobrir um dos primeiro cartão, segundo cartão, cartão terceiro, e assim por diante. 

Assim, um aplicativo para um aplicativo terá uma têm a função getInitialState, retorno função getInitialState. E nós vamos apenas dizer activeIndex 0. Então, agora a nossa aplicação tem seu próprio estado. 

E agora sobre render, para descobrir um cartão, vamos apenas ir para a matriz e agarrar a coisa nesse índice. Escolha um cartão this.props.cards iguais this.state.activeIndex. Então, como você vê aqui, os adereços e o estado realmente trabalhar juntos. Portanto, agora que temos o nosso ActiveCard, vamos chamá-lo ActiveCard, e vamos ver se isso funciona. [INAUDÍVEL] 

Oh, que foi um erro de texto. Ah. 

Cool, sim, então agora nós estávamos de volta para onde estávamos antes, certo? Programa antigo mesmo, exceto agora podemos apoiar uma lista de cartões, e não apenas um cartão. E agora, mais uma vez, se mudamos o activeIndex, podemos ir de 0 a 1, e agora que segundo cartão, e depois fomos a 0. Então aqui está um novo turbinado com a versão do nosso. 

OK, então agora vamos dar uma vista de lista que mostra todos os cartões em seu programa, por isso vamos fazer uma nova componente chamado listView. Vamos listView igual react.createClass. Por isso, queremos prestar desordenada listar com um item da lista para cada cartão. E assim temos um monte de cartões. Queremos um item da lista para cada cartão, certo? Poderíamos fazer um loop for ou algo para fazer um novo item da lista. Mas a maneira como você fazê-lo em Reagir, usar uma coisa chamada mapa. Map é uma ferramenta ou uma função que você usa que, para cada item, executa alguma função, toma valor de retorno, e dá-lhe de volta. 

Assim, como um exemplo, temos a matriz 1, 2, e este function-- 3.map é um atalho para um function-- x seta x vezes x. Este diz, para cada número em 1, 2, 3, tomá-lo. Quadrado-lo e devolvê-lo. Então, o que você acha que 1, 2, vai para 3.map x x tempos x lhe dá de volta dada que esta função é executado em cada elemento dessa matriz. 

AUDIÊNCIA: 1, 4 9? 

Neel Mehta,: Sim, 1, 4, 9 porque você faz 1 vezes 1. Isso dá-lhe um. Esse é o primeiro elemento. 

2 vezes 2 é 4. Isso é um segundo elemento. 3 vezes 3 é 9. Isso é um terceiro elemento. Faz sentido? Assim mapa tem uma técnica que você usar na programadores funcionais, o novo estilo de programação para fazer algo para cada elemento em sua lista. E assim isso soa familiar. Temos uma lista de cartões. Queremos obter um item da lista para cada um, por isso vamos usar o mapa aqui. Vamos dizer, vamos lista equals this.props, cartões, mapa. 

E assim dado um cartão, estamos vai gerar um item de lista com conteúdos que lado da placa do mesmo. Vamos apenas dizer que queremos dar para fora os cartões de questionar tão card.question. Portanto, esta lista contém uma variedade de itens de lista ou de LI onde há uma lista item para cada cartão, e que contém a questão cartões. Faz sentido? 

Cool, então agora vamos realmente imprimir isso. Então, vamos voltar um ul. Dentro dessa lista não ordenada, nós apenas vou ficar toda a lista que eles nos deram. Frio. 

Tudo bem, então agora este exibição de lista funciona apenas encontrar. Dúvidas sobre a exibição de lista? Você tem um monte de cartões. Você faz um item da lista para cada cartão. E você colocá-los dentro de um não-ordenada lista, e você dá-lo de volta. Então agora vamos agir para que embutir isso dentro do nosso aplicativo, para que possamos fazer isso, exibição de lista. O argumento é que vamos passar para a lista de exibição? Que propriedades que vamos dar-lhe? Lembre-se, se você der que um monte de cartões, ele vai fazer a lista visualizar para os cartões. Então o que nós passamos aqui como o argumento? AUDIÊNCIA: Uma lista de cartas? Neel Mehta,: Sim, então cartões é igual a this.props.cards, certo? E assim o único problema é que você só pode virou um elemento de nível superior em render, então você tem para envolvê-lo em uma div. É estranho. Então vamos ver se isso. Isso funciona? 

Sim, lá você vai. Portanto, agora temos uma lista de cartas na parte inferior, e depois temos o nosso CardView-se no topo, e que vai virar entre os dois lados do cartão. Agora isso faz sentido como eu fiz isso? É, por isso, novamente, nós temos dois componentes. As primeiras impressões de componentes fora todos os cartões na lista. Essa é a exibição de lista. E o segundo componente imprime apenas o cartão. Se você dar-lhe um certo cartão, ele vai imprimir informações sobre esse cartão e deixá-lo virar para trás e para frente. 

Portanto, se queremos, podemos tentar e falar sobre a adição de alguns novos recursos para isso. Caso contrário, podemos conversar um pouco mais cerca de a velocidade do reactor, ou podemos responder dúvidas que possa ter porque estas são todas as partes centrais de reagir que eu quero falar. Podemos ir em frente. Podemos responder a perguntas. O que você quiser. 

AUDIÊNCIA: Você pode usar JSX em JavaScript normal? Ou isso é algo que veio com o [inaudível]? 

Neel Mehta,: A questão é lata você usa JSX com JavaScript normal? A resposta é sim. JSX é apenas uma maneira de que leva o seu JavaScript que tem HTML para dentro dele, e ele compila em JavaScript que não tem HTML dentro dele. Então, observe isso-- assim notar aqui. Isto parece que você tem como div e você tem coisas dentro dela. 

Que compila a JavaScript que como gera a mesma coisa. Eu acho que o que eu estou dizendo é que JSX é apenas uma sintática, como ele é um pré-processador para JavaScript muito como PHP é um pré-processador para HTML. JSC é um pré-processador para JavaScript que permite que você colocar HTML dentro do seu JavaScript. E por isso, se você tem o direito transformador que é uma coisa chamada [inaudível], que irá transformar. O pré-processador certo, ele vai deixar você fazer isso. 

AUDIÊNCIA: [inaudível] Neel Mehta,: Normalmente você não precisa para colocar HTML dentro de JavaScript a menos que seu fazer Reagir. Mas você pode fazê-lo de qualquer maneira. Sim? 

AUDIÊNCIA: Eu acho que você havia descrito Reagir como uma linguagem de programação funcional. Temos vindo a aprender C em CS50. C também é uma linguagem funcional? Neel Mehta,: Então a questão é sobre funcional versus outro coisa chamada programação imperativa ou processual. Há dois tipos de programas populares. Um é chamado de procedimento, que é tudo sobre como fazer comandos, e um é funcional, que é tudo sobre ter funções e tendo entrada e saída das pessoas. Reagir é um paradigma funcional. C é um paradigma muito processual. 

E como um exemplo, C, por exemplo, você não fizer desta forma declarativa de fazer o programa, certo? Você tem que dizer, imprimir esta. Alterar esta estrutura de dados. Imprima esta. É tudo sobre os comandos. 

Em Reagir, não há que muitos comandos. É tudo sobre ter componentes que juntos. Eles são como funções. Você tem como uma função chamado CardView, que é uma função que tem entrada, saída, e assim por reagir é tudo sobre esta filosofia nos de having-- você tiver dados. Você passá-lo através deste algoritmo, e ele vai HTML de saída que você apenas impresso da página, e então você tem que construí-lo peça por peça. 

Então, para desenhar uma metáfora para o que Eu disse antes, você sabe como no Facebook, se você receber uma mensagem, e você escolher que partes para atualizar, isso é processual. É imperativo, certo? OK, eu tenho uma mensagem. Vamos mudar conta lá. 

Vamos aparecer uma janela aqui. Vamos mudar conta lá. Vamos chamar isso aqui. Essa é uma abordagem processual. 

Isso é o que coisas como angular, Boost, Backbone, outros frameworks usar. Reagir é funcional. É uma maneira muito diferente de pensar sobre as coisas. Ele leva essa idéia de vamos ter funções ou algoritmos que irá você dar-lhe dados. Ela vai cuspir o que deve ser, eo computador vai cuidar de pesagem para fora. Você não lidar com isso sozinho. Isso faz um pouco de sentido? Sim? 

AUDIÊNCIA: Em uma linguagem funcional, tudo acontece de uma só vez? 

Neel Mehta,: Não, as coisas acontecem em ordem. Como aqui ainda há ordem, mas isso não acontece acontecer em ordem de como Recomendo, comando, comando. Isto acontece a fim de função lhe dá saída. Coloque isso em outra função. Coloque isso em outro função, outra função. 

Se você fizer CS51, você vai aprender programas funcionais um pouco fora do âmbito desta. Mas, basicamente, o que faz Reagir legal é não só o fluxo de dados unidirecional eo Dom virtual, mas também essa idéia de programação funcional. E a programação funcional é muito fácil para compor e fazer coisas legais fora de, e é muito fácil pensar sobre e raciocinar sobre. Portanto, é outro bom sorteio de Reagir. Mais alguma pergunta? Sim? 

AUDIÊNCIA: Hum, por que você faria usar ao invés de deixá-var? 

Neel Mehta,: Então a questão é por que você usa em vez de deixá-var? Esta é uma coisa chamada ES6 ou ECMAScript 6. É a nova versão do JavaScript. Há um monte de razões técnicas, Mas vamos é uma versão melhor de var. 

É como você declarar variáveis. Você pode usar o deixe. Você pode usar var. Let tem um grupo de técnicos reasons-- você pode procurá-los later---se para por que é melhor. Basicamente, ES6 tem algum bom nova sintaxe, algumas novas funcionalidades na parte superior do antigo Javascript. 

Portanto, temos como cinco minutos. Eu só queria falar sobre mais uma coisa real rápido. Se você tinha alguma dúvida, vamos falar sobre isso depois. Mas só para isso fica travado na câmera, eu só quero falar um pouco sobre como você Reagir realmente usar em seus aplicativos. 

Se você aqui, Facebook.GitHub.IO/react, esta é a home page para Reagir, e ele vai mostrar como você realmente usar Reagir em suas páginas. Basicamente, é um pouco complicado tentando instalar Reagir. Não é tão fácil quanto basta arrastar e solte um JavaScript lá. 

Você tem que ter seu transformador configurado, que irá, como fazia antes, transformar o seu JSX em o JavaScript normal. Você tem que coisa que vou compilar você ES6 ao normal. JavaScript há uma grande quantidade de movimento peças que você tem que fazer, por isso há uma coisa chamado Yeoman, Yeoman.io. E esta é uma ferramenta de linha de comando que vai ajudá-lo a scaffold o seu Reagir projetos facilmente. 

Assim, você pode ler mais sobre este mais tarde, mas existem algumas ferramentas Yeoman que oferece. Eles permitem que você crie um Reagir app com tudo embutido. Como ele vai ter construído em, componentes embutidos. Ele terá seu transformador construído em. Eles têm um monte de fresco material construído em automaticamente usando essas coisas chamadas geradores. 

Então leia sobre isso, se você gosta. Basta ir em Yeoman, Y-E-O-M-A-N, e você pode encontrar geradores como estes. E com os geradores como estes, você só gosta de um é uma linha de comando comandos casal. Vai fora um andaime Reagir toda app para você. Ele vai ficar toda a tubulação manual e trabalho duro feito para você, e é por isso que você se concentrar apenas em apenas escrever em Reagir. 

Então, basicamente a construção de uma Reagir app não é trivial. É com fio todos juntos, mas há são ferramentas que vai fazer isso por você. Então, se você quiser fazer uma Reagir app, tente fazê-lo dessa forma. Se você simplesmente deseja experimentar, você pode tentar usar este CodePen porque este tem CodePen toda a fiação reagir. Eu fiz todo o trabalho para você já. 

Então, se você quer fazer como um produção para libertar Reagir app, tentar um destes geradores. Se você só quer jogar ao redor, é muitas vezes vale apenas como tentar brincar em CodePen aqui. Parece bom? Frio. 

Então, isso é tudo que eu tenho. Mais uma vez, todos os códigos e são exemplos vai ser neste site aqui. Então, mais uma vez, nós não falar sobre muito sintaxe de Reagir, mas para encontrar todos aqueles pequenos detalhes sintáticos, tudo vai estar disponível neste site aqui. 

Então, eu recomendo como dar o primeiro passo. Coloque-o em sua CodePen. Tente trabalhar em fazer -lo para o segundo passo. Há uma quarta etapa, e apenas ver onde você começa a partir daí. 

Mais alguma pergunta, verifique que a página ou enviar e-mail me. Esse é o meu e-mail. Mas eu adoraria ajudá-lo com qualquer perguntas que você possa ter sobre Reagir. Então, sim, isso é tudo que eu tenho. Obrigado a todos muito para assistindo ou para assistir. E eu vou tirar dúvidas você pode ter depois desta agora. Então, obrigado a todos por assistir.