Curso de React JS Aula 01 Criar Projeto React JS, Estrutura do Projeto

salve deves aqui quem fala é de sou Maia seu professor na aula de hoje nós vamos iniciar uma série de vídeos na qual a gente vai estudar como utilizar o react que é uma biblioteca utilizada para construção ou desenvolvimento de interfaces para usuário se você abrir o seu browser e digitar pelo nome react js. org tecla enter você vai conseguir abrir a página principal que está em inglês se você vier aqui do lado direito em language você pode mudar para outro idioma caso você não esteja confortável com o inglês Você pode descer um pouquinho mais e clicar na opção português do Brasil que daí ele vai aparecer para você a página no português do Brasil ou mesmo se você pesquisar por react espaço JS e teclar enter é bem provável que apareça para você o link pt-brisa é uma Lib ou seja biblioteca para a gente desenvolver a parte do front-end utilizando JavaScript ela é uma Lib que foi desenvolvida pelo Facebook foi desenvolvido em mantida por ele tá vou voltar aqui para a página principal Então quando você entrar aqui na página principal você tem um botãozinho aqui chamado get Starter que é para você iniciar então vou clicar aqui no botãozinho get Starter aqui do lado esquerdo tem uma série de informações sobre a documentação e do lado direito falando como você faz para instalar como você faz para pegar o react para utilizar no seu projeto o segundo link aqui se chama Create a new react Apple criar um novo aplicativo usando a Lib react eu vou clicar nesse link observem que aparece aqui ó Creation um pouco mais para baixo a gente tem aqui justamente as instruções para você criar uma nova aplicação usando o react para você trabalhar com o Rex é necessário que você tenha instalado no seu computador um node JS tem que estar instalado no seu computador Eu já mostrei como fazer a instalação do node no seu computador em vídeos anteriores Inclusive eu mostro um vídeo explicando como instalar o nvm que é uma ferramenta excelente para que a gente possa instalar várias versões do Note para a gente poder instalar aí no nosso computador e fazer desde trabalhos utilizando react também fazer trabalhos relacionados à parte do Beck end utilizando o novo JS então para você trabalhar com react atualmente os requisitos são você precisa ter um node numa versão maior ou igual a versão 14 e o npm tem que ser na versão 5. 6 ou maior e ele dá aqui a instrução dos Comandos que a gente precisa executar esses comandos precisam ser executados em um terminal então você pode clicar no iniciar e digitar CMD para abrir o seu terminal de comandos aqui no nosso CMD eu estou na unidade C dentro da minha pasta user dentro da minha pasta de usuários que o meu usuário Edson que é o meu usuário é recomendável que você faça o seguinte se você tiver utilizando Windows cd/ e tecla enter Lembrando que a barra que eu tô digitando é a contra-barra que a barra diferente da barra de data para eu sair de todas essas pastas e ir para unidade de raiz no meu computador eu tenho uma pasta chamado www.

