Curso de React Para Iniciantes

Seja muito bem-vindo seja muito bem-vinda ao nosso curso de react de uma hora aqui do canal programação web eu sou de metri Teixeira e você o seu professor nesse curso incrível de uma das tecnologias mais legais do momento o que nós vamos aprender nesse curso nós vamos ter uma introdução ou react vamos ver como instalar ele de uma forma rápida e atual também vamos aprender conceitos importantes como componentes Jsx props estado rotas e por último vamos estar fazendo um projeto prático Quais são os pré-requisitos para se fazer esse curso Você vai precisar de um editor

de códigos Eu recomendo o vs code e também ter conhecimento básico de frontiend e especial java script HTML e CSS todos esses conteúdos a gente já tem aqui no nosso canal desde como instalar o editor também cada uma dessas linguagens de programação então aí na descrição do vídeo você pode estar Acessando para aprender mais caso você não tem esse conhecimento de pré-requisito Qual é o nosso objetivo nesse curso é ensinar os conceitos básicos do react incluindo componentes jsx estado próprios e Rotas de forma Clara e concisa e também ser um curso rápido você tem um

aprendizado satisfatório e um período de tempo reduzido indo da teoria a prática é apenas um único vídeo O que é o react react ele é uma Biblioteca java script que foi criada pelo Facebook que permite a criação de interfaces de usuário em inglês e Uai de forma eficiente e escalável ou seja nós usamos o react para criar o front-end do nosso projeto a parte visual é importante destacar que o react não é uma linguagem de programação a linguagem de programação que nós usamos ao trabalhar com react é java script ou Type script então o react

ele é como se fosse um padrão de desenvolvimento Baseado em Componentes e o que que quer dizer isso componentes ou componentização que você tem uma aplicação o teu app e dentro desse teu app você pode dividir em pedaços menores que a gente chama de componentes como por exemplo navbar um perfil e um feed dentro desse feed Você pode ter pedaços ainda menores como por exemplo uma postagem um botão de like cada componente ele é criado de forma isolada e pode ser reaproveitado em Qualquer parte do seu projeto e O interessante é que cada componente tem

a sua própria memória interna por assim dizer que são chamados de Estados e cada componente pode ter também propriedades que podem fazer alterações únicas em cada um deles para nós entendermos isso imagine aqui a página do Twitter essa página do Twitter nós podemos dizer que é o nosso app com todos os componentes Mas nós vamos ter um componente de nave bar para navegação um componente para a Área de feed ainda um componente para a área de busca outro componente para talvez você curta indicando pessoas e o que está acontecendo com principais Trends do momento cada

componente desse pode ter ali dados de forma isolada quando a gente trabalha com react e é interessante que dentro de um componente Você pode ter subcomponentes como por exemplo no caso desse componente talvez você curta nós podemos ter ali a área do profile do usuário mas também o Componente de botão que facilita para a gente ter um projeto escalável facilmente fazer as manutenções que a gente precisa vamos ver o que nós precisamos instalar para poder trabalhar com react primeira coisa que nós vamos precisar é do node JS então para você instalar o node você vai

entrar no site chamado node js.org e você vai cair nessa página aqui talvez você já tenha um node instalado na sua máquina para você saber se você já tem Um novo instalado na sua máquina ou não Você pode abrir aí o terminal do Windows no caso eu estou trabalhando com Windows 10 então eu posso digitar aqui na barra de pesquisa pronto de comando o CMD que essa janelinha preta aqui e você pode digitar por exemplo node menos vê no de espaço menos ver se ele apresentar aqui algum valor significa que você já tem um node

instalado na sua máquina caso não apresente nada diz que não encontrou nada relacionado ao node então isso Significa que você precisa fazer a instalação eu já tenho aqui o node instalado mas eu vou desinstalar só para mostrar a instalação para vocês do Então vou lá no adicionar e remover programas vou procurar aqui na lista o node e vou selecionar para desinstalar beleza uma vez o meu download desinstalado se agora eu der o comando node menos V note não é reconhecido como comando interno e externo beleza quer dizer que a gente não tem o node instalado

então para a Gente fazer a instalação não tem segredo você pode pegar que a versão LTS que a versão estável mais atual vai clicar aqui vai fazer download salva aí onde você quiser passa de downloads E aí depois de fazer o download você vai instalar e aqui não tem segredo nessa janela né pessoal É próximo eu aceito os termos próximo próximo próximo próximo e instalar permite aqui quer fazer alterações no seu computador é só Esperar a instalação ser realizada beleza no de instalado você pode clicar no finish Você pode até abrir o prompt de comando

e dá uma verificada se ele está reconhecendo o node agora a gente fazer o download menos v e ele vai mostrar a versão que a gente instalou 18.13.0 você também pode testar npm menosv que é o note pack Manager que a gente vai estar utilizando para fazer a instalação de pacotes conforme a gente for precisar e aqui no meu caso estou Usando a 8.19.3 no momento da gravação desse vídeo Então você sempre pega uma versão igual a essa ou superior ao vídeo para que você não tenha nenhum problema Ok para criarmos nossos projetos com o

react nós vamos estar utilizando o White o virth é um sisteminha aqui já de instalação mais rápida de tudo que a gente precisa do ambiente react Então nós vamos ir lá no nosso explorador de arquivos Eu recomendo você entrar no Disco local C do seu computador e criar uma pasta onde você vai colocar os seus projetos eu vou criar uma nova pasta que eu vou chamar de curso traço react mas você pode dar um nome como Direct por exemplo como uma pasta que eu já tenho aqui certo você vai entrar dentro dessa pasta curso react

e aqui em cima você vai clicar onde tem esse caminho e ele vai mostrar para você o caminho aqui para você copiar dá um ctrl+c vai abrir aqui o seu terminal o seu pronto de Comando e você vai digitar o comando para entrar nessa pasta via terminal então você vai fazer um CD Espaço e dar um control V aqui para colar então CD e o caminho da pasta onde você vai estar colocando os seus projetos ok uma vez feito isso ele vai mostrar que você está dentro dessa pasta apontando o caminho se é dois pontos

