Curso React: Instalando o React (create-react-app) - #02

e fora galera beleza sejam bem-vindos a nossa primeira aula efetiva né no curso derrete nessa ordem que vai falar da instalação dele né a melhor forma de instalar a biblioteca criar um projeto com ela também explicar a estrutura de pastas que vem comfiest porque é muito importante a gente entender o que vem na corrente instalar algo e saber porque o por qual motivo veio tá o arquivo talpacoti certo e também a gente vai fazer uma alteração no nosso projeto executar é alterar ou seja entender e como é que funciona a forma mais básica na próxima

aula que vai se aprofundando mais empresa de Recursos detalhados a gente vai trabalhar com efeitos tratativa de erros outros pacotes que auxiliam a gente e depois enfim criar o projeto então se a primeira parte como eu já falei na outra aula né é onde a gente aí vai tá tendo uma imersão nos principais conceitos Oi Bia Ok então como ter um pouquinho de teoria agora da instalação dele depois vamos lá para instalar eu volto aqui como instalar o vier eu boto que passar o rack no episódio a ferramenta chamada kill it right ep tá E

é a ferramenta mais indicada para quando a gente quer instalar o melhor que inicializar um projeto para o iett a própria documentação aconselho a gente começar por esse cara aqui né que eu vou mostrar para vocês que que é de fato logo em seguida mas é basicamente o instalador de reta tá então eles aconselho a gente tá lá por esse cara o modo que a gente recebe todos os arquivos da biblioteca e já uma forma de executar ela então não só os arquivos vem mas já vem scripts para executar e rodar o Beauty eu boto

que a gente vai precisar de novo DNPM porque ele não é um pacote de empenho mas sim uma execução de um script que vai ser feita através do E aí no Ok utilizando o npx eu boto com essa ferramenta também utiliza o app web gerado para produção lá então é uma das vantagens de utilizar esse cara aqui está a própria documentação do riet tá e como falei antes ele nos da mesma forma que a gente executar o rack para a gente poder rodar no navegador digamos assim que é o script Ele tem ele está se

que vai fazer algo por baixo dos panos lá e Vai disponibilizar no local host o rei Expert acessar e é de lá que a gente vai tirar Nossa aplicação em deve né até dar o bild a colocar em produção Ok então agora sim bora ver a prática como é que funciona aí o cliente recte toda hora antes de inicializar de pato né É este aqui é o cara que a gente rack é que está o que acontece aqui ele tem uma página que a gente pode restar documentação a gente pode fazer outras coisas além de

só instalar o iett né gente tem aí o projeto de instalar versões do ex clipes diferente e também tem uma documentação aí bem longo e de como a gente pode make modal projeto baseado nesse padrão aqui mas que a gente vai se a ter agora é a execução da escola então a gente tem que quando a gente vai instalar um pacote no projeto nosso projeto que utilize node por exemplo a gente vai botar mpm está alguma coisa né então aqui é um pouco diferente esse no.px ele também roda baseado no IBM mas ele executa algum

script então fica executando trazer todos os clientes que a gente hashtag então a gente pode dizer que esse cara aqui é um script e aqui entra colocando um nome por isso nosso ep Ok então é isso que ele vai fazer agora eu vou tá utilizando o editor de código vs code né onde ele tá aberto aqui em branco e eu tenho uma pastinha que eu vou colocar os arquivos do curso lembro também esses arquivos estão no kit Rubi o link está aqui embaixo tu pode acessar embaixo o forte dele as aulas estão separadas por Brent

se eu acho que vai até 16 até o óleo que se não me engano 15 e depois tem o projeto todo em um ambiente só tá direto ele vai ser divido em várias aulas mas o código final lá que vai ajudar vocês se tiver alguma dúvida algum problema eventual tá é o que ainda tem que fazer aqui não vai abrir o terminal você me passar arquivos aqui e vamos criar um app not heard Então vou cortar botão direito aqui ou inteiro interno e aqui ainda está aquele comando que ele disse lá velho então não passada

já falei que a gente tem que ter uma npm node instalado Tem que checar isso aí download - vermelho ver aí tudo certo e se ele respondeu aqui no Skype porque a gente vai ter que executar uma pesquisa agora então vai ser em PX cliente é capita separado por traço e aqui a gente bota o nome do projeto Então vou botar aqui meu projeto tá vou criar assim nosso o cão pedal Inter e aqui pode ser que demore um pouco dependendo da se você já executaram ele antes eu entendo costumo trabalhar com a questão de