que eu uso para poder armazenar os meus projetos os meus projetos web e eu também tenho uma pasta web que eu uso para poder armazenar meus projetos só que eu vou trabalhar dentro da minha pasta www então eu vou fazer o seguinte CD www e vou teclar enter Então estou dentro de uma pasta raiz que é a pasta onde eu guardo Geralmente os meus projetos e aí dentro que eu crio as pastas com os nomes dos projetos web que eu desenvolvo ao longo das aulas e ao longo dos meus trabalhos então conforme as instruções a gente precisa executar o seguinte comando nós precisamos estar dentro da pasta Raiz e a gente precisa digitar o comando npx Create - app espaço o nome da aplicação que a gente quer criar Esse é o primeiro comando então eu vou digitar aqui em PX Create traço react traço app espaço o nome da aplicação nós vamos criar um projeto para a gente exibir uma lista de filmes ou de séries ou até mesmo de jogos digitais tá então a gente vai criar uma aplicação bem simples que a gente vai exibir uma lista de dados a gente vai ter uma estrutura de página com cabeçalho com menu com rodapé Então nós vamos fazer uma aplicação Frontier de completa para a gente exibir informações acerca de filmes Então a gente vai criar um aplicativo acerca de filmes Então vou colocar aqui um nome basicamente relacionado à questão dos filmes Então vou colocar aqui movies movies vai ser o nome da nossa aplicação então o comando é npx Create traço app espaço nome da aplicação o nome da aplicação preferencialmente tem que ser em letras minúsculas sem espaço sem acento sem ser cedilha se você quiser criar um nome composto por exemplo movistácio app você pode Sem problema ou então app traço movies você pode criar também sem problema inclusive vou até deixar assim com o nome app traço movies mas quando você for utilizar nomes compostos prefiro utilizar o traço para poder fazer a separação dos nomes ou então Coloque os nomes juntos sem problema é importante que você ao trabalhar tanto com projetos como com projetos reais e você sempre trabalha com pastas ou diretórios que não tem nomes com espaços ou caracteres especiais vejam que a minha pasta raiz é www. ela não tem nenhum espaço nenhum caracter especial e a pasta que eu tô criando do projeto se chama App abraço movies não tem espaço não tem nenhum tipo de caracteres especial Eu vou teclar enter eu sei que esse comando na versão que eu tô trabalhando do note ele vai dar um probleminha ele vai dar um erro ele diz aqui que eu estou rodando o comando createst aqui na versão 5. 0 E aí ele disse que tem uma versão aqui mais atual E aí ele fala aqui sobre a questão de suporte ele recomenda que eu faça duas ações ele recomenda que eu Execute os comandos npm lá install menos Greatest app ou o comando yarn Global remove cliente que é para poder desinstalar o Creator que esteja instalado em modo Global aqui na minha aplicação só prefeito de informação vou digitar aqui node menos ver para mostrar para vocês que eu tenho um node instalado na minha máquina na versão 18.

14 E se eu digitar aqui npm menos V eu tenho aqui o npm aqui na versão 9. 3. 1 ou seja os requisitos são um note maior ou igual a 14 em npm maior ou igual a 5.