barra curso react no meu caso para limpar essa bagunça que a gente já tinha eu posso dar o comando CLS em alguns terminais você também pode Dar o comando clear para limpar no Windows a gente usa o CLS E aí a gente deixa bem limpinho essa tela para que a gente possa ir vendo os comandos conforme a gente precisar agora voltando lá no site do vai tio o site é vai TJS pode vir aqui em get start e aqui descendo aqui no get start a gente vai ver o processo de instalação de um projeto react

usando o White Porque nós não usamos o npx Create app porque esse é um modelo modo de se instalar aí um Ambiente react antigo com recursos bem mais lerdos bem mais problemáticos o vai te tornou isso tudo muito mais rápido então usando vai que você vai estar fazendo a instalação mais atual a instalação que realmente é mais prática nos dias de hoje ok então para a gente criar um projeto a gente vai usar esse comando que ele está dando aqui de exemplo npm Create vai te @letas o nome do projeto que a gente quer depois

traço traço e espaço traço traço template E aí Nós vamos colocar escrito react para a gente dizer que a gente quer um projeto do react então eu vou fazer aqui o comando conforme a gente tem ali no lado aqui a gente Amandinha a gente pode estar colando aqui para ficar mais fácil da gente ver o comando que a gente precisa dar certo então eu vou colocar ele o comando npm espaço Create espaço vai te arroba lateste ou inglês né o último espaço aí o nome do projeto eu vou colocar assim ó projeto um espaço Daí

coloco traço traço espaço traço traço template E aí mais um espaço react deixou aumentar aqui mas o espaço react Ok então esse é o comandinho para a gente criar um projetinho usando vight npm Create vai te roubar teste projeto 1 traço traço espaço traço template react Esse é o vamos dizer mais direto possível para a gente criar um novo projeto usando White react Dá um enter ele já vai ter criado o projeto para você para entrar nesse Projeto ele só fala o que que você tem que fazer primeiro dá um comando CD projeto um para

entrar dentro dele aí beleza já mostrou que eu estou dentro de projeto um E aí eu recomendo você abrir isso Agora converse code Então você vai lá dar um code espaço ponto e um enter para você abrir esse projeto no vs code ele vai perguntar se você confia no autor dessa pasta sim eu confio no autor e aqui já estão todas as hierarquias de pasta que a gente vai precisar para a Gente instalar dependências do que a gente precisa para tudo isso rodar você pode dar um Ctrl aspas simples vai abrir o terminal aqui do

vscode ouvindo aqui em cima envio terminal ou ver terminal e vai abrir aqui o terminal dentro do próprio vs code Então a partir de agora eu não preciso mais usar a telinha do terminal do Windows eu posso estar usando a telinha direto do vscod mesmo e aqui a gente vai dar o comando npm espaço Install que é para a gente fazer a instalação de todas as dependências aqui do vai te para rodar o react Dá um enter e aguarda ele fazer a instalação é bem rapidinho não demora quase nada para fazer essa instalação Ok a

instalação foi concluída Então parece nosso projeto se a gente entrar no pack DJ som para esse curso nós estamos usando o último react disponível no momento da gravação desse vídeo que é o react 18.2.0 e o reactdom 18.2.0 beleza para rodar esse nosso projeto Inicial esse nosso projeto Starter com o White nós vamos dar aqui um npm Run deve E aí ele vai abrir aí o servidor para rodar na porta que local roxo porta 5173 você pode segurar o ctrl no seu teclado e clicar aqui ó nesse caminho que ele mostra Então segura o contra

o clica e aí ele já vai abrir o projetinho do react original inicial para a gente estar trabalhando aqui né então o pessoal gosta de fazer o Seguinte pegar esse projetinho restaurar ele deixar ele aqui no cantinho e ajeitar que o vs code nesse outro canto do lado para a gente poder ir vendo as mudanças que a gente vai fazer as coisas que a gente vai aprendendo em tempo real o light é legal que ele já atualiza conforme a gente alterar alguma coisa já em tempo real aqui então por exemplo se eu abrir aqui a

minha pasta Surf entra aqui no meu app.jsx onde a gente tem aqui Um escrito Eu vou fazer assim ó curso de Juliete uma hora se eu salvar ele já vai atualizar em tempo real aqui para nós essa alteração que a gente fez Ok então esse é o processo de instalação de um novo projeto beleza para a gente gravar bem então esse processo de criar um novo projeto vamos fazer mais uma vez do zero o node você não precisa instalar cada vez se você só vai instalar ele uma vez mas para fazer um novo projeto a

gente tem um passo a passo que a gente mostrou Aqui vamos fazer mais uma vez para ficar bem gravado na nossa mente Então vou vir aqui em file Close folder para fechar esse projeto que eu estava trabalhando fechei vou fechar aqui vou fechar também o navegador e vamos começar o processo do zero quero começar um novo projeto com react usando o White que que eu faço Primeira coisa vai entrar no teu explorador de arquivos vai entrar e colocar o c e vai entrar na pasta que você criou para fazer os seus projetos Do react que

no caso aqui é a minha pasta curso react Entrei aqui dentro vou clicar aqui em cima copiar esse endereço aqui de cima vou abrir o meu prompt de comando posso vir aqui no pesquisar CMD Abrir aí o prompt de comando do Windows o terminal e aqui eu vou digitar o comando CD e dou um ctrl v para colocar o caminho para pasta onde eu tenho os meus projetos aqui dentro da pasta onde eu tenho meus projetos eu vou dar o comando npm Create vai te arroba lá Teste daí espaço o nome do projeto que você

vai querer da pasta do projeto vou chamar de projeto 2 certo espaço traço traço espaço traço traço template E aí escreve react então npm Create vai te roubar este o nome da pasta do projeto traço traço espaço ele vai criar o projeto lá para nós lá atrás beleza Vamos acessar essa pasta do projeto do aluno CD projeto 2 que é o nome da pasta que a gente criou e agora vamos abrir esse projeto já no vs code Vou dar um code um Cold espaço ponto Esse é comando code espaço ponto não enter ele vai abrir