cast Então depende da máquina pode ser um pouco mais rápido mas a ideia que que ele roda esse cara e deixe Prontinho nessa parte aqui tudo que a gente precisa para colocar o iett para rodar no navegador Então eu vou deixar aí finalizar aqui não precisa responder mais nada depois quando terminar eu volto pra gente ver qual conteúdo gerado por esse cara aqui meu PC então agora finalizou demorou um pouquinho tá mas tá aqui olha só ele me dá umas aqui vocês aqui no final beleza tá tudo certo e ele me dá umas informações importantes

aqui olha só eu tenho npm start que vai inicializar o servidor de vez em movimento ou seja alguém vai trabalhar e outro que eu mando interessante ao bild que vai aí é transformar o nosso ep em arquivos estáticos para o que abrir gente vai tirar tudo tô com uma dele de teste para fazer os testes da aplicação e o eject que ele vai modificar a gente pode modificar os scripts do riet está É uma opção um pouco mais avançada né a gente basicamente muda como o Direct funciona na execução dos scripts de ele tem um

fluxo com esse cliente requer pi e a gente vai tá mudando isso tá opção um pouco mais avançada e não vai estar abordando isso nesse curso Ok eu vou botar aqui só isso que sugere nós CD meu projeto e aqui eles geram npm start também tem um comando de execução de um script então eu tô rodando script aqui nessa pasta ele vai abrir agora no meu navegador este projeto aqui então gente falar no no Chrome tá aberto aqui olha só eu tenho a página inicial do Yeti e aqui ele me manda para documentação clicando neste

link e tem o olho dele rodando e ele disse que eu posso editar a fonte s e salvar para dar relógio então ou seja esse servidor de dormente até o hot roll de instalado ele já tem como the building então muito interessante o cliente Rep mesmo tá legal agora a gente dá uma olhada mais clica aqui no que lhe gerou a gente vai ver os arquivos base poliet nenhuma modificação não não explicar a rápida do que ele trouxe para gente foi bastante coisa só instalando por essa aqui olha só ele traz um regime aqui que

ele basicamente diz como é que funciona esse cara não é um arquivo de documentação a gente vai ter também um pack de som que é onde lista as dependências e também os inscritos que executou então aquele start tá rodando sai daqui virgem sai daqui o teste Object todos os que ele citou ali nesse essa frase Inicial dele depois de falar escalar o Hatch tudo aqui e nas dependências do rio aqui Tom todas as casas aqui são dependências do iate para ele poder rodar tá Oi gente vai ter mais algumas configurações aqui iniciais e tem um

techloc de som também é semelhante ao queijo de som tá a gente vai ter aqui o Ignore que vai vir olhar os arquivos ponit só arquivos que a gente não vai levar por exemplo ver se realmente projeto Ou passa no modo que eu queria falar que agora queimando moda em todas as dependências e as dependências dela nas dependências do iest às dependências delas que vem junto então Vectra tudo isso aqui para rodar tá é bastante coisa a gente não vai mexer nessa aqui é uma parte aquela deve ser descartável nunca faz alteração nela ficar falando

de Ignore a gente sempre quando vai colocar o iett nosso já derrete Eu trabalho a gente vai dar um pedestal de novo para poder estar girando Essa passa novamente Então ela passa descartável tá então a pasta pública aqui com alguns arquivos iniciais como Hobby de som que o arquivo para leitura de robôs uma Hefesto do a alguns loucos do recte a gente vai tentar minha fa veículo que fica lavado navegador e Ônix HTML né Apesar de o Jackson aplicação java script ele tem um ponto de partida e a única chegar tem eh Então esse cara

aqui mais eu que o navegador vai abrir né E aí a gente vai trabalhar em cima dele que é justamente em cima desse aí de rosto aqui ó Nessa devia aqui a partir dessa div o iett se executa ele vai fazer o Bootstrap aplicação soltar esse aqui por exemplo o meu projeto ele vai ter alta navegador como se fosse um HTML normal né olha só ver o projeto eu tenho diferença nenhuma isso aqui html html também tanto erétil em outra coisa né é padrão a linguagem padrão que os navegadores em tem depois a gente vai

