1 00:00:00,000 --> 00:00:02,910 >> [Música tocando] 2 00:00:02,910 --> 00:00:04,850 3 00:00:04,850 --> 00:00:07,275 >> Neel Mehta,: Aqui vai. 4 00:00:07,275 --> 00:00:11,070 >> Bem, todo mundo, bem-vindo ao web aplicativos do futuro com Reagir. 5 00:00:11,070 --> 00:00:11,870 Este é CS50. 6 00:00:11,870 --> 00:00:12,930 Meu nome é Neel. 7 00:00:12,930 --> 00:00:17,689 Eu sou uma TA para CS50 e um estudante de segundo ano na faculdade de Harvard e um muito, muito 8 00:00:17,689 --> 00:00:18,730 desenvolvedor web apaixonado. 9 00:00:18,730 --> 00:00:20,730 Então, eu estou muito emocionante estar falando com você hoje, 10 00:00:20,730 --> 00:00:24,550 se você está aqui ou em casa assistindo, sobre Reagir, que é, de novo 11 00:00:24,550 --> 00:00:27,270 como eu disse, o futuro dos aplicativos da web. 12 00:00:27,270 --> 00:00:29,055 >> Então Reagir é um framework web. 13 00:00:29,055 --> 00:00:30,930 E como eu tenho dito para algumas pessoas aqui, 14 00:00:30,930 --> 00:00:33,400 um quadro é apenas uma conjunto de ferramentas que pode utilizar 15 00:00:33,400 --> 00:00:35,770 para estruturar e construir seu aplicativo da web. 16 00:00:35,770 --> 00:00:39,010 E aplicações web são, novamente, os sites que são interativos como o Facebook, 17 00:00:39,010 --> 00:00:42,330 Twitter.com, Instagram.com, qualquer que seja. 18 00:00:42,330 --> 00:00:45,590 >> Assim, o Facebook é um framework web que foi desenvolvido pelo Facebook 19 00:00:45,590 --> 00:00:48,060 um par de anos traseira-- Reagir é. 20 00:00:48,060 --> 00:00:50,830 Ele já foi usado em Facebook em seus aplicativos móveis 21 00:00:50,830 --> 00:00:52,460 eo aplicativo web, Instagram. 22 00:00:52,460 --> 00:00:56,350 Khan Academy é outro proeminente dos primeiros a adotar Reagir. 23 00:00:56,350 --> 00:00:58,630 >> Tem sido realmente recebendo extremamente popular. 24 00:00:58,630 --> 00:01:03,420 Se você nunca usar coisas como Angular ou Backbone, este é da mesma família, 25 00:01:03,420 --> 00:01:05,830 mas tem desde agora superar a sua popularidade. 26 00:01:05,830 --> 00:01:06,890 É a coisa nova quente. 27 00:01:06,890 --> 00:01:09,590 É realmente, realmente enorme. 28 00:01:09,590 --> 00:01:13,470 >> E assim Reagir é bom não apenas como um framework web para interfaces de construção. 29 00:01:13,470 --> 00:01:16,020 É bom para a construção de interfaces web. 30 00:01:16,020 --> 00:01:18,350 Há também uma coisa Reagir chamado Native que 31 00:01:18,350 --> 00:01:22,200 permite construir interfaces para Android e iOS 32 00:01:22,200 --> 00:01:26,390 e talvez outras plataformas no futuro usando apenas o mesmo código JavaScript. 33 00:01:26,390 --> 00:01:31,130 Você pode usar exatamente o mesmo Código JavaScript para renderizar sites, 34 00:01:31,130 --> 00:01:33,040 para tornar os apps Android e iOS apps. 35 00:01:33,040 --> 00:01:35,000 >> É um momento muito, muito emocionante. 36 00:01:35,000 --> 00:01:37,070 É uma oportunidade muito, muito legal. 37 00:01:37,070 --> 00:01:42,020 É realmente uma teia universal ferramenta de desenvolvimento de interface, 38 00:01:42,020 --> 00:01:44,420 por isso é muito, muito coisa importante a saber. 39 00:01:44,420 --> 00:01:46,949 E, como eu estava dizendo às pessoas antes, este, penso eu, 40 00:01:46,949 --> 00:01:48,990 vai mudar o modo como construir aplicações web para sempre. 41 00:01:48,990 --> 00:01:55,820 Por isso é talvez um exagero pouco, mas eu acho que é uma coisa muito boa para saber. 42 00:01:55,820 --> 00:01:57,580 >> OK, então o que é Reagir? 43 00:01:57,580 --> 00:02:01,020 Reagir é um quadro que você pode utilizar para a construção de interfaces. 44 00:02:01,020 --> 00:02:03,240 Uma interface é, novamente, uma página da web, certo? 45 00:02:03,240 --> 00:02:06,340 Então aqui está Instagram.com, usos Reagir. 46 00:02:06,340 --> 00:02:08,740 >> Reagir é construído sobre a idéia de componentes. 47 00:02:08,740 --> 00:02:11,900 Um componente é um HTML elemento em esteróides, 48 00:02:11,900 --> 00:02:14,470 por isso um elemento HTML é como um botão. 49 00:02:14,470 --> 00:02:15,250 É um parágrafo. 50 00:02:15,250 --> 00:02:17,500 É um cabeçalho, certo? 51 00:02:17,500 --> 00:02:22,740 E Instagram vai usá-los, mas também utilizar componentes de React. 52 00:02:22,740 --> 00:02:25,740 >> Reagir componentes são elementos HTML souped-up 53 00:02:25,740 --> 00:02:28,100 que têm o seu próprio comportamento contido dentro delas. 54 00:02:28,100 --> 00:02:31,800 Assim, como exemplo, que se poderia um elemento de tempo, um componente de tempo, 55 00:02:31,800 --> 00:02:34,095 que conterá como o carimbo de tempo, você sabe, 56 00:02:34,095 --> 00:02:37,170 um componente que perfil irá conter a imagem do perfil 57 00:02:37,170 --> 00:02:38,820 e o nome da pessoa. 58 00:02:38,820 --> 00:02:42,930 Ele pode ter um contador semelhantes, os quais pode contar como o número de gostos, 59 00:02:42,930 --> 00:02:45,610 e se você clicar nele, ele vai aumentar o número de gostos. 60 00:02:45,610 --> 00:02:48,200 Um componente é apenas um monte de código HTML que 61 00:02:48,200 --> 00:02:50,520 tem algumas funcionalidades embrulhado dentro dele. 62 00:02:50,520 --> 00:02:53,770 Então, é como um elemento HTML em esteróides, como eu disse antes. 63 00:02:53,770 --> 00:02:56,270 Você pode tomar esses componentes, e você pode colocá-los juntos 64 00:02:56,270 --> 00:02:59,060 para fazer novos componentes, Neste caso, um componente post, 65 00:02:59,060 --> 00:03:00,505 que contém todas essas coisas. 66 00:03:00,505 --> 00:03:04,050 Seria conter Tempo, do perfil, LikeCounter, talvez o comentário 67 00:03:04,050 --> 00:03:06,100 e talvez a própria imagem. 68 00:03:06,100 --> 00:03:10,810 E assim aplicações web são apenas construído tomando componentes e colocá-los juntos. 69 00:03:10,810 --> 00:03:15,620 Um feed Instagram é nada mais do que um monte de lugares, um após outro, 70 00:03:15,620 --> 00:03:19,032 cada post contém como a Time, Perfil, LikeCounter, e assim por diante. 71 00:03:19,032 --> 00:03:20,490 É uma espécie de como construir uma casa. 72 00:03:20,490 --> 00:03:22,660 Você não constrói a casa de cima para baixo. 73 00:03:22,660 --> 00:03:24,960 Você toma components-- você tomar como o banheiro. 74 00:03:24,960 --> 00:03:28,320 Você pega o bedroom-- você furá-los juntos, e você tem um novo componente. 75 00:03:28,320 --> 00:03:29,760 Você tem uma nova parte da casa. 76 00:03:29,760 --> 00:03:32,860 >> Então Reagir é todo construído em torno de essa idéia de componentes que 77 00:03:32,860 --> 00:03:36,600 são interativos, que são declarativas. 78 00:03:36,600 --> 00:03:39,650 Como você acabou de dizer o que um perfil é, ela torna-lo. 79 00:03:39,650 --> 00:03:40,600 Eles são combináveis. 80 00:03:40,600 --> 00:03:43,880 Você pode tomar um tempo e um perfil, colocar los juntos, fazer algo melhor. 81 00:03:43,880 --> 00:03:47,770 E eles são reutilizáveis, portanto, se você tem o código-fonte de um post, 82 00:03:47,770 --> 00:03:49,440 você poderia incorporar isso em qualquer lugar. 83 00:03:49,440 --> 00:03:53,160 >> Você pode embutir um Instagram coisa em seu próprio site. 84 00:03:53,160 --> 00:03:56,830 Você pode embutir no Facebook, por exemplo, contanto que utiliza React bem. 85 00:03:56,830 --> 00:04:00,360 Então componentes são realmente, realmente, realmente blocos de construção poderosos da web 86 00:04:00,360 --> 00:04:04,180 que pode ser usado em qualquer lugar e colocá- juntos para fazer novos blocos de construção. 87 00:04:04,180 --> 00:04:07,159 Isso é muito, muito visão geral de alto nível. 88 00:04:07,159 --> 00:04:09,200 Então, novamente, se você tem quaisquer perguntas em qualquer ponto 89 00:04:09,200 --> 00:04:14,470 sobre a filosofia do reactor, o codificação, para me parar, e deixe-me saber. 90 00:04:14,470 --> 00:04:18,420 >> OK, portanto, reagir é legal porque tem uma maneira diferente de olhar 91 00:04:18,420 --> 00:04:19,870 em como você construir aplicações web. 92 00:04:19,870 --> 00:04:23,620 Você provavelmente já ouviu falar de MVC, um modelo que você controla na CS50 ou o que quer 93 00:04:23,620 --> 00:04:25,940 outras classes de sondagem que você usa. 94 00:04:25,940 --> 00:04:29,000 E a maioria dos quadros são construído em torno da idéia de MVC. 95 00:04:29,000 --> 00:04:30,410 Reagir não é. 96 00:04:30,410 --> 00:04:32,980 Reagir é construído em torno da idéia do fluxo de dados unidirecional 97 00:04:32,980 --> 00:04:36,510 como visto por este gráfico ou gráfico aqui. 98 00:04:36,510 --> 00:04:38,260 >> Basicamente, você tem uma fonte de dados. 99 00:04:38,260 --> 00:04:42,380 E a fonte de dados irá decidir como colocar para fora determinados componentes. 100 00:04:42,380 --> 00:04:45,452 E os componentes serão então, quando elas mudam, 101 00:04:45,452 --> 00:04:47,160 eles vão te dizer o fonte de dados para mudar. 102 00:04:47,160 --> 00:04:49,350 >> Para usar o Instagram exemplo, você pode ter 103 00:04:49,350 --> 00:04:52,050 uma lista de objetos como pós- em um banco de dados ou algo assim. 104 00:04:52,050 --> 00:04:53,310 Que os dados. 105 00:04:53,310 --> 00:04:57,600 E então nossos componentes pós- vai levar esses dados, 106 00:04:57,600 --> 00:05:01,830 e usar esses dados para processar uma coisa na tela. 107 00:05:01,830 --> 00:05:04,300 Isso é o que a seta a partir dos dados de componente é, 108 00:05:04,300 --> 00:05:07,930 e, em seguida, que a mesma informação é usada para processar um grupo de componentes. 109 00:05:07,930 --> 00:05:10,290 >> Em Facebook Messenger, para exemplo, que é Reagir, 110 00:05:10,290 --> 00:05:13,410 você pode ter uma lista de mensagens como sua fonte de dados. 111 00:05:13,410 --> 00:05:15,927 E isso não rendem somente a lista de mensagens 112 00:05:15,927 --> 00:05:17,510 mas também a lista de amigos que você tem. 113 00:05:17,510 --> 00:05:19,200 Você tem a contagem não lida. 114 00:05:19,200 --> 00:05:23,330 Talvez também tornar a coisa Facebook que está no fundo do Facebook.com. 115 00:05:23,330 --> 00:05:25,610 Os mesmos dados é um fonte única de verdade 116 00:05:25,610 --> 00:05:28,290 e que faz com que uma grande quantidade de componentes a serem prestados. 117 00:05:28,290 --> 00:05:30,290 E sempre que um desses componentes é alterado, 118 00:05:30,290 --> 00:05:32,320 ele vai voltar e muda a fonte de dados. 119 00:05:32,320 --> 00:05:33,460 >> Você enviar uma mensagem, certo? 120 00:05:33,460 --> 00:05:34,780 Isso muda a fonte de dados. 121 00:05:34,780 --> 00:05:39,490 Você ler as suas mensagens, para que você não lida definir a 0. 122 00:05:39,490 --> 00:05:41,136 Isso muda a fonte de dados. 123 00:05:41,136 --> 00:05:44,010 E note que todos estes de uma arrow voltar para os mesmos dados 124 00:05:44,010 --> 00:05:47,662 fonte, assim você sabe, dado um determinado conjunto de dados, 125 00:05:47,662 --> 00:05:49,870 você sabe exatamente o que o A página está indo olhar como. 126 00:05:49,870 --> 00:05:50,700 É determinista. 127 00:05:50,700 --> 00:05:53,451 Você sabe, dadas certas dados, o que a página está indo olhar como. 128 00:05:53,451 --> 00:05:56,158 Você pode prever como ele vai se comportam e como as coisas estão indo 129 00:05:56,158 --> 00:05:57,650 para o trabalho quando eles estão juntos. 130 00:05:57,650 --> 00:06:00,410 >> E se eu tivesse um milhão de componentes aqui, ele iria se comportar o mesmo, certo? 131 00:06:00,410 --> 00:06:02,290 Você não teria qualquer interconexões estranhas. 132 00:06:02,290 --> 00:06:04,120 Uma dados rendeu um milhão de componentes. 133 00:06:04,120 --> 00:06:06,879 Um milhão de componentes poderia voltar atrás e editar os dados. 134 00:06:06,879 --> 00:06:07,920 E assim isso é muito bom. 135 00:06:07,920 --> 00:06:10,870 Estamos construindo composable, facilmente aplicações web escaláveis. 136 00:06:10,870 --> 00:06:13,150 >> Você tem uma fonte de dados, a fonte da verdade. 137 00:06:13,150 --> 00:06:15,790 Que informa os seus componentes como colocar a página, 138 00:06:15,790 --> 00:06:18,190 e os componentes serão lidar com interação. 139 00:06:18,190 --> 00:06:20,150 E se eles querem mudar coisas, basta voltar 140 00:06:20,150 --> 00:06:21,750 e dizer a fonte de dados para mudar. 141 00:06:21,750 --> 00:06:22,850 Faz sentido? 142 00:06:22,850 --> 00:06:26,010 Então Reagir é toda sobre a compreensão como construir um componente 143 00:06:26,010 --> 00:06:29,540 e como fazer o seu componente interagir com o mundo exterior. 144 00:06:29,540 --> 00:06:31,850 >> Fazer o interagem componente com o mundo exterior 145 00:06:31,850 --> 00:06:34,490 utiliza outra tecnologia Fluxo chamada, que 146 00:06:34,490 --> 00:06:36,872 é uma estrutura que é adicionado no topo da React. 147 00:06:36,872 --> 00:06:38,330 Nós não vamos falar sobre isso. 148 00:06:38,330 --> 00:06:42,990 Vamos falar mais sobre, dado dados, como você pode tornar um componente? 149 00:06:42,990 --> 00:06:47,010 >> E assim Reagir é muito legal porque você pode usá-lo com qualquer back-end que você deseja. 150 00:06:47,010 --> 00:06:50,480 Se você tem um back-end como Python, se o seu Python pode cuspir alguns dados, 151 00:06:50,480 --> 00:06:51,610 Reagir pode torná-lo. 152 00:06:51,610 --> 00:06:54,700 Se você há saídas JS de dados, torna React. 153 00:06:54,700 --> 00:06:56,890 Ruby rails com dados, torna React. 154 00:06:56,890 --> 00:07:01,860 >> Então Reagir é basicamente uma web view-- um front-end com componentes 155 00:07:01,860 --> 00:07:03,910 para qualquer fonte de dados que seja. 156 00:07:03,910 --> 00:07:07,145 E assim vai a partir de fonte de dados para reagem componentes é muito fácil. 157 00:07:07,145 --> 00:07:08,770 Indo a outra maneira é um pouco mais difícil. 158 00:07:08,770 --> 00:07:10,462 Que usa Flux como eu mencionei antes. 159 00:07:10,462 --> 00:07:11,420 Nós não vamos entrar nisso. 160 00:07:11,420 --> 00:07:13,740 Vamos concentrar mais no dados-a-lado dos componentes. 161 00:07:13,740 --> 00:07:15,880 Desta forma, você pode fazer legal, divertimento aplicativos da web. 162 00:07:15,880 --> 00:07:19,870 Não vai afetar o mundo exterior por agora, mas isso é outra história. 163 00:07:19,870 --> 00:07:22,210 >> OK, então se você estivesse aqui para o meu último seminário 164 00:07:22,210 --> 00:07:26,610 você vai saber que todo o código para A palestra de hoje vai ser neste URL 165 00:07:26,610 --> 00:07:29,320 aqui, desculpe, este URL aqui. 166 00:07:29,320 --> 00:07:32,730 E, basicamente, nós estamos indo para ir por quatro etapas, talvez cinco, 167 00:07:32,730 --> 00:07:33,510 provavelmente não cinco. 168 00:07:33,510 --> 00:07:37,300 Nós vamos passar por quatro etapas de construção de uma amostra Reagir app. 169 00:07:37,300 --> 00:07:39,550 E assim todo o código-fonte para cada passo do caminho 170 00:07:39,550 --> 00:07:42,216 vai ser aqui mesmo, então se você está acompanhando em casa, 171 00:07:42,216 --> 00:07:43,991 sinta-se livre para ler este código. 172 00:07:43,991 --> 00:07:46,740 Se você está seguindo ao longo aqui, nós estaremos mostrando na tela, 173 00:07:46,740 --> 00:07:47,739 por isso não se preocupe com isso. 174 00:07:47,739 --> 00:07:50,930 Mas se você está em casa, sentir livre para visitar este site. 175 00:07:50,930 --> 00:07:56,400 E, sim, você deve ser capaz de obter todo o código que você já precisa aqui. 176 00:07:56,400 --> 00:08:01,380 Portanto, é uma boa folha de fraude, bem para as suas futuras aventuras com Reagir. 177 00:08:01,380 --> 00:08:04,490 Cool, por isso, se todo mundo que está aqui, e mesmo se você estiver em casa, 178 00:08:04,490 --> 00:08:11,580 puxar para cima este site, is.gd/cs50react, sem capital, sem sublinhado, sem nada. 179 00:08:11,580 --> 00:08:15,849 >> Você verá uma página que parece um pouco como isso. 180 00:08:15,849 --> 00:08:17,140 Esta é uma coisa chamada CodePen. 181 00:08:17,140 --> 00:08:20,030 CodePen é um colaborativa ambiente de codificação 182 00:08:20,030 --> 00:08:23,364 com o qual eu posso escrever o código aqui, e ele vai ser enviado automaticamente para você. 183 00:08:23,364 --> 00:08:24,780 E desta forma, eu posso escrever código. 184 00:08:24,780 --> 00:08:26,920 Eu posso executar o código aqui. 185 00:08:26,920 --> 00:08:33,470 >> Para example-- e se reloads-- ver, Estou executando o código JavaScript na página 186 00:08:33,470 --> 00:08:36,390 aqui, e ele vai tornar automaticamente uma página web 187 00:08:36,390 --> 00:08:37,980 com este código JavaScript. 188 00:08:37,980 --> 00:08:40,039 E assim esta é uma maneira para nós para experimentar código 189 00:08:40,039 --> 00:08:43,089 realmente rápido sem ter que usar nossa ID ou utilize nossa máquina local 190 00:08:43,089 --> 00:08:44,290 como queiras. 191 00:08:44,290 --> 00:08:47,670 É uma maneira muito rápida para você maquete e testar diferentes tipos de código. 192 00:08:47,670 --> 00:08:50,560 >> Então, eu estou indo tomar exemplo de código, colocando-o aqui. 193 00:08:50,560 --> 00:08:52,374 Nós vamos estar trabalhando com ele. 194 00:08:52,374 --> 00:08:54,540 E se você está em casa, você pode puxar isso também. 195 00:08:54,540 --> 00:08:57,530 E eu já instalado Reagir aqui, então você pode apenas 196 00:08:57,530 --> 00:09:00,770 escrever seu próprio código aqui, e experimentá-lo como seu próprio parque infantil. 197 00:09:00,770 --> 00:09:04,940 >> Sim, se todos abrir este link aqui. 198 00:09:04,940 --> 00:09:08,080 Por favor me dê os polegares uma vez que você tem que abrir. 199 00:09:08,080 --> 00:09:10,960 200 00:09:10,960 --> 00:09:13,770 Cool, cool cool. 201 00:09:13,770 --> 00:09:16,914 Não há nada aqui para agora, mas vamos mudar isso muito em breve. 202 00:09:16,914 --> 00:09:21,250 >> OK, então Reagir é um JavaScript biblioteca, e como tal, 203 00:09:21,250 --> 00:09:24,480 requer o conhecimento de JavaScript, que é a linguagem de programação web. 204 00:09:24,480 --> 00:09:27,660 E ele está sendo usado para outras coisas Agora também, mas principalmente a desenvolver web 205 00:09:27,660 --> 00:09:32,040 língua, por isso, se você não estiver familiarizado com que, ler um site chamado JSforCats.com. 206 00:09:32,040 --> 00:09:32,700 É maravilhoso. 207 00:09:32,700 --> 00:09:34,240 Você pode aprender JavaScript em meia hora. 208 00:09:34,240 --> 00:09:34,990 É incrível. 209 00:09:34,990 --> 00:09:36,420 >> Então, dê uma lida. 210 00:09:36,420 --> 00:09:39,960 Nós também um monte de HTML aqui porque nós estamos projetando páginas da web, é claro. 211 00:09:39,960 --> 00:09:43,890 Portanto, se você não estiver familiarizado com HTML, vá para HTMLdog.com. 212 00:09:43,890 --> 00:09:46,520 Eu acho que aprender Reagir é um milhão de vezes mais fácil se você já 213 00:09:46,520 --> 00:09:47,892 conhecer os blocos de construção. 214 00:09:47,892 --> 00:09:50,600 Se você tiver os componentes, é fácil de fazer um componente maior. 215 00:09:50,600 --> 00:09:51,860 Isso é Reagir linguagem para você. 216 00:09:51,860 --> 00:09:54,270 >> Então vá em frente e dar- essas coisas de uma leitura. 217 00:09:54,270 --> 00:09:55,070 Pausar este vídeo. 218 00:09:55,070 --> 00:09:57,440 Dê uma lida, se você é em casa, se você não está 219 00:09:57,440 --> 00:10:00,794 familiarizados com HTML ou JavaScript 220 00:10:00,794 --> 00:10:02,960 OK, então o que nós estamos indo para fazer é que vamos fazer 221 00:10:02,960 --> 00:10:06,470 um app flashcard muito básico usando Reagir. 222 00:10:06,470 --> 00:10:08,210 Nós vamos ter um flashcard. 223 00:10:08,210 --> 00:10:09,880 Você pode virar o cartão e para trás. 224 00:10:09,880 --> 00:10:12,399 E nós também vamos ter uma lista de todas as cartas que temos, 225 00:10:12,399 --> 00:10:14,190 e se estamos nos sentindo ambicioso, poderíamos estar 226 00:10:14,190 --> 00:10:17,060 capaz de alternar entre carros, clicando sobre eles. 227 00:10:17,060 --> 00:10:20,360 >> Mas este é, de sua nua ossos, uma forma muito simples Reagir app. 228 00:10:20,360 --> 00:10:22,560 E por isso esta é, na verdade, não trivial de implementar, 229 00:10:22,560 --> 00:10:26,030 mas vamos mostrar que, se você fizer este, é muito, muito fácil de estendê-lo 230 00:10:26,030 --> 00:10:27,680 se outras pessoas ajudá-lo com isso. 231 00:10:27,680 --> 00:10:33,750 Então, vamos passar por quatro etapas começando do zero para construir este. 232 00:10:33,750 --> 00:10:36,740 >> OK, então as quatro etapas, vamos começar com o primeiro passo. 233 00:10:36,740 --> 00:10:39,790 O primeiro passo vai ser a construção de seu primeiro componente. 234 00:10:39,790 --> 00:10:44,830 Como eu disse antes, um componente em Reagir é apenas um elemento HTML com esteróides. 235 00:10:44,830 --> 00:10:49,660 Especifica o código HTML e algum comportamento, e ele 236 00:10:49,660 --> 00:10:52,600 vai especificar como as pessoas pode interagir com ele como 237 00:10:52,600 --> 00:10:54,270 ele teria estado interno. 238 00:10:54,270 --> 00:10:57,630 Como um botão vai saber como quantas vezes ele foi clicado por exemplo, 239 00:10:57,630 --> 00:11:01,010 e ele vai saber como colocar a si mesmo. 240 00:11:01,010 --> 00:11:04,430 >> Então, vamos em frente e construir o nosso primeiro componente usando JavaScript. 241 00:11:04,430 --> 00:11:09,711 Então, se a sintaxe parece estranho, isso é porque ele é tipo de. 242 00:11:09,711 --> 00:11:11,710 Então, mais uma vez, vamos para fazer uma variável chamada 243 00:11:11,710 --> 00:11:14,580 aplicativo usando a palavra-chave deixar, que faz com que uma variável, 244 00:11:14,580 --> 00:11:18,210 deixe App igual React.createClass. 245 00:11:18,210 --> 00:11:22,609 >> Reagir é uma biblioteca e possui a criar função de classe. 246 00:11:22,609 --> 00:11:24,400 E esta função é um pouco de código que você 247 00:11:24,400 --> 00:11:29,090 pode usar para criar um novo Reagir tipo de componente. 248 00:11:29,090 --> 00:11:32,780 E assim React.createClass faz com que um componente, 249 00:11:32,780 --> 00:11:35,270 e este componente ser capaz de fazer coisas. 250 00:11:35,270 --> 00:11:40,460 A principal coisa que pode fazer é torná algo, render como uma função. 251 00:11:40,460 --> 00:11:44,500 >> Mais uma vez, se este índice não é óbvio para você, eu recomendo que você vá sobre JS para gatos 252 00:11:44,500 --> 00:11:45,682 e check-out. 253 00:11:45,682 --> 00:11:47,710 Que é ampliada bem o suficiente? 254 00:11:47,710 --> 00:11:48,490 Frio. 255 00:11:48,490 --> 00:11:50,670 >> Assim, cada necessidades de componentes para ter uma função de renderização. 256 00:11:50,670 --> 00:11:53,010 A função de tornar diz, o que posso imprimir na tela? 257 00:11:53,010 --> 00:11:54,760 Mas é o componente inútil se isso não acontecer 258 00:11:54,760 --> 00:11:58,060 sabe o que imprimir na tela, assim você precisa ter uma função de renderização. 259 00:11:58,060 --> 00:12:01,904 >> Então, na coisa rende, você só precisa retornar algum HTML. 260 00:12:01,904 --> 00:12:03,820 E o que é legal é que há uma coisa chamada 261 00:12:03,820 --> 00:12:08,660 JSX, que é uma extensão de JavaScript que é usado por reagir. 262 00:12:08,660 --> 00:12:11,845 Ele permite que você escreve HTML para dentro de seu javascript, o que 263 00:12:11,845 --> 00:12:13,970 soa meio estranho quando primeiro você pensar sobre isso, 264 00:12:13,970 --> 00:12:15,553 mas faz muito sentido depois. 265 00:12:15,553 --> 00:12:17,430 Assim, podemos fazer isso. 266 00:12:17,430 --> 00:12:21,360 Se você estiver familiarizado com HTML, eu sei temos um div com um propósito geral 267 00:12:21,360 --> 00:12:22,790 recipiente para o material. 268 00:12:22,790 --> 00:12:26,380 Podemos voltar um div, e no interior este div, podemos colocar coisas. 269 00:12:26,380 --> 00:12:32,390 >> Então, vamos dizer que queremos tornar apenas um flashcard straight-up para agora. 270 00:12:32,390 --> 00:12:34,890 O flashcard, eu diria, terá uma pergunta e resposta. 271 00:12:34,890 --> 00:12:37,530 Então, dentro desta div, vamos imprimir um parágrafo 272 00:12:37,530 --> 00:12:42,155 que diz question-- Qual é o resposta final à vida, o universo? 273 00:12:42,155 --> 00:12:47,640 274 00:12:47,640 --> 00:12:50,345 E então a resposta é vai ser, naturalmente, 42. 275 00:12:50,345 --> 00:12:56,880 276 00:12:56,880 --> 00:12:59,730 >> Que não veio bem a todos. 277 00:12:59,730 --> 00:13:04,164 Sim, então basicamente você pode realmente escrever HTML dentro do seu JavaScript. 278 00:13:04,164 --> 00:13:06,330 E isso vai ser impressas na tela. 279 00:13:06,330 --> 00:13:08,250 Então, vamos experimentá-lo. 280 00:13:08,250 --> 00:13:09,520 >> Então nós temos nosso componente. 281 00:13:09,520 --> 00:13:12,210 Nós precisamos dizer Reagir a colocar o componente na tela 282 00:13:12,210 --> 00:13:18,990 assim React.render, por isso perceber que nós app tratar como qualquer outro elemento. 283 00:13:18,990 --> 00:13:21,010 Nós escrevê-lo como ele era um elemento HTML. 284 00:13:21,010 --> 00:13:25,100 Como em vez de dizer como img para imagem ou p para o parágrafo, 285 00:13:25,100 --> 00:13:28,120 você escreve App, por isso é App tratado como um elemento HTML. 286 00:13:28,120 --> 00:13:30,380 Como eu disse antes, é um elemento em esteróides. 287 00:13:30,380 --> 00:13:32,870 >> Então você processar App, e você dar-lhe um lugar para colocá-lo. 288 00:13:32,870 --> 00:13:37,170 E é assim que puder diga a ele onde colocá-lo. 289 00:13:37,170 --> 00:13:46,200 Eu criei um div simples na página chamada com uma ID de página, 290 00:13:46,200 --> 00:13:48,300 e é aí que o elemento está indo para ir. 291 00:13:48,300 --> 00:13:49,841 >> E nós não estamos indo para executar com HTML. 292 00:13:49,841 --> 00:13:53,145 Basicamente, isto vai ficar colocar dentro deste elemento de página 293 00:13:53,145 --> 00:13:54,270 que temos na tela. 294 00:13:54,270 --> 00:13:59,210 Então, ele é executado este código, e ele desenha esta coisa na tela, então aqui estamos. 295 00:13:59,210 --> 00:14:01,770 Fizemos o nosso primeiro componente Reagir. 296 00:14:01,770 --> 00:14:08,000 >> Então, assim como um resumo, fizemos delicadamente um novo tipo de componente, certo? 297 00:14:08,000 --> 00:14:10,145 Isso é o que o React.createClass. 298 00:14:10,145 --> 00:14:12,680 E em que componente, nós disse-lhe o que deve fazer. 299 00:14:12,680 --> 00:14:15,590 Sempre que este componente é o de ser impressa sobre a tela, 300 00:14:15,590 --> 00:14:19,300 ele irá imprimir o div com os dois parágrafos dentro dele. 301 00:14:19,300 --> 00:14:24,460 >> E o que fizemos, fizemos um novo aplicativo usando a notação app ângulo de montagem. 302 00:14:24,460 --> 00:14:27,160 Nós dissemos a ele para colocá-lo dentro do elemento principal. 303 00:14:27,160 --> 00:14:29,867 E assim que eu fiz, ele criou um novo aplicativo a partir desse modelo. 304 00:14:29,867 --> 00:14:31,200 E então eu disse a ele para torná-lo. 305 00:14:31,200 --> 00:14:33,680 Por isso, disse, OK, app, o que eu devo imprimir? 306 00:14:33,680 --> 00:14:36,970 App diz, vai imprimir uma div com dois parágrafos dentro dela. 307 00:14:36,970 --> 00:14:40,420 E voila, há nossa div com dois parágrafos dentro dele. 308 00:14:40,420 --> 00:14:43,180 Fazer sentido até agora? 309 00:14:43,180 --> 00:14:46,690 >> Assim, mais uma vez, todo o desafio de React é apenas saber como fazer componentes. 310 00:14:46,690 --> 00:14:48,500 Como fazer com que o componentes trabalham em conjunto. 311 00:14:48,500 --> 00:14:51,780 Agora que fizemos o nosso primeiro componente, vamos voltar 312 00:14:51,780 --> 00:14:54,284 e fazer componentes personalizável. 313 00:14:54,284 --> 00:14:56,700 Então você sabe como em HTML você pode dar suas aulas botões? 314 00:14:56,700 --> 00:14:59,146 Você pode dar a seus âncoras a href. 315 00:14:59,146 --> 00:15:00,770 Você pode dar a seus inputs um tipo, certo? 316 00:15:00,770 --> 00:15:04,740 Você pode dar mais personalizado Propriedades para todos os seus elementos 317 00:15:04,740 --> 00:15:06,490 para torná-lo mais interessante. 318 00:15:06,490 --> 00:15:09,030 E nós, na verdade, pode fazer exatamente a mesma coisa. 319 00:15:09,030 --> 00:15:17,500 >> Então, digamos que queremos que o nosso app para ir prestar qualquer cartão. 320 00:15:17,500 --> 00:15:19,630 Agora nós apenas rendeu um cartão codificado. 321 00:15:19,630 --> 00:15:22,530 Nós sabemos que há apenas um cartão que pode fazer, por isso estamos 322 00:15:22,530 --> 00:15:25,960 vai tentar mudar isso agora assim que nós podemos apenas dar-lhe algum cartão. 323 00:15:25,960 --> 00:15:27,410 Ele vai imprimir o cartão. 324 00:15:27,410 --> 00:15:29,380 >> Você deveria tentar e fazer o seu componentes a um propósito muito geral. 325 00:15:29,380 --> 00:15:31,654 Então, dessa maneira eu poderia enviar e-mail este meu amigo e ser como, 326 00:15:31,654 --> 00:15:33,820 o que quer que você tem flashcard, apenas alimentá-lo em aqui, 327 00:15:33,820 --> 00:15:35,290 e ele vai fazê-lo por si só. 328 00:15:35,290 --> 00:15:37,650 Você pode colocar outro as coisas em seu próprio aplicativo. 329 00:15:37,650 --> 00:15:40,600 >> Mas primeiro, vamos quebrar esse -se em duas componentes, 330 00:15:40,600 --> 00:15:44,500 mas queremos separar o cartão impressão de parte a parte real app. 331 00:15:44,500 --> 00:15:46,660 Então o que podemos fazer é nos pode mudar isso a partir da App 332 00:15:46,660 --> 00:15:51,300 para CardView, apenas um novo nome para o aplicativo, 333 00:15:51,300 --> 00:15:54,450 e nós podemos fazer um novo componente chamado App, 334 00:15:54,450 --> 00:15:56,336 para não ser confundido com o antigo App. 335 00:15:56,336 --> 00:16:00,730 Nós temos os createClass, e como em HTML, 336 00:16:00,730 --> 00:16:03,590 você pode ninho Reagir componentes um dentro do outro. 337 00:16:03,590 --> 00:16:16,430 >> Então, nesta função render, função CardView retorno, 338 00:16:16,430 --> 00:16:18,234 e esta é exatamente a mesma coisa. 339 00:16:18,234 --> 00:16:19,400 Veja por que é a mesma coisa? 340 00:16:19,400 --> 00:16:22,590 Em vez de prestar apenas o app que tem a div e emparelhamento dentro dele, 341 00:16:22,590 --> 00:16:26,194 o app torna o CardView, eo CardView torna a div e parágrafo. 342 00:16:26,194 --> 00:16:29,110 Portanto, este é o nosso primeiro exemplo de elementos de nidificação dentro de si. 343 00:16:29,110 --> 00:16:32,177 Isso faz sentido? 344 00:16:32,177 --> 00:16:33,760 Então, novamente, temos um elemento CardView. 345 00:16:33,760 --> 00:16:37,250 Temos elementos app que é maior do que. 346 00:16:37,250 --> 00:16:40,990 >> OK, por isso queremos que o nosso CardView-- se dar uma boa CardView um determinado cartão, 347 00:16:40,990 --> 00:16:43,370 ele vai imprimir para fora para você, certo? 348 00:16:43,370 --> 00:16:48,050 Então, primeiro, precisamos fazer um cartão, então vamos fazer um objeto de cartão. 349 00:16:48,050 --> 00:17:02,930 Então deixe meu cartão equal-- se todos vocês estão familiarizados, 350 00:17:02,930 --> 00:17:05,260 este é apenas o processo de tomada de notação objeto em JavaScript. 351 00:17:05,260 --> 00:17:09,280 É como uma espécie de struct em C, então fizemos um cartão, 352 00:17:09,280 --> 00:17:15,920 e agora nós podemos passar este cartão como uma propriedade ou como um atributo em HTML 353 00:17:15,920 --> 00:17:17,290 terminologia para nosso aplicativo. 354 00:17:17,290 --> 00:17:20,210 Assim, podemos fazer isso, App cartão é igual MyCard. 355 00:17:20,210 --> 00:17:23,200 >> Você sabe como na entrada, você faz tipo de entrada é igual a de texto ou botão 356 00:17:23,200 --> 00:17:25,240 classe é igual a btn para inicialização ,? 357 00:17:25,240 --> 00:17:29,500 A mesma idéia, equals-- cartão App você tem que colocar as cintas aqui-- 358 00:17:29,500 --> 00:17:33,830 Cartão App igual MyCard, de modo que este diz que temos esse objeto cartão. 359 00:17:33,830 --> 00:17:39,149 Vou passá-lo como um propriedade para o componente app. 360 00:17:39,149 --> 00:17:41,440 E este componente App ser capaz de acessá-lo e fazê- 361 00:17:41,440 --> 00:17:43,580 coisas interessantes com ele. 362 00:17:43,580 --> 00:17:47,650 >> Assim, o nosso app vai ser dado um cartão, então por enquanto, 363 00:17:47,650 --> 00:17:49,980 vamos ter o app apenas dar- a placa para a CardView 364 00:17:49,980 --> 00:17:53,110 si mesmo, porque como o app não é vai saber o que fazer com ele, 365 00:17:53,110 --> 00:17:54,850 por isso vamos dar-lhe com o CardView. 366 00:17:54,850 --> 00:18:00,050 Então, vamos passá-lo a mesma forma, o cartão é igual, 367 00:18:00,050 --> 00:18:05,426 e de modo que cada componente pode aceder a coisas que tem sido dado a ele. 368 00:18:05,426 --> 00:18:07,800 Eles podem acessar as propriedades que foram dados a ele 369 00:18:07,800 --> 00:18:09,470 usando esta sintaxe, this.props.card. 370 00:18:09,470 --> 00:18:12,010 371 00:18:12,010 --> 00:18:14,920 >> Então o que acontece aqui é você tem o objeto MyCard. 372 00:18:14,920 --> 00:18:18,250 Você passá-lo para o aplicativo usando cartão App igual MyCard. 373 00:18:18,250 --> 00:18:21,420 Esse objeto cartão é dada ao seu app. 374 00:18:21,420 --> 00:18:24,400 O aplicativo pode acessá-lo como this.props.card. 375 00:18:24,400 --> 00:18:28,780 É como uma espécie de imagem sabe o que é fonte é. 376 00:18:28,780 --> 00:18:31,972 >> Este aplicativo sabe o que é cartão é, e ele pode fazer coisas com ele. 377 00:18:31,972 --> 00:18:32,930 Ele pode fazer cálculos. 378 00:18:32,930 --> 00:18:35,290 Pode tomar decisões baseadas fora dele. 379 00:18:35,290 --> 00:18:39,950 >> Por agora, eu ia passar this.props.card na CardView. 380 00:18:39,950 --> 00:18:43,420 Fazer sentido até agora? 381 00:18:43,420 --> 00:18:45,210 Ela vai fazer mais sentido agora. 382 00:18:45,210 --> 00:18:46,990 >> OK, então agora estamos em CardView. 383 00:18:46,990 --> 00:18:51,719 O nosso CardView, dado o cartão, deve imprimir sua pergunta e resposta. 384 00:18:51,719 --> 00:18:54,510 Agora nós apenas impresso algumas perguntas e respostas codificadas. 385 00:18:54,510 --> 00:18:57,720 Precisamos descobrir out-- precisamos para pedir o cartão que eles nos deram 386 00:18:57,720 --> 00:19:01,360 qual é a pergunta e resposta, e em seguida, imprimir isso na tela. 387 00:19:01,360 --> 00:19:02,470 >> Assim, podemos fazer isso aqui. 388 00:19:02,470 --> 00:19:06,135 Em tornar begin-- primeiro fazer igual. 389 00:19:06,135 --> 00:19:08,710 390 00:19:08,710 --> 00:19:13,050 Então, o que estamos fazendo aqui é sabemos que as cartas são-nos dado a uma propriedade, 391 00:19:13,050 --> 00:19:13,580 certo? 392 00:19:13,580 --> 00:19:15,930 É-nos dada como entrada. 393 00:19:15,930 --> 00:19:19,440 Como é quase como argumentos para uma função. 394 00:19:19,440 --> 00:19:22,810 O cartão é um argumento quase a esta CardView. 395 00:19:22,810 --> 00:19:25,239 >> Nós vamos extrair isso, e colocar em que a pergunta variável. 396 00:19:25,239 --> 00:19:27,280 Certifique-se de que a resposta foi para a resposta variável. 397 00:19:27,280 --> 00:19:31,130 Solicita que o cartão de responder. 398 00:19:31,130 --> 00:19:35,072 E agora que temos estes, em vez de imprimir o texto, 399 00:19:35,072 --> 00:19:37,030 nós estamos indo para imprimir o que quer que eles nos deram. 400 00:19:37,030 --> 00:19:43,580 >> Portanto, este stuff-- então vamos para colocar para fora Pergunta Resposta. 401 00:19:43,580 --> 00:19:46,380 Vamos ver se isso funciona. 402 00:19:46,380 --> 00:19:52,800 Legal, então vamos percorrê-lo mais uma vez só para ter certeza. 403 00:19:52,800 --> 00:20:00,470 >> Então, meu cartão é o cartão de objeto, e nós estão dando esse cartão para o aplicativo. 404 00:20:00,470 --> 00:20:04,790 E o app vai levar a cartão e dá-lo ao CardView. 405 00:20:04,790 --> 00:20:09,190 E este CardView diz, se você dá-me qualquer objeto flashcard, 406 00:20:09,190 --> 00:20:11,920 Vou imprimir a sua pergunta e sua resposta, certo? 407 00:20:11,920 --> 00:20:14,590 >> Então, o que eu poderia fazer é que eu posso enviar este código, o primeiro 408 00:20:14,590 --> 00:20:16,580 como 10 linhas de meu código, para o meu amigo. 409 00:20:16,580 --> 00:20:18,820 Ele poderia incorporá-lo em sua própria aplicação. 410 00:20:18,820 --> 00:20:27,200 E enquanto ele fazia a mesma coisa, como cartão de CardView é igual a esta, 411 00:20:27,200 --> 00:20:30,580 contanto que ele criou o CardView e deu-lhe a informação correta, 412 00:20:30,580 --> 00:20:31,987 ele poderia tornar seu próprio cartão. 413 00:20:31,987 --> 00:20:34,320 E assim desta forma, é realmente um forma legal para você construir 414 00:20:34,320 --> 00:20:35,906 componentes que usam uns aos outros, certo? 415 00:20:35,906 --> 00:20:38,280 Este cartão, eu poderia publicar este CardView na internet, 416 00:20:38,280 --> 00:20:39,790 e as pessoas seriam capazes de usá-lo. 417 00:20:39,790 --> 00:20:45,070 Então, basicamente, é como um dos funções padrão na biblioteca C. 418 00:20:45,070 --> 00:20:47,280 >> É uma função onde alguém escreveu ele. 419 00:20:47,280 --> 00:20:48,419 Você dá uma certa entrada. 420 00:20:48,419 --> 00:20:49,710 Ela vai produzir um determinado produto. 421 00:20:49,710 --> 00:20:50,890 Você não se importa como ele funciona internamente. 422 00:20:50,890 --> 00:20:53,790 Contanto que você dê a ele o direito entrada, ele vai fazer a saída correta. 423 00:20:53,790 --> 00:20:57,850 >> E um componente pode ser pensado da mesma maneira. 424 00:20:57,850 --> 00:21:00,280 Isto é como CardView uma função de biblioteca. 425 00:21:00,280 --> 00:21:03,400 Se você dar-lhe algum cartão como uma propriedade, ele vai 426 00:21:03,400 --> 00:21:05,095 imprimir o conteúdo dessa carta. 427 00:21:05,095 --> 00:21:16,820 Como se eu mudar o meu cartão de em vez disso ser como o que é 5 plus 37, 428 00:21:16,820 --> 00:21:19,210 ele irá atualizar em conformidade. 429 00:21:19,210 --> 00:21:21,955 Então, só mudando a entrada, ele ganha uma certa saída. 430 00:21:21,955 --> 00:21:24,830 Assim, você pode pensar em componentes quase como funções desta forma, que 431 00:21:24,830 --> 00:21:25,920 você pode colocar juntos. 432 00:21:25,920 --> 00:21:29,440 Você começa entrada, como este CardView como a entrada, você recebe saída. 433 00:21:29,440 --> 00:21:31,900 Neste caso, a saída é o código HTML. 434 00:21:31,900 --> 00:21:34,404 Fazer sentido até agora? 435 00:21:34,404 --> 00:21:36,890 Cool, então, novamente, as propriedades são como você pode passar informações 436 00:21:36,890 --> 00:21:40,900 para dentro e para fora de componentes. 437 00:21:40,900 --> 00:21:42,740 >> OK, então vamos fazer isso coisa interativa. 438 00:21:42,740 --> 00:21:44,450 Agora é meio chato. 439 00:21:44,450 --> 00:21:45,520 O que é [inaudível]? 440 00:21:45,520 --> 00:21:48,210 Você pode imprimir alguns para fora, mas isso é tudo que posso fazer. 441 00:21:48,210 --> 00:21:51,550 >> Então, vamos voltar para o velha questão apenas por agora. 442 00:21:51,550 --> 00:21:54,405 Ok, então agora mesmo estes componentes são chatos porque tudo que eles fazem, 443 00:21:54,405 --> 00:21:55,030 eles ficam de entrada. 444 00:21:55,030 --> 00:21:56,100 Eles fazem de saída, certo? 445 00:21:56,100 --> 00:21:57,049 Isso é meio chato. 446 00:21:57,049 --> 00:21:59,090 Nós queremos ter a nossa componentes para ser capaz de ter 447 00:21:59,090 --> 00:22:02,150 algum tipo de estado interno, como se lembrar de algo. 448 00:22:02,150 --> 00:22:05,320 >> Para um flashcard, por exemplo, que tipo de estado 449 00:22:05,320 --> 00:22:07,550 pode você quiser lembre-se para um flashcard? 450 00:22:07,550 --> 00:22:09,740 O estatuto temporário você pode querer lembrar 451 00:22:09,740 --> 00:22:12,491 para um flashcard em um flashcard app? 452 00:22:12,491 --> 00:22:13,990 AUDIÊNCIA: Se ela já virou? 453 00:22:13,990 --> 00:22:14,990 Neel Mehta,: Sim, certo. 454 00:22:14,990 --> 00:22:17,665 Então você pode querer manter pista de que você está virado para cima ou são 455 00:22:17,665 --> 00:22:19,100 você face para baixo no cartão. 456 00:22:19,100 --> 00:22:23,420 No Facebook, por exemplo, você faria quer se lembrar onde no feed de notícias 457 00:22:23,420 --> 00:22:25,870 é você gosta ou que é perfil que você está fazendo agora. 458 00:22:25,870 --> 00:22:30,127 >> No Messenger, como o texto que você digite na caixa de entrada, certo? 459 00:22:30,127 --> 00:22:31,710 Se você atualizar a página, ele vai embora. 460 00:22:31,710 --> 00:22:32,793 Mas você realmente não me importo. 461 00:22:32,793 --> 00:22:33,770 É apenas temporário. 462 00:22:33,770 --> 00:22:34,548 Sim? 463 00:22:34,548 --> 00:22:36,152 >> AUDIÊNCIA: [inaudível] 464 00:22:36,152 --> 00:22:38,360 Neel Mehta,: Como um flash cartão, como você pode estar vendo 465 00:22:38,360 --> 00:22:40,290 o lado pergunta ou lado a resposta? 466 00:22:40,290 --> 00:22:41,070 >> AUDIÊNCIA: OK. 467 00:22:41,070 --> 00:22:43,270 >> Neel Mehta,: Como uma flashcard dois lados, certo? 468 00:22:43,270 --> 00:22:46,370 Sim, assim que você quer têm essa idéia de empresa 469 00:22:46,370 --> 00:22:50,370 Eu tenho propriedades, que é como entradas, mas o estado, que é temporária, uh, 470 00:22:50,370 --> 00:22:51,839 onde você está na página, certo? 471 00:22:51,839 --> 00:22:54,380 Mais uma vez, eu disse no Facebook Messenger, eu tenho como que pessoa 472 00:22:54,380 --> 00:22:56,550 você está vendo Facebook ou quem é o perfil, certo? 473 00:22:56,550 --> 00:22:58,030 >> Isto é apenas temporário. 474 00:22:58,030 --> 00:23:01,200 É importante para mostrar ao usuário o que está acontecendo, mas atualizar a página. 475 00:23:01,200 --> 00:23:02,250 Realmente não importa. 476 00:23:02,250 --> 00:23:04,530 Portanto, é estado temporário, por isso, todo o estado dele. 477 00:23:04,530 --> 00:23:06,250 >> Então, novamente, não há estado e adereços. 478 00:23:06,250 --> 00:23:09,084 Props é dada entrada a partir de sua fonte de dados. 479 00:23:09,084 --> 00:23:10,250 Estado é como padrões. 480 00:23:10,250 --> 00:23:13,700 É como coisas que faz a coisa interactiva. 481 00:23:13,700 --> 00:23:17,720 >> Assim, em nosso CardView-- vamos ter nossa CardView-- por isso era bom. 482 00:23:17,720 --> 00:23:21,420 O que nós vamos fazer aqui, nós vamos para tocar CardView e só CardView. 483 00:23:21,420 --> 00:23:25,105 E por isso o meu amigo que tem isso, eles não notar qualquer diferença. 484 00:23:25,105 --> 00:23:27,230 Eles não teriam que mudar qualquer um dos seu próprio código, 485 00:23:27,230 --> 00:23:29,410 mas eles veriam a sua CardView foi envenenado. 486 00:23:29,410 --> 00:23:31,270 Isso é uma parte agradável sobre componentes. 487 00:23:31,270 --> 00:23:35,290 >> OK, portanto, em nosso CardView, vamos tentar e controlar se estamos fase up 488 00:23:35,290 --> 00:23:36,560 ou virado para baixo. 489 00:23:36,560 --> 00:23:40,480 Em Reagir fazemos isso pela primeira especificando o estado inicial. 490 00:23:40,480 --> 00:23:42,070 Onde é que o cartão de começar? 491 00:23:42,070 --> 00:23:48,480 >> Então, ser uma função chamada getInitialState funcionar, e nós retornar um objeto. 492 00:23:48,480 --> 00:23:53,310 Este objeto contém algum estado, e um estado é apenas um par chave-valor. 493 00:23:53,310 --> 00:23:56,950 Como em instruir, você tem uma chave e um valor, você tem como nome é uma string. 494 00:23:56,950 --> 00:24:01,410 >> Neste caso, vamos dizer frente é verdadeiro. 495 00:24:01,410 --> 00:24:03,760 Este diz que temos um Estado. 496 00:24:03,760 --> 00:24:06,570 Um dos componentes do estado é um atributo chamado frente. 497 00:24:06,570 --> 00:24:09,649 [Inaudível], então por padrão, estamos na frente do cartão, 498 00:24:09,649 --> 00:24:11,440 e nós podemos mudar isso como nós virar o cartão. 499 00:24:11,440 --> 00:24:13,380 Faz sentido? 500 00:24:13,380 --> 00:24:18,190 >> OK, por isso, render, agora, estamos mostrando a pergunta ea resposta. 501 00:24:18,190 --> 00:24:20,860 Agora o que devemos fazer é mostrar a questão 502 00:24:20,860 --> 00:24:24,370 se estamos na frente do cartão de modo a resposta é para a parte de trás do cartão. 503 00:24:24,370 --> 00:24:26,850 É por isso que todos fazem o cartão interactiva. 504 00:24:26,850 --> 00:24:28,100 Então, vamos tentar e para este aqui. 505 00:24:28,100 --> 00:24:31,600 506 00:24:31,600 --> 00:24:33,620 Bem, primeiro faça apenas uma variável. 507 00:24:33,620 --> 00:24:37,790 Podemos perguntar agora this.state.front. 508 00:24:37,790 --> 00:24:42,010 Temos acesso a afirmar o mesmo que adereços de acesso, de modo this.state.front. 509 00:24:42,010 --> 00:24:45,870 >> Se estamos à frente, em seguida, o texto é this.props.card.question. 510 00:24:45,870 --> 00:24:48,777 511 00:24:48,777 --> 00:24:51,360 Se estamos na frente do cartão, vamos tentar e garra 512 00:24:51,360 --> 00:24:52,485 a questão do cartão. 513 00:24:52,485 --> 00:24:54,782 514 00:24:54,782 --> 00:24:57,240 Caso contrário, se nós estamos na parte de trás do cartão, o que vamos fazer? 515 00:24:57,240 --> 00:25:01,830 516 00:25:01,830 --> 00:25:02,750 >> AUDIÊNCIA: A resposta? 517 00:25:02,750 --> 00:25:05,041 >> Neel Mehta,: Sim, assim que o texto é igual a this.props.card.answer. 518 00:25:05,041 --> 00:25:08,472 519 00:25:08,472 --> 00:25:10,930 Mas se você notar, estamos usando o Estado a tomar uma decisão 520 00:25:10,930 --> 00:25:14,420 porque agora o componente terá uma aparência diferente 521 00:25:14,420 --> 00:25:16,710 baseado fora como estes interagem com ele. 522 00:25:16,710 --> 00:25:20,355 Então, ao invés de imprimir isso, vamos apenas imprimir o texto. 523 00:25:20,355 --> 00:25:25,270 524 00:25:25,270 --> 00:25:28,650 Cool, assim agora, como você vê, vemos apenas a questão. 525 00:25:28,650 --> 00:25:37,720 E se eu mudar o estado manualmente aqui a frente é falsa temos 42 volta. 526 00:25:37,720 --> 00:25:39,720 >> Então, novamente, este componente tem seu próprio estado. 527 00:25:39,720 --> 00:25:43,440 Como um botão sabe se ele foi pressionado ou não, 528 00:25:43,440 --> 00:25:46,080 esta coisa sabe qual é a parte da frente ou na parte de trás. 529 00:25:46,080 --> 00:25:48,320 Por padrão, ele está na frente. 530 00:25:48,320 --> 00:25:50,840 E, em seguida, se é na parte da frente, vamos imprimir a questão. 531 00:25:50,840 --> 00:25:53,106 Se é na parte de trás, vamos imprimir a resposta. 532 00:25:53,106 --> 00:25:54,980 Assim, mais uma vez, as informações dada é a mesma. 533 00:25:54,980 --> 00:25:59,090 Ele apenas parece diferente com base em como você programá-lo. 534 00:25:59,090 --> 00:26:02,670 Assim, por exemplo, Facebook Messenger, mesmo se você receber a mesma fonte de dados, 535 00:26:02,670 --> 00:26:05,170 ele pode ser diferente porque o estado é diferente. 536 00:26:05,170 --> 00:26:08,421 Você está olhando para um A mensagem de diferente pessoa. 537 00:26:08,421 --> 00:26:10,930 >> OK, então isso é tudo bem e bom, mas agora o que é, na verdade, 538 00:26:10,930 --> 00:26:15,940 tornar-nos capazes de mudar, se nosso cartão é frente ou para trás. 539 00:26:15,940 --> 00:26:19,010 Nós podemos fazer isso adicionando um flip botão, um botão para que o cartão 540 00:26:19,010 --> 00:26:22,950 vai virar o cartão, se é [inaudível]. 541 00:26:22,950 --> 00:26:31,770 Então, vamos adicionar um botão aqui, este botão, e este botão irá dizer flip. 542 00:26:31,770 --> 00:26:35,650 >> E assim agora, não faz nada. 543 00:26:35,650 --> 00:26:37,075 Ele só parece bom. 544 00:26:37,075 --> 00:26:43,650 O que podemos fazer é que podemos acrescentar um clique manipulador, onClick é igual this.flip, 545 00:26:43,650 --> 00:26:44,820 e vamos definir aleta mais tarde. 546 00:26:44,820 --> 00:26:47,120 Mas, basicamente, onClick é uma função que 547 00:26:47,120 --> 00:26:48,675 é chamada quando o usuário clica nele. 548 00:26:48,675 --> 00:26:52,330 >> Assim, o botão vai saber quando ele foi clicado. 549 00:26:52,330 --> 00:26:54,750 Fui ele foi clicado, ele vai virar o cartão. 550 00:26:54,750 --> 00:26:58,382 É uma espécie de como a sua entregador de pizza. 551 00:26:58,382 --> 00:27:01,590 Você é como, bem, sempre que alguém me chama, eu vou entregar pizza, certo? 552 00:27:01,590 --> 00:27:03,420 >> Você registrar este ouvinte. 553 00:27:03,420 --> 00:27:04,530 Você escuta para um evento. 554 00:27:04,530 --> 00:27:07,657 Você é chamado, e quando o evento acontece, você fazer alguma coisa. 555 00:27:07,657 --> 00:27:08,240 Você começa pizza. 556 00:27:08,240 --> 00:27:11,480 Neste caso, quando você está clicado, você virar o cartão. 557 00:27:11,480 --> 00:27:14,560 >> E por isso precisamos definir um função que vai virar o cartão, 558 00:27:14,560 --> 00:27:17,930 então vamos escrever esse direito aqui, flip função. 559 00:27:17,930 --> 00:27:20,850 560 00:27:20,850 --> 00:27:23,680 E então o que você acha que virar vai fazer? 561 00:27:23,680 --> 00:27:27,180 Novamente, isto é chamada quando clicamos no botão flip. 562 00:27:27,180 --> 00:27:29,406 O que deve o flip função fazer? 563 00:27:29,406 --> 00:27:34,136 >> AUDIÊNCIA: Mudança this.state.front de verdadeiro para falso, falso para verdadeiro. 564 00:27:34,136 --> 00:27:38,420 >> Neel Mehta,: Sim, assim que tomar o que quer this.front é-- o estado frente é. 565 00:27:38,420 --> 00:27:40,930 Levar o estado à frente, se é verdade, torná-la falsa. 566 00:27:40,930 --> 00:27:42,530 Se é falso, torná-lo realidade, certo? 567 00:27:42,530 --> 00:27:45,330 Então, vamos tentar isso. 568 00:27:45,330 --> 00:27:48,240 >> Você não pode alterar o estado apenas fazendo this.state. 569 00:27:48,240 --> 00:27:50,380 Você não pode fazer isso. 570 00:27:50,380 --> 00:27:52,030 Você não pode fazer isso. 571 00:27:52,030 --> 00:27:55,810 Você tem que usar uma função chamado this.setState. 572 00:27:55,810 --> 00:28:03,230 >> Então você pode dizer this.setState frente cólon, onde esta, mais uma vez, a exclamação 573 00:28:03,230 --> 00:28:04,330 ponto significa o oposto. 574 00:28:04,330 --> 00:28:07,420 Eu acho que se isso. state.front É verdade, ele vai virar falsa. 575 00:28:07,420 --> 00:28:09,170 Então, vamos definir o estado de verdadeiro para falso. 576 00:28:09,170 --> 00:28:11,430 Se é falso, vamos configurá-lo falso para verdadeiro. 577 00:28:11,430 --> 00:28:17,210 >> Basta notar que definir e obter um pouco diferente, e então vamos tentar isso. 578 00:28:17,210 --> 00:28:18,675 Bada bing, olhe para isto. 579 00:28:18,675 --> 00:28:21,810 O botão FLIP agora alternar a frente para trás Estado. 580 00:28:21,810 --> 00:28:24,990 >> E isso aqui é onde você vê um pouco da magia do Reagir. 581 00:28:24,990 --> 00:28:28,420 Como nós nunca disse a ele para voltar a tornar. 582 00:28:28,420 --> 00:28:30,910 Nós nunca disse que redesenhar nada. 583 00:28:30,910 --> 00:28:32,630 Se você está fazendo isso sem reagir, você 584 00:28:32,630 --> 00:28:34,588 ter como quando o a-- aleta botão é clicado, 585 00:28:34,588 --> 00:28:37,290 você teria que dizer-lhe para manualmente renderizar novamente, certo? 586 00:28:37,290 --> 00:28:43,050 >> Reagir é muito legal em que se você dar-lhe um certo estado e propriedades, 587 00:28:43,050 --> 00:28:45,760 ele sempre irá processar exatamente a mesma coisa. 588 00:28:45,760 --> 00:28:48,690 E assim, quando nós já mudamos o Estado e as propriedades, 589 00:28:48,690 --> 00:28:50,819 reagem apenas re-torna a coisa toda. 590 00:28:50,819 --> 00:28:52,860 Ele sabe que há uma um-para-um correspondência 591 00:28:52,860 --> 00:28:57,270 entre Estado e de parâmetro e HTML. 592 00:28:57,270 --> 00:29:00,110 Assim, sempre que um desses mudanças por meio de um conjunto de estado, 593 00:29:00,110 --> 00:29:03,750 ele vai mudar a forma como o salário é re-processado. 594 00:29:03,750 --> 00:29:06,650 E então basicamente Reagir é como esperando por você para mudar. 595 00:29:06,650 --> 00:29:09,870 >> Sempre que se muda alguma coisa, ele vai voltar a processar a página inteira. 596 00:29:09,870 --> 00:29:12,480 E se isso soa ineficiente, é porque ele seria, 597 00:29:12,480 --> 00:29:15,050 mas reagem usa uma coisa chamado de DOM Shadow. 598 00:29:15,050 --> 00:29:19,950 Em vez de desenhar a página diretamente, mantém a árvore HTML virtuais na memória. 599 00:29:19,950 --> 00:29:23,620 >> Você sabe, HTML é como uma árvore, como uma estrutura de dados hierárquica. 600 00:29:23,620 --> 00:29:28,990 Ele mantém uma árvore falsa na memória, e sempre que você atualizar a página, 601 00:29:28,990 --> 00:29:31,940 ele vai chamar uma outra falsificação árvore, e ele vai calcular 602 00:29:31,940 --> 00:29:35,120 o que ele precisa mudar para tornar o página para fazer as duas árvores iguais. 603 00:29:35,120 --> 00:29:38,540 Então, basicamente, praticamente re-torna muito. 604 00:29:38,540 --> 00:29:41,540 E então ele só muda o gosto página em pequenos ajustes conforme necessário, 605 00:29:41,540 --> 00:29:44,240 por isso é muito, muito, muito eficiente. 606 00:29:44,240 --> 00:29:46,970 >> Então, basicamente Reagir vai sempre que mudar alguma coisa, 607 00:29:46,970 --> 00:29:49,010 ele vai voltar a processar a página virtualmente. 608 00:29:49,010 --> 00:29:52,830 Ele vai descobrir o que eu preciso mudar para tornar a página real refleta 609 00:29:52,830 --> 00:29:55,602 a página virtual, e ele vai fazer isso. 610 00:29:55,602 --> 00:29:56,560 Esse é o DOM virtual. 611 00:29:56,560 --> 00:29:59,350 É um dos maiores características de React. 612 00:29:59,350 --> 00:30:00,880 >> Isso faz sentido? 613 00:30:00,880 --> 00:30:01,540 Alguma pergunta? 614 00:30:01,540 --> 00:30:02,040 Sim? 615 00:30:02,040 --> 00:30:05,568 616 00:30:05,568 --> 00:30:08,969 >> AUDIÊNCIA: Como funciona comparar ainda para o MVC 617 00:30:08,969 --> 00:30:10,760 que falamos recursos como antes. 618 00:30:10,760 --> 00:30:13,527 >> Neel Mehta,: Sim, a questão é a forma como ele se compara a MVC? 619 00:30:13,527 --> 00:30:14,610 Você perguntou sobre recursos. 620 00:30:14,610 --> 00:30:16,445 Bem, vamos falar sobre como ele funciona. 621 00:30:16,445 --> 00:30:18,190 >> Em MVC, você atualizar o modelo. 622 00:30:18,190 --> 00:30:20,560 Neste caso, nós teríamos um modelo de cartão. 623 00:30:20,560 --> 00:30:24,540 A vista teria o aleta botão, eo controle 624 00:30:24,540 --> 00:30:26,310 teria a função de flip. 625 00:30:26,310 --> 00:30:28,450 Assim, a vista contaria a controlador de flip flip. 626 00:30:28,450 --> 00:30:30,370 Virar diria ao modelo para mudar, certo? 627 00:30:30,370 --> 00:30:33,915 >> E assim, quando você faz um MVC, você ouça o modelo para mudar, 628 00:30:33,915 --> 00:30:37,150 e você re-processar a visão em conformidade. 629 00:30:37,150 --> 00:30:39,210 Ou você apenas tem que gostar tem o controlador. 630 00:30:39,210 --> 00:30:42,418 Aguarde até que o modelo de mudar, e, em seguida, escolher uma parte de como uma coisa 631 00:30:42,418 --> 00:30:44,032 mudar. 632 00:30:44,032 --> 00:30:45,740 Aqui nós temos uma coisa, mas em um grande app, 633 00:30:45,740 --> 00:30:48,510 você tem que gostar de lembrar o que a mudança de cada lugar, 634 00:30:48,510 --> 00:30:50,290 por isso é um pouco chato. 635 00:30:50,290 --> 00:30:53,670 E assim Reagir é bom porque tem um Dom sombra. 636 00:30:53,670 --> 00:30:56,040 Ele pode dar ao luxo de apenas reescrever a coisa toda. 637 00:30:56,040 --> 00:30:58,680 Você não tem que seletivamente como adivinhar o que para atualizar. 638 00:30:58,680 --> 00:31:02,186 >> No Facebook, se você gosta obter uma nova mensagem, em MVC, 639 00:31:02,186 --> 00:31:04,060 você tem que lembrar, OK, mudar as coisas 640 00:31:04,060 --> 00:31:06,260 na parte superior do página, o ícone da mensagem. 641 00:31:06,260 --> 00:31:08,290 Também pop uma nova janela na parte inferior. 642 00:31:08,290 --> 00:31:10,070 Também fazer uma coisa nova nessa janela. 643 00:31:10,070 --> 00:31:11,060 Também reproduzir um som. 644 00:31:11,060 --> 00:31:13,150 >> Isso é um monte de coisas indo para fora ao mesmo tempo. 645 00:31:13,150 --> 00:31:15,320 E por isso, se você não fizer isso ter um Dom sombra, você 646 00:31:15,320 --> 00:31:18,740 tem que fazer isso manualmente porque você não pode se livrar de toda a página. 647 00:31:18,740 --> 00:31:21,430 Você não pode dar ao luxo de, assim que você tem para mudar cada coisa manualmente, 648 00:31:21,430 --> 00:31:23,990 que é realmente irritante no MVC. 649 00:31:23,990 --> 00:31:27,640 >> Assim, a fim de ser parcimonioso, eles seletivamente 650 00:31:27,640 --> 00:31:30,750 atualizar a página, o que é eficiente, mas também irritante. 651 00:31:30,750 --> 00:31:34,002 Em Reagir, por causa da sombra Dom, você tem as duas coisas gratuitamente. 652 00:31:34,002 --> 00:31:35,710 É eficiente, pois da sombra Dom. 653 00:31:35,710 --> 00:31:37,210 O gargalo está atualizando a página. 654 00:31:37,210 --> 00:31:40,292 Ele não está fazendo a manipulação de árvore. 655 00:31:40,292 --> 00:31:41,250 Você começa a eficiência. 656 00:31:41,250 --> 00:31:45,420 Você também terá a facilidade de uso, porque se você acabou de reescrever a página inteira, 657 00:31:45,420 --> 00:31:48,970 mas você só sabe, tudo bem, as coisas vai estar na página em algum lugar. 658 00:31:48,970 --> 00:31:51,180 Pode ser em um lugar diferente, mas ele vai estar na página, certo? 659 00:31:51,180 --> 00:31:52,860 Então você só re-renderizado a coisa toda virtualmente, 660 00:31:52,860 --> 00:31:55,540 e você pode fazer um par alterações na própria página. 661 00:31:55,540 --> 00:31:57,850 >> Então, novamente, em MVC você teria que escolher 662 00:31:57,850 --> 00:32:01,840 entre facilidade de uso e eficiência, e reagir, você tem as duas. 663 00:32:01,840 --> 00:32:04,020 Então é melhor. 664 00:32:04,020 --> 00:32:05,220 Faz sentido? 665 00:32:05,220 --> 00:32:06,676 Sólido. 666 00:32:06,676 --> 00:32:12,080 >> OK, então vamos ver vamos falar um pouco sobre o passo 4, 667 00:32:12,080 --> 00:32:14,740 como podemos incorporar componentes. 668 00:32:14,740 --> 00:32:16,260 Então nós temos isso agora. 669 00:32:16,260 --> 00:32:19,420 Nós temos o nosso pequeno botão legal. 670 00:32:19,420 --> 00:32:23,157 Nós podemos lançá-lo para trás e diante, e isso é tudo que ele faz. 671 00:32:23,157 --> 00:32:24,990 Vamos dizer que nós queremos tem outro componente. 672 00:32:24,990 --> 00:32:28,730 Digamos que o nosso app flashcard deve contém uma lista de todos os cartões 673 00:32:28,730 --> 00:32:31,520 que você tem, o que significa que deve ter outro componente. 674 00:32:31,520 --> 00:32:32,970 Bem, talvez chamá-lo de uma lista. 675 00:32:32,970 --> 00:32:36,200 Vamos fazer uma exibição de lista que coexiste com a CardView, 676 00:32:36,200 --> 00:32:39,680 e esta visão de lista e CardView vai gostar de trabalhar em conjunto. 677 00:32:39,680 --> 00:32:43,190 E você pode combiná-los para tornar o nosso app para você. 678 00:32:43,190 --> 00:32:45,160 >> Então, primeiro, vamos fazer uma mais algumas cartas direito. 679 00:32:45,160 --> 00:32:46,370 Vamos dizer, o que os cartões? 680 00:32:46,370 --> 00:32:49,619 681 00:32:49,619 --> 00:32:51,910 E só então eu não tenho que aborrecê-lo com digitando-o, 682 00:32:51,910 --> 00:32:53,410 Eu só vou copiá-lo a partir daqui. 683 00:32:53,410 --> 00:33:01,664 684 00:33:01,664 --> 00:33:03,580 E então eu estou indo para não dar-lhe apenas um cartão. 685 00:33:03,580 --> 00:33:06,910 Eu vou dar-lhe uma série de cartas. 686 00:33:06,910 --> 00:33:10,240 Então, primeiro os aplicativos vai quebrar por enquanto. 687 00:33:10,240 --> 00:33:14,717 Tudo bem, então vamos fazer este capaz de lidar com vários cartões. 688 00:33:14,717 --> 00:33:17,800 Então, primeiro, vamos dar-lhe, não apenas um cartão, mas uma série de cartões, 689 00:33:17,800 --> 00:33:18,700 como uma lista de cartões. 690 00:33:18,700 --> 00:33:20,980 E, neste caso, temos três deles. 691 00:33:20,980 --> 00:33:27,280 >> Tudo bem, então é assim app indo para obter uma lista de cartões, 692 00:33:27,280 --> 00:33:29,870 e ele vai decidir qual um para mostrar ao CardView. 693 00:33:29,870 --> 00:33:33,740 O CardView só pode tornar um cartão, mas o app 694 00:33:33,740 --> 00:33:37,610 obtém uma lista de todas as cartas, certo? 695 00:33:37,610 --> 00:33:40,820 >> Então, quando você descobrir um cartão a dar a CardView, 696 00:33:40,820 --> 00:33:44,660 como é que você acho que você pode ser capaz para tomar uma decisão sobre qual cartão 697 00:33:44,660 --> 00:33:47,064 mostrar? 698 00:33:47,064 --> 00:33:49,980 Para lhe dar uma dica, é temporariamente Você vai estar vendo um determinado cartão. 699 00:33:49,980 --> 00:33:53,260 Se você atualizar a página, você vai apenas voltar para o primeiro cartão. 700 00:33:53,260 --> 00:33:55,464 Isso é OK, porque isso é temporário. 701 00:33:55,464 --> 00:33:56,630 Que técnica poderíamos usar? 702 00:33:56,630 --> 00:34:02,534 703 00:34:02,534 --> 00:34:08,760 >> AUDIÊNCIA: Você poderia fazer uma variável assim como você tinha frente. 704 00:34:08,760 --> 00:34:11,989 Isso é verdade, você poderia tem cartão atual é igual a 1? 705 00:34:11,989 --> 00:34:14,150 >> Neel Mehta,: Sim, por isso, quer ter estado, certo? 706 00:34:14,150 --> 00:34:16,080 Você usaria Estado na componente para descobrir 707 00:34:16,080 --> 00:34:17,288 qual placa queremos chegar. 708 00:34:17,288 --> 00:34:19,290 Como nós temos uma lista de todas as cartas, vamos 709 00:34:19,290 --> 00:34:21,630 usar o estado para descobrir um dos primeiro cartão, 710 00:34:21,630 --> 00:34:23,710 segundo cartão, cartão terceiro, e assim por diante. 711 00:34:23,710 --> 00:34:28,760 >> Assim, um aplicativo para um aplicativo terá uma têm a função getInitialState, 712 00:34:28,760 --> 00:34:35,020 retorno função getInitialState. 713 00:34:35,020 --> 00:34:39,929 E nós vamos apenas dizer activeIndex 0. 714 00:34:39,929 --> 00:34:42,889 Então, agora a nossa aplicação tem seu próprio estado. 715 00:34:42,889 --> 00:34:47,179 >> E agora sobre render, para descobrir um cartão, vamos apenas ir para a matriz 716 00:34:47,179 --> 00:34:49,969 e agarrar a coisa nesse índice. 717 00:34:49,969 --> 00:34:53,580 Escolha um cartão this.props.cards iguais this.state.activeIndex. 718 00:34:53,580 --> 00:34:56,469 719 00:34:56,469 --> 00:35:00,162 Então, como você vê aqui, os adereços e o estado realmente trabalhar juntos. 720 00:35:00,162 --> 00:35:08,990 Portanto, agora que temos o nosso ActiveCard, vamos chamá-lo ActiveCard, 721 00:35:08,990 --> 00:35:10,470 e vamos ver se isso funciona. 722 00:35:10,470 --> 00:35:20,320 723 00:35:20,320 --> 00:35:20,820 [INAUDÍVEL] 724 00:35:20,820 --> 00:35:41,504 725 00:35:41,504 --> 00:35:44,900 >> Oh, que foi um erro de texto. 726 00:35:44,900 --> 00:35:45,400 Ah. 727 00:35:45,400 --> 00:35:51,420 728 00:35:51,420 --> 00:35:54,840 >> Cool, sim, então agora nós estávamos de volta para onde estávamos antes, certo? 729 00:35:54,840 --> 00:35:57,100 Programa antigo mesmo, exceto agora podemos apoiar 730 00:35:57,100 --> 00:35:59,390 uma lista de cartões, e não apenas um cartão. 731 00:35:59,390 --> 00:36:04,130 E agora, mais uma vez, se mudamos o activeIndex, podemos ir de 0 a 1, 732 00:36:04,130 --> 00:36:07,330 e agora que segundo cartão, e depois fomos a 0. 733 00:36:07,330 --> 00:36:10,390 Então aqui está um novo turbinado com a versão do nosso. 734 00:36:10,390 --> 00:36:16,000 >> OK, então agora vamos dar uma vista de lista que mostra todos os cartões em seu programa, 735 00:36:16,000 --> 00:36:19,980 por isso vamos fazer uma nova componente chamado listView. 736 00:36:19,980 --> 00:36:22,155 Vamos listView igual react.createClass. 737 00:36:22,155 --> 00:36:32,890 738 00:36:32,890 --> 00:36:38,800 Por isso, queremos prestar desordenada listar com um item da lista para cada cartão. 739 00:36:38,800 --> 00:36:41,490 E assim temos um monte de cartões. 740 00:36:41,490 --> 00:36:44,990 Queremos um item da lista para cada cartão, certo? 741 00:36:44,990 --> 00:36:47,490 Poderíamos fazer um loop for ou algo para fazer um novo item da lista. 742 00:36:47,490 --> 00:36:50,522 Mas a maneira como você fazê-lo em Reagir, usar uma coisa chamada mapa. 743 00:36:50,522 --> 00:36:57,150 Map é uma ferramenta ou uma função que você usa que, para cada item, executa alguma função, 744 00:36:57,150 --> 00:36:59,510 toma valor de retorno, e dá-lhe de volta. 745 00:36:59,510 --> 00:37:06,310 >> Assim, como um exemplo, temos a matriz 1, 2, e este function-- 3.map 746 00:37:06,310 --> 00:37:12,120 é um atalho para um function-- x seta x vezes x. 747 00:37:12,120 --> 00:37:16,110 Este diz, para cada número em 1, 2, 3, tomá-lo. 748 00:37:16,110 --> 00:37:17,800 Quadrado-lo e devolvê-lo. 749 00:37:17,800 --> 00:37:22,090 Então, o que você acha que 1, 2, vai para 3.map x x tempos 750 00:37:22,090 --> 00:37:25,480 x lhe dá de volta dada que esta função é 751 00:37:25,480 --> 00:37:27,680 executado em cada elemento dessa matriz. 752 00:37:27,680 --> 00:37:30,837 753 00:37:30,837 --> 00:37:32,190 >> AUDIÊNCIA: 1, 4 9? 754 00:37:32,190 --> 00:37:35,709 >> Neel Mehta,: Sim, 1, 4, 9 porque você faz 1 vezes 1. 755 00:37:35,709 --> 00:37:36,500 Isso dá-lhe um. 756 00:37:36,500 --> 00:37:37,690 Esse é o primeiro elemento. 757 00:37:37,690 --> 00:37:38,530 >> 2 vezes 2 é 4. 758 00:37:38,530 --> 00:37:39,570 Isso é um segundo elemento. 759 00:37:39,570 --> 00:37:40,310 3 vezes 3 é 9. 760 00:37:40,310 --> 00:37:41,540 Isso é um terceiro elemento. 761 00:37:41,540 --> 00:37:42,640 Faz sentido? 762 00:37:42,640 --> 00:37:45,015 Assim mapa tem uma técnica que você usar na programadores funcionais, 763 00:37:45,015 --> 00:37:48,090 o novo estilo de programação para fazer algo 764 00:37:48,090 --> 00:37:50,500 para cada elemento em sua lista. 765 00:37:50,500 --> 00:37:51,970 E assim isso soa familiar. 766 00:37:51,970 --> 00:37:53,370 Temos uma lista de cartões. 767 00:37:53,370 --> 00:37:56,860 Queremos obter um item da lista para cada um, por isso vamos usar o mapa aqui. 768 00:37:56,860 --> 00:38:00,250 Vamos dizer, vamos lista equals this.props, cartões, mapa. 769 00:38:00,250 --> 00:38:10,580 770 00:38:10,580 --> 00:38:15,070 >> E assim dado um cartão, estamos vai gerar um item de lista 771 00:38:15,070 --> 00:38:17,580 com conteúdos que lado da placa do mesmo. 772 00:38:17,580 --> 00:38:20,660 Vamos apenas dizer que queremos dar para fora os cartões de questionar tão card.question. 773 00:38:20,660 --> 00:38:24,990 774 00:38:24,990 --> 00:38:30,649 Portanto, esta lista contém uma variedade de itens de lista ou de LI 775 00:38:30,649 --> 00:38:32,440 onde há uma lista item para cada cartão, 776 00:38:32,440 --> 00:38:35,150 e que contém a questão cartões. 777 00:38:35,150 --> 00:38:37,640 Faz sentido? 778 00:38:37,640 --> 00:38:39,450 >> Cool, então agora vamos realmente imprimir isso. 779 00:38:39,450 --> 00:38:46,521 Então, vamos voltar um ul. 780 00:38:46,521 --> 00:38:49,020 Dentro dessa lista não ordenada, nós apenas vou ficar toda a lista 781 00:38:49,020 --> 00:38:49,890 que eles nos deram. 782 00:38:49,890 --> 00:38:52,851 783 00:38:52,851 --> 00:38:53,350 Frio. 784 00:38:53,350 --> 00:38:56,060 >> Tudo bem, então agora este exibição de lista funciona apenas encontrar. 785 00:38:56,060 --> 00:38:59,842 Dúvidas sobre a exibição de lista? 786 00:38:59,842 --> 00:39:01,270 Você tem um monte de cartões. 787 00:39:01,270 --> 00:39:02,800 Você faz um item da lista para cada cartão. 788 00:39:02,800 --> 00:39:05,466 E você colocá-los dentro de um não-ordenada lista, e você dá-lo de volta. 789 00:39:05,466 --> 00:39:09,410 Então agora vamos agir para que embutir isso dentro do nosso aplicativo, 790 00:39:09,410 --> 00:39:14,310 para que possamos fazer isso, exibição de lista. 791 00:39:14,310 --> 00:39:17,070 O argumento é que vamos passar para a lista de exibição? 792 00:39:17,070 --> 00:39:18,320 Que propriedades que vamos dar-lhe? 793 00:39:18,320 --> 00:39:25,111 794 00:39:25,111 --> 00:39:26,860 Lembre-se, se você der que um monte de cartões, 795 00:39:26,860 --> 00:39:29,590 ele vai fazer a lista visualizar para os cartões. 796 00:39:29,590 --> 00:39:32,267 Então o que nós passamos aqui como o argumento? 797 00:39:32,267 --> 00:39:33,350 AUDIÊNCIA: Uma lista de cartas? 798 00:39:33,350 --> 00:39:37,130 Neel Mehta,: Sim, então cartões é igual a this.props.cards, certo? 799 00:39:37,130 --> 00:39:39,850 800 00:39:39,850 --> 00:39:44,370 E assim o único problema é que você só pode 801 00:39:44,370 --> 00:39:48,600 virou um elemento de nível superior em render, então você tem para envolvê-lo em uma div. 802 00:39:48,600 --> 00:39:49,100 É estranho. 803 00:39:49,100 --> 00:39:56,190 804 00:39:56,190 --> 00:39:57,530 Então vamos ver se isso. 805 00:39:57,530 --> 00:40:09,790 806 00:40:09,790 --> 00:40:10,560 Isso funciona? 807 00:40:10,560 --> 00:40:29,774 808 00:40:29,774 --> 00:40:31,030 >> Sim, lá você vai. 809 00:40:31,030 --> 00:40:33,700 Portanto, agora temos uma lista de cartas na parte inferior, 810 00:40:33,700 --> 00:40:36,180 e depois temos o nosso CardView-se no topo, 811 00:40:36,180 --> 00:40:40,486 e que vai virar entre os dois lados do cartão. 812 00:40:40,486 --> 00:40:42,610 Agora isso faz sentido como eu fiz isso? 813 00:40:42,610 --> 00:40:45,165 814 00:40:45,165 --> 00:40:46,790 É, por isso, novamente, nós temos dois componentes. 815 00:40:46,790 --> 00:40:49,666 As primeiras impressões de componentes fora todos os cartões na lista. 816 00:40:49,666 --> 00:40:50,540 Essa é a exibição de lista. 817 00:40:50,540 --> 00:40:54,770 E o segundo componente imprime apenas o cartão. 818 00:40:54,770 --> 00:40:58,840 Se você dar-lhe um certo cartão, ele vai imprimir informações sobre esse cartão 819 00:40:58,840 --> 00:41:01,870 e deixá-lo virar para trás e para frente. 820 00:41:01,870 --> 00:41:05,850 >> Portanto, se queremos, podemos tentar e falar sobre a adição de alguns novos recursos para isso. 821 00:41:05,850 --> 00:41:09,482 Caso contrário, podemos conversar um pouco mais cerca de a velocidade do reactor, 822 00:41:09,482 --> 00:41:11,190 ou podemos responder dúvidas que possa ter 823 00:41:11,190 --> 00:41:15,050 porque estas são todas as partes centrais de reagir que eu quero falar. 824 00:41:15,050 --> 00:41:16,540 Podemos ir em frente. 825 00:41:16,540 --> 00:41:17,590 Podemos responder a perguntas. 826 00:41:17,590 --> 00:41:18,560 O que você quiser. 827 00:41:18,560 --> 00:41:21,694 828 00:41:21,694 --> 00:41:24,205 >> AUDIÊNCIA: Você pode usar JSX em JavaScript normal? 829 00:41:24,205 --> 00:41:27,150 Ou isso é algo que veio com o [inaudível]? 830 00:41:27,150 --> 00:41:30,760 >> Neel Mehta,: A questão é lata você usa JSX com JavaScript normal? 831 00:41:30,760 --> 00:41:32,620 A resposta é sim. 832 00:41:32,620 --> 00:41:41,070 JSX é apenas uma maneira de que leva o seu JavaScript que tem HTML para dentro dele, 833 00:41:41,070 --> 00:41:44,215 e ele compila em JavaScript que não tem HTML dentro dele. 834 00:41:44,215 --> 00:41:47,880 Então, observe isso-- assim notar aqui. 835 00:41:47,880 --> 00:41:50,820 Isto parece que você tem como div e você tem coisas dentro dela. 836 00:41:50,820 --> 00:41:54,970 >> Que compila a JavaScript que como gera a mesma coisa. 837 00:41:54,970 --> 00:41:59,590 Eu acho que o que eu estou dizendo é que JSX é apenas uma sintática, como ele é 838 00:41:59,590 --> 00:42:03,530 um pré-processador para JavaScript muito como PHP é um pré-processador para HTML. 839 00:42:03,530 --> 00:42:05,490 JSC é um pré-processador para JavaScript que permite que 840 00:42:05,490 --> 00:42:12,970 você colocar HTML dentro do seu JavaScript. 841 00:42:12,970 --> 00:42:16,425 E por isso, se você tem o direito transformador que é uma coisa chamada [inaudível], 842 00:42:16,425 --> 00:42:17,300 que irá transformar. 843 00:42:17,300 --> 00:42:19,360 O pré-processador certo, ele vai deixar você fazer isso. 844 00:42:19,360 --> 00:42:20,235 >> AUDIÊNCIA: [inaudível] 845 00:42:20,235 --> 00:42:23,026 Neel Mehta,: Normalmente você não precisa para colocar HTML dentro de JavaScript 846 00:42:23,026 --> 00:42:24,110 a menos que seu fazer Reagir. 847 00:42:24,110 --> 00:42:27,146 Mas você pode fazê-lo de qualquer maneira. 848 00:42:27,146 --> 00:42:27,645 Sim? 849 00:42:27,645 --> 00:42:29,353 >> AUDIÊNCIA: Eu acho que você havia descrito Reagir 850 00:42:29,353 --> 00:42:31,970 como uma linguagem de programação funcional. 851 00:42:31,970 --> 00:42:35,646 Temos vindo a aprender C em CS50. 852 00:42:35,646 --> 00:42:38,032 C também é uma linguagem funcional? 853 00:42:38,032 --> 00:42:39,990 Neel Mehta,: Então a questão é sobre funcional 854 00:42:39,990 --> 00:42:43,010 versus outro coisa chamada programação imperativa ou processual. 855 00:42:43,010 --> 00:42:44,820 Há dois tipos de programas populares. 856 00:42:44,820 --> 00:42:48,550 Um é chamado de procedimento, que é tudo sobre como fazer comandos, 857 00:42:48,550 --> 00:42:51,510 e um é funcional, que é tudo sobre ter funções e tendo 858 00:42:51,510 --> 00:42:52,930 entrada e saída das pessoas. 859 00:42:52,930 --> 00:42:55,930 Reagir é um paradigma funcional. 860 00:42:55,930 --> 00:42:58,010 C é um paradigma muito processual. 861 00:42:58,010 --> 00:43:02,360 >> E como um exemplo, C, por exemplo, você não fizer desta forma declarativa 862 00:43:02,360 --> 00:43:04,390 de fazer o programa, certo? 863 00:43:04,390 --> 00:43:06,826 Você tem que dizer, imprimir esta. 864 00:43:06,826 --> 00:43:07,950 Alterar esta estrutura de dados. 865 00:43:07,950 --> 00:43:08,530 Imprima esta. 866 00:43:08,530 --> 00:43:10,160 É tudo sobre os comandos. 867 00:43:10,160 --> 00:43:12,640 >> Em Reagir, não há que muitos comandos. 868 00:43:12,640 --> 00:43:15,145 É tudo sobre ter componentes que juntos. 869 00:43:15,145 --> 00:43:16,300 Eles são como funções. 870 00:43:16,300 --> 00:43:26,360 Você tem como uma função chamado CardView, 871 00:43:26,360 --> 00:43:28,680 que é uma função que tem entrada, saída, 872 00:43:28,680 --> 00:43:30,660 e assim por reagir é tudo sobre esta filosofia 873 00:43:30,660 --> 00:43:32,700 nos de having-- você tiver dados. 874 00:43:32,700 --> 00:43:34,910 Você passá-lo através deste algoritmo, e ele vai 875 00:43:34,910 --> 00:43:36,800 HTML de saída que você apenas impresso da página, 876 00:43:36,800 --> 00:43:39,180 e então você tem que construí-lo peça por peça. 877 00:43:39,180 --> 00:43:42,800 >> Então, para desenhar uma metáfora para o que Eu disse antes, você sabe como 878 00:43:42,800 --> 00:43:47,050 no Facebook, se você receber uma mensagem, e você escolher que partes para atualizar, 879 00:43:47,050 --> 00:43:47,882 isso é processual. 880 00:43:47,882 --> 00:43:48,840 É imperativo, certo? 881 00:43:48,840 --> 00:43:49,806 OK, eu tenho uma mensagem. 882 00:43:49,806 --> 00:43:50,930 Vamos mudar conta lá. 883 00:43:50,930 --> 00:43:52,110 >> Vamos aparecer uma janela aqui. 884 00:43:52,110 --> 00:43:52,780 Vamos mudar conta lá. 885 00:43:52,780 --> 00:43:53,700 Vamos chamar isso aqui. 886 00:43:53,700 --> 00:43:55,220 Essa é uma abordagem processual. 887 00:43:55,220 --> 00:44:00,240 >> Isso é o que coisas como angular, Boost, Backbone, outros frameworks usar. 888 00:44:00,240 --> 00:44:01,200 Reagir é funcional. 889 00:44:01,200 --> 00:44:03,324 É uma maneira muito diferente de pensar sobre as coisas. 890 00:44:03,324 --> 00:44:07,950 Ele leva essa idéia de vamos ter funções ou algoritmos que irá você 891 00:44:07,950 --> 00:44:08,800 dar-lhe dados. 892 00:44:08,800 --> 00:44:11,820 Ela vai cuspir o que deve ser, eo computador 893 00:44:11,820 --> 00:44:13,490 vai cuidar de pesagem para fora. 894 00:44:13,490 --> 00:44:15,890 Você não lidar com isso sozinho. 895 00:44:15,890 --> 00:44:18,470 Isso faz um pouco de sentido? 896 00:44:18,470 --> 00:44:18,970 Sim? 897 00:44:18,970 --> 00:44:24,180 >> AUDIÊNCIA: Em uma linguagem funcional, tudo acontece de uma só vez? 898 00:44:24,180 --> 00:44:26,800 >> Neel Mehta,: Não, as coisas acontecem em ordem. 899 00:44:26,800 --> 00:44:29,320 Como aqui ainda há ordem, mas isso não acontece 900 00:44:29,320 --> 00:44:32,390 acontecer em ordem de como Recomendo, comando, comando. 901 00:44:32,390 --> 00:44:36,459 Isto acontece a fim de função lhe dá saída. 902 00:44:36,459 --> 00:44:37,750 Coloque isso em outra função. 903 00:44:37,750 --> 00:44:39,550 Coloque isso em outro função, outra função. 904 00:44:39,550 --> 00:44:41,470 >> Se você fizer CS51, você vai aprender programas funcionais 905 00:44:41,470 --> 00:44:42,886 um pouco fora do âmbito desta. 906 00:44:42,886 --> 00:44:45,090 Mas, basicamente, o que faz Reagir legal é não só 907 00:44:45,090 --> 00:44:46,840 o fluxo de dados unidirecional eo Dom virtual, 908 00:44:46,840 --> 00:44:48,700 mas também essa idéia de programação funcional. 909 00:44:48,700 --> 00:44:51,720 E a programação funcional é muito fácil para compor e fazer coisas legais fora de, 910 00:44:51,720 --> 00:44:53,844 e é muito fácil pensar sobre e raciocinar sobre. 911 00:44:53,844 --> 00:44:55,450 Portanto, é outro bom sorteio de Reagir. 912 00:44:55,450 --> 00:44:58,489 913 00:44:58,489 --> 00:44:59,280 Mais alguma pergunta? 914 00:44:59,280 --> 00:45:02,650 915 00:45:02,650 --> 00:45:03,150 Sim? 916 00:45:03,150 --> 00:45:06,840 >> AUDIÊNCIA: Hum, por que você faria usar ao invés de deixá-var? 917 00:45:06,840 --> 00:45:10,450 >> Neel Mehta,: Então a questão é por que você usa em vez de deixá-var? 918 00:45:10,450 --> 00:45:13,220 Esta é uma coisa chamada ES6 ou ECMAScript 6. 919 00:45:13,220 --> 00:45:15,820 É a nova versão do JavaScript. 920 00:45:15,820 --> 00:45:19,050 Há um monte de razões técnicas, Mas vamos é uma versão melhor de var. 921 00:45:19,050 --> 00:45:20,724 >> É como você declarar variáveis. 922 00:45:20,724 --> 00:45:21,390 Você pode usar o deixe. 923 00:45:21,390 --> 00:45:22,140 Você pode usar var. 924 00:45:22,140 --> 00:45:23,825 Let tem um grupo de técnicos reasons-- você pode procurá-los 925 00:45:23,825 --> 00:45:25,610 later---se para por que é melhor. 926 00:45:25,610 --> 00:45:28,780 Basicamente, ES6 tem algum bom nova sintaxe, algumas novas funcionalidades 927 00:45:28,780 --> 00:45:30,720 na parte superior do antigo Javascript. 928 00:45:30,720 --> 00:45:32,782 >> Portanto, temos como cinco minutos. 929 00:45:32,782 --> 00:45:34,990 Eu só queria falar sobre mais uma coisa real rápido. 930 00:45:34,990 --> 00:45:36,450 Se você tinha alguma dúvida, vamos falar sobre isso depois. 931 00:45:36,450 --> 00:45:38,366 Mas só para isso fica travado na câmera, eu só 932 00:45:38,366 --> 00:45:41,550 quero falar um pouco sobre como você Reagir realmente usar em seus aplicativos. 933 00:45:41,550 --> 00:45:47,220 934 00:45:47,220 --> 00:45:58,640 >> Se você aqui, Facebook.GitHub.IO/react, 935 00:45:58,640 --> 00:46:03,320 esta é a home page para Reagir, e ele vai mostrar como você realmente usar 936 00:46:03,320 --> 00:46:05,320 Reagir em suas páginas. 937 00:46:05,320 --> 00:46:08,845 Basicamente, é um pouco complicado tentando instalar Reagir. 938 00:46:08,845 --> 00:46:12,300 Não é tão fácil quanto basta arrastar e solte um JavaScript lá. 939 00:46:12,300 --> 00:46:15,890 >> Você tem que ter seu transformador configurado, que irá, como fazia antes, 940 00:46:15,890 --> 00:46:18,120 transformar o seu JSX em o JavaScript normal. 941 00:46:18,120 --> 00:46:21,030 Você tem que coisa que vou compilar você ES6 ao normal. 942 00:46:21,030 --> 00:46:24,720 JavaScript há uma grande quantidade de movimento peças que você tem que fazer, por isso há uma coisa 943 00:46:24,720 --> 00:46:27,200 chamado Yeoman, Yeoman.io. 944 00:46:27,200 --> 00:46:31,110 E esta é uma ferramenta de linha de comando que vai ajudá-lo a scaffold o seu Reagir 945 00:46:31,110 --> 00:46:32,380 projetos facilmente. 946 00:46:32,380 --> 00:46:38,660 >> Assim, você pode ler mais sobre este mais tarde, mas existem algumas ferramentas 947 00:46:38,660 --> 00:46:40,160 Yeoman que oferece. 948 00:46:40,160 --> 00:46:43,280 Eles permitem que você crie um Reagir app com tudo embutido. 949 00:46:43,280 --> 00:46:46,030 Como ele vai ter construído em, componentes embutidos. 950 00:46:46,030 --> 00:46:47,880 Ele terá seu transformador construído em. 951 00:46:47,880 --> 00:46:50,699 Eles têm um monte de fresco material construído em automaticamente 952 00:46:50,699 --> 00:46:52,240 usando essas coisas chamadas geradores. 953 00:46:52,240 --> 00:46:54,620 >> Então leia sobre isso, se você gosta. 954 00:46:54,620 --> 00:46:59,110 Basta ir em Yeoman, Y-E-O-M-A-N, e você pode encontrar geradores como estes. 955 00:46:59,110 --> 00:47:01,263 E com os geradores como estes, você só gosta de um 956 00:47:01,263 --> 00:47:03,010 é uma linha de comando comandos casal. 957 00:47:03,010 --> 00:47:05,530 Vai fora um andaime Reagir toda app para você. 958 00:47:05,530 --> 00:47:10,470 Ele vai ficar toda a tubulação manual e trabalho duro feito para você, 959 00:47:10,470 --> 00:47:13,010 e é por isso que você se concentrar apenas em apenas escrever em Reagir. 960 00:47:13,010 --> 00:47:16,739 >> Então, basicamente a construção de uma Reagir app não é trivial. 961 00:47:16,739 --> 00:47:19,530 É com fio todos juntos, mas há são ferramentas que vai fazer isso por você. 962 00:47:19,530 --> 00:47:23,070 Então, se você quiser fazer uma Reagir app, tente fazê-lo dessa forma. 963 00:47:23,070 --> 00:47:26,360 Se você simplesmente deseja experimentar, você pode tentar usar este CodePen 964 00:47:26,360 --> 00:47:28,550 porque este tem CodePen toda a fiação reagir. 965 00:47:28,550 --> 00:47:30,240 Eu fiz todo o trabalho para você já. 966 00:47:30,240 --> 00:47:34,610 >> Então, se você quer fazer como um produção para libertar Reagir app, 967 00:47:34,610 --> 00:47:37,220 tentar um destes geradores. 968 00:47:37,220 --> 00:47:40,240 Se você só quer jogar ao redor, é muitas vezes vale apenas 969 00:47:40,240 --> 00:47:44,490 como tentar brincar em CodePen aqui. 970 00:47:44,490 --> 00:47:45,470 Parece bom? 971 00:47:45,470 --> 00:47:45,970 Frio. 972 00:47:45,970 --> 00:47:47,890 >> Então, isso é tudo que eu tenho. 973 00:47:47,890 --> 00:47:52,470 Mais uma vez, todos os códigos e são exemplos vai ser neste site aqui. 974 00:47:52,470 --> 00:47:55,509 Então, mais uma vez, nós não falar sobre muito sintaxe de Reagir, 975 00:47:55,509 --> 00:47:57,550 mas para encontrar todos aqueles pequenos detalhes sintáticos, 976 00:47:57,550 --> 00:48:00,320 tudo vai estar disponível neste site aqui. 977 00:48:00,320 --> 00:48:02,660 >> Então, eu recomendo como dar o primeiro passo. 978 00:48:02,660 --> 00:48:06,277 Coloque-o em sua CodePen. 979 00:48:06,277 --> 00:48:08,110 Tente trabalhar em fazer -lo para o segundo passo. 980 00:48:08,110 --> 00:48:11,310 Há uma quarta etapa, e apenas ver onde você começa a partir daí. 981 00:48:11,310 --> 00:48:14,840 >> Mais alguma pergunta, verifique que a página ou enviar e-mail me. 982 00:48:14,840 --> 00:48:16,490 Esse é o meu e-mail. 983 00:48:16,490 --> 00:48:19,885 Mas eu adoraria ajudá-lo com qualquer perguntas que você possa ter sobre Reagir. 984 00:48:19,885 --> 00:48:21,010 Então, sim, isso é tudo que eu tenho. 985 00:48:21,010 --> 00:48:23,410 Obrigado a todos muito para assistindo ou para assistir. 986 00:48:23,410 --> 00:48:26,820 E eu vou tirar dúvidas você pode ter depois desta agora. 987 00:48:26,820 --> 00:48:29,140 Então, obrigado a todos por assistir. 988 00:48:29,140 --> 00:48:31,270