o projetinho aqui no vscode posso dizer que eu confio nos autores dessa pasta até posso marcar aqui para sempre ele marcar isso Beleza E aqui no vs code que que eu vou fazer vou abrir o meu terminal Ctrl aspas simples ou vindo aqui envio terminal e aqui eu vou digitar npm npm install para instalar todas as dependentes do react junto com vai beleza tudo instalado Agora eu vou rodar esse projeto dando um npm Run deve dar um enter ele vai abrir aqui o projeto eu posso segurar o ctrl no meu teclado e clicar aqui no

local host 5173 ele vai abrir aqui o projeto para mim já no navegador e beleza já tem mais um projeto aí novo inicializado do zero pronto para mim trabalhar com o react no react componentes são pedaços de código que representam partes de uma interface de usuário e Uai podem ser Reutilizados em várias partes da aplicação na prática componentes são códigos bem simples nós temos os chamados componentes de classe como você pode ver aqui que é uma classe estendendo um componente da biblioteca react que renderiza algum tipo de retorno HTML isso daqui a gente não usa

mais atualmente com o react o que a gente mais usa são chamados componentes funcionais basicamente um componente no Código Ele simplesmente é uma função JavaScript que retorna um HTML simples assim antes da gente ver como funciona os componentes a gente precisa entender o básico aqui das estruturas de arquivos e pastas de um novo projeto do react então nós temos aqui uma pasta no de módulos que aonde a gente vai ter as dependências do projeto depois quando a gente realizar a construção final porque com react a gente faz toda a construção aqui em modo de desenvolvimento

depois Que tá pronto a gente gera uma build esse nosso projeto é compilado e é gerado os arquivos finais que a gente pode colocar depois no ar lá em produção no servidor online certo nós temos uma pasta chamada Public que vem só com um lite.svg que é só uma imagemzinha nós temos uma pasta chamada src ou cerse né quando a gente tem assim src essa sigla significa source onde Dentro a gente vai ter aqui uma pasta 7 com também o login aqui do react só uma imagemzinha e os Componentes que a gente vai estar trabalhando

aqui a gente tem arquivo CSS do componente e o componente em si que é esse arquivo aqui jsx a gente já vai ver mais sobre isso daqui a pouco na raiz do projeto nós temos um arquivo index.html esse index.html tem uma estrutura básica onde aqui a gente vai ter no Bari uma dívida chamada Rute com ed chamada Rute dentro dessa dívida aonde vão ser injetados os nossos componentes o nosso JavaScript é que vai Construir a nossa página então no HTML em si só tem isso aqui ó só tem essa dívida chamada Rute aqui dentro da

divrucci vai ser Onde vai ser renderizado os nossos componentes aqui embaixo tem uma chamada via java script não script parece-me bem ponto de até ser x que tá na nossa pasta Surf Então se a gente entrar aqui na Surf nem ponto jsx nós vamos ter o arquivo principal que está sendo chamado lá na index que é como se fosse o camarada que vai Orquestrar toda a nossa aplicação é aqui que a gente tá renderizando os componentes lá no nosso index então se eu der um control B aqui só para fechar a nossa árvore de arquivos

para a gente enxergar melhor aqui em cima a gente tem importações da biblioteca do react Então a gente tem importação do react o reactdom que trabalha junto com react para poder manipular que a parte do dom do nosso projeto Dom virtual a gente tem a importação aqui de um componente Chamado Epic daqui a pouco a gente já vai ver aqui também importação de arquivo CSS que é responsável pelo estilo da página e aqui a gente tem um método do react Inicial que é um método para renderizar tudo isso então a gente tem a partir do

react 18 esse método aqui para poder fazer a renderização Então a gente tem aqui reactdon que tá pegando aqui em cima da biblioteca react Don klint usando o método chamado Create Rute que é para criar uma rota de onde Vai ser renderizado os nossos componentes e aqui a gente tá dizendo que a gente quer pegar um documento no documento pelo id o id cujo nome é Rute Ou seja a gente tá pegando aqui ó Aquela nossa dívida que a gente tem aqui que é a diva e Rute e a gente tá dizendo que dentro dessa

Nossa divult aqui a gente quer renderizar algo tô pedindo para ele renderizar e o que eu tô pedindo para ele renderizar é um componente chamado app Que é um componente que está sendo importado aqui em cima e a gente já vai ver daqui a pouco certo esse react ponto Street mode É também um componente aqui que já vem nativo do react só para fazer testes para processo de construção de the bug ele fazer duas vezes a renderização dos componentes para ver se tá tudo certo senão ele mostra para nós erros na tela ele dá retornos

para nós de algum problema então enquanto a gente tá desenvolvendo nosso projeto é Interessante ter isso daqui Ok então entendido essa estrutura Inicial aqui de um projeto novo do react junto com o White nós vamos agora trabalhar com componentes componentes nada mais são pessoal do que funções então aqui a gente já vem em app.jsx com um componente Inicial chamado ep nós podemos apagar tudo isso daqui para facilitar então eu posso dar um Ctrl a nesse conteúdo todo vou apagar então deletei E aí eu posso fazer um Componente do zero para a gente criar um componente

do zero é simplesmente fazer o seguinte uma função Então posso fazer assim ó function o nome do componente que eu quero por exemplo App no caso a gente sempre faz o componente com o mesmo nome do arquivo Então se o meu arquivo se chama app.jsx o nome do meu componente que é uma função normal aqui no react vai também ter o mesmo nome outra coisa uma prática interessante quando você cria Componentes Isso é uma prática que todo mundo faz sempre começa com a primeira letra maiúscula certo então ép.jsx se for nomes compostos por o meu

componente você vai usar o Kamel Case que é a primeira letra maiúscula Então você faz meu componente dessa forma repara que a gente faz tudo junto que faz separação de palavras compostas são a primeira letra ser maiúscula Ok então a gente pode fazer aqui um componente chamado app e dentro desse componente f A gente pode ter um retorno aqui o que que a gente quer que aconteça Então a gente vai retornar aqui é simplesmente um olá mundo a gente pode colocar aqui um H1 não precisa colocar entre aspas duplas a gente pode colocar aqui diretamente