pro src que a paciente vai estar mais alterando né é onde vai ter o Java escrito essa aplicação vai ter o CSS vai ter também as imagens que a gente quer importar para botar fonte aqui também né para mudar a fonte dos textos nossa página tu eu tô aqui a gente começa na e do arquivo base dele que ele sim de DS e esse cara aqui aonde ele faz o Bootstrap de fato ele vai importar O componente apps né que a gente vai partir de tudo da aplicação tá E aí ele vai estar abrindo esse

Apple e seria de CEP no root esse Ruth É exatamente esse curte aqui então esse arquivo aqui esse mês foi assim tem apenas a função de inicializar O Rex 90 ml tá então é por isso que ele vai ligando as coisas né então navegador HTML chama esse arquivo que chama morrer ect e joga lá no HTML por mim desse elemento do seu código E aí eu executado na exemplo teste ar quente aqui ó ó Oi gente vai colocar CS SPC Mix DS aqui né a gente já percebe que está trabalhando com m pack por baixo

dos panos também o SBT Rep porque ele tá importante CSS e aqui mil inscritos ele pode deportar fonte imagens em previsto durante custa também interessante esse detalhe também então esse cara aqui e vai estar gerando CSS para aplicação toda que poderia dizer que é um estilo global de aplicação tá aí tem um arquivo de teste aqui do fds teste aqui para testar Nossa aplicação aí nós vamos até ser também e esse fds aqui eu fiz visualiza né Se a gente for ver exatamente tá escrito aqui é o que a gente viu navegador então aquele indireta

ml esse next aqui se não fizeram nada entre aspas assim que tá aparecendo aplicação é o que tá aqui a gente já vai falar também nas outras aulas sobre si HTML JavaScript tudo mais mas que a gente tem que entender é o que a gente alterar aqui vai repetir a nossa página então eu posso da taxa que tudo bacalhau olá uh Oi e aí tudo que tava lá vai ter apagado e agora o que vale é são as minhas alterações até onde estou escrevendo podem Hatch posso dizer assim meu primeiro ep não faz as operações

também que interessante a gente poder destruir tudo que veio e colocar as nossas mudanças né aí olha só esse cara aqui ele chamava uma imagem esse BG a gente pode apagar nós estamos usando mais ele se no arquivo CSS onde ele utiliza as classes teve aqui ó alinhar o texto ao centro Para mexer no logo então a gente ver também é que você tem tanto medo da aplicação esse por mais que tenha muita coisa rolando por baixo dos panos que a gente não entendi ainda java script contém o html no meio né que chama arquivo

CSS e isso é HTML e CSS tomar o pente cria um site estático do dia a dia não tem mistério nenhum aí que a gente vai ter é um svg que tava chamando lá a gente tem um repórter web vai todos aqui também e você tá de testes de esta que é a hora que você prepara os testes do Jazz quem também não vai abordar como falei essa não tem festa aqui nesse curso e realização de anos assim o iniciação melhor dizendo do Rio agora Então olha só na sala aqui a gente criou nosso map

aprendeu instalar o Hatch a gente fez modificações iniciais também né gente viu tudo o que vem aqui junto do IEC para poder ser executado agente Executor rack também navegador agora está pronto para poder aí avançar e aspectos técnicos da própria milho sofremos beleza que eu queria fazer a parte aí pessoal então assim dá para cima para frente vai ser só um aspecto técnico do recto recurso dele que entrar abordarem detalhes e aprender utilizar Quando vamos utilizar que agora ela falando começo esse aqui é o canal hora de colar é inscrito por favor que se inscreve

aí também destrói que você me ajuda muito Compartilhar esse vídeo sair com mais pessoas consequentemente vai estar recebendo mais conteúdo de qualidade também né e ainda ajudando elas aprender outras tecnologias Como é o Hatch nesse caso aqui a galera aqui na descrição ele tem diversos links importantes a gente o nosso blog tem as redes sociais a gente tem também os nossos cursos Valeu de naquele precinho top e ainda o repositório do Guincho é muito importante praça-forte tu baixa os códigos Preto vai uma outra também se precisar dele para bater o código Ele que errou e

tudo mais tá tão interessante fazer isso também Beleza então é isso dizendo a estação que era o primeiro passo aí primeiro passo prático agora perna próxima aula para gente falar mais aí sobre Hatch vou ficando por aqui e até o próximo vídeo valeu