1 00:00:02,250 --> 00:00:09,030 Para que este anexo encontre um projeto inicial, esse projeto inicial foi criado com o aplicativo Create React, 2 00:00:09,150 --> 00:00:11,820 uma ferramenta criada pela equipe do React. 3 00:00:11,880 --> 00:00:18,510 No final, o que facilita a criação de novos projetos de reação e nos fornece uma estrutura de projeto como essa. 4 00:00:18,630 --> 00:00:22,980 Eu ajustei um pouco, mas geralmente é exatamente o mesmo que você obteria com essa ferramenta. 5 00:00:23,460 --> 00:00:25,550 Agora, por que precisamos dessa ferramenta? 6 00:00:25,560 --> 00:00:28,020 Por que simplesmente não importamos um script em nosso H. 7 00:00:28,020 --> 00:00:29,580 Arquivo HTML e começar? 8 00:00:30,120 --> 00:00:33,660 Porque React é um pouco mais complexo que o JavaScript baunilha. 9 00:00:33,840 --> 00:00:39,660 No final, enviamos código JavaScript de baunilha, mas a maneira como escrevemos no código é um pouco mais conveniente para 10 00:00:39,690 --> 00:00:40,770 nós, como desenvolvedor. 11 00:00:41,070 --> 00:00:46,620 Podemos usar certos recursos que não seriam executados no navegador e, portanto, a configuração do projeto 12 00:00:46,620 --> 00:00:52,680 aqui inclui algumas ferramentas que pegam o código que escrevemos como desenvolvedor e, na verdade, o convertem em 13 00:00:52,680 --> 00:00:54,480 código executado em um navegador. 14 00:00:54,570 --> 00:00:57,960 Então, tivemos o Neuroma, o código que é executado no navegador? 15 00:00:58,320 --> 00:01:01,710 Mas é mais fácil escrever esse código como desenvolvedor. 16 00:01:02,220 --> 00:01:07,800 Além disso, obtemos um servidor de desenvolvimento, que é um servidor simples que atende nosso aplicativo front-end, de 17 00:01:07,860 --> 00:01:13,020 modo que não possui back-back e somente serve esse front-end e que recarrega ou injeta automaticamente 18 00:01:13,020 --> 00:01:18,060 alterações sempre que alteramos e salvamos algo em uma de nossas fontes arquivos de código. 19 00:01:18,780 --> 00:01:23,950 Além disso, aqui com o REACT, estamos construindo um aplicativo de página única. 20 00:01:24,060 --> 00:01:29,040 Isso não é obrigatório, mas é uma escolha comum em um aplicativo de página única. 21 00:01:29,370 --> 00:01:34,710 Você tem apenas um arquivo H Timal, que no final é retornado pelo servidor que atende esse aplicativo. 22 00:01:34,890 --> 00:01:39,360 Nesse caso, esse arquivo Timmo de idade, que em si é relativamente vazio. 23 00:01:39,930 --> 00:01:44,490 Mas esse arquivo incluirá posteriormente as importações de scripts. 24 00:01:44,620 --> 00:01:50,370 Eles serão adicionados automaticamente por essas ferramentas que mencionei anteriormente, que no final hospedam e executam nosso 25 00:01:50,430 --> 00:01:56,280 aplicativo de reação, que por sua vez estamos aqui na pasta de origem com nossos arquivos que 26 00:01:57,000 --> 00:02:03,420 chegamos lá para que, no final, tenhamos um aplicativo da Web de Front-End, que consiste em um arquivo html 27 00:02:03,420 --> 00:02:09,450 em que o Denn JavaScript é usado para renderizar algo na tela e renderiza novamente algo na tela 28 00:02:09,750 --> 00:02:10,740 quando necessário. 29 00:02:11,250 --> 00:02:17,910 E isso nos permite criar interfaces de usuário modernas altamente reativas, onde tudo acontece instantaneamente porque o JavaScript 30 00:02:18,030 --> 00:02:21,480 é executado no navegador, as coisas acontecem instantaneamente. 31 00:02:21,570 --> 00:02:25,530 Não precisamos esperar que um novo arquivo L seja baixado de um servidor. 32 00:02:25,950 --> 00:02:27,510 É que tudo já está lá. 33 00:02:27,570 --> 00:02:33,270 Portanto, quando um usuário clica em um botão e queremos mostrar uma caixa na tela em resposta a essa explosão de 34 00:02:33,540 --> 00:02:35,730 cliques, isso acontece instantaneamente por causa do JavaScript. 35 00:02:36,090 --> 00:02:37,530 Esse é o sentimento que queremos proporcionar. 36 00:02:37,900 --> 00:02:40,110 Podemos fazer isso com reagir agora. 37 00:02:40,200 --> 00:02:41,700 Chega de falar sobre a teoria. 38 00:02:42,030 --> 00:02:42,990 Vamos escrever um código. 39 00:02:43,350 --> 00:02:47,940 Como mencionei, fazemos isso aqui na pasta de origem, onde encontramos um arquivo indexado ao seu 40 00:02:47,940 --> 00:02:50,370 arquivo no aplicativo Chase, ambos arquivos muito simples. 41 00:02:50,970 --> 00:02:53,100 Agora vamos dar uma olhada no telefone de chance indexado. 42 00:02:53,340 --> 00:02:56,010 Lá você vê, temos algumas importações no topo. 43 00:02:56,310 --> 00:02:59,610 A propósito, é assim que você importa código no front-end. 44 00:03:00,150 --> 00:03:05,550 Importe algo de e, em seguida, defina um caminho relativo para o seu próprio arquivo. 45 00:03:05,700 --> 00:03:08,820 Ou, se for um pacote de terceiros, apenas o nome do pacote. 46 00:03:09,780 --> 00:03:13,080 E então aqui temos importações de nossos próprios arquivos com um caminho relativo. 47 00:03:13,170 --> 00:03:16,800 Como mencionei, aqui estamos executando um comando no final. 48 00:03:16,980 --> 00:03:18,660 Reagir Dom render. 49 00:03:19,740 --> 00:03:24,990 Agora, isso vem do objeto React Dom aqui no final, que estamos 50 00:03:24,990 --> 00:03:31,110 importando da biblioteca React Arm, e isso renderiza essa coisa estranha, que não é JavaScript comum. 51 00:03:31,490 --> 00:03:31,760 É você. 52 00:03:31,800 --> 00:03:33,900 Isso joga no nosso H. M. página. 53 00:03:34,290 --> 00:03:35,900 Este é um JavaScript comum. 54 00:03:35,910 --> 00:03:39,110 E aqui estamos selecionando o elemento com uma idéia de raiz. 55 00:03:39,510 --> 00:03:42,990 Se dermos uma olhada no nosso único arquivo HGL, esse é o Dave aqui. 56 00:03:43,110 --> 00:03:48,270 Portanto, os dados estão no final, onde nosso aplicativo de página única de reação será hospedado às duas. 57 00:03:48,600 --> 00:03:52,710 E eles estão prontos para reagir, assumir o controle e renderizar tudo naquele lugar. 58 00:03:53,940 --> 00:03:55,230 Então é isso que estamos fazendo aqui. 59 00:03:55,260 --> 00:03:58,290 Mas o que é isso estranho para o pai? 60 00:03:58,310 --> 00:04:01,500 Precisamos entender o que são componentes e como a reação funciona.