um H1 dizendo assim olá mundo eu vou dar um salvar aqui não tá aparecendo nada porque a gente precisa exportar esse componente para que a gente possa importar lá na nossa mente é O nosso componente principal onde tudo está sendo renderizado aqui a gente está fazendo a importação Mas a gente não exportou essa função para fora esse componente para fora então eu faço assim Export a gente pode usar o EcoSport Theft ou não mas eu vou colocar aqui um padrão que geralmente se usa Xbox app dessa forma aqui então fazendo isso eu estou agora exportando

o meu App para fora aqui na nossa mente tá importando ele certo e aí olha só que legal ele já Tá dando aqui um olá mundo o que a gente colocou aqui dentro é um componente que está sendo renderizado aqui ó dentro do nosso renderizador aqui na nossa mente Ok Ele tá com esse fundo preto todas essas coisas porque a gente tá importando um CSS aqui ó index que já vem com todos esses essas formatações por padrão aqui ó tá vendo ó já vem por padrão no projeto Inicial então aqui na nossa mei.jsx a gente

pode simplesmente deletar essa importação Desse CSS só para a gente ter tudo zeradinho então ó a gente tem um olá mundo Olha que simples pessoal Acabei de criar um componente Simples assim é só você criar uma função E aí beleza tá tudo certo eu poderia dentro aqui do meu App por exemplo colocar uma outra função que eu vou chamar de título Então olha só como é fácil criar componentes no react aqui dentro da minha pasta Surf eu vou criar um novo arquivo que eu vou chamar assim ó de título Ponto jsx eu sei que por

enquanto ainda tá estranho esse formato de arquivo jsx mas a gente já vai ter logo mais o que que é esse JS X ok mas basicamente é um java script misturado com HTML quando você cria aí um arquivo por exemplo título.jcx você pode estar criando agora esse componente título então eu vou fazer assim ó function título e aqui dentro eu vou criar esse meu componente dando um retorno Vou retornar o que eu quero e vou colocar aqui H1 Oi eu sou um título certo beleza vou exportar esse meu componente Xbox título OK agora lá no

meu apps x eu vou fazer a importação daquele componente título que eu criei para eu poder usar ele aqui dentro olha só o que que eu vou fazer eu vou fazer aqui um porte você pode dar um porte título inclusive vs code tem essas funções de auto completar que são bem interessantes então eu coloquei aqui que eu quero Importar título vindo do arquivo título eu tô falando que eu quero pegar desse arquivo o meu componente título beleza fiz a importação aqui dentro agora olha que interessante aqui onde eu tinha isso daqui eu posso usar como

se fosse uma espécie de uma tag esse nosso componente então eu posso fazer agora assim ó título olha só que legal e fazer o fechamento aqui como se eu tivesse criado aqui uma tag chamada título com esse componente aqui se eu der um salvar Olha só o que que vai acontecer Oi eu sou um título Olha que legal então dentro do nosso componente app eu coloquei aqui um componente chamado título Se eu quisesse colocar mais um componente título eu poderia copiar isso daqui e colocar aqui se eu salvar você vai ver que ele vai dar

um erro porque porque a gente precisa para poder retornar esse valor fazer o seguinte agora quando a gente tem mais de um item aqui num retorno de um componente a Gente vai colocar primeiro isso dentro de parênteses assim dessa forma então a gente abre parênteses assim do nosso retorno e a gente precisa colocar isso em volta de uma dívida então a gente faz uma dívida aqui e aí a gente a gente vai colocar agora esses componentes aqui dentro beleza dessa forma olha só o que que vai acontecer Oi eu sou um título Oi eu sou

um título Olha que interessante e eu posso estar colocando vários desses componentes cada vez que eu for Colocando esse componente ele já vai ser reutilizado ele já tá pronto olha só que sensacional pessoal que legal então a gente pode construindo os componentes de forma separado e dentro aqui do nosso componente app a gente fazer a montagem das nossas páginas como a gente quiser é simples assim a criação de um componente queria uma função com o nome que você quer dentro você vai dar o retorno com conteúdo que você quer por exemplo se eu quisesse que

fosse um título e um Parágrafo então eu poderia colocar aqui dentro do retorno da seguinte forma vou colocar parênteses aqui dentro vou abrir drive porque é mais de um item que eu tenho aqui vou colocar esse meu título um embaixo desse meu título um eu vou colocar um parágrafo Vamos fazer um pelorem aqui né que é um parágrafo com ordem y e aí olha beleza assim que eu fiz a alteração do conteúdo aqui do meu componente título olha só o Que que aconteceu Ele já aplicou a todos os componentes que estão dentro do meu App

entendeu então fazendo isso eu tenho uma manutenção muito mais fácil de toda a estrutura de front-end do meu projeto que legal né pessoal sensacional aqui Como funciona essa questão de componentização agora nós vamos entender o conceito de jsx você sempre perceber Já tá trabalhando com o jsx que é o Java script misturado com o HTML o jsx ele é Uma sintaxe muito intuitiva e poderosa que faz a união dessas duas coisas é como se o Java script tivesse casado com HTML e tido um filho né esse filho seria o jsx é a mistura dos dois

juntos essa sim táxi que o react usa ela é muito interessante porque ela dá para você todo o poder do Java script aliado com você poder trabalhar diretamente com HTML por exemplo nesse componente que a gente criou anteriormente chamado título você repara que isso é uma função normal Do Java script tudo JavaScript mas aqui a gente tem tags HTML soltas que funcionam normalmente isso nunca aconteceria se a gente tivesse trabalhando com jovens script puro isso aqui teria que ser uma string teria que ser injetado em algum lugar para semana já que não o HTML pode

estar colocado junto com JavaScript e eles vão ficar numa boa também é legal do jsx que você pode criar as chamadas interpolações interpolações é injetar JavaScript Dentro do HTML Então como que a gente faz isso vou citar aqui um exemplo para vocês Imagine que a gente queria aqui uma variável chamada nome e eu vou dizer que nome é Dimitri Teixeira Ok então criei aqui uma variável chamada nome se eu aqui no meu H1 Colocar assim abrir e fechar Chaves eu estou falando que eu quero fazer uma interpolação eu quero aqui nesse trecho colocar alguma coisa

