1 00:00:02,410 --> 00:00:05,440 Então, quais são as nossas alternativas ao fluxo de trabalho gerenciado? 2 00:00:05,440 --> 00:00:08,450 Uma alternativa é usar a CLI do React Native, você 3 00:00:08,470 --> 00:00:10,950 pode aprender sobre isso na página oficial do 4 00:00:10,960 --> 00:00:15,430 React Native, se você o visitar, basta pesquisar no React Native para encontrá-lo e, 5 00:00:15,880 --> 00:00:22,120 se você clicar em começar, será recebido com duas maneiras diferentes de começar e as formas pré-selecionadas de usar o 6 00:00:22,130 --> 00:00:23,080 Expo CLI, 7 00:00:23,080 --> 00:00:24,960 é a abordagem que usamos, certo? 8 00:00:24,970 --> 00:00:30,220 Portanto, não há nada muito chique nisso, isso fornece um aplicativo React Native usando expo, é o 9 00:00:30,220 --> 00:00:31,720 que usamos neste curso. 10 00:00:31,750 --> 00:00:35,410 Você também pode clicar no início rápido do 11 00:00:35,410 --> 00:00:41,170 React Native CLI e agora aqui, antes de tudo, você precisa configurar seu sistema de 12 00:00:41,170 --> 00:00:47,530 uma certa maneira e depois instalar um pacote separado, o React Native CLI, que agora você precisa 13 00:00:47,530 --> 00:00:55,060 para criar um projeto e executá-lo e assim por diante. Agora importante, aqui você encontrará instruções detalhadas de instalação para diferentes sistemas operacionais 14 00:00:55,300 --> 00:00:57,070 e aplicativos que deseja criar. 15 00:00:57,100 --> 00:01:02,680 Agora, esteja ciente de que no Windows, como diz aqui, você não pode criar aplicativos iOS, o mesmo no Linux, 16 00:01:02,680 --> 00:01:07,870 você só pode criar aplicativos Android lá e encontrará instruções de instalação se selecionar as opções específicas. 17 00:01:08,590 --> 00:01:09,730 No macOS, você 18 00:01:09,760 --> 00:01:14,170 pode criar iOS e Android e também precisará seguir estas instruções de instalação. 19 00:01:14,170 --> 00:01:19,030 Agora não vou fazer isso em detalhes aqui, porque você encontrará todos escritos aqui, é 20 00:01:19,030 --> 00:01:20,110 claro, se quiser 21 00:01:20,110 --> 00:01:25,960 acompanhar, no final, você precisará instalar alguns pacotes, não os pacotes npm, mas os pacotes em todo o sistema 22 00:01:25,960 --> 00:01:30,490 e o O processo exato de instalação difere em qual plataforma você está executando. 23 00:01:30,580 --> 00:01:36,670 Você precisará instalar o Android Studio ou Xcode, portanto, o Xcode para aplicativos iOS, o Android Studio para 24 00:01:36,670 --> 00:01:39,130 aplicativos Android e você precisa instalá-lo agora, 25 00:01:39,160 --> 00:01:40,610 antes era opcional, 26 00:01:40,630 --> 00:01:42,840 eu fiz para obter um simulador, agora 27 00:01:42,850 --> 00:01:47,020 você precisa, porque agora esses ferramentas serão usadas para criar seu aplicativo. 28 00:01:47,080 --> 00:01:52,750 Anteriormente, isso não era necessário porque o invólucro da expo basicamente leu nosso código e o hospedou, e 29 00:01:52,750 --> 00:01:56,780 você também pode criar um aplicativo independente com expo no fluxo de trabalho 30 00:01:56,810 --> 00:01:59,030 gerenciado, o que acontecerá na nuvem. 31 00:01:59,320 --> 00:02:04,780 Agora que tudo acontece localmente, você precisará instalar o Android Studio e assim por diante e 32 00:02:04,780 --> 00:02:07,540 instalá-lo com todas as opções encontradas aqui. 33 00:02:07,550 --> 00:02:14,130 Agora você também não importa em qual plataforma está trabalhando, também precisará instalar a CLI do React Native. Você pode fazer 34 00:02:14,140 --> 00:02:22,420 isso no prompt de comando ou no terminal normal. No Mac ou Linux, talvez seja necessário adicionar o sudo na frente dele para obtenha as permissões corretas 35 00:02:22,420 --> 00:02:27,670 e isso agora instalará globalmente a CLI do React Native, para isso você também precisará do NodeJS 36 00:02:27,670 --> 00:02:28,050 instalado 37 00:02:28,060 --> 00:02:32,860 porque ele usa o npm, que é o gerenciador de pacotes do nó, portanto, certifique-se 38 00:02:32,860 --> 00:02:34,450 de que também o possui. 39 00:02:35,540 --> 00:02:38,330 Agora, com a CLI do React 40 00:02:38,330 --> 00:02:44,990 Native instalada, podemos começar a criar um projeto totalmente sem expo e, para isso, criarei um 41 00:02:44,990 --> 00:02:49,110 projeto totalmente novo e selecionei uma pasta para isso executando 42 00:02:49,130 --> 00:02:53,120 o init do native-react e agora qualquer nome de sua 43 00:02:56,120 --> 00:02:59,950 escolha, por exemplo RNWithoutExpo. Para o nome, é importante que 44 00:02:59,990 --> 00:03:03,380 seja escrito assim, sem traços ou sublinhados, mas apenas uma palavra. 45 00:03:03,890 --> 00:03:08,780 Então RNWithoutExpo é o nome que eu escolherei e agora criará um novo projeto do React Native 46 00:03:08,810 --> 00:03:14,450 usando a CLI do React Native neste local em que você executou esse comando e fornecerá a nova pasta que 47 00:03:14,450 --> 00:03:16,870 contém esse novo projeto do React Native. 48 00:03:16,970 --> 00:03:18,260 Agora importante novamente, 49 00:03:18,260 --> 00:03:24,800 agora você precisa ter o Android Studio e o Xcode instalados e configurados conforme mencionado nos documentos 50 00:03:24,800 --> 00:03:25,690 oficiais 51 00:03:25,700 --> 00:03:28,520 aqui. Caso contrário, o que vou mostrar 52 00:03:28,520 --> 00:03:34,100 agora não funcionará, você precisará instalá-lo porque agora essas ferramentas serão aproveitadas por a CLI 53 00:03:34,100 --> 00:03:40,820 nativa do React para criar e executar seu aplicativo. Também gere alguns emuladores ou simuladores, que podem ser os mesmos 54 00:03:40,820 --> 00:03:46,060 usados anteriormente no curso, mas você precisa deles para que possamos ver nosso aplicativo React Native em execução lá. 55 00:03:46,560 --> 00:03:52,830 Então agora vamos aguardar que esta configuração termine aqui e, uma vez feito isso e esse processo possa demorar um pouco, você 56 00:03:52,860 --> 00:03:59,900 pode seguir as instruções aqui para executar o aplicativo no final. Então, deixe-me navegar nesta pasta recém-criada aqui 57 00:03:59,900 --> 00:04:00,560 e 58 00:04:01,640 --> 00:04:04,670 executar o react-native run-ios, por exemplo, 59 00:04:04,750 --> 00:04:12,260 para executá-lo no simulador do iOS que obtive. Agora, nos bastidores, o Xcode usa o Xcode para criar este 60 00:04:12,260 --> 00:04:13,070 aplicativo, 61 00:04:13,070 --> 00:04:19,180 ele não usa mais o expo, você pode desinstalar o cliente expo aqui, você pode desinstalar a CLI 62 00:04:19,220 --> 00:04:20,390 do expo do 63 00:04:20,390 --> 00:04:26,510 seu sistema, isso não aproveita o expo, apenas usa o Xcode por trás as cenas para criar seu 64 00:04:26,540 --> 00:04:33,020 aplicativo, então esta ferramenta de desenvolvimento nativa da Apple. Então, vamos aguardar o término dessa compilação e, na primeira vez em que 65 00:04:33,020 --> 00:04:34,260 a compilar, isso demorará 66 00:04:34,280 --> 00:04:38,960 um pouco mais, pois as reconstruções subsequentes serão mais rápidas. Então, vamos esperar que isso termine. 67 00:04:39,870 --> 00:04:43,980 Agora, durante todo esse processo de compilação, uma nova guia será aberta ou uma nova 68 00:04:43,980 --> 00:04:47,430 janela no seu terminal, mantenha esse processo em execução e também mantenha o 69 00:04:47,430 --> 00:04:48,080 processo de 70 00:04:48,090 --> 00:04:53,610 compilação, é claro, não saia disso, portanto, mantenha esses processos em funcionamento aqui e em execução. agora isso instala o aplicativo 71 00:04:53,610 --> 00:04:58,650 no simulador, neste caso, se você tivesse um dispositivo real conectado, ele o instalaria lá e lançaria o aplicativo 72 00:04:58,650 --> 00:05:00,490 lá e, portanto, aqui, ele realmente 73 00:05:00,580 --> 00:05:03,060 criou um novo simulador aqui para mim, não importa, 74 00:05:03,090 --> 00:05:07,830 agora ele lança o aplicativo aqui neste simulador. Novamente para o primeiro lançamento, isso agora 75 00:05:07,830 --> 00:05:14,030 faz o download do aplicativo incorporado neste dispositivo basicamente e você também tem alguns recursos de desenvolvimento interessantes, a depuração remota 76 00:05:14,030 --> 00:05:18,270 pode ser ativada, então você também tem todos esses recursos interessantes aqui, isso 77 00:05:18,300 --> 00:05:22,750 não é exclusivo da expo e este primeiro lançamento demorará um pouco mais, conforme mencionado. 78 00:05:22,770 --> 00:05:30,220 Então, vamos esperar que esse download termine aqui, para que o aplicativo seja iniciado e aqui está chegando. Agora, a tela inicial exata que você está vendo 79 00:05:30,250 --> 00:05:32,410 aqui, que pode diferir ao 80 00:05:32,500 --> 00:05:37,450 longo do tempo, porque esse é apenas o código inicial que você obtém 81 00:05:37,450 --> 00:05:43,990 no projeto, que veremos em um segundo, mas agora esse é o aplicativo, um aplicativo nativo sem 82 00:05:44,080 --> 00:05:50,740 exposição caso contrário, o mesmo, executando no iOS. Também podemos executá-lo no Android e, para isso, esse processo que agora está concluído pode 83 00:05:50,740 --> 00:05:52,330 ser limpo, o outro deve continuar em 84 00:05:52,330 --> 00:05:57,360 execução, é o servidor de desenvolvimento que conversa com o dispositivo e que observa as alterações nos arquivos e envia um novo código 85 00:05:57,360 --> 00:05:58,270 ao dispositivo. , 86 00:05:58,270 --> 00:06:03,250 então o que você sabe da expo, que funciona aqui também. Portanto, mantenha o outro processo em 87 00:06:03,250 --> 00:06:10,300 execução, mas agora também podemos executar o react-native run-android para criar o aplicativo para Android e aproveitar o mesmo servidor 88 00:06:10,300 --> 00:06:16,260 para criar e enviar o aplicativo Android para o emulador do Android e ver isso também. 89 00:06:16,270 --> 00:06:17,950 Então, vamos esperar que isso 90 00:06:17,950 --> 00:06:22,850 termine, novamente essa primeira compilação levará mais tempo, as recargas subsequentes serão muito mais rápidas. 91 00:06:22,930 --> 00:06:28,150 Esse processo de compilação agora utiliza o Android Studio, que você também precisa 92 00:06:28,330 --> 00:06:34,130 ter instalado e configurado conforme descrito nos documentos oficiais e, portanto, agora também funciona totalmente 93 00:06:34,140 --> 00:06:37,190 sem expo, apenas usa o Android Studio. 94 00:06:37,370 --> 00:06:44,030 Agora, isso também inicia o aplicativo Android aqui no meu emulador do Android, mas, como antes, esse lançamento inicial pode demorar um pouco, agora 95 00:06:44,030 --> 00:06:45,470 está se conectando a este 96 00:06:45,470 --> 00:06:48,600 servidor de desenvolvimento que, portanto, é claro que você também deve 97 00:06:48,710 --> 00:06:53,900 continuar executando, não apenas enquanto constrói neste pacote, mas o tempo todo, para que, com as alterações nos 98 00:06:53,900 --> 00:06:59,180 seus arquivos, você obtenha uma reconstrução ao vivo e, uma vez feito isso, vamos ver o aplicativo finalizado sendo 99 00:06:59,180 --> 00:07:00,530 executado no Android. 100 00:07:00,530 --> 00:07:03,500 Agora, vamos dar uma olhada no código que é 101 00:07:03,500 --> 00:07:07,420 responsável por isso, agora parece totalmente diferente do que vimos até agora? 102 00:07:07,550 --> 00:07:12,620 Para isso, carreguei o projeto aqui novamente com o Visual Studio Code, para que o mesmo configurado como antes 103 00:07:12,620 --> 00:07:18,140 e o que você vê pareça um pouco diferente, mas principalmente, temos um monte de arquivos de configuração diferentes, justos 104 00:07:18,140 --> 00:07:22,040 o suficiente, mas isso realmente não muda a maneira como escrevemos nosso código. 105 00:07:22,130 --> 00:07:24,960 Muito importante: temos um Android e uma pasta iOS, 106 00:07:24,980 --> 00:07:26,320 não tínhamos isso 107 00:07:26,360 --> 00:07:31,270 antes, essas pastas e no Windows, a propósito, Linux você não tem iOS, você só tem 108 00:07:31,460 --> 00:07:36,740 Android lá, mas essas pastas contêm o aplicativo nativo real projetos criados com a ajuda do Android 109 00:07:36,740 --> 00:07:40,570 Studio e do Xcode e seu código é incorporado ao que você poderia 110 00:07:40,570 --> 00:07:45,710 dizer, o React Native faz tudo isso para você, o processo da CLI do React Native, mas 111 00:07:45,710 --> 00:07:51,230 se dermos uma olhada no código concreto no aplicativo. arquivo js, bem, isso é 112 00:07:51,230 --> 00:07:58,430 exatamente o que usamos neste curso, certo? Lá, temos algumas importações e alguns links adicionais, que mostram alguns avisos aqui 113 00:07:58,430 --> 00:08:00,180 sobre o estilo do código. 114 00:08:00,230 --> 00:08:04,160 Esses não são erros reais, apenas que eu deveria usar aspas duplas em vez de 115 00:08:04,170 --> 00:08:08,570 aspas simples; sim, alguma recomendação da qual não me importo aqui, mas se você der uma olhada 116 00:08:08,630 --> 00:08:13,560 no que está sendo importado aqui, reaja, salve a visualização da área, a folha de estilo, a visualização de 117 00:08:13,700 --> 00:08:18,520 rolagem , visualizar, texto - essas são todas as coisas com as quais já trabalhamos, por isso temos os 118 00:08:18,710 --> 00:08:26,690 componentes normais com os quais já trabalhamos e, é claro, fazemos porque o que eu disse ao longo deste curso, React Native é React Native, expo é um invólucro fino em 119 00:08:26,690 --> 00:08:27,780 torno dele . 120 00:08:27,860 --> 00:08:34,580 Nós escrevemos o mesmo código, usamos os mesmos componentes, eles são compilados em widgets nativos, que nem mudam quando 121 00:08:34,580 --> 00:08:36,920 usamos expo, a única diferença é 122 00:08:36,920 --> 00:08:41,360 que, com expo, não precisamos configurar tanto, a compilação é um pouco 123 00:08:41,390 --> 00:08:48,220 mais rápido e adicionar módulos nativos é super fácil, testar em dispositivos reais é super fácil, é simplesmente mais fácil, 124 00:08:48,230 --> 00:08:49,580 criamos o aplicativo 125 00:08:49,580 --> 00:08:54,110 da mesma maneira e isso é algo que você pode ver aqui também. 126 00:08:54,110 --> 00:08:56,920 Os estilos são configurados da mesma maneira com a Folha de estilo. criar, é tudo o 127 00:08:56,990 --> 00:09:00,530 que fizemos ao longo deste curso e isso é 128 00:09:01,570 --> 00:09:02,960 importante para você. 129 00:09:03,020 --> 00:09:05,870 Agora, uma coisa extra que você encontrará aqui é o índice. arquivo js, não tivemos 130 00:09:05,870 --> 00:09:11,780 isso na expo, esse é o arquivo de configuração básica que inicia seu aplicativo, você pode dizer, que garante 131 00:09:11,780 --> 00:09:16,150 que esse componente do aplicativo seja renderizado na tela, isso foi algo que 132 00:09:16,160 --> 00:09:22,160 a expo fez por você no React Aplicativo de exposição nativo, mas, além disso, é realmente o mesmo e 133 00:09:22,160 --> 00:09:24,460 você criaria um aplicativo da mesma maneira.