6 ele não funcionou porque tá então eu já fiz várias pesquisas e descobri que caso você não consiga criar um projeto básico do react utilizando o comando npx Create react app espaço o nome da aplicação você executa o seguinte comando npm emite react-ep espaço nome da aplicação que você quer criar app traço movies então observem que o comando que eu utilizei foi npm espaço innit espaço react traço ep espaço nome da aplicação Eu vou teclar entre ele vai iniciar o processo de criação do meu projeto react o que que ele vai precisar fazer ele vai precisar baixar os arquivos necessários para que a minha biblioteca react possa funcionar ele vai baixar descompactar e instalar ele vai montar uma estrutura que vai ocupar um certo espaço no meu computador mas é só a estrutura necessária para que eu possa criar todo e qualquer tipo de projeto básico utilizando a Lib do react tudo bem vamos aguardar esse processo eu vou pausar o vídeo e quando finalizar esse processo de instalação vou mostrar para vocês o que que vai aparecer tá vou dar só uma pausa no vídeo e quando ele terminar esse processo de instalação eu mostro para vocês o que aparece e como a gente deve proceder após finalizado o processo de instalação dos nossos pacotes do react do nosso projeto Inicial ele vai aparecer aqui uma série de informações aqui que foram instalados vários pacotes e tudo mais e aqui mais para baixo ele vai dizer que nós tivemos sucesso ele conseguiu criar o nosso projeto no caso o app traço movies dentro da nossa parte da Raiz e aí ele diz aqui que a gente pode executar alguns comandos só que ele diz assim nós sugerimos que para você iniciar você Digite o seguinte CD app traço App Movies Ou seja você precisa entrar na pasta do seu projeto Então você tem que digitar CD app traço movies se você tá trabalhando com o calmante né que é com o terminal aqui do Windows quando você digita app traço você começa a digitar o nome da pasta se você na tecla Tab ele preenche o restante do nome desde que não tenha muitos nomes parecidos de pastas né então CD Espaço app traço moves Vou teclar enter conseguir entrar na pasta vou só subir aqui um pouquinho e daí ele indica que eu preciso executar o comando npm start que é para eu poder iniciar minha aplicação só que aí seria interessante o seguinte prestem bem atenção já criar pasta Já criei o meu projeto inicial do react com o comando lembrando lá o comando npm e mid react traço app espaço nome do projeto estou aqui dentro da pasta estou aqui dentro da minha pasta como é que eu faço para abrir isso lá no meu vs code então é muito comum você ver várias pessoas explicando que você pode digitar code ponto Então você está dentro de uma pasta que você criou seja uma pasta vazia ou uma pasta de projetos se você digitar com o espaço ponto E Tec o seu vscode vai abrir exatamente com essa pasta do projeto então fiz isso code. tem cliente vou maximizar observem que eu estou dentro de uma pasta chamada App Movies e ele criou todo uma estrutura para mim tanto de diretórios ou pastas e arquivos então ele criou uma pasta chamada node modus que são os módulos do note que são necessários para a gente poder trabalhar Ele criou uma pasta chamada Public que eu vou clicar aqui observem que ela tem aqui ícone um HTML tem dois png tem um arquivo de som tem um arquivo TXT que são os nossos arquivos públicos Ele criou uma pasta src que é o nosso source com alguns arquivos de CSS e de JavaScript com arquivo svg e um pouco mais para baixo ele criou aqui o nosso pack de lock ponto de som o nosso pack de ponto de som e nosso Reading aqui para a gente poder trabalhar então pessoal a gente já tem aqui a parte mais básica do projeto no nosso próprio terminal aqui que nós temos do Command a gente pode executar aquele comando npm start Sem problema tá mas caso você não queira mais trabalhar com esse terminal você pode fechar ele sem mais dificuldade e você abre o seu terminal aqui você pode fazer contra o J para abrir o seu terminal ou então Ctrl apóstrofe que aí você consegue abrir o seu terminal ele vai abrir aqui o seu terminal de comandos aqui no seu próprio PS4 que você também pode executar os comandos então eu vou digitar o comando que ele sugere que é o npm start o npm start ele vai fazer com que abra essa nossa aplicação do react no nosso navegador então é como seria abrisse um servidor local igual como se que acontece o uso do go Live E aí ele vai abrir para a gente no nosso navegador a nossa aplicação vou só aguardar ele finalizar o processo igual aquele meme do Bob Esponja né dois mil anos depois ele vai abrir aqui um local Roxo na porta 3. 000 com um servidor local para que a gente possa ver como está a nossa aplicação do react do nosso projeto base nosso projeto básico ele tá aqui um pouco lento meu computador hoje tá uma carroça vamos esperar que ele faça esse processo de uma forma bem rápida vou fazer aqui alguns cortes no vídeo e quando ele carregar eu mostro para vocês observem vai aparecer aqui para vocês uma nova aba com o ícone do react que esse ícone aqui parece como se fosse aquele símbolo do átomo né então a gente tem aqui o react no nosso Título nós temos aqui o nome da nossa na nossa URL localhost 3000 aí ele tem uma logo aqui do react e ele tá dizendo assim Edite dentro da pasta src o arquivo ép.

js e salve para recarregar e aqui ele dá um link para você estudar ou seja aqui a nossa página ainda que se do nosso projeto então a gente precisa mexer nesse arquivo app. js salvar para que a gente possa ver resultados sendo refletidos aqui no nosso projeto então eu vou aqui na minha pasta eu vou procurar dentro de src o arquivo app. js vou clicar nessa pasta ele vai aparecer uma estrutura de arquivos eu vou fechar aqui o meu terminal por enquanto observem que o terminal que tá aparecendo tudinho e tudo mais aqui para gente eu vou só fechar ele aqui que ele tá funcionando em segundo plano observem que o meu arquivo app.