do JavaScript nesse caso eu vou colocar Essa variável então se eu coloco Oi eu sou o nome entre Chaves e deram salvar aqui olha só o que que vai acontecer Oi eu sou de meter Teixeira ele está mostrando o valor da variável aqui dentro do meu HTML sensacional se eu fizer aqui ó por exemplo uma constante chamada soma que vai ser 10 mais 10 ok aqui eu colocar aqui eu Oi eu sou e aqui colocar soma Olha o que que vai acontecer ou eu sou ouvinte Ele me mostrou o resultado disso daqui então Isso aqui

é só um exemplo básico para mostrar que você pode usar todos os do Java script aliado ou misturado com o seu HTML por exemplo você pode fazer uma aquisição fazer um fat lá para uma epi de retornar dados e você alimentar esses dados aqui no teu HTML show de bola muito interessante além de interpolações você também pode usar isso para atributos então Imagine que a gente tem aqui ó uma tag de imagem imagem src e aqui eu Vou fazer o fechamento dessa tag de imagem aqui no react Pessoal esse é um ponto interessante que tags

que não tem fechamento normalmente como no caso o H1 ele tem abertura e fechamento certo já a tag de imagem ela normalmente não teria fechamento Então você precisa colocar a contra-barra aqui no final para fazer o fechamento dessa tag senão não vai funcionar só tirasse isso aqui de tentar se salvar ele vai me dizer que tem um Erro tá vendo Então eu tenho que fazer o fechamento aqui dela para que ela funcione então aqui dentro que a gente quer passar a gente gostaria de passar o caminho para imagem então a gente pode usar a interpolação

do JavaScript para criar um atributo então eu poderia fazer assim por exemplo uma constante chamada IMG ou URL Vou colocar aqui o URL e MG e vou passar aqui o caminho de uma url certo que é uma string aqui aí o que que eu faço aqui dentro em vez de usar as Aspas duplas assim eu simplesmente abra as chaves faça uma interpolação e digo que eu quero colocar aqui esse caminho da URL Se eu der um salvar o que que vai acontecer nada nossa imagem ficou quebrada Deixa eu ver se eu tirar aqui as aspas

duplas que deram salvar não as duplas que eu coloquei aqui uma url errada tá quebrada que a nossa aplicação deixa eu pegar uma outra URL aqui no Google então imagens qualquer coisa é o react vamos pegar aqui uma imagem do React qualquer Vamos pegar esse daqui copiar link da Imagem Beleza Vamos colocar aqui e vamos dar um salvar salvei beleza agora sim a nossa imagem apareceu ali então a imagem que eu tinha colocado lá deve ter quebrado e não funcionar aqui eu vou colocar só o Elite dele direto aqui como sendo 150 pixels e olha

só que interessante quando eu pedi para colocar o atributo Edith repara que ele abriu também uma interpolação aqui para mim do Java script tá vendo a gente normalmente faria assim né Abrir aspas 150 PX dessa forma aqui mas você pode fazer isso com Java escrito diretamente passando um valor por exemplo sem olha só que interessante Então o jato esse X é basicamente isso pessoal a gente pode colocar o Java script misturado com HTML e não vai ter problema algum vai funcionar os dois em conjunto usando as chaves a gente pode usar elas interpolações e os

atributos conforme a Gente precisar agora que você entendeu aqui o JS X é somente deve estar simplesmente explodindo de possibilidades de coisas que você pode fazer isso é sensacional Mas você vai aprender agora uma coisa ainda mais legal do react que são os props os próprios são atributos ou propriedades que você pode dar ao seu componente Por exemplo quando a gente tem uma tag HTML ele tem alguns atributos que são definidos dentro dele Por exemplo no caso de uma tag MG a gente tem lá um atributo src ou cerce que indica Qual é o caminho

de uma imagem não é e se eu quisesse ter atributos personalizados para o meu componente é possível fazer isso através de props então só por exemplificar vamos apagar isso aqui que a gente fez na última aula e eu vou fazer o seguinte oi eu sou fulana Vou colocar aqui e vou apagar também essa imagem que a gente tem aqui embaixo só para a gente Deixar aqui dessa forma Oi eu sou Fulano Oi eu sou fulano ou eu sou fulano ou eu sou Fulano Por que que tá acontecendo isso porque a gente tem repetido várias vezes

aqui o nosso componente título agora eu poderia criar um atributo especial o chamado propis para definir de forma dinâmica através do nosso próprio componente qual que vai ser o nome da pessoa aqui olha só que interessante Então eu posso colocar aqui por exemplo Uma propriedade ou um atributo a gente chama de propice no react chamado nome e aqui em nome o que que eu vou passar eu vou passar aqui nome eu posso passar entre aspas duplas é que por exemplo que o nome vai ser nesse primeiro componente de Mitre certo vou salvar e aí lá

dentro do meu componente título Eu vou recuperar esse atributo usando aqui a desestruturação vou fazer as chaves Então abre e fechei Chaves e aqui eu vou pegar o daquele nosso atributo que no Caso aqui a gente chama no react de props e propriedade Então eu peguei aqui o nome e aí agora eu vou querer que aqui no lugar onde a gente tem o Fulano eu mostre exatamente o que tá vindo daquele meu próprio E aí eu dou um salvar Olha lá que interessante Oi eu sou o Dimitri e os outros ficaram vazios porque a gente

não passou esse atributo Então olha só que interessante eu estou passando aqui dentro desse props um valor que está sendo colocado aqui Dentro do meu componente e por próprios pessoal a gente pode passar praticamente qualquer coisa que a gente queira a gente pode passar até mesmo funções a gente pode passar aqui objetos a raiz o que a gente quiser passar via props ele vai receber aqui então é como se a gente tivesse injetando nele um valor legal esse propício pessoal ele é sempre somente leitura Então quando você passar não tem como ser modificado aqui dentro

