Fala galera sejam muito bem-vindos a mais um vídeo aqui no canal eu sou o Felipe Rocha eu ensino para você programação Sem enrolação e hoje sem enrolação eu vou te ensinar react então mesmo que você não saiba nada dessa tecnologia que hoje é a tecnologia mais demandada pelo mercado atualmente eu vou pegar na sua mão eu vou te ensinar todos os conceitos que você precisa saber para dar os primeiros passos nessa tecnologia Sensacional tá mas antes da gente começar pro conteúdo um conteúdo que eu preparei com muito carinho para você inclusive Vamos criar um compromisso
aqui eu você você e eu tá é o seguinte fica até o final desse vídeo aqui porque esse conteúdo de verdade ele tem potencial de mudar sua carreira cara seja para você conquistar seu primeiro emprego seja para você crescer no seu emprego atual então fica até o final e se você gostar deixa um gostei aqui Embaixo ou se quiser deixar agora também pode deixar tá porque esse simples gesto me ajuda demais de verdade é muito muito bom receber esse feedback de vocês e mais importante do que isso esse simples gostei que você deixa ajuda esse
vídeo a chegar a mais programa E aí que a mágica acontece porque a gente consegue ajudar ainda mais programadores que querem crescer assim como você na programação e aprender mais também então vamos fazer esse compromisso aqui e vamos lá direto Ao ponto aqui sem enrolação como eu falei vamos lá pro conteúdo agora que a gente tá alinhado agora que você vai ficar até o final e a gente tá alinhado nesse nosso compromisso tá turminha seguinte esse aqui é o projeto que a gente vai ter feito ao final desse curso aqui um gerenciador de tarefas Onde
você consegue criar uma tarefa Onde você consegue marcar uma tarefa como concluída como não concluída onde Onde você consegue ver os detalhes aqui de Uma tarefa também e você vai conseguir também deletar uma tarefa Felipão um projeto muito simples tal Calma a gente tem que aos poucos porque esse projeto apesar de ser simples é um projeto bem legal e por meio dele a gente vai conseguir aprender os conceitos fundamentais do react que você vai precisar para criar qualquer aplicação até mesmo as maiores Beleza e como que esse curso aqui vai funcionar turma agora a gente
vai pros slides eu Preparei um conteúdo mais teórico nesse início então eu peço um pouco de paciência e perseverança também lembre-se de que todo esse es for se ele vai vale a pena lá na frente eu garanto para você tá então vamos aprender um pouco ali da parte teórica que é fundamental também muita gente pula essa parte mas é muito importante a gente vai aprender ela agora nos slides e depois a gente vai pro código finalmente colocar a mão na massa Então bora lá galera Seguinte já peguem o cafezinho de vocês ó tô com meu
aqui já ó deixa eu até dar um colho aqui no cafezinho já pega o cafezinho de vocês porque agora vai ter muita anotação ó Então prepara aí seu notion seu caderno prepara seu cafezinho vamos lá vamos comigo galera antes de mais nada o que que você precisa saber para você tirar o melhor proveito possível desse curso aqui ó você precisa saber HTML CSS é óbvio é o básico do front end a gente Vai usar muito aqui e eu não vou muito a fundo nos conceitos porque é um curso de react se você quiser se aprofundar
nós temos um curso de html CSS aqui no canal eu vou deixar anexado aqui no card para você assistir depois tá então é importante que você saiba esse básico aqui além disso JavaScript especialmente as features introduzidas após o es6 mais então tô falando dos conceitos básicos como estrutura de dados funções objetos destructuring Arrow functions Promises e A Sync a weits Felipão não sei tudo isso não sei cara não sei o que é destructuring calma lá meu caro minha cara a gente vai ver aqui também isso aqui não é um impeditivo total para você mas se
você não sabe algum desses pontos eu recomendo que você Assista esse curso comigo até o final e no final você pode assistir ao meu curso de JavaScript aqui no meu canal também para você reforçar esses conceitos aqui eu vou deixar anexado no card e também aqui na Descrição e o último requisito mais não menos importante que eu acabei não colocando aqui no slide mas eu preciso que você tenha vontade de aprender eu preciso que você enxerga o react não só como uma tecnologia que você vai aprender mas como um mecanismo que pode mudar a sua
carreira de fato caraa você pode conseguir o seu primeiro emprego por conta do react você pode ser promovido por conta dele então isso vai ser fundamental para você ter a Disciplina necessária a motivação necessária para ficar até o final comigo e para de fato aprender react Beleza a gente tá alinhado show de bola Vamos lá então galera começar a responder na pergunta o que que é o react você pode já conhecer você pode talvez não conhecer mas o react é uma biblioteca usada para criar interfaces de usuário interativas lembre dessa palavra interativas tá Por que
galera porque o react ele brilha quando a gente quer Criar uma aplicação que tem várias possíveis interações do usuário Então pensa por exemplo no Instagram ou aqui no YouTube mesmo onde você tá vendo essa aula cara você tem vários botões você tem várias interações possíveis E aí que o react Brilha em uma aplicação extremamente interativa ativa Felipão mas a maioria das aplicações hoje da web são assim exato por isso que react ele é tão usado porque poxa toda aplicação hoje precisa de um grau de Interatividade muito grande a web ela evoluiu muito desde que ela
surgiu né as aplicações foram se tornando cada vez mais complexas e robustas e por isso que o react ele veio crescendo tanto tá então react ele é especialista nisso em criar interfaces de usuário interativas onde o usuário ele pode ter várias ali interações possíveis tá e o react ele tem um conceito muito importante também em turma que a gente vai ver mais a fundo também daqui a pouquinho durante o Curso que é o conceito de componentes tá eu quero que você entenda por enquanto que no react você cria vários componentes que são funções JavaScript a
gente vai ver tá que é uma Peça um bloco de código você pode ver um componente como uma peça de Lego E aí você vai juntando essas várias peças e juntas essas peças formam grandes estruturas formam páginas completas formam a sua aplicação como tudo beleza então o react ele tem esse conceito de componentes e Esse conceito foi um doss responsáveis pela alta popularidade do react porque isso torna as nossas aplicações muito modulares nós veremos isso daqui a pouquinho tá E por que você deve aprender react porque você deve investir o seu precioso tempo por que
que você deve ficar uma hora e pouco nem sei quanto tempo vai ter esse curso aqui duas horas talvez assistindo esse curso aqui Será que vale a pena mesmo e eu digo para você o seguinte ó O react ele É desenvolvido pelo Facebook sim pela meta né agora o nome é meta ou seja por trás do react tem uma empresa multibilionária do do Tio Mark aí pô então é uma empresa sensacional em quesito técnico em quesito ah financeiro também uma empresa multimilionária Então você tem segurança de que a a tecnologia que você tá investindo o
seu tempo para aprender ela é mantida por algo sólido por algo sério não é como se o react fosse mantido por um cara da esquina não É o Facebook a meta que mantém o react Isso é muito bom turma quando você vai aprender uma tecnologia nova você tem que ver isso pô Será que essa tecnologia por trás tem algo de confiança será que eu posso investir minha carreira nisso é uma decisão importante e eu digo para você react hoje é a melhor tecnologia que você pode aprender para ser um programador frontend ou f stack tá
outra coisa muito legal do react é o seguinte você aprende o react uma vez e você usa Ele em qualquer lugar Como assim Felipão você pode usar o react para criar aplicativos iOS e Android usando o react Native você pode usar o react para criar aplicações desktop usando o electron Ou seja você pode criar um o próximo Facebook pô né eu desejo para todo mundo isso que você consiga de fato não criar o própro Facebook mas ter sucesso aí na sua carreira Mas enfim ah o que eu quero deixar Clara aqui é o react que
o react Ele é extremamente é flexível você consegue usar ele para criar aplicações web que é o que a gente vai fazer nesse curso é focado aqui e você consegue usar ele também em conjunto com o react Native para criar aplicações IOS android e o electron para desktop e o que você aprender nesse curso você vai reutilizar nessas plataformas também por isso que você aprende uma vez e usa em qualquer lugar isso É Sensacional tá esse é o outro outro motivo pelo qual react ele Cresce e cresceu tanto tá é a tecnologia mais demandada pelo
mercado Atualmente como eu já falei isso já há vários anos turma eu programo com react há mais de 5 anos já e desde eu comecei ele era o líder do mercado e só veio crescendo só veio crescendo e ele tá muito à frente cara dos seus concorrentes Hoje ele é o padrão da indústria praticamente quando o assunto é criação de aplicações web ele é o padrão da indústria Então hoje é praticamente o Industry Standard o react Né você vai criar uma aplicação web você já pensa no react ele sai muito na frente dos seus concorrentes
o View e o angular né o View e o angular são concorrentes do react Mas eles estão muito atrás tanto em questão de comunidade a comunidade do react é muito maior tem muito mais gente programando em react consequentemente você tem muito mais material na internet sobre react e o react tem muito mais presença no mercado também Beleza então por isso Vale muito a pena você aprender react e mais do que isso ele é utilizado por empresas multimilionárias tô falando de Facebook Instagram Netflix airbnb LinkedIn Spotify ou seja empresas multibilionária usam react então react ele já
foi testado no tempo e ele já foi testado também em em questão de usabilidade né Será que ele realmente suporta uma aplicação como o Spotify como o Instagram que recebe milhões de usuários por dia suporta tá turma então Você já tá assim já tá claro para você que react vale muito a pena você aprender Então vamos começar a entrar um pouco mais nos conceitos mais ah Fundos ali do react como eu mencionei o conceito de componentes e a gente já vai pro código depois desse slide aqui beleza no react a gente divide a aplicação em
pequenos componentes como eu falei para vocês e vários componentes quando combinados eles formam grandes estruturas Então quero que você pense Neles como se eles fossem de fato peças de LEGO tá e a gente usa jsx que é uma sintaxe especial a gente já vai ver também na prática para escrever esses componentes então isso aqui turma são vários componentes Olha só então a gente tem esse media components A gente tem esse image esse text esse Button e cada um desses componentes aqui cada um deles é uma função JavaScript o que que isso resulta turma resulta num
trabalho em equipe muito bom porque o Felipe pode Estar trabalhando nesse componente enquanto o João trabalha nesse aqui enquanto a Maria trabalha nesse e no final eles juntam o trabalho deles então o trabalho em conjunto quando você usa react ele é muito bom por conta dessa divisão de componentes a gente vai ver na prática você vai ver como que é massa isso aqui tá e um componente como eu falei é uma função JavaScript a gente tem um exemplo prático aqui a gente vai ver também obviamente daqui um pouquinho E ele retorna a esse HTML aqui
tá vendo ó mas esse HTML essa Diva esse parágrafo e tudo mais não é HTML de fato é o jsx que é um HTML misturado com JavaScript que dá pra gente muito poder e a gente vai ver ah daqui a pouquinho isso na prática você vai ver que é bem de boa também beleza turminha vamos lá então pra prática agora a gente já viu a parte teórica agora vamos configurar nosso ambiente de desenvolvimento e começar a escrever o nosso primeiro código com React partindo aqui pro nosso ambiente de desenvolvimento você precisa instalar o node na
sua máquina tá isso aqui é essencial então vou deixar o link na descrição acessa esse link faz download aqui é bem tranquilo de instalar qualquer problema deixa aqui na descrição e se você não conhece o noes ele é uma ferramenta que permite com que você Execute código JavaScript fora do navegador e a gente precisa dele pra gente criar projetos react beleza e Quando você instala o node você ganha também o npm e o npm ele se chama node package Manager ou seja ele é um gerenciador de pacote para o nodes gerenciador de bibliotecas para o
node o que que é uma biblioteca a gente vai usar muito aqui nesse curso também uma biblioteca é basicamente uma extensão que você consegue usar no seu projeto então se você quer fazer algo como por exemplo gerar um número aleatório ah interagir com uma API enfim se você tem Um problema que você precisa de solução é muito provável que alguma biblioteca Já solucione aquele problema e a comunidade cria bibliotecas e o react ele tem inúmeras biotas o próprio react é uma biblioteca a gente vai ver mais bibliotecas também aqui no decorrer do curso mas é
importante que você saiba isso e que você saiba que o próprio npm é um dos grandes motivos pelo qual o ecossistema do react ele cresça tanto do node ele cresça tanto também tá então Tanto node Quanto npm são ferramentas que são essenciais pra gente criar projetos aqui com o react depois de você instalar o node você vai ter que instalar o visual Studio code ou vs code para os mais íntimos né você provalmente tem aí na sua máquina se não tiver você instala é o editor de texto que eu vou usar aqui nesse curso Felipe
eu quero usar o Sublime text eu quero usar o zeds pode usar mas eu recomendo que você use o vs code beleza show depois de você Instalar ambos aqui eu vou pedir para você abrir o seu vs code tá você vai ver essa tela aqui e eu vou apresentar para você algumas extensões que eu uso beleza extensões do vs code são praticamente plugins né são como se fossem extensões do navegador mesmo que adicionam funcionalidade ao vs code a primeiro que eu vou instalar aqui galera é o tailwinds assim que se escreve tá tailwinds dessa forma
Felipe o que que essa extensão faz por enquanto eu não Vou te falar vai ser mais pra frente mas já instala pra gente ter aqui ah tudo aqui já instalado perfeitamente então instala aqui o tage é essencial essa extensão instala também uma extensão chamada preter essa extensão ela vai fazer com que o seu código ele seja formatado automaticamente você vai ver que quando eu salvar o meu código eu vou formatar ele automaticamente por conta do preder você vai instalar ele depois de você instalar você vem aqui nas Configurações do Canto inferior esquerdo você vem aqui
em settings ou configurações e você vai procurar por formats on save ou formatar ao salvar se o seu vest code estiver em português você vai marcar isso aqui beleza e depois você vai procurar por default formatter ou formatador padrão se o seu vesc estiver em português e você vai colocar o prer aqui beleza show por enquanto é isso aqui tá turma você pode também instalar a extensão do is Lins Tá Eu vou também falar durante o curso o que que esse cara faz faz exatamente e você vai também se você quiser Obviamente você vai instalar
o meu tema que é o Drácula né Eu uso Drácula que muita gente pergunta por que que meu vs code tem essa cor Eu uso esse tema você pode instalar tem outros temas também legais como o material theme é bem legal também Ah tem o N também que é um um tema que eu gosto bastante você pode usar o que você quiser o nor é bem legal Também ó você pode usar o que você quiser aí no seu v code tem vários também que você pode procurar na internet e ver qual te agrada mais tá
boa agora que a gente já tá com vest code configurado eu vou pedir para você abrir o terminal do vest cod como que eu faço isso Felipão vem aqui em terminal e aperta aqui ou você aperta é comand j ou control j e aí você tem o seu terminal aqui você vai digitar nodes trç v nodes trç v Isso aqui vai te dar a versão do Seu node se aqui não retornar nada tem algo errado você vai ter que instalar o node novamente ou reiniciar sua máquina enfim mas isso aqui tem que retornar a versão
do seu node senão você não vai conseguir seguir o curso aqui comigo beleza show agora a gente já tá pronto para começar a gente vai clicar aqui ó em Open Folder vou abrir pasta e eu vou criar uma pasta aqui pro nosso projeto eu vou chamar essa pasta de curso de react tá e eu vou abrir essa pasta o vs Code ele vai abrir essa pasta aqui para mim show de bola eu vou ver o nome dela aqui em cima OK ó aqui em cima beleza e agora eu vou inicializar o meu projeto react a
gente vai começar a ver aí Ah o código em si do nosso projeto para isso galera eu vou usar uma ferramenta chamada vits tá essa ferramenta ela basicamente facilita a criação de um projeto react para mim então para instalar ela e para os usar ela eu vou abrir meu terminal eu tenho que ter o Node instalado tá Tur isso é muito importante beleza e vou rodar o seguinte Olha só npm Create Vit @ 5.5.2 ponto por que esse @ 5.5.2 porque se você não colocar isso você vai usar a última versão do vits e eu
quero que você use exatamente a versão que eu estou usando nesse curso para você não ter nenhum problema de compatibilidade no futuro então escreve Exatamente isso aqui tá E esse ponto fala pro Vit criar o projeto react dentro dessa pasta aqui beleza Vou dar o enter aqui eu vou escolher o react aqui eu tô usando react eu tô mexendo aqui com as setas do teclado eu vou apertar enter para selecionar vou selecionar JavaScript beleza Ele criou alguns arquivos aqui para mim eu vou rodar um npm install Isso aqui vai instalar os pacotes que eu preciso
para rodar meu projeto tudo que o projeto precisa de fato para funcionar e depois eu vou rodar um npm rund Dev para ele inicializar o meu projeto então instalou NP rev e agora olha só olha que massa você tem o seu primeiro projeto react rodando acabou o curso edição pode pode botar a vinheta aí acabou o curso brincadeira a gente só tá começando Mas você já tem aqui o seu primeiro projeto react rodando Olha que sensacional quero te parabenizar por isso aqui tá vamos continuar agora vamos dar uma olhada nessa estrutura de passas aqui nesses
arquivos aqui tá vamos ver o que que esses arquivos significam aqui tá Primeiro turma esse package p json é um arquivo padrão em qualquer projeto node Beleza então um projeto react é um projeto node a a gente tem aqui os nossos scripts tem o script de Dev que é o que a gente acabou de rodar que inicializa o nosso servidor tem o build que faz o Build do projeto quando a gente for colocar o projeto em produção fazer Deploy dele enfim temos também as dependências aqui tudo que ah o projeto precisa para rodar então a
gente tem o React o react Don e turma é importante também que a versão dos pacotes de vocês é estejam sejam as mesmas que a minha tá se você rodou o vits da forma que eu falei Elas serão as mesmas se se tá alguma coisa diferente eu recomendo que você deixe exatamente como tá o meu package ponto de aqui para você não ter nenhum problema é de compatibilidade belezinha show então esse arquivo aqui é como se fosse o arquivo de configuração do nosso projeto ok a gente pode fechar Ele e agora nós temos esse arquivo
index.html.gz salvar voltar aqui olha olá mundo aqui percebe Mas você pode ter se perguntado pô Felipão minha aplicação tem um monte de texto Ó tem vits tem tem foto aqui ó tem logo tem texto aqui texto aqui tem botão aqui mas cadê esse conteúdo aqui eu não tô vendo nada aí que tá o pulo do gato do react o react gera uma um tipo de aplicação que nós chamamos de spa ou single page application o que que é isso Aqui Felipão Isso aqui é uma aplicação onde ela contém apenas o HTML sem conteúdo percebe que
eu não tenho conteúdo aqui Eu Não Tenho H1 não tenho imagem não tenho nada e o conteúdo ele é inserido por meio de JavaScript por meio do react ok turma ou seja o react que insere o conteúdo aqui dentro legal ó se eu vi aqui na minha página olha só se eu vi aqui inspecionar olha aqui ó tenho minha divid Roots que É o que eu tenho aqui olha só beleza e dentro dela eu tenho o conteúdo agora ó tá vendo H1 aqui o parágrafo Mas quem inseriu esse conteúdo foi o react isso é muito
importante você entender o HTML de uma aplicação react uma aplicação convencional tá uma single page application ele é vazio como você pode ver aqui e o react ele insere o conteúdo por meio de JavaScript Beleza agora no react mais novo vamos dizer assim na versão 19 para cima a Gente tá vendo muito de server components que mudam pouco a dinâmica aqui mas não é um tema que eu quero explorar nesse vídeo é um tema mais avançado que nós teremos um vídeo separado aqui no canal para falar sobre ele mas eu preciso que você entenda isso
aqui por enquanto uma single page application é uma página onde o HTML é vazio como você pode ver não tem conteúdo nenhum e o conteúdo é inserido por meio de JavaScript Olha que Interessante se eu vi aqui no meu navegador vier aqui em configurações e desabilitar o JavaScript ó eu tenho disable JavaScript em algum lugar aqui ó aqui ó disable JavaScript eu vou desabilitar se eu recarregar minha aplicação eu não vou ter nada por quê Porque o conteúdo é inserido por meio de JavaScript E como eu não tenho JavaScript habilitado conteúdo não é inserido se
eu inspecionar minha tela Olha aqui ó só tenho minha divid root então se eu voltar aquele H1 para cá por exemplo olha só olá mundo se eu voltar para cá ele vai tá aqui ó recarregar aqui obviamente ele tá aqui mas o resto não porque eu não tô com o JavaScript habilitado se eu habilitar o JavaScript novamente então Viar para cá habilitar eu vou ter a minha aplicação legal show então você entendeu esse conceito aqui de uma Spa algumas vantagens tá de spa até tem um slide aqui galera deixa eu Mostrar o slide para vocês
algumas vantagens desse tipo de abordagem tá primeiro você tem uma velocidade muito grande porque o seu HTML ele não tem é conteúdo então isso torna ele eh a velocidade muito grande Tá você tem uma experiência do usuário melhor as spas elas são altamente interativas e performáticas a gente vai ver isso na prática beleza então saiba que o MSP é muito rápida é muito rápida ela possibilita que a aplicação tenha um Nível de interatividade muito muito grande belezinha mais pra frente a gente vê mais detalhes sobre ela tá beleza por enquanto Tur eu preciso que vocês
saibam isso agora vamos começar a explorar Essa passa src e aqui dentro vamos nesse Arquivo m. dsx ele tem algumas coisas muito importantes aqui a primeira são esses imports aqui quando você tá num projeto react consequentemente num projeto node você consegue instalar as bibliotecas do npm você consegue Utilizar salas dentro do seu projeto usando o imports Então você importa por exemplo algo de alguma biblioteca para usar esse algo aqui no seu código então aqui eu estou importando o CC mode do react o Create root do react d e o app aqui do app. dsx a
gente consegue importar arquivos também tá então esse App é um componente nós veremos ele com mais detalhes em instantes tá e como ele está na mesma pasta aqui da minha Main percebe Eu tenho a Main aqui e do lado Eu tenho o meu App então o app está na mesma pasta desse arquivo Main pon dsx então para importá-lo eu coloco ponto barra eu tenho até o vs code aqui completando para mim app.jsx beleza se você quiser importar algo que está na pasta assets por exemplo você coloca pon bar assets e a você coloca o que
você quer importar Beleza se você quer sair da sua pasta src você coloca ponto pon barra ele vai sair da passa enfim a gente vai vendo isso com mais detalhes e Essa parte aqui de módulos de importações e tudo mais a gente vê com mais detalhes o meu curso de node eu vou deixar anexado no card para você assistir depois esse curso aqui caso você queira reforçar esses conceitos aqui beleza e aqui embaixo nós temos esse creat root que é muito importante também vamos lá turma esse Create root a gente chama ele passando um documents
pget elements by ID Roots e a gente renderiza isso aqui nele o que que isso Significa na prática a gente faz aquela inserção no nosso HTML por meio do JavaScript nessas linhas de código aqui então com essas linhas de código eu estou falando pro react criar a nossa aplicação react renderizar a nossa aplicação reacts dentro da div com ADS Roots que está no meu index P HTML Então aquela inserção de conteúdo que Eu mencionei para vocês que acontece em uma single page aplication ou seja numa aplicação react ocorre por meio dessas Linhas de código aqui
isso é muito importante beleza e aqui a gente tá renderizando o app esse appt a gente vai ver com mais detalhes também mas ele é um componente ó ele é uma função react e tudo mais uma função JavaScript perdão Então quando você renderiza um componente isso é muito importante também você precisa que a primeira letra sempre seja maiúscula Eu não posso renderizar assim por exemplo tá galera não posso fazer isso tá um componente Ele sempre é renderizado e quando eu falar que um componente é renderizado é porque ele é ah basicamente escrito aqui né então
se eu escrevo app aqui é porque ele é renderizado beleza sempre que você for renderizar um componente você precisa que a primeira letra dele seja maiúscula Ok e assim o react consegue diferenciar O que é um componente e o que é uma tag HTML por exemplo input ou enfim qualquer outra tag HTML Beleza e você renderiza ele já fechando ele assim Então você abre a tag e já fecha assim assim como você faz com input por exemplo tem casos onde você abre assim o componente aqui dentro você coloca alguma coisa a gente vai ver durante
o curso também quando que isso aqui é útil legal mas por enquanto entenda que um componente precisa ser renderizado dessa forma com a primeira letra sempre maiúsculo esse strict mode aqui você pode ignorar por enquanto mas essencialmente ele ajuda a gente aí no Processo de desenvolvimento da nossa aplicação Beleza agora vamos lá dar uma olhada nesse arquivo app.jsx Felipão que que é isso aqui que eu tô vendo Fica tranquilo eu vou apagar tudo beleza apaguei tudo e Lembra que eu falei que um componente é uma função JavaScript vamos escrever o nosso primeiro componente bom essa
função eu vou chamar ela de app pode chamar o que você quiser e vou dar Export Def app Então estou criando a Função exportando ela tá E aqui dentro Eu vou dar um return e aqui galera eu já estou dentro de um componente tá eu já estou dentro de quando você cria uma função numa aplicação react você consegue transformar essa função em um componente se você dentro do return retornar por exemplo H1 retornar jsx que é uma mistura de html com JavaScript a gente vai ver agora isso tá então se eu colocar o l mundo
aqui turma olha só que interessante ó voltei para cá eu tenho Mundo beleza se eu colocar aqui por exemplo uma div aqui coloquei uma div coloquei outro mon Deão aqui ó olha que interessante Então percebe que eu tenho uma função que retorna uma espécie de html Mas lembra que é jx na verdade tá a gente vai ver algumas peculiaridades daqui a pouquinho dessa abordagem beleza e aqui galera eu consigo usar JavaScript aqui dentro Como assim olha só eu vou criar uma variável aqui dentro chamada message ó então tô numa função JavaScript eu posso criar variável
aqui dentro normal isso aqui é JavaScript tá então message vai ser olá mundo beleza e aí eu vou apagar esses caras aqui eu vou colocar só um H1 e aqui dentro Eu quero mostrar o valor Val dessa variável Como que eu faço isso eu abro Chaves fecho Chaves e aqui dentro eu coloco message Olha só salvei olha que massa isso aqui já é o jsx em Ação então com o jsx você consegue usar JavaScript usar uma Variável JavaScript por exemplo dentro aqui do seu return isso é muito massa turma isso é sensacional tá e o
GSX ele tem uma regra muito importante também tá isso aqui é muito importante é o seguinte eu não posso retornar mais de um elemento aqui no não posso retornar a div embaixo retornar outro div ele vai dar um erro ó jsx expressions must have one parents elements ou seja nesse return eu só posso retornar um elemento turma Beleza então nesse meu caso aqui ó Eu só tenho uma div Então dentro dessa div eu posso retornar quanto eu quiser não vai dar erro mas o meu return só pode ter um elemento aqui beleza esse elemento um
elemento que fica em volta de todos os outros beleza eu não posso colocar uma aqui embaixo por exemplo Ok show turma a gente viu o básico do GSX a gente criou nosso primeiro componente no react agora vamos ver outro conceito muito importante que é o conceito de States ou estado Tá eu vou me vou ah Chamar de States vamos padronizar A nomenclatura mas se você ouvir alguém falando States estado é a mesma coisa o que que é um state ou estado vamos lá turma Vamos fazer um exercício aqui eu vou criar um bom aqui embaixo
e galera é HTML eu posso criar bom posso criar o posso criar li posso criar o que eu quiser aqui dentro é HTML tá misturado com JavaScript que forma GSX mas eu digo que html no sentido de você poder utilizar elemento HTML aqui dentro tá E Esse buron ah eu vou chamar ele aqui ó vou colocar um conteúdo de mudar mensagem ok e quando eu mudar quando eu clicar nesse botão eu quero mudar o valor dessa mensagem aqui beleza quero mudar o valor dessa mensagem PR sei lá botão clicado não sei para fazer isso turma
olha que massa eu vou para mudar para tornar essa variável alterável né eu preciso que ela seja uma Lets certo e quando eu clicar nesse botão eu quero mudar essa variável Como que eu faço Isso aqui olha que massa eu posso para Esse bon passar um cara chamado on Click isso aqui já é dsx tá turma esse on Click ele vai receber uma função JavaScript então para usar JavaScript dentro aqui do jsx a gente como a gente viu a gente precisa usar essas chaves aqui ó então como eu quero passar uma função JavaScript para esse
clique eu vou usar isso aqui Chaves e aqui dentro eu posso passar uma função Beleza eu posso passar também se eu quiser uma function aqui ok então sempre que você for usar JavaScript dentro aqui do seu return você precisa abrir e fechar Chaves e colocar o JavaScript dentro dessas Chaves como eu fiz aqui num clique legal e aqui dentro galera que que eu vou fazer ó eu vou mudar a mensagem para á foi clicado beleza Show O que que você espera que aconteça Olha só eu estou renderizando aqui a mensagem estou Mostrando a mensagem na
tela quando eu clico nesse botão eu altero a mensagem então o H1 deve mudar também o conteúdo que eu vejo na tela vamos ver se vai acontecer isso vamos lá recarreguei vou clicar aqui ó cliquei não mudou não tá mudando turma Por que não tá mudando aí que entro States turma o que que é o States o States é uma variável assim como a message é também só que tem uma diferença quando você altera o States Você atualiza o seu componente você atualiza a tela nesse caso aqui você vai atualizar essa tela aqui vamos ver
isso vamos lá como que eu crio um estado um States eu vou criar uma variável aqui que vai ser uma lista e essa variável vai ser igual a quê use States esse use States eu vou importar do react isso aqui é um Hook Felipe eu cara é muita coisa Tá ensinando Calma Vamos lá vamos comigo não desiste vamos lá um Hook é uma Função também mas ela é uma função especial ela permite com que a gente utilize algumas funcionalidades especiais vamos dizer assim do react Como o estado o estado é uma funcionalidade que o react
dá pra gente o States tá E aqui dentro eu vou primeiro primeiro parâmetro aqui ó vai ser message e o segundo vai ser set message Beleza eu vou apagar essa variável message daqui Ok e que que eu vou fazer aqui galera Aqui no Click eu não vou atualizar a mensagem assim por quê Porque agora ela é um States isso aqui agora é um States tá turma essa message é o valor do States e essa set message é a função que vai alterar o valor desse States Então nesse on clique que que eu faço aqui olha
só set message e aqui eu coloco o novo valor desse state que é o quê Olá foi clicado Teoricamente tá a mesma coisa de antes eu tenho a mensagem aqui que é a Minha variável message e quando eu clico no botão eu altero o valor dessa variável message mas agora é um States Olha como vai se comportar Olha só e não tem nada aqui galera por quê Porque eu esqueci aqui ó nesse US States a gente passa o valor inicial dessa mensagem então vou colocar o lá mundo como era antes então se eu salvar ó
olá mundo por quê Porque o que eu passo aqui para esse States é assinalado como valor padrão desse state message aqui beleza se eu Clicar olha aqui Você viu o que aconteceu Mudei por quê E aí que tá o Polo do gato um States é uma variável que você altera no react que faz com que o componente seja renderizado novamente ou seja que essa função ela seja executada novamente então o que que acontece quando eu clico nesse botão ele altera o States e consequentemente ele roda esse return aqui novamente ele roda isso aqui novamente então
ele atualiza a tela ele Atualiza a interface em poucas palavras quando você muda o State a sua interface ela é atualizada e um States ele vai ser útil quando você quer fazer alguma coisa em resposta a interação do usuário tá Então nesse caso você quer mudar a mensagem aqui quando o usuário clicar aqui no botão Então você usa um States percebe Você tem uma interação do usuário e você quer reagir essa interação do usuário com alguma ação você quer mudar a mensagem como a gente Tá fazendo aqui e turma Esse é um conceito fundamental do
react daí que vem o nome dele react é de reagir então com o States você consegue reagir a interações do usuário por exemplo Cliquei no botão mudei a mensagem beleza a gente tomou um tempo maior Nisso porque é um conceito muito importante aqui do react beleza os o States tá vamos lá então agora turma começar a fazer a nossa aplicação Beleza a gente vai aprendendo os outros conceitos aqui Conforme a gente vai criando a nossa aplicação que é esse gerenciador ah de tarefas aqui deixa eu abrir ele também daqui a pouquinho pra gente ter ele
ali como base ó Então esse aqui é o nosso projeto finalizado e vamos começar a fazer essa parada aqui tá e galera seguinte lembra que eu falei pra vocês que Nós criamos a nossa aplicação reat como se ela fosse de fato pequenas peças de LEGO Então nesse caso a gente vai ter algumas peças de LEGO aqui ó esse aqui é O nosso projeto já finalizado eu vou ter essa aqui essa peça de Lego é uma Peça is aqui pode ser um componente eu posso chamar esse componente tudo isso aqui que vai ter o input vai
ter o botão eu posso chamar ele de por exemplo Adicionar tarefa eu posso chamar esse aqui de baixo de listar tarefas por exemplo Beleza então vamos primeiro criar esse componente aqui ó de listar tarefas fechou Vamos criar ele eu vou chamar de tasks também você pode usar Inglês é uma uma recomendação você usarem inglês aí nos seus projetos e eu vou ter esse H1 aqui também aqui em cima tá então galera vamos apagar isso aqui você entendeu agora o que que é o States a gente vai usar ele muito aqui no projeto então eu vou
deletar Por enquanto só queria agora passar essa essa base para você fechou eu vou deletar tudo isso aqui e o que que eu tenho ali em cima turma eu tenho o meu gerenciador de tarefas aqui ó Então Vamos lá que que eu vou fazer eu vou colocar H1 gerenciador de tarefas tá boa e baixo dele eu vou ter o meu componente de Adicionar tarefa tá que vai ser uma peça de Lego e eu vou ter esse aqui também que vai ser o de listar tarefas Por enquanto vou fazer só o de listar tarefas tá galera
Então como que eu crio um componente novo vamos lá aqui na pasta src eu vou criar uma pasta chamada components e aqui dentro eu vou criar um arquivo chamado Test.jsx o que que é esse pon jsx essa extensão ela fala pro vs code que esse arquivo é um componente react aí ele ajuda a gente questão de é de destaque de cores né do do do código e tudo mais então é importante você colocar ponto dsx aqui tá vou criar aqui a função então tasks por exemplo Beleza eu vou dar um Export default nessa tasks aqui
ok e aqui por enquanto galera que que eu vou retornar Vou retornar o H1 tasks fechou E aí aqui no app eu vou Renderizar esse componente que eu acabei de criar Como que eu faço isso olha que massa ó eu escrevo tasks ele já vai importar para mim olha só então ele importou tasks de ponto bar components bar tes que é a passa e o arquivo que eu acabei de criar components tasks Beleza se eu salvar voltar aqui pra minha aplicação eu tenho aqui o gerenciador de tarefas E tasks então a gente já tá ali
criando mais um componente e renderizando ele aqui eu posso já criar Também o nosso componente que vai adicionar a tarefa né então esse cara aqui pera aí deixa eu ver aqui esse cara aqui ó posso já criar ele também legal então vamos lá aqui em components eu vou chamar de AD Task e você deve ter percebido essa nomenclatura né percebe que eu uso eu eu escrevo é de forma aqui a primeira letra maiúscula e aqui o o t do tesque também né Por quê Porque é uma convenção também a gente nomear dessa forma né Eu
acho que é Pascal cal case Se eu não me engano essa forma de nomenclatura ah C isso cal Case então a gente usa o c case para nomear componentes onde a primeira letra é maiúscula E aí se eu tiver um espaço eu deixo junto mas eu torno essa primeira letra depois o espaço como maiúscula como meu caso aqui AD Task Beleza então posso criar a função AD Task vou dar expor default add Task e por enquanto eu vou colocar um H1 add Task beleza eu posso enderezar esse AD Task Aqui ó TK beleza e percebe
que o meu vest code ele formata o código para mim ó Isso aqui é o preder que eu mostrei para vocês legal perfeito agora turma vamos começar a de fato estilizar Nossa aplicação né eu tenho que mudar a cor do fundo eu tenho aqui enfim tá não tá nada a ver com o que a gente tinha antes né e o que que a gente usa para fazer isso turma a gente usa um cara chamado teuns que é outra biblioteca que ela hoje vem se tornando cada vez mais o padrão pra Gente estilizar aplicações react Beleza
se você quiser você pode usar arquivo CSS também então aqui no app por exemplo a gente tem esse app.css então se você quiser você pode por exemplo criar uma classe logo aqui estilizar essa classe logo porque isso aqui é um arquivo CSS comum você importa esse arquivo CSS aqui no seu componente eu estou mostrando para você que é uma opção Beleza você importa o CSS aqui E aí você pode colocar a aqui a classe desse H1 como Logo e aí para você colocar a classe você usa o Class name não é Class tá é mais
uma uma nuance do GSX você usa Class legal então por exemplo vou colocar Class name title aqui só para você ver que é possível tá nesse e.css eu vou apagar tudo eu vou criar uma classe title vou colocar color red salvei salvei voltar para cá ó tá vermelho então é uma possibilidade você você criar um arquivo CSS colocar aqui as classes e atribuir as classes dessa Forma usando o Class name você tem que usar o Class name beleza show mas o tnds ele é muito melhor tá então primeiro vamos instalar ele aqui e ele até
tem aqui eu tenho o link aqui onde a gente vê o tewis convites que é a ferramenta que a gente tá usando aqui ó ele tem aqui o tutorial certinho beleza então eu vou instalar tudo que ele pede aqui para mim então vou aqui no meu vs code e que que eu vou instalar aqui galera vamos lá eu vou instalar o tudo isso aqui ó vou Copiar isso lembrando galera instalem na mesma versão que eu então vou abrir um terminal novo apte cont control J para abrir aqui ó então o teu SS vai ser na
versão 3.4.10 Beleza acho que minha câmera tá em cima aqui deixa eu aqui 3.4.10 o post CSS vai ser na versão 8.441 e o a prefixer vai ser na versão 10.4.20 Tá ok vou instalar tudo isso nessas versões ele vai terminar de instalar Enquanto isso vamos lá voltar pra documentação do Twins eu vou rodar esse npx Twins inits para ele inicializar aqui o t no nosso projeto vou rodar aqui perfeito e agora eu vou copiar esse content aqui ó que ele manda eu copiar e eu vou colar aqui ó no meu arquivo tsconfig.js ó esse
contents beleza perfeito fizemos aqui o o o o setup do Twis agora vamos lá eu vou mudar a cor desse gerenciador de tarefas aqui para vermelho como a gente tem hoje mas sem utilizar o CSS dessa forma Então vou apagar aqui esse imports e vou apagar isso aqui tá turma olha que massa O tns ele é basicamente um uma biblioteca que permite com que a gente estilize os elementos usando classes utilitárias Como assim se eu ver aqui no na documentação get started ele tem alguns exemplos aqui olha só onde onde ele muda O tamanho do
texto com uma classe e eu consigo mudar a cor do texto também por exemplo com que classe ó venho aqui no H1 Class name Text e aí que vem a extensão do twind que eu pedi para vocês instalarem tá porque essa extensão ela vai dar pra gente por exemplo o que que a classe text Red 500 ela representa ó tá vendo ó Eu tenho a cor aqui que ela representa se eu salvar venho para cá Olha a mágica aqui ó Ah faltou uma coisinha galera importante vamos lá Faltou isso aqui ó isso aqui eu preciso
copiar e colar esse código aqui ó o passo três a gente fez até o dois eu preciso copiar e colar esse código e colar aqui ó no meu index.css Inclusive eu vou apagar tudo isso aqui e vou colar isso tá pode apagar tudo e colar isso agora sim olha que massa turma ó eu tenho aqui o meu H1 vermelho ou seja o TZ ele dá pra gente várias classes que correspondem a um determinado estilo então por exemplo se eu quer aumentar o Tamanho desse texto eu coloco text 3xl ele coloca essa fonte size aqui ó
ó que massa Felipe para mim não tá aparecendo esses aut completes dá uma olhada se você instalou a extensão do twit tá beleza turma então cont a gente tem essa facilidade você pode aqui ã na documentação Ó você tem aqui tudo ó é Colors as cores que você tem você tem aqui também display você pode usar display Flex aqui com a classe Flex você pode usar fx e por exemplo Grid também Aqui a gente vai vendo também durante o curso ó colocar pading colocar margem tudo isso por meio meio de Classe A gente vai vendo
isso durante o curso aqui tá beleza vamos começar Então galera a estilizar a nossa aplicação como a gente precisa né então primeiro turma que que eu vou fazer aqui ó e a gente vai começar a explorar muitas classes do tnd aqui legal aqui na div do meu app que é a div que fica em volta da minha aplicação eu vou criar uma Class Name eu vou colocar o seguinte ó with screen he screen Isso aqui vai fazer com que essa div cubra toda a largura e toda a altura da tela e vou colocar um BG
slat 500 que é um cinza isso aqui vem tudo do twind Ok beleza vou colar também um Flex display Flex PR ele ter um display Flex just Center PR ele centralizar horizontalmente e vou colocar um p6 um pading aqui de 24 pixs legal e tudo isso aqui é Class do você vai pegando com tempo também ó percebe Que ele já mudou a cor já mudou também o pad aqui beleza e agora que que V fazer galera eu esse H1 aqui que que eu vou fazer eu vou colocar toda a minha aplicação dentro de uma div
e essa div ela vai ter uma wif de 500 pixels então para você colocar uma wif de 500 pixels Ó você coloca w traço colchetes 500 pixels só vai escrevendo código junto comigo que você vai pegando as classes com tempo tá confir então if 500 pixels beleza e eu vou colocar também aqui Dentro o meu H1 ó agora se eu voltar para cá eu tenho o meu gerenciador de tarefas aqui tá quase saindo do do papel de Fato né tá quase ficando uma coisa não tão feia e esse H1 que que ele vai ter de
Class name text 3xl vai ser 30 pixels aqui text slat 100 Font bold e text Center olha como é rápido cara da gente estilizar ó olha que massa olha como é rápido beleza aí você consegue ver o que que cada classe representa Se você passar o mouse em cima beleza show Agora turma vamos começar a trabalhar nesse componente tasks aqui tá porque como eu falei vamos deixar o Ed Task que é esse aqui de cima pro final que vai exigir um pouco mais de complexidade aqui tá galera seguinte o que que eu vou fazer aqui
por enquanto beleza Eh aqui no tasks eu vou criar na verdade aqui no we eu vou criar um state chamado tasks felip Por que que você tá criando no app só segue comigo depois vai ficar mais claro para você entender esse States ele Pode ser uma uma lista também tá galera Isso aqui é uma lista tá E aqui dentro eu vou colocar algumas tarefas iniciais vou colocar eh vou vou falar o seguinte ó cada tarefa vai ser um objeto eu vou colocar isso aqui mesmo ó Então id1 vou colocar um ID deixa eu colocar ID
vou colocar o o título da tarefa estudar programação a description e vou colocar o is completed que é o que se a tarefa foi concluída ou não porque eu preciso dessa informação Né ó por exemplo aqui na minha aplicação já finalizada eu tenho essa informação se a tarefa é completada ou não para eu estilizar ela de acordo tá eu tenho título descrição que a gente exibe aqui e eu tenho o beleza show vou colocar outra tarefinha aqui também ver se o me ajuda beleza tarefas tá bom Felipão como que Você autoc completou assim o seu
código eu tô usando o github CoPilot para fazer isso aqui ajuda bastante aqui a gente já Economizar tempo também beleza agora turma que que eu vou fazer eu preciso passar esse States para esse componente beleza e por enquanto segue comigo depois vai ficar muito claro para você como que eu faço para passar um valor por exemplo esse state tasks para esse componente aqui como que eu faço isso como que eu faço isso eu vou usar uma coisa que a gente chama de props então todo componente pro padrão ele vai Receber props aqui beleza e esse
props eu vou por enquanto aqui ó eu vou dar um console P log nesse props tá beleza agora aqui no tasks eu vou passar o seguinte ó tasks vai ser igual ao meu state tasks que que eu tô fazendo aqui eu tô falando que a prop tasks vai ser esse state aqui beleza então quando você quer passar um valor pra baixo então o valor que você tem nesse componente app para esse componente tasks aqui você usa uma prop E agora aqui no test Olha só se eu abrir meu console dá uma olhada olha aqui o
meu log que eu coloquei Ó tem o tes aqui ó olha que massa Beleza então eu posso por exemplo aqui ó aqui no H1 colocar o ó pegar o meu props P tasks na posição zero e na posição zero eu vou ter a minha primeira tarefa vou colocar ponto title salvei olha aqui ó estudar programação ou seja o que que eu fiz aqui eu recebi a minha props e dentro Dessa props eu tenho tasks por quê Porque eu passei tasks aqui ó se eu passasse aqui banana e isso aqui é um string Sei lá eu
teria props pon banana aqui tá eu teria props pon banana Beleza então tudo que você passa aqui você tem acesso no seu componente por meio desse props Ok E aí eu consigo por meio aqui do jsx pegar essa props e renderizar aqui no meu HTML e aí como eu tô usando JavaScript aqui eu abri e fechei Chaves beleza show Agora aqui galera que que eu quero fazer vamos pensar comigo pensa comigo aqui olha só para cada tarefa eu quero renderizar um item eu quero mostrar Um item ó percebe que é o mesmo item né Como
que eu faço isso aqui no react vamos lá Olha aqui pode parecer um pouco confuso mas vamos lá eu vou abrir aqui Chaves porque eu vou usar usar JavaScript Ok e aqui eu vou colocar o seguinte ó props P tasks.map E aí esse map se você não sabe Map eu vou deixar um vídeo no card aqui para você aprender a gente tem aqui no canal esse map ele vai receber cada tarefa da interação e aqui galera eu vou retornar um parágrafo tesk title Calma lá você vai ver olha só salvei vim aqui pra minha aplicação
Olha isso aqui olha isso aqui galera O que que a gente tá fazendo aqui eu tô falando o seguinte pro react Olha só para cada tarefa que eu recebo ou seja para cada props P tasks você vai Renderizar um parágrafo então o que você retorna aqui no map é renderizado na tela olha que sensacional então o que que eu posso fazer aqui ó eu posso transformar isso aqui numa o l numa lista Isso aqui vai ser o li beleza e aí eu já posso estilizar isso aqui conforme eu tenho na minha aplicação olha sensacional Olha
isso cara ó que que eu posso fazer aqui nessa Li eu posso falar que a classe dela vai ser BG lates 400 eu posso falar que ela vai ter um text White eu posso falar que ela vai ter um pading de dois por exemplo beleza salvei olha aqui ó tá saindo galera tá saindo o papel Isso aqui vai colocar um paging Beleza eu vou falar também que ela vai ter um rounded MD Isso aqui vai dar um uma um border radius para ela beleza e aqui eu posso falar também que eu vou ter um espaçamento
entre essas tarefas Então que que eu faço aqui aqui na L eu vou colocar um Class name Space I 4 Isso aqui vai colocar um espaçamento na vertical entre os itens galera olha que sensacional Olha como o react ele é cara olha como é fácil da gente por exemplo pegar uma lista e renderizar o mesmo item para cada item da lista o mesmo o mesmo elemento que no caso SL para cada item da lista Olha que sensacional tá E galera aqui eu preciso passar uma aqui Aqui tá Outro ponto importante quando Você tá trabalhando com
listas no react quando você tá fazendo isso aqui por exemplo é fazendo um map aqui e para cada elemento da lista renderizando um um li uma div qualquer coisa você precisa passar essa aqui e essa aqui ela precisa ser única entre os itens então eu posso colocar tesk pid beleza isso aqui react usa internamente para questões de performance para ele saber exatamente Qual item é qual isso aqui a gente pode ter um vídeo mais a fundo mas Eu quero que você entenda isso por enquanto que quando você faz algo assim tipo test.map para cada item
da lista você renderiza um elemento você precisa usar essa Kia aqui beleza e ele tá dando esses erros aqui galera é por conta do is lent não vou muito AF fundo nisso agora só pra gente não ter esses erros eu vou aqui no link config e aqui nas rules ó eu vou colocar react prop types e vou tirar vai parar de dar fechou beleza Tur Então olha que Massa cara a gente já tá renderizando aqui Um item para cada tarefa beleza show agora turma o que que eu vou ter aqui na minha no meu componente
tes tá o que falta aqui para mim Falta um botão aqui do lado né para eu ver os detalhes ó falta esse botão e falta também esse fundo aqui mais claro então o que que eu vou fazer aqui ó no meu componente tasks eu vou colocar Ah eu vou falar que essa w ela vai ter um pading de seis um BGS Late de 200 rounded MD e um Shadow para ela ter uma uma sombrinha salvei vim para cá beleza ó tá saindo do Papel turma galera olha como é rápido com react e com twind PR
você é começar a estilizar os seus componentes cara seus elementos é muito massa muito massa beleza show agora o que que eu preciso eu preciso criar do lado aqui do meu title né Eu preciso criar o meu botão esse botão aqui galera olha só deixa eu fazer o seguinte turma para facilitar Aqui pra gente ah eu vou jogar isso aqui pro cantinho aqui da minha tela acho que vai ficar legal para facilitar aqui ó beleza turma agora tá tá mais fácil né show eu preciso agora colocar é o meu botão né esse botão que eu
tenho aqui ó para cada item como que eu vou fazer isso aqui vamos lá dentro aqui desse li turma eu vou renderizar um botão tá E esse botão vai ser o botão de ver detalhes e eu vou colocar o ícone ali daqui a pouco salvei ele tá aqui ó ver Detalhes e eu quero que esse botão Na verdade ele fique do lado lado da minha li né eu vou fazer o seguinte Truma vamos lá é eu preciso que esse elemento seja um E que esse aqui seja outro então o que que eu vou fazer ó
eu vou dentro aqui da li colocar um buron que vai ser o título e aqui eu vou colocar outro buron que vai ser o botão de ver detalhes tá beleza agora eu vou pegar essas classes aqui que tá na L eu vou jogar para Esse Bon aqui beleza ó legal e eu vou falar que ele vai ter uma wif full que ele vai ser 100% eu vou falar que essa li vai ter um display Flex beleza turma show de bola agora esse botão aqui galera que que ele vai ser ele vai ser um ícone e
para usar um ícone no react Eu gosto muito de usar essa biblioteca aqui ó Lu Seeds então você pode acessar aqui é ela dá pra gente vários ícones aí pra gente usar tá demorando um pouquinho para Carregar Então já vou instalar aqui vou abrir meu terminal vou dar um npm install lucid reacts na versão 0.435 p0 beleza show agora aqui nesse Bon turma eu vou importar lá do leds é um cara chamado chevron w icon e o vesco já vai importar para mim automaticamente ó de enter ele já importou aqui em cima para mim beleza
show tá aqui ó show de bola agora esse buton ele também vai ter um BG slate 400 beleza ele vai ter um pading G2 também e um rounded MD e um Text White vai ser a mesma coisa E aí eu preciso de um espaçamento entre eles Então nesse ali eu vou colocar um GAP dois espaçamento beleza olha como é fácil Olha como é rápido né a gente criar elementos aqui com react Cont tente é sensacional Beleza boa turma eu vou alinhar também esse título aqui na esquerda então no CL name aqui do Bon eu vou
colocar text left foi pra esquerda beleza show agora galera que que eu quero fazer vamos lá vamos lá quando eu Clicar nessa tarefa eu quero que ela seja marcada como concluída certo como que eu faço isso vamos pensar um pouquinho vamos pensar um pouquinho ó o que que eu quero alterar Eu quero alterar o meu States por lembra que quando eu altero o States eu altero a interface e é o que eu quero fazer aqui ó se eu vi aqui na minha aplicação que já foi feita quando eu clicar aqui ó eu altero a interface
ó cara olha o Polo do gato para você saber se você precisa ou Não criar um States quando você altera variá você precisa alterar a interface se sim cria um States então quando eu clicar aqui eu quero alterar o States para que a minha tela seja atualizada e que essa tarefa seja exibida de acordo com o status dela que é completo Ou seja eu preciso alterar esse stat aqui como que eu fao isso aqui galera vamos lá eu não consigo alterar esse States desse componente do meu componente tks Por quê Porque esse States não está
aqui esse state tá no app concorda estamos alinhados aí esse state está aqui então não consigo aqui do meu tasks dar um set tasks não consigo porque o set tasks Ele está aqui no meu App e o meu App renderiza o meu tasks beleza então como que eu posso fazer isso aqui galera eu posso criar uma função aqui olha só sai comigo que vai ficar mais claro depois que a gente fizer tá vou criar uma Tarefa chamada function uma tarefa vou criar uma função chamada on Check On Task Click tá essa função vai ser executada
quando eu clicar em uma tarefa aqui beleza segue comigo vamos pensar no nível Macro o que que essa função precisa receber para ela alterar esse States e atualizar a tela conforme o necessário ela precisa receber informação de qual tarefa está sendo clicada porque a tarefa que está sendo clicada é a tarefa que eu tenho Que atualizar no meu States se eu clicar nessa do mail eu tenho que atualizar essa do mail Então vou receber o quê galera o Task ID Beleza e que que eu vou fazer aqui olha só New tasks minha nova lista de
tarefas vai ser tasks.map e para cada tarefa que que eu vou fazer aqui dentro Olha só se a tarefa pid for igual a Task ID ou seja preciso atualizar essa tarefa porque se a tarefa da iteração Atual tiver o ID da tarefa que eu estou clicando é porque essa tarefa da iteração atual é a tarefa que eu preciso atualizar concorda então o que que eu vou fazer ó eu vou dar um return eu vou retornar tudo que tá na tarefa e vou colocar o is completed como inverso do que estava antes ou seja tesk P
is completed com o com exclamação aqui antes senão se eu passar desse if aqui não preciso atualizar essa tarefa então return tesk tá isso aqui turma é a mesma Coisa de eu de eu colocar um is aqui tá mesma coisa tá Por quê Porque quando eu dou um return aqui eu já saio da função Ok então por isso que ah se eu chegar nessa linha significa que esse if foi falso então que eu não preciso atualizar essa tarefa porque a tarefa da iteração atual não tem o ID que eu estou recebendo aqui beleza show aí
eu vou fazer um sets tasks New tasks Ou seja eu estou atualizando o meu estado paraa nova lista de tarefas essa Nova lista lista de tarefas tem o scon atualizado que que eu faço agora galera eu pego esse on Task Click Olha só segue comigo aqui vai fazer sentido prometo eu pego esse on Task Click e eu passo pro meu tasks então eu vou passar uma prop chamada ah on test Click vai ser igual a um test Click e eu posso galera como PR passar uma função também eu passo uma função como prop dessa forma
Olha que sensacional então eu passo essa função Como prop aqui ou seja agora esse tasks Ele tem acesso dentro desse props a um Task click a essa função aqui ol olha só que sensacional então o que que isso significa na prática Olha só olha que massa quando eu clicar nesse buton que é o buton que exibe o título da tarefa o que que eu quero fazer galera eu quero chamar essa função Concorda porque eu quero atualizar essa tarefa que eu acabei de clicar então para isso ó on cli e aqui galera eu vou chamar on
test Click props test cli salvei cliquei não aconteceu nada por qu porque esse T galera ele precisa do qu do TK ID galera quando você tem uma prop que é uma função e você precisa chamar ela quando você clicar num botão como é esse caso aqui e você tem que passar algum parâmetro você faz isso aqui ó você coloca function props T Pass t.id esse tesque pid é o ID da tarefa Atual beleza ó salvei e agora ele está atualizando o estado mas agora que que eu preciso fazer galera Ah eu vou fazer o seguinte
ó aqui nesse Class name segue comigo ah antes na verdade deixa deixa eu fazer mais fácil ó se tesk P is completed E aí eu posso usar até um ternário aqui tá galera do JavaScript eu vou colocar completo compl completo completes incompletes Ó Incompletes complete ó Então tá vendo que ele tá mudando tá Por quê Porque se o tesque compl for verdadeiro eu mostro isso se não eu mostro isso então tá mudando ou seja galera o que que aconteceu aqui quando eu clico nesse botão eu chamo essa função passando o ID da tarefa atual que
está sendo exibida aqui na tela beleza e essa função que que ela F ela atualiza o estado fechou E aí eu tenho a Atualização aqui da minha interface então é muito comum is se você ter uma você ter o estado aqui no seu componente app e um componente que é renderizado pelo app Ou seja que é um componente filho do app tá porque esse App como ele renderiza o componente tasks O componente tasks é um componente filho do app Então quando você precisa que um componente filho Atualize o estado o States que está no componente
P você pode seguir essa abordagem você cria uma Função no componente pai ou seja no app que altera o States e você passa essa função como prop pro componente filho galera isso aqui é muito comum em projeto react tá muito comum muito comum mesmo beleza agora que que eu preciso fazer eu preciso riscar né o título aqui da tarefa se ela estiver completa Então vou tirar isso aqui eu coloquei só para fins didáticos mesmo e que que eu vou fazer aqui no Class name galera que que eu posso fazer olha só que sensacional Eu posso
usar JavaScript aqui dentro então vou abrir Chaves eu vou colocar uma template string e que que eu vou fazer olha só se tesk PED eu vou adicionar a seguinte classe Ó Line true salvei clique olha só tá vendo cara olha como o react ele permite que você use JavaScript aqui no return da sua função se a tarefa estiver concluída eu adiciono uma Class name e essa CL vai Adicionar um estilo que é o que eu quero aqui olha que sensacional Olha que incrível Beleza então turma eu sei que pode ser muita coisa mas não desiste
cara esse conhecimento aqui pode mudar sua carreira cara o react ele mudou minha carreira totalmente Então vamos lá vamos comigo vamos recapitular aqui nós armazenamos um state tasks Aqui Nós criamos uma função que atualiza o is completed de uma tarefa Ou seja que Altera o estado de conclusão de uma tarefa e depois atualiza o States e a gente passou essa função para esse componente que renderiza as tarefas de forma que quando eu clico em uma tarefa essa função é chamada e o estado de conclusão dessa tarefa que eu cliquei é atualizado que é o que
nós fizemos aqui belezinha show agora vamos expandir um pouco nisso aqui eu quero vou copiar e colar esse botão aqui eu quero aqui tem o botão delete icon importei da lado Lucid também esse botão ele vai deletar minha tarefa tá deletar esse delete tá bem feio né Deixa eu você pode ver a lista completa de ícones aqui ó no lucid você tem View All icons Beleza você pode clicar aqui você pode procurar por Trash por exemplo vou pegar esse aqui ó Trash então Trash icon Beleza quando eu clicar aqui eu quero deletar a tarefa como
que eu faço isso vamos lá é muito parecido com o que A gente acabou de fazer Inclusive eu encorajo você a pausar o vídeo e tentar fazer encorajo você pausa aqui o o curso e tenta fazer isso aí por conta própria eu quero clicar nesse botão e eu quero deletar tarefa do meu States Como que eu faço isso tenta fazer aí vamos lá se você conseguiu o show se você nem tentou beleza vamos lá junto a gente vai conseguir ó vou criar uma função aqui por que que eu tenho que criar uma função aqui no
app porque o state está Aqui no app o o que que eu preciso alterar Tur States eu preciso remover por exemplo se eu cliquei nessa aqui ó eu preciso fazer isso se eu cliquei aqui ó no deletar dessa última eu preciso fazer isso aqui beleza então aqui eu vou criar uma função on delete Task Click E por que esse nome aqui porque é uma convenção né Tipo quando você clicar no botão de deletar né então onit test Click você pode chamar de qualquer coisa aqui mas eu Gosto de chamar dessa forma né então quando eu
clicar nesse botão seja on delete T Click fechou ficar bem semântico o que que eu vou fazer galera eu vou receber também o Task ID Ou seja eu eu preciso saber qual tarefa está sendo clicada para eu saber qual tarefa eu tenho que remover do meu estado do meu state então o que que eu vou fazer ó const New test vai ser o quê tasks P Filter e eu vou manter na lista todas as tarefas que tenham o ID diferente da Tarefa que eu estou tentando deletar ou seja essa lista vai ter todas as tarefas
com exceção dessa aqui ou ou seja da tarefa que eu vou clicar para deletar e eu vou dar um set tasks New tasks e eu vou passar esse on delete test Click para cá pro meu tasks beleza e agora aqui no tasks eu posso até dar um control click aqui galera e vou para lá beleza e aqui no meu tasks eu vou fazer a mesma coisa que eu fiz aqui ó vou fazer aqui ó nesse Trash icon ou Click eu vou abrir uma Arrow function aqui pode ser uma função convencional também tanto faz eu prefiro
function porque é mais simples é uma linha só abre function props.on Task Click e eu passo aqui o que galera eu passo Task pid salvei ó vamos ver ah na verdade é props.on delete tesque Click que eu passo aqui embaixo olha que massa Olha que sensacional Então o que que tá acontecendo vamos lá quando eu clico nesse nessa nesse botão eu chamo essa função passando o ID da tarefa ao qual esse botão pertence e essa função tira essa tarefa do meu States e como é um States quando esse state é atualizado a interface é atualizada
por isso que a tarefa some daqu beleza Olha como o stat El é fundamental aqui no react tá olha como ele é fundamental beleza show de bola turma galera seguinte ó eu posso até já Aqui fazer um Destruction aqui dos das props ó posso fazer isso aqui ó pegar as tasks pegar o on Task Click e pegar onda elit test Click eu não preciso ficar fazendo props ponto tal ó e olha aqui um truque do vest code ó selecionei props ponto cont contrl d ou Command dtrl D ele seleciona os dois próximos eu posso deletar
tudo de uma vez beleza continua funcionando da mesma forma sensacional e agora galera vamos começar a fazer tô muito feliz que cara Já tá saindo do Papel a gente aprendeu conceitos muito importantes você aprendeu state props Agora vamos começar a fazer essa outra parte aqui ó esse outro componente e percebe turma como são pequenas peças mesmo né então a gente tem esse componente tasks que é esse aqui que a gente acabou de fazer e agora a gente vai criar esse outro componente Beleza então vamos lá como que eu vou fazer ele bom eu já tenho
ele aqui o Ed tesk né E que que eu vou fazer Aqui turma primeiro eu vou basicamente ter a mesma coisa o mesmo fundo né então vou colocar uma div vou ter o mesmo fundo meio azulzinho BG slates ah 400 Se não me engano BG slates 400 na verdade é isso aqui eu vou até copiar esse Class name aqui galera e colocar aqui ó então o Class name vai ser um pinzinho o background vai ser uma vai ter uma uma sombra e uma borda redondada legal agora aqui no app turma eu vou renderizar esse Ed
Task ele tá aqui beleza nesse Ed Task Turma que que eu vou fazer eu vou colocar um input aqui dentro esse input vai ser do Type Text e vai ter um placeholder de o que galera Digite o título da tarefa salvei OK e eu tenho que retornar isso aqui né galera esqueci de retornar por isso que não tá mostrando ali na tela então return beleza ó Ok fechou que mais galera vou ter outro input vou copiar e col input Digite a descrição da tarefa legal e essa div aqui turma eu preciso Que os inputs fiquem
um embaixo do outro né então vou fazer um Flex Flex Call então display Flex e Flex Direction callum Ok Legal galera agora eu vou também criar um botão aqui embaixo ó um botão Bon adicionar fechou agora vamos estilizar tanto esse input quanto esse botão que tá uma coisa horrorosa né como que eu vou fazer aqui galera esse input eu vou colocar aqui ó uma Class name nele de o seguinte ó Border para eu colocar uma Border nele vou colocar uma border slates 300 vou colocar um out Line slate 400 para colocar aquela borda que aparece
quando eu clico no inputs essa borda aqui ó para mudar o nome dessa borda aqui eu vou colocar o outline para mudar a cor dessa borda eu vou colocar o outline slate 400 ó ele mudou legal e eu vou também colocar um px4 py2 Então esse PX é pading horizontal esse p é pading vertical e e eu não quero que você se Preocupem muito agora em lembrar essas classes tá só vai escrevendo comigo que com o tempo você vai pegando essas essas classes tudo está na documentação do tnd e você vai conhecendo várias aqui comigo
também tá E vou colocar rounded MD para ter uma borda beleza ó tá mais bonito né eu vou copiar e colar essa Class name aqui nesse outro input eu já posso fechar ele aqui né não preciso abrir outro aqui posso fazer assim beleza tá saindo da jaula hein Galera tá ficando legal e agora o botão de adicionar como que eu vou estilizar ele Class name aqui eu vou colocar um BG slate 500 text White px4 py2 rounded MD Font medium então o que que eu fiz aqui galera eu mudei o background mudei a cor do
texto adicionei um pading horizontal pading vertical coloquei bordas arredondadas e fonts medium coloquei fonts weights medium né E como eu falei turma aqui não é um curso de CSS eu não vou muito a Fundo aqui no CSS nem no HTML beleza show Tur Agora eu preciso colocar um espaçamento Entre esses dois componentes né entre o Ed Task e entre o Ah e entre o tasks né para isso galera eu posso aqui no meu App nessa div aqui que renderiza tudo tá eu posso colocar um Space i4 aqui ó Então vou colocar um espaçamento vertical entre
os elementos beleza e TR uma coisa importante também tá E vamos tirar isso aqui e voltar como tava antes nesse caso eu quero um Espaçamento entre os componentes né e eu posso aqui no Ed tesk eu eu posso colocar uma margem aqui ó m por exemplo que é margem vertical em cima e embaixo de quatro e vai dar certo só que eu não gosto muito de fazer isso tá não gosto que o componente ele impacte é o estilo do lugar que ele vai ser renderizado tipo isso aqui ele tá impactando esse componente aqui ó esse
esse Ed tesk ele tá impactando o estilo do lugar onde ele está sendo rizado Se eu colocar um M y1 Ó ele impacta totalmente eu não gosto disso eu prefiro que o componente Pie ou seja o componente que renderiza o Ed Task e o tasks que ele decida o espaçamento entre esses componentes tá É só uma questão que eu vejo como uma boa prática tá então vou colocar um Space aí aqui nesse componente que renderiza esses componentes entendeu Aí ele decide como que ele quer colocar o espaçamento entre eles isso aqui torna o componente bem
mais modular também porque nem Sempre você vai querer por exemplo um espaçamento de quatro aqui em cima e embaixo entendeu então dessa forma como a gente fez aqui colocando espaçamento no app você tem Ah um controle bem legal sobre espaçamento beleza show agora turma que que eu quero fazer vamos pensar aqui quando eu clicar aqui em adicionar eu quero adicionar essa tarefa aqui na lista aqui de baixo concorda comigo como que eu faço isso cara bom vamos pensar quando eu clicar em Adicionar eu quero pegar o que eu digitei nesse input e eu quero adicionar
nesse state aqui beleza Como que eu faço isso é bem parecido com o que a gente fez aqui no tasks Como que eu faço isso ISS bom aqui no tesk eu tenho os dados do input correto então o que que você acha da gente criar uma função por exemplo aqui no app por criar no app porque o app que tem acesso ao States então criar uma função aqui no app chamada on Task submits ou seja essa função é chamada quando usuário clicar em adicionar aqui tá e essa função ela recebe o qu galera o title
e o description e o que que ela faz aqui turma ela fala que a Nova tarefa é o quê o ID pode ser tasks p Len mais 1 né porque nesse caso eu tenho três tarefas Então Len vai ser três então length mais 1 é qu Então a gente vai ter um Ed único tá o title vai ser o title description vai ser a description que eu receber e o isced vai ser false e por padrão a tarefa quando for criada ela não vai estar completa beleza e aí o que que eu faço galera eu
faço um set tasks eu coloco tudo que estava lá dentro do tasks e eu coloco New Task aqui e isso aqui é muito importante turma quando você tá atualizando um estado um States E ele é uma lista você não pode fazer tipo assim ó tasks P push tá isso aqui não funciona você tem que fazer set tasks E aí você tem que colocar a lista aqui dentro então a nova lista vai vai ter tudo que estava anteriormente todas as tarefas anteriores com essa nova que eu acabei de montar aqui em cima legal e aqui e
eu posso usar um shor Hand syntax aqui ó como o nome da propriedade é o mesmo nome do parâmetro eu posso simplesmente deixar assim beleza e aí eu Passo essa função aqui para esse Ed tesk beleza show agora aqui ó vou ter as props e dentro das props vou ter o quê on AD Task submit que é a prop que eu acabei de passar lembrando se isso aqui se chamasse banana aqui dentro seria banana Ok legal show agora turma aqui no Head Task o que que eu preciso fazer eu preciso primeiro saber os valores desses
inputs eu não sei eu não sei o que o usuário de tá aqui não sei o Que como eu como eu como eu tenho acesso a isso para isso eu vou usar um state também nós temos outras formas de obter o valor de inputs no react a gente vai ver mas vamos começar com state por enquanto porque vai funcionar então vou criar um States aqui chamado title set title que vai ser um use States use States e o padrão vai ser uma uma string vazia tá e o description também description set description você pode criar
quantos States você quiser tá No react quantos States você quiser beleza e o que que eu vou fazer aqui galera eu vou falar que o velho de cada input o valor de cada input vai ser o title Na verdade o valor do input de de title do título vai ser o title o valor do input de descrição vai ser description beleza agora se eu mudar aqui o state de title colocar 1 2 3 ó tá vendo ó então o valor desse States é o valor do input o que que eu preciso fazer agora Aqui ó
eu vou usar o cara chamado onchange que é mais um atributo aqui que a gente tem no GSX e esse onchange ele vai ser uma função JavaScript então vou ter que abrir e fechar Chaves então mais uma vez eu tô sendo repetitivo para você fixar isso sempre que você quer usar JavaScript aqui dentro do return você usa Chaves tá então aqui dentro eu vou receber uma a function pode ser uma função convencional também mas eu vou colocar a function ao acho mais fácil e Eu vou receber o events que a gente já conhece do JavaScript
convencional né que tem o target velho e tudo mais e eu vou falar o seguinte ó set title ou seja o título vai ser events target value Beleza então vou atualizar o meu state conforme eu mudo aqui o input fazer a mesma coisa aqui no input de descrição set description EV target ó Beleza se eu der um log aqui nesses States ó console P log title description que que vai acontecer vamos lá Ó ó tá vendo ó tem os dois aqui fechou f por que o log tá aparecendo toda hora a gente vai ver calma
mas a gente tem a gente precisa deles a gente tem OK agora ol olha que massa aqui cara Quando eucar em adicioná eu quero chamar essa função certo então Olha só olha aqui cara aqui no B do adicionar cli eu vou chamar essa fun passando o galera title description que vem do meu States e o States os States eles T os Valores doos inputs Então vou colocar teste teste adicionar olha aqui de novo ó ó cara que coisa sensacional o que que tá acontecendo Felipão vamos lá a gente tem os dois States a gente tá
alterando eles conforme o usuário digita aqui no input quando eu clico aqui em adicionar eu chama essa função on test submits ela monta a Nova tarefa pegando os parâmetros que eu passei e os parâmetros serão os valores dos inputs ou seja os States e eu atualizo aqui meu States meu set tasks beleza show galera coisa linda e aqui turma que que eu posso fazer aqui ó depois que eu chamar essa função Eu posso também limpar o meu state né pro pros inputs ficarem limpos aqui e como que eu faço isso aqui ó eu posso nessa
function abrir um uma chave e aí eu posso colocar mais linhas aqui dentro ó posso colocar um set title set description Beleza então você pode fazer isso aqui tranquilamente ó lembrando Poderia ser uma function aqui também tá galera beleza ó então adicionar coisa linda turma belezinha show agora vamos adicionar uma validação se eu clicar em adicionar e não ter nada ó tá criando sem nada não quero que isso aconteça eu quero que se eu não tiver nada nos inputs que eu mostre um alerta por exemplo de erro então antes aqui de chamar essa função essa
função lembrando adiciona a tarefa no States eu vou verificar Se o título e a descrição estão preenchidos então se eu tiver um title ou description eu vou retornar um alerts que é do JavaScript preencho o título e a descrição da tarefa adicionar não tenho nada ó Beleza tem um erro mas se eu colocar espaço ó ele vai deixar adicionar ó colocar espaço nos dois acionou por quê Porque eu preciso dar um trm aqui para ele tirar os espaços em branco beleza show recarreguei adicionar beleza Ó coloquei espaço em branco ele não deixou show galera coisa
linda turminha olha que massa hein tô deletando tô criando show demais galera muito bom muito bom muito bom ah o ID aqui galera tá dando ruim esse ID ah t. Len mais um ó ele tá mudando as duas aqui ó tá vendo Ah é porque o ID aqui eu vou colocar t tasks p Len mais do deve resolver vamos Ver teste teste Tá mas para resolver galera isso aqui de fato eu vou sempre gerar um ID aleatório tá é melhor então para isso eu posso usar uma biblioteca chamada ID que é uma alib que gera
ids aleatórios pra gente tá Ó tem 110 milhões de loads Então vou instalar aqui na versão 10.0.0 Então vamos lá abrir aqui o terminal npm install Eid na versão 10.0.0 aí aqui em cima eu Vou importar v4 from ID beleza na verdade eu acho que o react ele tem um Hook galera nem preciso disso tá nem preciso turma ó vou remover Acabei de instalar no preciso o react ele tem um Hook é na verdade vai prisar mesmo galera perdão vai prisar não tem jeito vai precisar o react ele tem um Hook que gera um ID
aleatório galera Ó ele tem esse US ID mas não vai servir Não vai servir porque a gente precisa gerar o ID aleatório aqui dentro aqui dentro com Hook a gente não consegue fazer isso então imports v4 from ID E aí aqui no on submit eu coloco com v4 aqui ó chama v4 sempre o ID vai ser aleatório agora então teste teste beleza Show Beleza turma coisa linda hein ficando muito massa Nossa aplicação Zinha show de bola agora vamos implementar algumas coisas novas aqui primeiro eu quero que quando Eu clicar aqui nesse botão eu vá pra
tela de detalhes né eu vá para essa tela E aí eu consiga voltar aqui também então agora a gente vai entender como que funciona a criação de páginas aqui dentro do react como que a gente consegue criar diferentes páginas aqui dentro do react mas cara a gente aprendeu muita coisa legal tá se você ficou com alguma dúvida deixa aqui na descrição reass ista o curso Quantas vezes você achar necessário eu sei que Pode ser muita coisa mas cara esse esforço vai valer a pena cara eu garanto para você o react é extremamente demandado pelo mercado
Fechou então vamos lá agora a gente vai adicionar a nova página aqui tá vou ensinar para você vou ensinar você como faz isso e a gente vai aprender ainda mais conceitos fundamentais aí do react e agora turma como eu mencionei Vamos criar a tela que vai exibir os detalhes de uma tarefa então quando eu clicar nesse botão aqui Por exemplo eu quero para uma tela diferente Ou seja outra rota tá que mostre o título e a descrição da minha tarefa e para fazer isso no react turma é um pouco diferente também porque como a gente
já viu o react ele gera uma single page application Ou seja a nossa aplicação ela só tem esse HTML pra aplicação inteira e como que funciona em uma aplicação convencional que você cria sem o react você tem um html para cada página Então você tem um HTML pra página Inicial que é essa página aqui você tem outro pra página de detalhes da tarefa mas como a gente tá numa single page application em uma aplicação react a gente vai ter também as páginas gerenciadas criadas por meio de JavaScript então a gente ainda vai ter apenas um
HTML na nossa aplicação mesmo se a nossa aplicação tiver várias e várias páginas beleza e para fazer isso a gente vai usar uma biblioteca chamada reacts router que como o nome já diz ela Gerencia rota na nossa aplicação reacts tá então para isso eu vou instalar aqui o react router Dom Beleza então você pode procurar ele aqui no npm você vai ver que ele tem muitos downloads aqui então vamos instalar ele Nessa versão aqui ó 6.26.1 Então vamos lá então vou abrir aqui um terminal eu vou rodar o npm install react router d na versão
5 6.26.1 beleza show e a gente pode até ver aqui na própria é documentação aqui Deles que é bem tranquilo da gente criar aqui rotas na nossa aplicação então primeiro passo eu vou lá no meu arquivo main.js ou seja o meu arquivo aqui que renderiza a minha aplicação na minha div com ID root como a gente já viu também que acontece aqui no reacts e aqui dentro eu vou criar justamente o que a documentação pede para eu criar então vou criar esse router que vai ser um creat browser router Vou importar lá do react router
Don também e aqui eu vou Passar um objeto vou passar uma lista de objetos para ele esse primeiro objeto ele vai ter o pef barra e esse Element vai ser o que vai ser renderizado na minha página inicial Tá então vou deixar essa div aqui só pra gente ver funcionando beleza OK e agora eu vou importar esse router provider e renderizar esse router provider aqui onde eu tô renderizando o meu App tá então vou importar router provider do react router Dom e aqui eu vou tirar meu App e vou colocar router provider passando o router
aqui beleza só isso salvei eu tenho meu Hello Road aqui por quê Porque essa é a página inicial beleza Se eu mudar isso aqui esse elements para app eu vou ter justamente o que eu tinha antes então olha que interessante quando eu acesso local host barra né que Ou seja a minha página inicial eu estou nessa tela aqui se eu colocar aqui por exemplo ah home barra home ó vou ter um 404 e agora vou ter que que acessar localhost barh para ter acesso à minha aplicação Beleza então a gente consegue criar diferentes rotas dessa
forma aqui tá beleza agora turma que que eu vou fazer aqui eu preciso criar outra rota que vai ser Justamente a rota que vai ser exibida quando eu clicar nesse botão aqui então eu posso chamar essa rota por exemplo de barra tesk ou barra detalhes a tarefa por exemplo vou chamar de barra tesk Ok então para isso galera que que Eu vou fazer aqui na minha pasta src eu vou criar uma página uma pasta perdão chamada pages de páginas tá E aqui dentro eu vou criar uma página vou criar um arquivo aqui E esse arquivo
eu vou chamar ele de task page.on GSX e Isso aqui vai ser um componente comum tá então Task page Beleza vou exportar aqui embaixo Task page e eu vou renderizar por enquanto um H1 Task page Ok e agora aqui no Main eu vou criar outro objeto aqui na minha Lista que eu passo pro Create browser router eu vou colocar o pf como barra Task e o elements vai ser o meu Task page Ok eu vou renderizar ele assim OK beleza isso aqui turma é um componente ainda tá eu só tô chamando de Porque de fato
vai ser uma página né mas isso aqui ainda sim é um componente toda função que retorna dsx é um componente beleza eu chamei de page só para fins semânticos aqui para ficar mais claro que isso aqui vai ser uma página legal Beleza agora se eu acessar localhost bar tesk eu vou ter essa página aqui beleza Agora vamos começar a fazer essa página aqui né O que que eu preciso mostrar aqui primeiro eu vou basicamente estilizar ela de forma que ela fique com aquele nosso fundo né com aquele nosso fundo meio Azul Então vou colocar um
classname screen with screen para ocupar tudo BG slates ah 300 eu não tô enganado vamos lá na no app e ver aqui ó BG slate 500 Ok BG Slate 500 pading 6 então pading de 24 pixels legal agora turma vamos lá vamos pensar um pouquinho aqui e como eu quero que seja a dinâmica dessa página eu quero que quando eu clique em uma tarefa eu vá para essa página mas eu preciso passar os dados dessa tarefa que eu cliquei de alguma forma para essa página com acorda porque aqui eu não vou ter nenhuma informação em
relação à tarefa que o usuário clicou então para isso eu posso usar query params aqui na minha URL então eu posso basicamente acessar localhost barra Task e aqui eu passar uma query param ou seja um parâmetro que eu consigo passar pra minha URL uma informação a mais que eu consigo passar para minha minha URL e eu posso chamar esse C para por exemplo ó eu vou criar um ponto de interrogação agora eu vou colocar title Então estou criando um crp Ram title e aqui eu vou colocar que o title vai ser por exemplo ah estudar
React e eu não posso colocar espaço aqui mas enfim ah vou colocar estudar tá e eu vou falar nem preciso das das aspas inclusive Tá eu vou falar que a description Vai ser 1 2 3 então eu tenho acesso a esse squar params dentro aqui do meu Task page Como que eu faço isso olha só que simples eu vou usar um Hook aqui ó chamado use search param do react router Don e esse cara ele vai ter uma lista esse esse US search par ele vai retornar uma lista e Eu vou pegar aqui dele basicamente
o primeiro elemento da lista que vai ser o search params E aí galera que que eu vou fazer Olha só eu vou criar uma variável aqui chamada title que vai ser searchparams.get title e a description vai ser search paramet pget description beleza e agora aqui dentro Olha só eu vou colocar um H1 com o title e eu vou colocar um parágrafo com a description deixa eu arrumar aqui ó salvei Olha que Interessante turma estudaram 1 do TR por quê Porque eu passei isso aqui nessa URL ó olha aqui ó tá vendo ó então se eu
mudar esse title para teste eu tenho teste aqui beleza então eu consigo passar query params paraa minha URL e acessá-los do meu componente usando do ess US search parents Beleza então quando eu clicar por exemplo nessa tarefa estudar programação eu vou levar o usuário para essa página e eu vou colocar como title o estudar Programação e como description a descrição dessa tarefa aqui Então como que eu vou fazer isso vamos lá Qual componente que eu renderizo essas tarefas aqui Qual componente que eu exibo elas na tela lá no meu tasks então vou apertar cont CRL
P para eu Navegar para tasks Então esse aqui é um atalho do ves code ó aperta cont contrl P você edita aqui tes você consegue ir para esse arquivo aqui e quando eu clicar aqui galera nesse botão aqui ó nesse Chevrom Wi ó se eu comentar comtrol barra então selecionei cont control barra ele comenta ele tira dali ó Então eu tenho que justamente eh colocar um clique aqui nesse botão e quando ele clicar nesse botão eu preciso levar o usuário para essa tela para essa página que eu acabei de criar Como que eu faço isso
primeiro eu vou criar uma constante aqui em cima vai ser navegate que vai ser use navegate do react router D também beleza e agora que que eu vou Fazer galera quando eu clicar nesse nesse botão aqui ó nesse buton eu vou passar M clique Então essa função aqui vai ser executada quando eu clicar nele ó esse Arrow function e eu vou colocar o qu galera navegate e aqui na verdade o que que eu vou fazer aqui ó eu vou criar uma função aqui em cima e essa função ela vai ser On C details Click então
quando eu clicar no botão de ver detalhes que que Eu vou fazer galera primeiro eu preciso colocar um navigates e eu vou navegar para onde galera pra Barra tesk então abri aqui uma Crew string do JavaScript por qu porque eu quero escrever uma string aqui e eu quero usar JavaScript aqui ó Então title vai ser o qu galera tesk p title e o description vai ser tesk p description então quando eu chamar essa função aqui embaixo ó então aqui no cli ó desse botão eu vou chamar essa função então vou abrir aqui O mar function
por qu porque eu quero chamar essa função passando parâmetros para ela tá então se eu quisesse chamar ela sem passar parâmetro eu só colocava assim sem parênteses nem nada sem chamar ela só passaria ela aqui dessa forma mas como eu quero passar um parâmetro para ela que é o quê a tarefa que está sendo clicada então eu vou abrir o my function passar para cá tesque beleza e aí eu vou receber o tesk aqui Fechou então salvei Olha só cliquei Aqui ele foi coisa linda hein show de bola beleza show galera então funcionou show para
ficar galera mais mais seguro também quando a gente tá trabalhando com Crew Strings aqui no reacts é uma boa prática a gente usar o seguinte ó criar uma constante e usar o new URL search params porque aí ele já faz qualquer tratamento que é necessário na string para ela de fato não ter nenhum conflito aqui quando a gente passa aqui no search Parance se ela tiver espaço ele coloca o porcentagem 20 por exemplo enfim é mais seguro você usar isso aqui beleza e aí vou colocar um cre PSS o title vai ser tesk p title
description vai ser Task P description E aí aqui embaixo ó no navegate eu passo o qu galera eu passo interrogação e o query pon TR string Beleza agora cliquei show então assim você tá trabalhando da melhor forma com query params aqui no react Beleza então a gente viu como que a gente cria uma Página como que a gente navega para essa página com esse Hook use navegate e como que a gente pode passar query pars para essa página e acessar também esses quer pars nessa página por meio desse Hook use search parents beleza show galera
agora eu vou estilizar essa página aqui tá então o que que eu vou fazer aqui no meu App eu vou basicamente ã copiar isso eu vou colar aqui no meu Task page Então vou copiar Aqui e aqui nesse H1 eu vou colocar detalhes da tarefa eu vou tirar esse componentes daqui vou apagar essa div aqui também Beleza então ten aqui detalhar a tarefa vou tirar esses parágrafos daqui fechou agora ah eu vou fazer o seguinte ó embaixo Aqui desse H1 eu vou renderizar uma div e eu vou colocar o title e a description Nessa div
ó Então beleza show então estudar em inglês estudar em ingês inglês para se Tornar fluente belezinha Deixa eu só ver se é o mesmo mesma cor aqui BG late 400 É isso mesmo é 200 na verdade ó BG late 200 deixa eu ver a cor aqui é isso mesmo beleza e aí eu posso falar que esse estudar inglês vai ter um BG slates 700 por exemplo Opa text então para mudar a cor do texto text slates vou chamar de colocar 600 aqui beleza e aí a descrição eu vou colocar um text slate 600 também beleza
turma show então ó a gente consegue clicar Aqui vê aqui os detalhes dessa tarefa legal e agora eu vou também colocar um botão de voltar aqui tá então quando ele clicar nesse botão de voltar ele volta pra página anterior tá então para isso galera que que eu vou fazer aqui vamos lá nessa Task page aqui ah no detalhes da tarefa eu vou criar uma div vou colocar isso aqui numa div porque eu quero que esse texto detalhes da tarefa fique ã fique ao lado do meu botão de voltar Então vou criar uma div aqui e
essa div eu vou colocar uma Class name de Flex beleza e aqui ó vou colocar um Bon e Esse bon vai ser o de voltar então eu vou importar lá do lucid react chevron Left icon importei ele tá aqui beleza show agora galera que que eu vou fazer aqui eu vou falar que os itens aqui eles ficarão horizontalmente alinhados ao centro beleza e aí essa esse Bur eu vou posicionar ele de for absoluta aqui na esquerda é um um tpico de CSS não vou Muito a fundo nisso mas basicamente vou falar que essa vai ser
relative V falar que Esse bon vai ser Absolute e que o left vai ser zero Ok top zer botom zer ele ficar alinhado ali ao centro verticalmente também Bele show galerinha agora eu vou também colocar nessa aqui uma margem aqui pequena acho que seis tá bom ok e agora quando eu clicar nesse botão eu preciso que ele volte pra página anterior antes disso deixa eu mudar a cor dele Eu vou colocar um text Slat 100 Ok E aí quando ele clicar nesse botão ele vai voltar tá pra página anterior então para isso galera eu vou
usar o Hook navigates também tá então com os navigates e os navigate percebe como que a gente usa bastante Hook aqui no react Então sempre que a gente tiver uma função com esse use aqui é porque que é um Hook beleza e aí cada Hook ele vai ter uma funcionalidade específica Então esse use navegate é pra navegação esse use search parens é para pegar os Que parens e muito mais e você vai pegando os hooks Conforme você aprende mais o react ok belezinha agora eu vou aqui para Esse bon ó passar um click e aqui
eu vou passar uma função navegate e eu vou passar o qu galera menos um então quando eu clicar aqui ó ele vai voltar tá e galera por que que eu não posso passar esse navegate dessa forma tá Por quê Porque você nunca pode chamar uma função assim no on Click do seu buram ou enfim em qualquer função Que você passa aqui ou no on Click ou no onchange você não pode chamá-la dessa forma tá Por quê Porque senão essa função vai ser executada assim que esse Button for colocado em tela assim que esse return for
executado essa função aqui já vai ser chamada Então não vai funcionar basicamente Então sempre que você quer chamar o uma função por exemplo esse essa navegate aqui é uma função quando você quer chamar uma função no One click no Change como a Gente já fez você precisa ou passar uma function assim tá por qu porque aí você está passando uma função que chama essa função é diferente você não tá chamando essa navegate você tá passando uma nova função que chama essa navegate beleza Ou você cria uma função aqui em cima como a gente já fez
então on por exemplo back click E aí você chama o naveg menos um E aí você passa o One back click assim ó sem chamar o One back click Entendeu Beleza isso aqui galera Você criar a função aqui em cima e passar ela assim sem chamá-la tá é importante você não pode fazer isso senão não vai funcionar Ó você viu lá que já bugou então você não pode fazer isso você tem que passar apenas a função sem chamá-la Ok então isso aqui é o mesmo de você passar aqui uma Arrow function com navegate men1 ou
até mesmo você passar uma função convencional aqui tá então é um detalhezinho que pode ser um pouco confuso Eu sei mas é assim que Funciona tá ou você passa uma função que chama aqui a função que você quer chamar o método que você quer chamar ou você cria a função aqui em cima e passa ela aqui emb baixo eu prefiro turma na grande maioria das vezes é criar a função aqui em cima tá especialmente se a função tem mais de uma linha se a função tem uma linha apenas eu até costumo passar aqui embaixo ó
é bem tranquilo mas se ela tem mais de uma linha como essa aqui por exemplo ó Que a gente criou ó que tem quatro linhas eu gosto de criar a função aqui em cima e passar ela aqui embaixo porque senão fica muita linha aqui embaixo eu não gosto tá fica meio difícil de ler Beleza então só uma observação aí você vai pegando esses detalhes também Conforme você ganha mais conhecimento aí no react mais experiência no react também beleza show galera então quando eu clico eu volto coisa linda hein Deixa eu salvar Aqui recarregar só para
ver ó Então vou acessar lá oost 5173 cliquei Ó coisa linda turma Beleza então tá funcionando aqui o nosso botão de voltar então quando você quer voltar pra página anterior você usa esse navegate você passa um menos um aqui para ele beleza show galera então estamos quase finalizando aqui a nossa aplicação eu quero te parabenizar porque eu sei que pode ser muita coisa mas o que você tá aprendendo aqui como eu Falei eu reitero isso para te manter motivado para ajudar você a perseverar esse conhecimento ele de fato cara pode mudar a sua carreira o
react ele é muito demandado pelo mercado ele mudou a minha carreira e eu quero que eu mude a sua também então vamos lá Eu ainda tenho mais coisa para te passar aqui tá bom você entendeu Como que cria páginas aqui no react isso é muito legal muito massa agora o que que eu quero fazer galera quando eu crio uma tarefa nova ó teste Por exemplo se eu recarregar a página essa tarefa some eu posso mudar esse comportamento eu posso fazer com que a tarefa ela persista ela seja persisti se eu recarregar a página Como que
eu faço isso eu posso usar o local Storage o local Storage é um armazenamento que todo navegador tem e esse armazenamento ele pode conter Strings você consegue armazenar texto lá dentro e mesmo que você recarregue a página esse loc stor esse armazenamento Ele se mantém mesmo que você até fecha a página fecha o navegador e volte esse armazenamento ele se mantém Beleza então como que a gente pode usar ele aqui vamos lá vamos aqui no meu App e vamos pensar um pouco no que eu quero fazer aqui tá basicamente eu quero pegar essas tarefas e
eu quero salvá-las no local Storage mas ao mesmo tempo eu preciso mantê-las em um States por qu galera porque se eu atualizo o loc Storage a minha interface não atualiza também Então eu preciso manter isso aqui num state porque quando eu atualizar esse state a gente já viu isso eu quero atualizar minha tela quando eu criar uma tarefa eu quero atualizar minha tela Então eu preciso manter tanto aqui no States quanto no local Storage Beleza e como que eu faço isso turma agora eu vou mostrar PR vocês um novo Hook aqui do react tá que
é o use effect ó use effect Vou importar lá do react Ó use effect beleza ó importei aqui do react e esse Use effect ele vai receber como primeiro parâmetro uma função vou colocar uma Arrow function aqui e como segundo parâmetro uma lista Então como primeiro parâmetro uma função pode ser uma marrow function pode ser uma função convencional também tá vou colocar mar function aqui mas é pura questão de gosto e uma lista aqui como segundo parâmetro agora turma vamos lá esse use Effects ele executa essa primeira função sempre que algum valor que eu Colocar
aqui dentro dessa lista for alterado ou seja se eu colocar tes aqui dentro essa função vai ser executada essa função aqui que eu passo pro tasks sempre que o meu tasks é alterado então se eu colocar aqui por exemplo console pon log tks foi alterado olha só que interessante salvar aqui minha aplicação abr aqui o meu deixa eu recarregar abri aqui meu inspecionar console beleza turma então aqui eu vou colocar teste teste olha aqui ó test que foi atuado Por qu porque esse States o meu stat tasks ele foi atualizado Beleza se eu deletar uma
tarefa ó T foi alterado beleza ó criei uma nova foi alterado então sempre que eu coloco um valor nessa lista sempre que esse valor é alterado essa função que eu passo como primeiro parâmetro é atualizada é executada perdão então eu crio um efeito por isso o nome é use Effects por quê Porque eu crio um efeito que acontece quando algo quando algo muda entendeu Então Poxa pensa assim o efeito que vai ter quando essa tes for alterada é esse aqui ó essa função ou seja vou rodar uma console pon log então o que que eu
vou fazer aqui pensa comigo sempre que eu alterar o meu States de tasks eu preciso atualizar meu local Storage com esse States primeiro passo tá então o que que eu vou fazer aqui ó local Storage PS item para esse set item Vou passar dois parâmetros primeiro o nome que eu vou usar para identificar Esse dado que eu tô armazenando eu vou colocar tasks Beleza e como segundo parâmetro eu vou colocar o que eu quero armazenar nesse nesse espaço test aqui no meu local storage o que eu quero armazenar json P string fy tasks Então o
que eu estou fazendo eu estou convertendo esse tasks que é um objeto JavaScript tá que é uma lista na verdade JavaScript eu estou convertendo para string Beleza então salvei ó dá uma olhada agora ó vou criar uma tarefa Criei agora eu vou inspecionar aqui ó eu vou pra application ou aplicação local Storage local host olha aqui ó eu tenho tasks que foi justamente o que eu coloquei aqui e eu tenho as minhas tarefas aqui olha que interessante Beleza agora galera eu já estou salvando no local Storage ó se eu recarregar Eu Ainda perdi tudo por
quê Porque agora eu preciso pegar o que está aqui no local Storage e jogar no meu States E olha que interessante ó o local Storage ele Persiste ó recarreguei a página ele se mantém inalterado mesmo se eu fechar e abrir de novo ó inspecionar novamente ó então application ó ele tá aqui ainda Beleza então Então como que eu faço pra manter paraa jogar o que tá no local Storage aqui pro meu States muito simples ó aqui no meu US States onde eu passo essa lista como valor padrão eu vou colocar o seguinte turma Jason ppse
localstorage.get item tasks salvei se eu não tiver nada lá dentro Turma eu vou colocar uma lista vazia tá então se eu não tiver nada no meu local stor ou seja se for a primeira vez que o usuário Tá acessando a minha aplicação eu vou colocar uma lista vazia sen não vou pegar o que tá lá dentro então salvei aqui executei olha que massa meu tenho que tá aqui dentro ó se eu criar uma tarefa ó recarregar tá aqui coisa linda se eu deletar recarregar deletei se eu deletar tudo ó Beleza então percebe que eu estou
salvando aqui no Local Storage eu estou recuperando também o que está lá dentro olha aqui ó eu tenho duas tarefas vou criar mais uma tenho três aqui tá vendo ó minha câmera tá aqui em cima mas você tá vendo aqui embaixo ó minhas tarefas aqui beleza então se eu recarregar eu tenho as tarefas aqui show show de bola Tur Então dessa forma a gente consegue usar o loc Storage para PR assistir um dado que está no States de forma que se o usuário Recarregar a página se o usuário sair da da minha aplicação e voltar
eu consigo recuperar os dados que ele tinha anteriormente belezinha show galera então estamos quase aqui finalizando quase finalizando agora eu quero passar para você dois conceitos muito importantes aqui no reacts na verdade um conceito muito importante que é a gente interagir com apis tá porque você como Dev front Change como Dev react F stack cara você com certeza Em algum momento Da sua carreira vai interagir com api Então essas tarefas por exemplo elas podem vir de uma API então se você não sabe o que é uma API não vou muito a fundo aqui não é
o foco do curso mas é basicamente um uma rota por exemplo que você chama uma url que você chama que vai te dar algum recurso que está em algum banco de dados por exemplo é o mais comum você chamar uma p no seu frontend para você pegar os dados que estão armazenados em um banco de dados Então agora vamos ver como que a gente pode fazer isso aqui no react E aí sim você vai cara tá muito bem alimentado vamos dizer assim questões de fundamentos para você continuar aprendendo ainda mais sobre react começar a fazer
mais projetos também então bora lá galera P que eu vou usar aqui vai ser o Jason placeholder é uma API que ela existe há muitos anos já então é muito provável que quando você esteja assistindo esse vídeo ela ainda Exista mas ela basicamente dá pra gente algumas alguns dados aqui testes de teste pra gente usar nos nossos projetos tá então por exemplo se eu chamar Jason placeholder ã esse essa URL aqui bar tods ele vai me retornar uma lista bem grande de tarefas Olha só em Jason tá e a gente vai chamar essa P aqui
e a gente vai colocar essas tarefas dentro do nosso Estado Ok então qual que é o fluxo galera mais comum aqui quando a gente tá trabalhando com apis no reacts o fluxo Mais comum turma é o seguinte ó a gente tem o nosso componente Beleza então a gente tem aqui componente e quando o usuário acessa esse componente quando ele acessa por exemplo a nossa página inicial esse componente ele vai chamar api beleza e aí galera os dados dessa api ele vai Eles serão persistidos no estado do componente então persiste persiste dados persistidos no state do
componente Então esse é o fluxo mais Comum você tem um componente você chama api você pega os dados dessa api você persiste esses dados no seu States Beleza então para fazer isso turba que que eu vou fazer aqui ó vamos lá eu vou vir aqui no meu App tá E e aqui no meu App é eu basicamente tenho aqui o meu state de test como a gente já viu bastante a gente tá pegando hoje do próprio aqui local Storage e eu preciso galera fazer justamente isso aqui ó quando eu acessar o componente eu pego Os
dados da api e eu persisto aqui no meu States beleza eu não vou muito a fundo aqui Tur interação com APS no reacts eu quero fazer um vídeo mais a fundo sobre isso mas isso aqui já vai dar um belo Panorama para você então galera eu preciso executar uma ação assim que o usuário acessa o componente Como que eu posso fazer isso eu posso fazer isso com o use effect também só que eu vou passar como segundo parâmetro uma lista vazia ou seja essa função aqui Ela só será executada na primeira vez que o usuário
acessar a aplicação então grava isso aqui isso aqui é muito importante você vai usar muito isso aqui no react quando você cria um use Effects e você passa passa como segundo parâmetro uma lista vazia essa função só é executada uma vez e essa uma vez é quando o usuário acaba de acessar a aplicação então aqui galera que que eu vou fazer eu vou chamar a api eu vou pegar os dados que ela Retorna e eu vou armazenar ou persistir esses dados no States tá como que eu chamo ap aqui turma eu posso usar o axius
por exemplo que é uma biblioteca que ajuda a gente nesse sentido de chamar APS e eu posso usar o próprio fat do JavaScript eu vou usar o próprio fat do JavaScript e o que eu vou fazer aqui turma vamos lá eu vou criar uma variável chamada response que vai ser awaits fatch e aqui eu vou passar o que galera O Jason placeholder bar todos Isso aqui vai pregar as tarefas para mim e eu vou passar galera aqui ah um limits dessa forma tá um limits de 10 ou seja eu só trarei 10 tarefas senão ele
vai trazer várias tarefas vai lotar Nossa aplicação aqui então você passa esse underline limit 10 Beleza agora turma eu vou criar uma variável data vou chamar de await responsejson perfeito e aqui turma quando a gente chama o fat assim ele por padrão ele vai Chamar essa rota com o método Gets Você pode passar como segundo parâmetro um objeto e aqui você especifica o método né né Você pode colocar Gets post putch Patch e etc eu vou também criar mais vídeos sobre a peis aqui no canal para você entender mais esses métodos aqui não é o
nosso foco aqui então vou colocar get aqui só para ficar bem específico E aí eu vou ah dar um log aqui nesse deira por enquanto tá deira só para ver o que que vem nesse deira Então a gente está pegando a resposta aqui da pi que é aquele Jason e a gente tá convertendo essa resposta para Jason porque isso aqui não vem Jason na verdade esse fat ele não traz em Jason beleza se eu passar o mouse em cima ele traz Ah esse response aqui ele é de outro tipo tá ele não é um json
ok então eu vou basicamente converter essa response para Jason vou logar ela aqui embaixo Mas turma percebe que eu estou usando a weights aqui então Preciso usar a SN aqui em cima certo Felipão na verdade não eu não posso usar a SN aqui no use effect ó parece até um erro aqui para mim do is Lens então eu removo esse ass daqu eu faço o seguinte ó eu jogo tudo isso aqui para uma função aqui dentro então posso criar por exemplo ah assy function fat tasks por exemplo então vou fazer o fetting vou pegar as
tarefas e eu colo aqui dentro essa função pode ser assíncrona E aí eu chamo essa função aqui embaixo ó dessa Forma tá sem await tá Turma Sem a weights só dessa forma legal isso aqui pode ser também uma function tá galera sem problemas eu tô intercalando entre Arrow functions e funções convencionais para você ver que ambas são possíveis de ser usadas aqui no react Isso aqui vai ser aass Beleza então estou pegando aqui as respostas da pi estou convertendo para Jason estou logando aqui vamos ver se vai funcionar então abrir minha aplicação vim aqui no
console olha aqui Galera esse log é justamente o log aqui do nosso da as nossas tarefas estão aqui olha que sensacional agora o que que eu vou fazer galera eu já chamei a api eu peguei os dados que ela retorna e eu vou armazenar esse dados no state então set tasks deira beleza Ok salvei olha aqui galera essas tarefas são as tarefas da minha api então se eu criar uma tarefa nova vai funcionar ainda se eu Recarregar eu vou ter agora as tarefas da api apenas beleza por que galera porque agora o local stor ele
não fica tão útil mais né porque em um mundo assim ideal eu não vou conseguir simular isso aqui e com essa api fake vamos dizer assim mas em O Mundo Ideal né no no mercado de trabalho no seu dia a dia como deve você por exemplo quando você criasse uma tarefa nova você chamaria uma rota de api e essa rota criaria a tarefa no banco e aí Você chamaria a rota para pegar as tarefas novamente para você persistir as tarefas aqui entende é eu não vou conseguir fazer isso aqui com a Jason placeholder Beleza mas
se eu fizesse isso por exemplo se eu conseguisse fazer quando eu criasse a tarefa eu chamaria uma rota que salvaria a minha tarefa no meu banco de dados e quando eu recarreg asse aqui a tela eu teria essa tarefa nova por quê Porque eu chamaria essa rota aqui que pega as Tarefas do banco entendeu mas aqui eu não vou conseguir simular mas dessa forma você consegue usar aqui o reacts para interagir com apis Então você consegue criar um US effect aqui por exemplo criar uma função assíncrona aqui dentro que chama a rota da sua api
E aí você consegue armazenar essa esses dados dentro do seu estado Então eu só quero mostrar essa possibilidade para você para você já ter essa Isso no seu leque de habilidades vamos dizer assim e aí você pode pesquisar mais eu vou trazer mais vídeos também sobre isso aqui no canal Então se inscreve para você não perder belezinha eu vou deixar comentado aqui turma só pra gente ter como referência ó Então vou colocar o seguinte Olha só na verdade eu vou ah só comentar eu vou deletar esses comentários aqui acho que a gente não precisa mais
deles deletar isso aqui ah e eu vou Comentar isso aqui ó e quiser você pode chamar o Api para pegar as tarefas beleza show de bola então turma nós vimos muita coisa massa aqui do react muita coisa legal e e agora turma Vamos pensar um pouquinho aqui só pra gente fechar o curso com chave de ouro eu quero voltar um pouco e ver o que a gente fez então isso é um hábito também muito legal de você ter como deve de você ver o seu código e e ver o que você Pode melhorar dá uma
analisada nele então aqui no nosso ah Ed Task vamos lá no Ed tesk ó vou clicar com control click aqui ó eu vou pro componente percebe que a gente tá repetindo muito código turma olha aqui ó a gente tá repetindo Class name aqui tanto nesse aqui quanto nesse certo e a gente também tá repetindo cara aqui no B nem tanto né mas quando você tá repetindo o código assim Especialmente nos estilos tá então quando você tá repetindo Vocêe a dois lugares diferentes lugares você pode criar um componente isso Beleza então aqui galera eu V criar
um componente chado input Bele ess input vai ser uma Fun Fun inut e eu copiar ut eu fiz por enquanto esse aqui ó vou copiar esse input e eu vou colocar aqui no return beleza Agora pensa comigo esse velho esse onchange esse Type esse placeholder tudo isso eu vou remover por Quê Porque isso aqui depende quem vai chamar esse input galera por quê Porque agora eu vou chamar esse input aqui ó eu vou chamar ele assim então eu posso chamar ele aqui em cima com o Place hold de por exemplo title e eu posso chamar
ele aqui embaixo com placeholder de description concorda Então esse Place holder ele vai ser dinâmico então não vou colocar ele aqui do jeito que tava senão não vou Conseguir mudar ele tá E que que eu vou fazer aqui galera como eu quero que esse placeholder que esse Type que esse Vel que esse onchange sejam dinâmicos o que que eu faço aqui eu recebo eles como props então aqui eu posso pegar minhas props o meu Type vai ser props pon Type o meu value vai ser props p value beleza e o meu onchange vai ser o
que galera props onchange dessa forma beleza e o meu placeholder também props pon placeholder e o que que eu vou o que Que sempre vai ser a mesma coisa o Class name ou seja os estilos Então vou salvar e agora eu vou mudar vou deletar isso aqui eu vou mudar esse input aqui do título para input que foi o que eu acabei de criar eu importei lá da onde eu criei e eu vou remover esse Class name vou fazer a mesma coisa aqui embaixo ó então inputs com letra maiúscula isso é muito importante como a
gente já viu salvei resultado é o mesmo ó Recarreguei resultado é mesmo mas agora sem repetir o Class name ó então se eu quiser mudar o estado o estilo perdão de todos os inputs por exemplo mudar aqui Ah o pading eu posso vir só aqui e mudar só aqui ó então px12 eu mudo só aqui esse é outro ponto muito legal também de você criar componentes porque se você quer alterar todos você altera só esse aqui que aí já vai alterar em tudo isso é muito legal também beleza show galera mas eu posso melhorar Isso
aqui também galera não preciso cara percebe que o Type vai ser o props p Type placeholder props P placeholder Vel props Vel e assim por diante o que eu posso fazer cara olha que massa eu posso aqui cara só fazer o seguinte ó deletei tudo e aqui embaixo do Class name eu vou abrir um objeto eu vou fazer um spread de todas as props ou seja todas as props que eu passar para o input eu vou passar para esse input HTML aqui então eu passando esse Placeholder eu vou passar ele aqui entende então esse código
ele resulta no quê quando eu chamo esse componente passando o placeholder Digite a descrição da tarefa eu estou pegando esse placeholder e já jogando aqui automaticamente mesma coisa com type mesma coisa beleza Então a gente tem essa facilidade aqui no react você consegue fazer esse spread de props aqui fechou perfeito turma outra coisa que a gente tá Repetindo aqui é o seguinte aqui no meu tasks e aí a gente vai aprendendo também você vai pegando esse feeling de criar componentes tá esse tes ele tem três botões iguais né esse aqui certo ó essa cor aqui
esse aqui que é menor e esse aqui também percebe que é o mesmo estilo é a mesma cor é o mesmo pading é o mesmo border radius então eu também consigo criar um componente para isso turma Como que eu faço isso vamos Lá vou criar um componente buton PSX Olha como a gente vai dividindo as coisas então bon eu vou dar um exper default aqui no Bon e aqui galera eu vou retornar um buton e mesma coisa qual é a única coisa que sempre vai ser o mesmo em to todos os botões o Class name
certo então aqui galera o que que eu vou fazer ó eu vou pegar esse Class name e eu vou jogar aqui no meu B certo E aí cara olha que interessante quando eu renderizo quando Eu chamo aqui um B do HTML eu passo aqui para dentro dele o conteúdo dele né então passo aqui por exemplo o ícone então tipo se eu colocar teste vou ter teste aqui eu preciso fazer a mesma coisa nesse meu buron que eu acabei de criar tá então por exemplo ó vou chamar aqui o buron que eu acabei de criar o
que eu passar para dentro dele eu preciso passar aqui para dentro do buron também ó desse desse buron HTML então por Exemplo aqui eu passei teste eu preciso que esse teste ele venha para cá Como que eu faço isso turma eu vou receber uma props aqui e o nome dessa prop ó eu vou renderizar aqui ó props pch o que que é essa props pch essa props pch ela é o o que eu passo para dentro do meu componente Então o que eu passo para dentro desse B é o que turma o meu teste Então
esse teste vai ser o meu props pch belezinha Fechou então vou deletar isso aqui e eu vou renderizar o Meu buton aqui ó no meu chevrom WR icon enderecei aqui show cliquei não aconteceu nada o estilo tá o mesmo o que é bom mas quando eu clico não acontece nada por quê Porque eu passo esse um clique para cá mas eu não faço nada com esse clique aqui dentro então ou eu posso passar clique aqui ó vai ser o props cli E aí sim vai funcionar ó beleza Ou eu posso fazer o que eu tinha
feito antes ó Então props aqui beleza ó então vi para cá show ok a gente já vai arrumar isso aqui tá galera que eu tô interagindo com a api aqui né beleza galera show galera então eu posso também renderizar esse aqui em eu posso tirar o CL inclusive perfeito e eu posso também criar mais componentes né se você quiser por exemplo esse gerenciador de tarefas aqui Ó ele é o mesmo tanto aqui na página inicial quanto aqui na tela de detalhes ó ele é o mesmo H1 eu copio e colo o código também ó então
aqui no meu App Tenho H1 mesmo estilo e aqui no meu test page eu tenho mesmo H1 então eu posso criar também o componente para isso Como eu posso chamar esse componente por exemplo de title PSX então function title então percebe como que você vai quebrando a sua aplicação em pequenas peças né E aí você vai retornar o qu Galera H1 aí você vai colocar o Class name então Ó esse Class name aqui por exemplo e pensa comigo eu quero renderizar esse title assim ó title e aqui dentro passar o que eu quero mostrar na
tela Então esse aqui é o Children então o que que eu faço aqui props e aí eu passo aqui ó props P Children beleza Ou eu posso simplesmente fazer um Destruction aqui já do Children e aqui chamar só Children e agora aqui no Task page eu posso passar aqui ó nesse title detalhes da tarefa beleza e eu posso deletar isso aqui ó ó então eu cliquei aqui mesma coisa beleza aqui no meu App P dsx eu também posso fazer isso ó então aqui em gerenciador de tarefas eu vou colocar meu title vou importada onde eu
acabei de criar então quando eu dou enter ele já importa para mim aqui em cima Ó fechou E aí eu tenho o mesmo resultado mas repetindo menos código se eu quiser mudar o estilo de todos eu venho aqui no title. GSX eu mudo aqui por exemplo para 5xl ele aumenta o tamanho aqui e aqui também olha que massa Então olha como você consegue reutilizar código isso é muito legal muito legal tá Ah bom galera eu vou comentar isso aqui também para eu não interagir com api é já tava comentado a chamada aqui então não importa
eu vou deletar tudo aqui galera Eu vou criar novas tarefas teste teste beleza show perfeito turma então nós entendemos aqui como que a gente consegue criar componentes para reduzir duplicidade de código certo e você pode expandir isso aqui você pode criar ainda mais componentes se você quiser tá E aí você vai aos poucos aí pegando esse feeling essa essa noção de criar diferentes componentes para ir aí reduzindo a duplicidade de código aí na Sua aplicação perfeito e turmin agora para fechar com chave de ouro eu preciso falar para vocês também uma observação importante sobre os
componentes tá a gente tá falando de componentes agora só para fechar o curso aqui e eu quero te parabenizar cara por ter ficado até aqui de verdade tô muito orgulhoso de você porque eu sei que é muito conteúdo Eu sei que não é fácil então vamos para cima não desiste continua assim que cara vai dar bom confia beleza turma seguinte Até agora nós trabalhamos com componentes funcionais o que que são componentes funcionais são componentes que são funções beleza mas nós temos outro tipo de componentes também que são os componentes de classe então se eu quiser
eu posso por exemplo aqui ó criar um componente por exemplo Test dsx e esse componente ele pode ser uma classe também Beleza então eu posso criar um Class Task extends react p component e esse test ele vai ter um render na verdade aqui é test né E nesse render eu vou colocar o meu return e aqui eu vou retornar GSX Ok eu vou importar aqui o react então Import react from react e eu vou exportar essa classe aqui então se eu vier aqui agora no meu App e renderizar o meu test aqui em algum lugar
por exemplo aqui test show funcionou tá vendo Então você Também CONSEG criar componentes com classe Felipão eu quero usar um States eu consigo consegue também é um pouco mais chato O que você tem que fazer você tem que abrir aqui o constructor e as props inclusive você recebe aqui dentro Ó então props aí você chama o super com as props para você passar essas props pro react component isso aqui é mais um conceito de programação orientado a objetos e aí você coloca this P stat E aí você coloca o States aqui então tipo Message hello
world por exemplo Ok E aí aqui embaixo para acessar o States aqui no render você coloca this pstate P message E aí você tem aqui hello world então PR percebe que é muito mais difícil né muito mais verboso muito mais chato você escrever componentes funcionais e eles estão galera caindo em desuso a muitos anos já mas eu preciso falar para você que eles existam que eles existem porque e você pode passar para algum projeto que use eles então é Bom você saber e por que que eles estão caindo em desuso por dois motivos primeiro que
é muito mais difícil você escrever e segundo que você não consegue usar hooks dentro dele então você não consegue usar e States apesar de você conseguir criar States dessa forma você não consegue usar o US States E olha como é mais fácil né você criar um States assim com us States do que você criar assim né você não consegue usar aqui um US state tá galera você não Consegue também usar o use effect aqui dentro então se você quer executar alguma coisa quando o quando o usuário acabar de acessar a aplicação como a gente fez
aqui ó com use effect você vai ter que usar um component did Mount aqui ó na sua classe e aí o que você colocar aqui dentro vai ser executado é executado quando o usuário acessa pela primeira vez Então você consegue fazer a grande maioria das Coisas que você consegue fazer ah em Componentes funcionais aqui dentro mas de forma diferente mas nós temos tantos hooks cara que hoje é praticamente assim um consenso o padrão da comunidade react usar componentes funcionais Beleza então eu só estou falando aqui para você ter essa noção mas sempre use componentes funcionais
beleza só estou falando aqui para você saber que componente de classe também existem para que você não fique muito surpreso Quando você vê algum aí Beleza e agora turma pra gente fechar com chave de ouro a gente vai fazer Deploy dessa aplicação aqui o que que é Deploy Felipão a gente vai colocar nossa aplicação online de forma que você consiga mandar ela pros seus amigos para outras pessoas nos seus próprios computadores ou celulares verem essa aplicação aqui beleza para isso primeiro eu vou remover esse componente test que eu não vou usar tá então vou remover
ele e aqui no meu App eu vou parar de Renderizar também tá E para fazer o Deploy galera o que que eu vou fazer aqui primeiro eu preciso rodar esse npm Run builds aqui esse builds Como Eu mencionei no começo da aula ele vai preparar Nossa aplicação para ir pra produção então aqui eu vou rodar um npm Run builds e ele vai gerar para mim uma pasta dis e dentro dela ele vai colocar o index HTML e os meus assets aqui esses assets eles incluem o meu arquivo JavaScript ó então ah o vits Ele já
compila ele já menif melhor dizendo todo o o código JavaScript para que ele fique de forma ah da forma mais performática possível beleza e aí esse index P HTML é o que de fato a gente vai ah rodar e eu vou usar galera uma plataforma chamada vercel para fazer o Deploy da minha aplicação Ok então para isso você vai acessar versel e você precisa ter uma conta no github para você fazer o Deploy então se você não tem cria agora sua conta no Git é muito Importante que você tenha uma conta pensando aí na sua
carreira como deve inclusive tá então cria a sua conta você pode seguir aqui o meu perfil também e aí você vem aqui na versel você vai estar nessa tela aqui você vem em continue with github você vai fazer seu login aqui ele vai te redirecionar e agora você vai precisar eh colocar esse projeto no seu Git Hub que a gente acabou de fazer então para isso eu vou rodar um Git init para ele Inicializar um repositório Git aqui se você não sabe nada de Git eu vou deixar anexado aqui no card é um curso que
a gente tem de Git github para você aprender é muito importante que você saiba Git github beleza e eu vou basicamente ah rodar um Git ads Git commit e eu vou colocar o seguinte ó é antes de você fazer o commit inclusive melhor você precisa garantir que você tem essa pasta pon Git Ignore e que ela tem dentro desse arquivo melhor dizendo Arquivo Git Ignore E dentro dele você tem que ter esse node modos e esse dis aqui ambos ok senão vai dar ruim você não pode subir essa pasta node mod de forma nenhuma pro
seu github porque tem muita coisa aqui aqui basicamente tem todos os pacotes que a sua aplicação precisa para funcionar Tá beleza vou fazer o commit aqui eu vou colocar commit Inicial tanto faz a mensagem que você colocar então Git commit TR M vai criar o commit com a Mensagem commit Inicial e esse Git ponto vai colocar todos os arquivos dentro desse comit então comit é basicamente um registro que eu faço da minha aplicação nesse momento aqui tá beleza Ele criou aqui agora eu vou aqui no github no meu github eu vou aqui em repositórios eu
vou criar um novo repositório e eu vou chamar ele de curso de react YouTube curso de react cursa YouTube beleza fechou vou criar o repositório tem que ser público Eu vou copiar isso aqui embaixo galera essas três linhas aqui então primeiro essa aqui vou colar aqui vou copiar essa aqui também e eu vou dar um push aqui beleza agora eu vou recarregar e os arquivos do meu projeto T que estar aqui se eles não estarem você fez algo errado volta o vídeo e tenta de novo eles T que estarem aqui Ah para você conseguir fazer
o Deploy tá agora eu vou lá na versel e eu vou aqui ó em add New Project e eu vou permitir aqui o meu na verdade você vai conseguir ver aqui é todos os repositórios que você tem aqui aqui no seu github eu vou selecionar esse aqui ó curso de react YouTube imports beleza aqui galera eu não vou editar nada tá não vou editar nada só vou garantir aqui ó que em build and output settings esse build commands é o npm Run builds beleza show perfeito ele já detecta aqui que o meu projeto usa vits
E aí eu consigo fazer um Deploy Aqui ó então Deploy ele vai começar a fazer o Deploy vamos esperar um pouquinho é bem rápido tá galera bem rápido mesmo então vamos esperar um pouquinho e isso aqui deve possibilitar que a nossa aplicação seja acessível por pessoas ah fora aqui da nossa máquina tá então vamos esperar um pouquinho ele vai começar a instalar aqui os pacotes ó e fez perfeito como que eu acesso isso aqui agora eu vou aqui continue to Dashboard e agora tenho o domínio aqui ó olha aqui ó clico aqui clico aqui eu
tenho a minha aplicação ó consigo usar coisa linda galera olha Esso aqui cara ficou torto aqui inclusive né vamos arrumar separada ó ah essa tela ficou torta né então vamos lá no nosso pages Task page e eu vou colocar um MX alto aqui e deve resolver MX alto aqui nessa div e deve resolver vamos ver então aqui resolveu show e agora que eu fizer uma alteração eu vou fazer outro commit Então Git AD Git commit ah correção vou colocar correção da tela de tarefa e vou dar um Git push Origin M Isso aqui vai puxar
esse commit que eu acabei de fazer pro meu github consequentemente a vercel ela vai fazer outro Deploy Cara isso é muito legal também tá então ó ela vai fazer outro Deploy já vai atualizar minha aplicação com essa nova mudança pode levar un um tempinho aqui mas isso aqui vai ser corrigido mas turma Olha isso aqui cara você pode mandar essa URL Para qualquer pessoa essa pessoa vai conseguir ver o projeto que você fez aqui comigo Olha que sensacional galera que coisa maravilhosa tá Cara eu tô muito feliz que você chegou aqui de verdade você aprendeu
muita coisa legal então cara manda esse vídeo aqui para algum amigo ou amiga quer aprender react se você gostou deixa aqui o seu joinha deixa o seu comentário também para eu saber se cara você curtiu o vídeo se eu quero muito seu feedback é muito valioso Para mim então deixa embaixo e vamos junto aqui aprender mais ainda sobre react porque eu quero postar muito conteúdo ainda aqui no meu canal sobre react beleza e galera antes de finalizar o vídeo aqui a gente percebeu durante a edição que nós esquecemos de ao lado do título da tarefa
quando ela estiver concluída colocar aquele Icone Zinho de check também então para fazer isso aqui é bem tranquilo vamos lá no nosso componente tasks então cont control p Test.jsx e aqui ah do lado aqui do title eu quero mostrar um ícone apenas se a tarefa estiver concluída para isso eu vou abrir aqui a minha Chaves e eu vou colocar o seguinte Olha só task.is completed e aí eu vou colocar um Ends aqui operator ou seja o que eu colocar na direita aqui só vai ser exibido caso isso aqui Seja verdadeiro tá então o que eu
quero fazer aqui galera eu quero renderizar um chevron na verdade um check icon que eu vou importar lá do Lu Seeds react beleza show então se eu salvar Agora sim eu preciso também que isso aqui seja display Flex tá então aqui eu vou colocar Ah que esse buron aqui é display Flex item Center posso colocar um GAP dois também um espaçamento aqui entre os elementos show de bola e turminha aqui a gente não pode acabei não mencionando também no curso eu acho mas eu não posso fazer um if aqui tá galera isso aqui é um
detalhe do GSX também eu não posso fazer if então Se eu quiser renderizar algo de forma condicional Ou seja eu quero renderizar esse ícone apenas Se esse task.is completed for verdadeiro aí eu preciso ou usar isso aqui o Ends operator ou eu posso usar um ternary operator então se for verdadeiro eu mostro o ícone senão eu não mostro nada por exemplo most mostro nulo tá e eu vou ter o mesmo resultado mas eu eu prefiro fazer com o Ends operator quando eu tenho um caso assim né onde eu quero renderizar algo Se algo for verdadeiro
ou falso aí eu coloco o an operator aqui e fica perfeito beleza agora sim a gente tá pronto para finalizar aqui o curso beleza Felipão assisti o curso até aqui eu aprendi aí os conceitos básicos do react como componentes state props tudo isso Mas quais que são os meus próximos passos o que que eu devo fazer agora para continuar aprendendo mais para continuar evoluindo no react para eu conquistar meu primeiro emprego como Dev Front Change como f para crescer no meu emprego atual vamos lá preparei para você um notion aqui com o que você deve
fazer agora depois de ter assistido esse curso aqui beleza para você continuar aprendendo react para você dominar essa ferramenta tão importante hoje no mercado primeira coisa você vai fazer projetos aplicando O que você aprendeu até aqui isso aqui é muito importante tá porque não só com o react mais com qualquer coisa que você aprender na Programação se você não praticar você vai esquecer e a melhor forma de você praticar é você criando projetos tá então agora antes de você sair aprendendo coisa nova pratica o que você viu até aqui beleza fortalece essa base Que você
obteve ã nesse curso aqui tá se você não tem ideia de projeto eu separei algumas ideias aqui para você primeiro você pode fazer um gerenciador de tarefas você pode pegar esse projeto que a gente fez junto e refazer sozinho e aí Você vai conseguir aí a praticar bastante o que você assistiu nesse curso aqui comigo tá você vai conseguir praticar state props componentes e etc Beleza outro projeto aqui um gerenciador de Finanças então você pode criar lá um projeto ã que você gerencia uma que você cria uma finança por exemplo um gasto um investimento um
ganho e no final você pode fazer um um relatório ali sobre o que sobrou você pega os os ganhos tira ali os gastos e vê o que sobrou naquele Mês é algo assim mais simples para você praticar também uma galeria de imagens isso aqui é muito massa também você pode ah criar um formulário lá pro usuário eh colocar uma imagem aí você mostra a imagem lá embaixo numa espécie de galeria pode ah ser um projeto bem legal para você também tá o notaker mais ou menos ali um uma aplicação para você criar notas né então
H você pode criar um formulário ali pro pro usuário ele coloca lá a nota que ele quer Criar e Você vai mostrando ali numa visualização de boards por exemplo como se fosse o trela alguma coisa assim beleza e aqui se você Ah já fez também projetos que você com certeza já deve ter feito né pelo menos um com HTML CSS e JavaScript Eu recomendo que você refaça esses projetos mas agora usando o react tá por qu turma porque todos os projetos que você consegue fazer com react você consegue fazer com JavaScript puro vamos dizer assim
sem usar react mas com uma Dificuldade muito muito maior especialmente se for projetos maiores tá então pega os projetos que você já fez com JavaScript puro sem usar nenhuma biblioteca nenhum Framework e faça eles com reacts isso vai te ajudar bastante também então faça projetos pelo menos três desse aqui para você praticar bem aí os fundamentos do react Beleza depois disso eu recomendo que você veja alguns hooks tá a gente viu ah nesse curso aqui alguns hooks como use Effects use States Mas agora eu recomendo que você após ter PR AD aqui que Você estude
esses outros hooks também tá e eu tenho um vídeo aqui no meu canal onde eu explico os hooks para você vou deixar anexado aqui no card você pode assistir esse vídeo e aí você vai fazer o mesmo esquema estudar esses hooks depois praticar fazendo projetos você pode aplicar esses hooks nos projetos que você vai ter feito até esse ponto aqui isso aqui é muito importante tá porque o react hoje ele Ele é muito dependente dos hooks né você vai usar hooks em tudo quant é lugar então é importante que você saiba esses aqui também beleza
depois disso eu recomendo que você dê mais uma olhada em data fetting tá ou seja como que você vai interagir com apis no react da melhor forma possível tá e aqui você vai estudar duas bibliotecas react query e swr são muito parecidas então recomendo que você comece pela react query que é a mais popular e depois você pode dar uma Olhadinha na swr se você quiser tiver com tempo aí Eu recomendo que você dê uma olhada também em graf ql acabei não colocando aqui Ah esse notion é só visualização deixa eu colocar aqui hooks na
verdade deira F Vou colocar aqui ó graph q e aqui dentro você pode dar uma olhada no Apollo clients tá então o Graphic well ele é basicamente Ah outra forma que você tem de criar interagir com APS Eu recomendo que você não se aprofunde muito mas só dê uma Olhadinha veja o que é tá você pode ver um curso rapidinho no YouTube enfim porque isso aqui é bem legal também e esse Apollo client é o que você vai usar no react para interagir com a aping Graphic we isso aqui é muito legal também beleza uma
das coisas ã mais fascinantes Eu acho que eu já estudei foi Graphic well Beleza depois disso aqui ã você vai ver formulários tá e eu pensei em trazer formulários para esse projeto já e mas ia ficar muita coisa Então eu recomendo que você veja depois essas duas bibliotecas aqui react Hook form e Zod tá porque quando você tá trabalhando com react é muito comum que você trabalhe também com formulários e a gente trabalhou nesse curso aqui com formulário bem pequeno mas é muito provável que você vá trabalhar com formulários maiores com vários inputs então react
form Zod eles brilham nesse aspecto então depois de você ter visto aqui mais sobre deira fetting ter Praticado ali um pouco ter brincado especialmente com o react Crew que é o mais popular hoje deu uma olhada tambémm no react form e no ó eu tenho um vídeo também aqui no meu canal Eu tenho um vídeo de react crey e de Zod com react for vou deixar tudo na descrição também eu vou anexar aqui no card para você assistir também beleza depois dê uma olhada em estado Global também tem um vídeo sobre isso aqui no canal
Ah eu recomendo que você comece com context Api e use reducers ah dois aqui já vão solucionar o seu problema na grande maioria das situações depois você pode dar uma olhada em Z stands e Redux também Felipe Redux não é mais usado hoje não é enfim não é tão importante de aprender cara é Redux você vai encontrar em muitos projetos mais antigos então recomendo que você saiba pelo menos o básico ali de Redux e você aprendendo Redux você aprende zustand ou qualquer outra biblioteca de gerenciamento de Estado Global muito mais tranquilamente tá então recomendo que
Você estude primeiro context api e os reducer que são bem mais tranquilos de aprender do que esses dois depois você ã deu uma olhadinha nesses dois aqui de forma que você tem um uma visão Geral de ambos aqui eu também tenho um vídeo de Redex aqui no canal vou deixar anexado aqui beleza depois disso testes tá então eu recomendo que Você estude jest ou v-test o v-test É bem parecido com o jest mas é Um pouco mais rápido então aprende jest que é o padrão do mercado depois você pode aprender o vitas e é bem
tranquilo de aprender se você já sabe jest react testing Library também isso aqui é para você testar as suas aplicações no react então para você garantir que o que você fez tá funcionando isso aqui é essencial caso você queira especialmente criar uma aplicação Grande trabalhar como Dev front isso aqui é essencial que você saiba react testing Library e Cypress Também que também te ajuda a criar testes mass testes de end to end tá react no servidor isso aqui é muito importante também Tur então depois de você aprender tudo isso aqui eu recomendo que você comece
a ver mais sobre reacts no servidor então server components e consequentemente next JS você pode ver também o remix que é outra outro Framework tá então o nextjs é um Framework do react e o remix ou remix é outro Framework também beleza mas eu Recomendo que você foque no nextjs Porque ele é o padrão do mercado no momento em que eu estou gravando esse vídeo e eu creio que ele vai crescer ainda mais beleza isso aqui turma pode ser um pouco intimidador mas ah é algo que mais uma vez você vai precisar praticar bastante vai
precisar consumir um bom conteúdo também porque pode ser confuso isso aqui é algo novo no react né Essa questão de servidor e tudo mais Eu mencionei server components lá no Início do vídeo é algo que muitas pessoas ficam um pouco confusas mas é algo importante para você aprender também mais lá pra frente tá react 19 mais tá é no momento que eu estou gravando esse vídeo react 19 não foi lançado ainda mas ah após ele ser lançado Eu recomendo que você aprenda Actions E esse novo essa nova P do react chamada use Tá eu vou
trazer vídeo aqui no meu canal sobre ambos aqui Felipe então o que você ensinou no curso está Desatualizado de forma nenhuma eu te ensinei os conceitos e os conceitos fundamentais do react nunca vão mudar tá na verdade nunca é muito pesado né mas é muito difícil mudar porque ele já vem aí por vários anos sendo os mesmos enfim e turma isso aqui Pode parecer muita coisa mas eu quero que você saiba que cara realmente não existe almoço grátis né se você quer ser um programador quer ganhar bem quer trabalhar de casa quer ter uma liberdade
ah financeira Liberdade pô de você poder trabalhar da sua casa e para ir viajar e trabalhar o mesmo tempo cara você precisa estudar precisa fazer o que precisa ser feito que é sentar na cadeira e estudar se dedicar se você chegou até aqui no curso você tem essa disciplina essa perseverança necessário Então é só continuar assim que uma hora vai dar bom você vai conquistar seu primeiro emprego nunca para de estudar porque essa é é chave para você ser um programador de Sucesso nunca parar de estudar e se você se interessar também você pode conhecer
o meu treinamento F Club onde eu ensino tudo isso aqui que Eu mencionei para vocês literalmente tudo isso aqui eu ensino com muito mais calma lá no meu treinamento vou deixar o link na descrição Mas se você quiser acessar aí é fcl.com.br lá a gente aprende backand frontend enfim Tudo que Eu mencionei aqui com muito mais calma porque as aulas Ah enfim são eu tenho mais tempo Aqui eu não tenho muito tempo aqui no YouTube as aulas lá são mais ah num ritmo mais vamos dizer assim mais saudável né né aqui eu tenho que correr
um pouco à vezes mas enfim se você tiver interesse vou deixar o link na descrição a gente abre as vagas Ah sazonalmente tá então não é sempre que as vagas estarão abertas inclusive talvez você está vendo esse vídeo aqui as aulas as vagas estão fechadas Mas você pode se cadastrar na lista de espera fazer sua pré-inscrição E ser avisado quando as vagas forem abertas Beleza então turma eu sei que pode parecer muita coisa mas não desiste porque se você estudar um pouco todo dia dá um pequeno passo todo dia uma hora você vai aprender tudo
isso aqui cara é só você ter perseverança dis e não desistir e Dev mais uma vez eu quero te parabenizar por ter chegado até aqui são pouquíssimas pessoas que tem essa perseverança essa disciplina que Você demonstrou hoje muita gente desiste no Meio do caminho eu sei que pode ser muito difícil mas não desista cara porque esse esforço ele vai dar frutos Beleza o react ele é extremamente demandado pelo mercado e eu quero te ajudar ainda mais a aprender mais sobre ele então se você não quer perder os próximos conteúdos aqui do canal se inscreve aqui
deixa o seu joinha também para que esse vídeo chegue a mais pessoas também beleza no mais a gente a gente se vê nos próximos vídeos um Abraço
![Claude 3.5 Crash Course for Developers: Code 10x Faster in 2024 [Claude 3.5 artifacts]](https://img.youtube.com/vi/fMa2zQIkQwM/maxresdefault.jpg)
