Au 01 - Front-end - React - Configurando ambiente - Mestres BEGIN

[Música] fala pessoal jancer aqui o vídeo de hoje é o primeiro vídeo aí de uma série de vídeos que a gente vai estar produzindo aqui sobre uma aplicação né sobre na verdade sobre o react a gente vai estar desenvolvendo uma aplicação usando react de um minicurso aqui dentro da Mestres e vai ser bem legal porque a gente vai abordar bastante tópicos aí sobre o react a gente vai se aprofundar em algumas coisas a gente vai estar criando a interface né criando ali toda a aplicação nessa nossa aplicação Então vai ser algo bem interessante bem legal e nessa aula Ela é uma aula introdutória né então a gente vai estar fazendo basicamente a configuração aqui do ambiente de desenvolvimento e pra gente tá conseguindo né trabalhar aí com o react e desenvolver o nosso código Beleza então antes da gente explorar e fazer aqui as instalações de desenvolvimento eu quero falar um pouco aqui sobre o que é na verdade o react né O que é isso então vou vir aqui na minha máquina eu vou pesquisar aqui no Google mesmo sobre react né E quando a gente pesquisa aqui a gente já encontra né o o site oficial né documentação oficial do react onde quando a gente entra né Ele fala aqui que o react né biblioteca JavaScript para criar interfaces de usuário então quando a gente clica ali né em Comece a usar ele já traz aqui pra gente por uma parte introdutória da documentação onde ele fala muitas coisas sobre o que é na verdade o react Né o ambiente de desenvolvimento ferramentas que a gente tem para est desenvolvendo então É bem interessante essa documentação aqui a gente não vai passar muito muito sobre ela né Eu quero só mesmo mostrar para vocês que a gente tem uma documentação muito boa muito completa sobre o que é react e também como trabalhar com ele né e na verdade é falando aqui mais um pouco sobre como react funciona né como foi dito aqui ele nos ajuda a criar essas interfaces E no caso do Web né ele cria essa interface mas a gente precisa de alguma outra coisa para exibir essa interface né no caso do Web a gente usa o react dom né que é outra biblioteca que trabalha junto com react para trabalhar eh pra gente conseguir estar gerando o nosso código web mas no caso do Native do do mobile né quando a gente tá falando de Android IOS a gente tem o react Native que é outra biblioteca que juntamente com react funciona aí criando eh nos ajuda né a criar essas aplicações e fazer tudo funcionar certo então pra gente configurar aqui o nosso ambiente né pra gente tá conseguindo desenvolver o react primeiramente a gente precisa do nodejs né eu pesquisei aqui no Google por nodejs e ele já aparece aqui né alguns resultados e o o segundo aqui né esse primeiro aqui é um anúncio esse segundo já é a documentação oficial do nodejs e o que que é o nodejs n ele é basicamente uma uma Engine ali que vai executar o nosso código JavaScript na nossa máquina né então ele pega Engine V8 né o V8 o V8 do Google né que o Google USA aqui no Google Chrome e exporta isso pra máquina né exporta isso como um pacote que pode ser instalado em um sistema operacional nesse caso a gente tá usando aqui o Windows né então o node é para isso a gente vai usar a gente vai desenvolver o nosso código JavaScript o node vai interpretar esse código e vai gerar pra gente o resultado ali que é a nossa aplicação Beleza então aqui no Google né a gente tem aqui o resultado aqui nodejs né a gente já clica aqui para entrar no site deles a gente tem aqui a primeira ele já abre né na tela de download então que ele já me sugere aqui né o download para Windows a gente tem aqui a versão 18. 12. 1 LT né Assim Que a Gente clica aqui ele já faz o download vou cancelar aqui porque eu já tenho isso aqui baixado né e com esse download eu já vou puxar aqui um outro download que a gente vai usar que é o visual Studio code n que é o nosso editor de texto né Você pode usar existem outros editores de texto aí o o mais popular é o visual Studio code e é basicamente uma ideia ali que vai nos ajudar a editar o nosso código é escrever o nosso código e executar ali todos os processos Beleza então aqui eu pesquisei né visual Studio code aqui a gente tem o site oficial A já tem aqui o link de download né clicando aqui ele já joga a gente pro site oficial e aqui só eu clicar em download no caso meu que eu sou no Windows né clico aqui ele já vai fazer o download aqui também para mim eu vou cancelar porque eu já tenho isso aqui beleza então uma vez que os dois já foram baixados eu separei aqui pra gente essa pastinha installers que é com esses dois instaladores que eu acabei de mostrar para vocês e para fazer o download então quando a gente executa aqui o node ele vai abrir aqui pra gente Esse setup nesse Wizard aqui que a gente vai vai dar next aqui ele vai pedir pra gente né concordar com os termos né aceitar aqui com os termos Ele pergunta onde que a gente quer fazer esse download né E aqui é são os módulos os módulos do node né que existem muitos isso aqui normalmente a gente não vai mexer nisso aqui né mas a gente tem muita coisa O importante aqui é esse Ed to pef né porque é basicamente adicionar o node as variáveis de ambiente do sistema e quando a gente for executar o node lá quando a gente tá desenvolvendo o nosso sistema operacional sabe onde está o node e já executa pra gente sem dar nenhum erro ali de variável de ambiente tá então a gente não eche nada disso só dar um next aqui ele pergunta se a gente quer instalar uns pacotes a mais né uns pacotes externos ali do que relacionam com o node né E nesse caso aqui a gente não não vai querer isso não então não precisa marcar essa caixinha só dar um next aqui e ele e quando a gente clica aqui em instal ele vai instalar eu não vou clicar Porque eu já tenho instalado aqui na minha máquina certo então vou fechar ele aqui eh vou cancelar esse instalação Mas você clicaria ali em instal e a gente tem aqui também né o visual Studio code visual Studio code também a gente vai concordar com os termos né tem muito segredo aqui essas essas opções que já vem marcadas eu deixo elas marcadas aqui que é basicamente Quando eu tô em algum diretório eu pressiono com botão direito ele aparece para mim né para abrir esse diretório com o visual Studio code não vejo problema nisso Alguns podem ver mas enfim são essas caixinhas aqui que adicionar a opção abrir com code no Windows Explorer enfim né tem essas quatro opções aqui tem o Ed pef né Essa aqui é bom deixar marcada que é o mesmo e a mesma coisa que a gente fez lá no node criar um ícone desktop opcional também te dá um next clicando aqui em instal ele vai instalar eu também não vou clicar Porque eu já tenho isso aqui instalado beleza e uma vez que a gente fez isso a gente já pode abrir aqui no caso do Windows né Eu digito aqui CMD e para abrir o prompt de comando né e ele vai abrir isso aqui e no prompt de comando eu posso digitar um node traço V dou enter ele vai printar ali a versão do node que está instalado nessa minha máquina né então você vai fazer isso aí na sua máquina e se ele printar ali a versão significa que a instalação foi bem sucedida e que a gente já pode prosseguir certo então a gente vai prosseguir já na criação agora da nossa aplicação e para criar essa aplica Eu gosto muito de usar o Create react app né eu pesquisei aqui no Google por Create react app e a primeira opção a gente já tem aqui um site né o site da documentação que que é basicamente uma biblioteca JavaScript nesse Create re app que como o nome já disne ele cria pra gente uma aplicação react já com padrão muito bem definido com tudo bem configurado é é muito bom recomendo muito porque economiza muito tempo ali na criação do projeto e aqui com Creative react app né a gente clicando aqui em get started pra gente dar uma explorada melhor ele tem aqui documentado muitas coisas né sobre a estrutura sobre como que funciona sobre os scripts que que a gente tem disponível né enfim várias e várias coisas tem documentado aqui mas no nosso caso a gente só vai ver a questão da instalação né que é criando mesmo essa aplicação e para criar a gente usa o comando npx né Create react app e passa o nome da aplicação esse npx ele vem junto com o node né já vem instalado junto com o node que ele é um gerenciador de pacotes eh que o node usa aqui no caso Create react app né Ele é um pacote ele é uma biblioteca então a gente usa o npx Create react App ele vai pegar a biblioteca Create react app e vai executar ela aqui na nossa máquina gerando pra gente esse projeto tá Então nesse caso aqui né para esse curso a gente vai usar o typescript então aqui no Create react app a gente já tem uma opção aqui com o template né ele tem aqui ó um tra TR template typescript que ele vai criar para mim uma aplicação react já com o typescript configurado né No primeiro caso aqui ele vem com o JavaScript Então a gente vai executar Esse comando aqui certo eu vou até copiar ele aqui e a gente vai no nosso no nosso diretório né como eu tenho aqui esse diretório e do que tá esses instaladores eu vou voltar um aqui e eu vou criar aqui uma pasta vou filar ela aqui de app vou abrir ela e nessa pasta aqui nesse diretório eu eu vou abrir o meu promp de comando né então aqui no Windows eu digito eu clico aqui nessa barra de pesquisa e digito CMD ele já vai abrir o meu promt de comando nesse diretório que eu digitei ali né que eu digitei aqui na barra de de de endereço então com isso aqui aberto a gente pode colar o nosso comando certo e nesse caso eu só vou trocar o nome né ao invés de my app eu vou eu vou criar aqui um minicurso minicurso react né nome aqui do nosso projeto né o nome da aplicação e aqui eu pressiono enter ele vai fazer a criação desse dessa desse projeto para mim ele cria para mim né a pasta minicurso react e aqui dentro vai estar todos os arquivos todas as configurações que ele gera pro nosso projeto funcionar então vou aguardar aqui o processo e assim que terminar eu já volto aí certo ele finalizou aqui né o a instalação ele já pede aqui para mim para mim eu já posso abrir a pasta né então se eu dar aqui um um CD né Change directory ele F ele escreve isso aqui ó minicurso react digit um Tab aqui ele completa para mim aqui dentro se eu digito code ponto né espaço e ponto ele já vai abrir o vs code nesse diretório né se a gente dar uma olhada aqui ó minicurso react a gente já tem aqui os arquivos do projeto criado né então lá no vs code né Você pode executar aqui esse code ponto ou pode abrir o vs Code em si eu já abri aqui pra gente ter uma noção melhor aqui de como que tá esse vs code aqui por dentro e ele vai abrir basicamente nessa tela aqui o seu pode est um pouco diferente porque o meu como eu já tinha instalado eu já tinha um um workspace né uma área de trabalho aqui dentro do vs code eu configurei eu criei aqui Outra área de trabalho para esse curso né para esse minicurso Então pode estar um pouquin diferente aqui mas a a a interface né é essa então aqui você pode clicar em Open folder você pode clicar em file né e abrir um arquivo Open folder aqui para abrir uma pasta enfim a gente tem diferentes formas aí de tá abrindo esse essa esse projeto né então eu cliquei aqui em Open folder ele vai abrir aqui a na minha pasta hack né aqui do M da web eu vou abrir aqui a pasta app tem aqui minicurso react que é essa pasta aqui que eu vou dar eu entrei né em mini curso react ou você pode só clicar em cima dela aqui selecionar clicar em Ed e ele vai abrir a pasta aqui para mim certo então essa bolinha que tá aqui né é por causa do workspace Provavelmente o seu não vai ter mas a o resto aqui vai ser tudo igual certo então isso aqui é o nosso projeto né Tem uma pasta aqui Public pasta src enfim tem aqui o nosso Packet P json que é um arquivo muito importante aqui que faz o controle dos pacotes que estão instalados né e dos scripts que a gente tem e algumas configurações então tem tem muita coisa aqui interessante a gente vai abordar isso aqui em aulas futuras mas para essa aula aqui né pra gente finalizar ela se a gente ver aqui no pack Jason no scripts né né a gente tem aqui o script start né que é o script que vai executar que vai rodar a nossa aplicação então se eu abro aqui o terminal né E para abrir o terminal a gente pode Ó você pode deixa eu só matar esse aqui você pode clicar aqui em cima em terminal né New terminal ou aqui tá o o atalho né control shift aspas né No meu caso aqui ele vai criar um terminal já dentro aqui do workspace né se a gente ver tá no disco D mestre da web app minico react então com esse terminal aberto eu vou digitar aqui o npm start certo que é o comando npm lá a gente usou o npx né a gente tem também esse O o npm tudo dentro do node o npm é para executar comandos locais né então dentro do projeto eu já tenho esse pacote aqui o react scripts instalado então por isso que eu uso npm no caso do npx a gente não tinha o Create re app instalado na nossa máquina Então o que o PX faz é buscar esse pacote meio que faz o download usa e descarta né não fica instalado em nossa máquina o pacote no caso aqui como a gente tem o react script já instalado dentro do projeto e configurado então eu uso o npm start para executar esse script aqui start e quando executar esse script start ele vai executar o react scripts espaço né start aqui a gente pode ver né que o react script tá descrito aqui nessas dependências né no nosso pack de isso a gente tem aqui as dependências e ele tem aqui escrito rect scripts Então esse esse pacote ele tá instalado e num projeto node né no projeto aí JavaScript as dependências ficam dentro aqui dessa pasta node modules né que aqui tem muita coisa instalada mas no nosso caso a gente não vai explorar muito isso eu só só queria explicar mesmo e deixar claro essa questão do npm do npx e tal esses scripts que a gente vai usar muito isso aí Ao decorrer do nossa vida do desenvolvimento usando react certo então npm Start eu vou dar um enter aqui ele vai executar o nosso projeto né eu não preciso mexer em nada né eu não vou mudar nada e aqui ele já abre né o meu navegador no local host 3000 né ele roda aqui na nosso local host na porta 3000 essa aplicação aqui que ele cria né um símbolo aqui do react e aqui ele fala para mim editar a dentro da pasta src o arquivo app.

tsx para e salvar né então qualquer alteração que eu fizer aqui no projeto no nosso app. tsx ou seja dentro de src tem aqui app.