isso daí ele precisa ser passado para Ser usado diretamente dentro do nosso componente Olha só se eu quisesse fazer uma validação para que esses nossos componentes que não tem o nosso atributo nome ele desce um nome Coringa como que eu poderia fazer aqui dentro do meu jsx eu podia fazer algo condicional eu poderia fazer assim se nome existe então eu posso colocar aqui um ponto de interrogação e dizer o que que eu quero que aconteça eu quero que ele mostre nome se não dois pontos eu vou querer Que ele mostre escrito para nós fulano olha

só que que é isso aqui é uma condição ternária aqui que a gente usa isso é como se fosse um if ielce então eu passei aqui que se tiver nome se tiver lá a propriedade nome é para ele me mostrar o que que acontece se isso for tru né quando a gente põe ponto de interrogação assim é o que que acontece se essa condição for tru como eu só coloquei aqui o valor do próprio ele tá verificando se esse props existe ou não Se esse valor é tru se for ele vai mostrar isso se não

ou Élcio dois pontos ele vai mostrar esse daqui Fulano olha só o que que vai acontecer quando eu salvar ou eu sou Dimitri ou eu sou fulano ou eu sou Fulano eu sou Fulano então nos que eu não passei o atributo ele fez essa validação aqui legal que interessante que show de bola eu posso colocar também um outro atributo eu vou fazer assim que o parágrafo vai fazer assim parágrafo vai ser igual e aqui eu Vou passar ó como se fosse aqui um J x falce Então olha só que interessante que eu tô fazendo eu

tô dizendo que o meu props esse nosso parágrafo tô dizendo que ele é falso então se eu passar isso agora eu posso recuperar aqui o nosso parágrafo coloca uma vírgula e coloca aqui parágrafo para recuperar esse próprio que eu passei então eu posso fazer uma condição aqui ó nesse nosso parágrafo aqui eu posso fazer o seguinte eu posso fazer que se parágrafo Existir o que que eu quero que aconteça que ele mostre só que aqui eu vou ter que fazer a abertura da chave e aqui embaixo eu vou ter que fazer o fechamento dessa nossa

chave para dizer que eu quero fazer uma interpolação né vou ter que colocar assim Então se o parágrafo existe ele mostra o parágrafo se não eu vou dizer que eu vou ter assim nada certo salvei Então olha só que que tá Acontecendo parágrafo tá dando nada nada nada nada porque ele tá recebendo falso o tempo todo aqui se eu colocar esse primeiro aqui como sendo true verdadeiro olha só que que vai acontecer só nesse ele apareceu o nosso parágrafo olha só que sensacional eu vou deixar aqui o parágrafo vazio assim dessa forma Então beleza olha

só que legal fiz uma condição aqui dizendo que se o parágrafo existir é para ele mostrar o parágrafo se não né para mostrar nada legal então Isso aqui são os próprios pessoal é quando a gente passa atributos dentro do nosso componente a gente recupera esses atributos aqui dentro essas próprias e a gente pode manipular o nosso componente como a gente quiser a partir desses próprios que a gente colocou ali sensacional muito interessante mesmo então quando você vai criando seus componentes você pode criar próprios que podem definir muitas coisas por exemplo eu posso colocar aqui ó

Uma prótese chamada cor e eu vou dizer que a cor aqui vai ser por exemplo eu vou passar aqui que a cor vai ser rede por exemplo vou passar esse uma string da cor é rede aqui eu posso fazer aqui dentro do meu H1 vou colocar um estilo incorporado aqui do CSS eu vou dizer que o estilo dele vai ser o seguinte eu vou fazer aqui o uso do jsx então aqui dentro Eu tô abrindo a chaves para abrir um jsx aqui vou abrir um objeto que é para eu passar os valores como objeto no

CSS e eu vou dizer aqui que o nosso atributo Collor dois pontos vai ser o nosso cor que a gente vai receber aqui a gente tá passando esse atributo então aqui eu vou recuperar Qual é a cor e aqui eu vou dizer que color vai ser a cor que a gente recebeu aqui via props legal se eu der um salvar Olha o que que vai acontecer Oi eu sou Dimitri ficou em vermelho se eu pegasse mudasse isso aqui ó ou colocasse nesse segundo aqui que vai ser Blue olha lá o que que vai Acontecer nesse

outro eu vou colocar que vai ser purple e nesse outro aqui eu vou colocar que vai ser Orange head beleza eu acabei de criar uma tributo especial para esse meu componente utilizando os props agora nós vamos aprender um dos conceitos mais importantes e interessantes do reactic que são os estados o estado nada mais é do que a memória de um componente é como se fosse uma espécie de uma variável que vai Armazenar um valor e sempre que existe uma alteração no valor dessa variável a gente chama de Estado então o react entende porque ele precisa

renderizar novamente aquele componente e isso é o que faz o react ter o nome que ele tem que é de react que é reagir então ele reage ao conteúdo que ele tem dentro do Estado sua memória interna vamos ver como é que isso funciona aqui na prática só para a gente facilitar eu vou fazer o seguinte esses nossos componentes aqui De título eu vou tirar esse nosso nome ali o parágrafo Vou deixar só aqui como props a cor mesmo para ficar mais simples um deixar só a cor aqui vamos tirar essa questão de parágrafo aqui

é só deixar a cor e aqui eu vou deixar assim título um título qualquer Beleza então nós temos aqui um título qualquer só com as cores alteradas ali via próps para a gente criar um estado quer dizer a gente colocar uma memória Dentro do nosso componente a gente faz a seguinte forma a gente faz importe abre aqui as chaves Vai importar e os state que é o nome do estado do react ok então dessa forma a gente diz que a gente quer usar isso do react a gente quer usar um estado a gente quer usar

esse método de memória entre aspas do nosso componente E aí para a gente poder criar esse essa nossa memória esse nosso estado a gente faz assim conste abre aqui Chaves né como se fosse um arrai e o primeiro Parâmetro é o nome do estado que eu vou chamar de texto o segundo parâmetro é uma função que vai atualizar esse estado a gente geralmente faz 7 e o mesmo nome que a gente tem aqui no caso sete texto a gente tá usando o tema maiúsculo porque a gente sempre separa as palavras usando o chamado Camel Case

que é a primeira letra da segunda palavra começa com maiúsculo e aí eu vou usar aqui o método e os state que é para dizer como esse Estado inicializa então o nosso Estado ele vai inicializar com um título do Estado Inicial certo e olha só aqui que eu vou fazer agora eu vou dizer aqui ó que onde a gente tem aqui o valor do nosso título eu vou querer que ele inicialize com esse nosso Estado então eu vou pedir para ele mostrar aqui para nós texto que é o nome desse nosso Estado então todos os

componentes estão inicializando lá com o título do Estado Inicial beleza agora eu vou fazer aqui embaixo um botão Vou fazer um botão e eu vou fazer assim mudar certo quando eu clicar nesse botão mudar eu vou querer que o meu estado Receba um outro valor e aí você vai ver que legal que vai acontecer então aqui dentro do meu botão vou fazer um evento de um click quando clicar o que que eu quero que aconteça que a gente vai abrir aqui um jsx vou criar aqui uma arle function uma função e aqui dentro eu vou

pedir para ele fazer o seguinte 7 texto que eu quero alterar aqui o valor Do meu estado texto certo então vou pedir para ele alterar para mudei via botão certo olha só o que vai acontecer agora deixa eu só fechar essa árvore de arquivos aqui olha só o que que vai acontecer agora quando eu clicar aqui no botão Olha só mudei via botão ele trocou aqui o título por quê Porque eu alterei o valor do Estado eu alterei a memória que eu tenho aqui do texto que começava Com o título do Estado Inicial quando eu

cliquei no botão eu pedi para ele alterar o que ele tinha na memória quando ele altera o que ele tem na memória o react ele reage e ele faz o nosso componente ser renderizado novamente como eu tô pedindo para mostrar o que tem dentro do Estado então ele tá mostrando o valor que a gente especificou aqui dentro do clique do botão e olha só que interessante o estado ele diz respeito à memória de Cada componente separado então repare que eu fiz um evento de clique aqui nesse primeiro componente ele só mudou esse daqui se eu

clicar nesse aqui que tá roxinho por exemplo ele só vai mudar esse daqui se eu clicar no último ele vai mudar só esse daqui tá entendendo olha só que interessante pessoal então com isso a gente tem uma memória interna que sempre quer alterada o conteúdo dessa memória O nosso react vai novamente renderizar o nosso componente Dentro desse estado pessoal eu posso ter o que eu quiser eu posso ter um Huawei eu posso ter um objeto posso ter uma string um número inteiro um boleando true falso o que eu quiser e eu posso ter vários estados

Então olha só o que que eu vou fazer então eu vou ter aqui o estado texto que eu vou inicializar ele como sendo título Inicial beleza vamos deixar assim tem o botão ali de mudar mas olha o que que eu vou fazer eu vou fazer um campo input do Type teste Para a gente poder digitar alguma coisa deixa eu só fazer o fechamento aqui do campo input corretamente ou fazendo com trabalho como input não ter fechamento a gente sempre tem que lembrar de colocar a contra-barra então eu coloquei um campo input aqui olha o que

que eu vou fazer eu vou criar aqui ó um outro estado a gente pode ter quantos a gente quiser tá a gente pode ter separado como se fosse assim memórias individuais para salvar armazenar alguma determinada Coisa que a gente queira então aqui a gente vai ter o estado que vai gravar o texto que vai aparecer no título e eu vou ter um outro estado que eu vou chamar de input test que vai ser o texto que vai estar dentro desse nosso campo input Então eu tenho aqui o input Tech eu vou fazer o 7 input

que é a função para poder trocar o valor desse input e eu vou inicializar ele aqui e os state como sendo vazio certo então aqui nesse nosso campo empute eu vou dizer que o Valor dele o velho dele vai entender o que a gente tem dentro do input Tech que é esse nosso estado que mantém o valor e a gente tem dentro do nosso campo input e olha só o que que eu vou fazer eu vou fazer um evento aqui chamado on Change que é quando ele mudar quer dizer quando a gente digital alguma coisa

ali dentro eu vou querer que ele faça uma função aqui passando o evento quer dizer o valor desse próprio campo e eu vou querer que A gente faça um set input Tech para a gente colocar Qual que é o valor dele pegando o e ponto target.vele isso daqui é para a gente dizer que a gente quer pegar desse próprio elemento que a gente tá trabalhando desse próprio input aqui o valor dele e ir salvando dentro desse nosso estado inputia que a gente tá usando a função 7 em pontex para mudar esse valor agora olha só

que interessante que a gente vai fazer Quando clicar aqui no botão quando clicar no botão eu vou pedir para chamar aqui chamada assim clicou por exemplo e aqui em cima eu vou fazer uma função function chamada clicou e quando for chamada essa função Olha o que que eu vou querer fazer eu vou querer que o nosso texto receba o valor que tem dentro do nosso estado que está armazenando o valor do input então se eu pegar e fazer assim ó 7 texto vai ser o valor do input a gente vai estar alterando aí o texto

o valor desse nosso primeiro estado com o valor que a gente tem salvo nesse segundo estado olha só que interessante Então o que vai acontecer repara eu vou digitar aqui qualquer coisa a gente não tá reparando mas enquanto eu fui digitando cada uma dessas coisas dessas letrinhas isso foi sendo salvo dentro do nosso estado e podcast agora quando eu clicar no mudar olha só o que que vai acontecer Qualquer coisa beleza ele pegou o valor que eu tinha no estado em putitech e colocou lá dentro do nosso Estado texto alterando esse daqui agora cada componente

tem uma memória individual Então o que eu fiz nesse primeiro componente não vai afetar nenhum dos outros componentes mesmo eles tendo mesmo nome porque cada um tem a sua memória o seu estado individual e isso é sensacional Vou colocar aqui ó outra coisa qualquer e vou clicar aqui em Mudar ó lá outra coisa Qualquer Beleza então muito de Estado é esse é como se fosse uma variável que a gente armazena um valor inicial e depois quando há alguma alteração nesse valor a gente usando a função de alteração 7 o nome desse estado então o react

entende que ele precisa renderizar aquele componente novamente fazendo com que tudo se torne muito mais dinâmico e muito mais reativo que é o objetivo do react Agora nós vamos falar pessoal sobre rotas Essa é uma das principais dúvidas de todo iniciante no react como que a gente faz para navegar entre páginas usando o react é interessante que o react ele foi feito para ser uma single page application ou um spa isso significa tudo numa única página então a ideia original quando o react foi desenvolvido não era para a gente poder navegar entre várias páginas mas

toda a nossa aplicação está numa página só One Page né uma single page application então para a gente poder fazer a navegação entre páginas do jeito tradicional que a gente está acostumado né através de links através de urls como a gente trabalha com HTML nós precisamos instalar uma biblioteca de terceira que é o reactton é uma biblioteca que faz toda essa manipulação de rotas Ok então só para a gente já deixar essa aula o que que eu fiz aqui lá no nosso app.js eu importei aqui três componentes de Página importei um home um sobre um

contato tem uma pasta peixes aqui no nosso projeto coloquei esses componentes dentro então dentro de home tem só um título um escrito home E aí um componente de menu eu fiz também para ter esse menu com os links aqui em cada um desses componentes então na home na sobre e no contato estão iguais eles componente de menu para a gente ter ali os links indicando a rota inicial a rota sobre e a rota contato beleza E aqui na nossa app jsx nossos componente diep principal eu estou renderizando aqui o nosso componente home nossa página home

que é a nossa página inicial se eu clicar nos links clique em sobre você vê que aqui apareceu a URL sobre mas não acontece nada clique em contato não acontece nada clico na home não acontece nada então a gente precisa fazer um sistema de roteamento para funcionar o uso de componentes como links então o que que a Gente faz nós vamos parar aqui a nossa aplicação vou dar um control c para parar Nossa aplicação E aí a gente vai dar o seguinte comando npm e Install e a gente vai colocar o nome do pacote que

é react traço holter traço Dom então react Don Dá um enter beleza ele já foi instalado no projeto e agora o que que a gente faz a gente precisa importar essa biblioteca Então a gente vai fazer isso da seguinte forma nós vamos dar aqui um Import nós vamos Fazer isso lá em cima antes da importação dos nossos componentes importe e aqui a gente vai importar algumas coisas que tem nesse reactual que é o nosso Browser esse primeiro aqui browser a gente também vai colocar aqui o e o root certo então a gente vai pegar esses

componentes aqui do nosso react holterdom então nós estamos pegando o browser holter o Roots e o root então Com s outro sem o s no final e aí como que a gente faz para fazer o sistema de roteamento aqui é bem simples pessoal você vai fazer o seguinte você vai colocar primeiro componente browser depois dentro desse componente browser você vai colocar um componente e dentro desse componente Rute você vai fazer uma rota um root e aqui você vai passar o seguinte Pet é o nome que vai ser da do caminho na URL aqui então o

primeiro Pet que eu vou passar é da raiz Quando a gente entra no aplicativo a página inicial a gente coloca só a barra assim e eu vou dizer que o elemento então a gente aponta assim Element que eu quero que seja renderizado quando for essa URL vai ser o nosso componente home legal show de bola deixa eu só fechar aqui o root tem que fazer aqui contra barra para fechar ele beleza então Acabei de criar uma rota eu disse que quando for a barra vai para home agora eu vou criar várias outras rotas aqui Para

as outras páginas Olha só então quando a gente for para sobre eu vou querer que ele renderize o nosso aqui componente sobre e eu vou fazer mais uma rota aqui vou fazer a rota contato quando for a rota contato eu vou querer que ele renderize para nós ou ele puxe para nós o nosso componente contato beleza dessa forma a gente criou o roteamento aqui dentro do nosso app aí olha só que interessante se eu ver aqui na página inicial home Beleza se eu for Agora na sobre quando eu clicar foi aqui para sobre e não

funcionou porque a gente não rodou o nosso projeto deixa eu dar aqui um npm Run deve né nosso projeto não tava funcionando não tá rodando vamos rodar ele de novo deixa eu dar uma atualizar ó lá foi para sobre eu vou para home agora tá na home se eu clico em sobre ele foi para sobre se eu clico em contato agora ele foi para contato legal então uma vez que a gente fez aqui na nossa no nosso app o Roteamento a gente pode usar links normalmente só apontando qual que é essa rota em qualquer lugar

ele vai mandar para aquela rota de acordo com o componente que a gente criou para aquela página certo então é assim que funciona o sistema de roteamento você vai criar que o browser Roots e Rute vai apontar aqui um pet que é qual que vai ser o URL aqui vai apontar que quando for aquela URL qual que é aqui o componente que você quer que renderize E aí você vai Renderizar na tela que ele componente Então você vai ter um componente de página cada componente desse aqui vai ser uma página e dentro dessa página você

pode colocar sobre componentes Como foi o caso do menu aqui que eu criei né que é para ter esses links aqui eu coloquei ele aqui aqui a gente tem os HF de cada um deles beleza e assim você vai organizando o seu projeto com as rotas Agora eu tenho certeza que você tá super empolgado super motivado para pegar todo Esse conhecimento que você adquiriu nessa uma hora e colocar em prática num projeto feito do zero absoluto e nós vamos fazer um projeto juntos do zero só que acontece que eu prometi que esse vídeo teria uma

hora de duração E como você pode ver aí no tempo no relógio vai ser muito pouco tempo para a gente fazer um projeto dentro desse vídeo aqui então vamos fazer um combinado se você quiser aprender como usar o react na prática no projeto prático você vai assistir o Próximo vídeo que eu deixei separado fazendo esse projeto do zero junto comigo antes disso deixa aí o seu like se inscreve no canal e para assistir esse projeto clica aqui nesse é vídeo que tá aparecendo aqui se você quiser aprender o react por completo num curso de mais

de 22 horas clica nesse outro link que tá ali que é o meu curso completo de programação forte abraço valeu