Fala galera beleza sejam bem-vindos a esse vídeo do Óleo de Conair eu sou Matheus Batista e hoje a gente tem um projeto para construir juntos com react DS vou mostrar aqui para vocês olha só esse é o preto que a gente vai construir e apesar de simples a gente vai trabalhar com muitas ferramentas Vectra Dom waxes para fazer as requisições a nossa p. i e api que a gente vai utilizar vai ser a Jason pois holder então é um grande treinamento de axios baseado em react né então projeto base vai sempre utilizar o Whats para se comunicar com a api esse projeto ele vem lá da comunidade articular interesse fazer ele completo e aprender muito mais sobre react Entra lá na página vai estar aqui em casa na descrição dá uma olhada Como funciona o treinamento quais benefícios tu tem por participar Quais são os projetos tu vai construir carga horária grade curricular com ação está nessa página no link dela tá aqui na descrição desse vídeo voltando ali galera esse projeto a gente vai ter um crude completo com Axe para testar todos os verbos da TP get post Elite tá então ele tem aqui formulário tem área administrativa exclui post pode editar tudo isso trabalhando com essas ferramentas aí eu falei para você tá então logo mais já vou explicar esse projeto em detalhes para vocês só queria dar um último aviso galera está também com o nosso discord é hora de acordar a gente acabou de passar os dois mil membros Entra lá a gente tá aí trocando uma ideia todo dia Inclusive tem canal de dúvidas tem canal de vagas tem canal de projetos LinkedIn enfim é uma comunidade Que A Gente Tá formando ajudar débitos a se tornarem melhores E aí para trocar uma ideia Maroto no dia a dia estuda um pouco de programação Beleza então acessem o link da comunidade também o discord a gente está esperando vocês lá Além disso curtiu o vídeo escreve Deixa aquele like que isso me ajuda muito você é novo aqui no canal né já foi escrito Deixa o like aí também fortalece muito meu trabalho beleza galera então boa projeto Fala galera beleza seja bem-vindos a mais um projeto aqui da comunidade e hoje a gente vai tratar do assunto bem especial junto do react GS então é um projeto baseado em reacts vai utilizar outras tecnologias a gente aprender e são o axios que é o principal cara desse projeto e reactton eu roteamento aqui e rotas para a gente poder fazer a mudança de páginas certo e também a gente vai utilizar uma pista externa para poder trazer esses dados aqui então não são dados mocados né É de um api real que a Jason Place role tá até algumas rotas disponíveis para a gente e a gente vai estar utilizando essa daqui ó de post onde a gente vai ter tanto o get quanto post o e o delite onde vai conseguir fazer um crude com o axios né que a Biblioteca de requisição htp prompt Basic essa daqui é a documentação do axor então se você quiser acessar aí para dar uma olhada ele vai aprender esse recurso aqui aplicados nesse projeto de react tá como eu falei antes a gente vai utilizar o reactton para poder fazer a mudança de rotas né a gente vai ter várias páginas nesse projeto aqui então bem recheado aí de conhecimento para vocês e agora vamos dar uma olhada nele Bom primeiramente a gente tem a home aqui galera que ela faz um get lá na api né então a gente vai estar trabalhando muito aqui com aba de console principalmente Neto que para ver as respostas que a gente tá recebendo né nossa eu acesso a home aqui ele faz Gate dos posts todos seu acesso um único post ele vai me trazer um por só ele faz o get baseado no ID que foi enviado pela Rota tá quando dou novo post eu posso inserir um post aqui coincidentemente tem um post sendo executado é um método post e aqui em gerenciar a gente vai ter a opção de excluir e também de editar esse que a gente escolhe então vários recursos que a gente vê no dia a dia o programadores aí utilizam muitos desse recursos que a gente vai ver hoje para poder criar as aplicações das empresas que trabalha então conhecimento aí tem muita importância e cabe uma dentro galera o axios ele era muito mais utilizado do que hoje tá é porque eu tô trazendo ele aqui ele tem muito projeto que ainda utiliza ele tá e como ele se trata na biblioteca ele tem algumas possibilidades de configuração e são muito mais fácil ser executadas do que em JavaScript puro por exemplo tá então é algo interessante ainda de se aprender hoje em dia porque alfalex tem muitos projetos antigos foram criados com axios e também futuros projetos são criados só vocês verem aí o github e realmente é bem movimentado desse projeto tá Então é isso galera esse prédio quem vai criar Bora próxima aula começar as configurações do mesmo então galera eu estou aqui converse code aberto tudo em branco né começando o projeto agora a gente vai abrir o terminal porque esse projeto a gente vai utilizar o hit para criar a estrutura básica a gente pode utilizar o comando npm Create Vit of white@latest isso vai inicializar uma criação de projeto em algumas tecnologias e ele nos exibe ali dando ok aqui ele vai seguir para criação Então vou botar aqui o nome botar react traço exus tá que é o Instituto principal desse projeto ensinar o axios é que eu posso escolher a tecnologia com as setinhas eu vou escolher react java script não tape script ainda né galera a gente vai ter projetos com react mas nesse momento a gente aprendendo mais as bases do react então é interessante que a gente utiliza ele puro para não confundir com outras tecnologias agora que eu já tenho meu projeto criado tá essa pastinha e me sugere dá o CD react access mas antes de iniciar eu vou instalar alguns pacotes que a gente vai utilizar um deles vai ser o axios mesmo né e o outro vai ser o react faz um empenho e axios espaços Dá um enter tá E vai começar a instalação então agora quando começar aqui a gente já pode dar o npm Run deve ele já instalou tudo que era necessário para o vídeo react funcionar e os nossos dois pacotes tá Então vamos dar um mpm aqui e agora ele fez a inicialização do Vitti explicando aqui com o controle vai abrir direto navegador Então olha só a gente tem o nosso projeto iniciado em react beleza já com as dependências que a gente precisa instaladas aqui galera vou fazer uma limpeza básica nesses arquivos que a gente vem com a instalação vou tirar esse ácido não vamos precisar eu vou tirar todos os estilos do app ponto CSS aqui não é ponto JS x a gente vai limpar também tudo Vou Colocar assim ó Break access aqui em cima eu vou tirar essa chamada Jesus state e do logo deixar só o CSS vou tirar esse state Aqui também tá aqui no index. ss vou remover tudo também a gente pode deixar como está o arquivo né Depois ele vai mexer mas por enquanto dá para deixar assim aí agora a gente vê quem tem algo mais puro né sem aqueles enfeites iniciais do vídeo é esse projeto aqui a gente vai utilizar também uma fonte do Google fonte tá então vou abrir ele aqui para digitar Google Fontes no Google tá galera e acessarem o site aqui às vezes ele não abre na home então só clicar no ícone E aí ele vai tá a fonte que a gente vai querer aqui ela se chama link tá esse cara aqui ó clica marca todas as opções e abre aqui o viu e aqui a gente pode copiar esse link gerado vai colocar isso lá no HTML Pode ser aqui embaixo pode alterar esse texto aqui para Access e beleza galera a gente tem aqui agora tudo que a gente precisa para iniciar o projeto Instalou a fonte iniciou ele fez uma limpeza Inicial aqui para tirar tudo que vem do react e agora a gente vai já começar a criação do nosso projeto Bora próxima aula agora galera a gente pode começar a barra de navegação para poder configurar o nosso tá a gente vai poder inicializar essa estrutura não é tão complexa mas exige um pouquinho de configuração e se a gente fizer isso depois vai travar um pouco o desenvolvimento do nosso projeto né bom que ela já esteja feita agora o que eu vou fazer eu vou chegar aqui no meu e tem a inicialização da aplicação né E que eu vou importar algumas coisas lá do meu vai ser eu vou importar também o Walter tem alguns elementos que talvez a gente não utiliza Tá mas depois a gente excluir aqui não tem problema agora eu vou ter que criar um objeto de configuração de roteamento né então Walter e aqui a gente vai utilizar eu passo uma rei e objetos para ele tá nesse cara aqui eu tenho que passar qualquer um elemento principal ou seja e vai abrigar as páginas né porque eu tenho que ter um elemento eu posso repetir alguns recursos com base navegação rodapé eu vou utilizar porque são sempre um mês em todas as páginas eu só vou mudar o miolo do conteúdo meio tá eu defino isso utilizando a opção ela mente aqui e passando o app como esse meu conteúdo principal Então esse App aqui meio que vai ser o contêiner da minha aplicação toda tá E aqui eu defino várias tilts elas vão ser as rotas Então dentro de app eu tenho as minhas páginas sendo alteradas a gente vai ter que por exemplo a PF Barra e também eu vou ter apf por exemplo New né vou criar essas duas no começo Então eu tenho aqui a rota home carrega todos os posts mas isso aqui não é suficiente eu preciso definir oponentes para serem essas páginas tá então eu vou seguir aqui uma estrutura da própria documentação do reactton onde a gente cria uma pasta dentro dessa receita chamada rounds e aqui a gente cria as páginas Então vou criar a minha página até assistir e também newpost.
jsx que são aquelas duas rotas ali eu tenho uma extensão aqui que ela é snipersite facilmente criar os componentes tá Então vou utilizar ela Porque para mim é mais simples aqui digita rfce e aperta teb e ele queria componente aqui para gente tá então no momento a gente só precisa disso aqui não precisa mudar nada eu vou criar aqui nos dois e já criar uma estrutura básica de um componente a gente vai lá no Man importa esses caras então vamos dizer que eu vou ter aqui uma sessão para Minhas páginas porque está na mesma mesmo nível aqui né do bem então não preciso voltar passa é na mesma pasta acessa House também vou importar o new post que é a parte de novos conteúdos tá então aqui eu defino de cada página aqui é home e aqui vai ser a minha New post Beleza a gente já tem essas duas páginas criadas entre aspas né Só que essa configuração de ralter ainda não tá indo inserida no projeto como é que a gente vai fazer isso vai utilizar agora esse alterprovider aqui em vez de colocar o app diretamente para colocar alter provider e ao invés especificar a propriedade halter um objeto que criou aqui está constante tá então beleza agora galera acho que eu errei aqui um R tá cliente browser Browser agora galera as nossas rotas Elas já estão quase funcionando não apareceu a home aqui e eu tô na home porque isso eu preciso colocar um componente especial lá no meu apps X para dizer aonde que vai ser a inserção desses componentes que eu defini aqui homem e no post e depois os outros então vou lá e a fjs x eu vou importar aqui um cara que se chama outlet tá E esse outlet ele vai ser inserir aqui no meio então eu vou colocar uma dívida com a classe contêiner para poder controlar o tamanho do conteúdo e dentro eu já coloco aula tá assim eu tenho aqui ó home se eu boto barra New eu tenho New post Beleza então o roteamento já tá funcionando agora a gente tem que fazer de uma maneira mais suave para que isso aqui possa ser alterado né ou mudar de página pelo usuário né através da barra de navegação porque a gente tá fazendo a próxima aula Bora lá eu vamos agora galera fazer a barra de navegação do nosso projeto nesse momento a gente vai fazer uma versão mais simples só para ver a mudança de Rota depois a gente vai incrementar alguns estilos na próxima aula para poder dar uma acertada e CSS no projeto tá vamos deixar as coisas meio feias nesse começo mas por um bom motivo aqui esse RC eu vou criar pasta com pôneis vão conter meus componentes do meu projeto tá aqui nesse projeto ele não vai trabalhar muito componetização vamos focar mais no excessos um pouco em background Estou criando esse padrão para poder deixar as coisas organizadas vou criar aqui o nave bar. ds x foto x aqui tá ó beleza e aqui eu vou dar um r a fce e ele vai criar Minha Nave bar aqui na nas barras eu vou ter uma tag nave uma classe na estilizado depois no H2 com um texto de blog E aqui uma l com os links de navegação tá aqui até esse banco aqui eu quero que ele seja clicável que ele vai para home aqui eu não vou utilizar tag a gente não utiliza porque isso vai gerar o Reload da página a gente não quer isso quer que mude pelo já vai escrito né que a proposta da 5pg applications então aqui em cima Vou importar componente link lá do reactton e eu vou inserir um pote link entre os textos que eu quero que sejam os links tá para a propriedade two eu passo qual é a rota que eu quero que ele vá então aqui o Barra ele vai para Roma entendeu e aqui eu vou ter o link para a home né também eu vou ter um outro link para a minha página de novo post e que eu vou criar um two em vez de barra vai ser barra New eu vou colocar uma classe ainda aqui em new btn eu quero utilizar depois tá Agora eu preciso importar esse cara aqui na minha home aliás no componente principal é o app então aqui em cima eu vou importar nas bar lá de componentes tá exatamente essa posição barra navegação conteúdo e frutas se tivesse é que agora vocês verem eu posso clicar em números links e navegar entre as páginas sem Reload Ou seja a gente já tá fazendo do jeito que assim 5 PG application funciona então o reactton está funcionando já agora a gente já tem ele configurado nosso projeto está iniciado vamos ajustar um pouco de CSS na próxima lá fazer uma normalização nesse projeto a gente poder dar segmento a nossa home page Bora lá então agora galera vamos trabalhar um pouco no CSS para não ficar para trás aqui essa parte da civilização a gente vai fazer primeiro vamos até o nosso index. s é o estilo Global da aplicação aqui eu vou colocar uma margem zero pede zero resetar esses valores e eu vou colocar a nossa fonte fêmea que é a blinker depois eu vou dizer que no Bari a gente vai ter uma cor de fundo e zero e 17 é um cinza bem escuro uma cor de texto branco né para os nossos conteúdos depois eu vou dizer que nas ulis eu vou ter um Style 9 então isso vai remover os estilos aqui da minha lista né nas barras de todas as outras vou também falar que o tex decoration vou colocar a cor fff branco para elas também e vai iniciar com a opacidade de ponto 7 tá então vai ficar um pouco paca no início do da página porque eu vou ter um Hover né por isso uma transição em 3 segundos e vai aumentar essa parte para um tá Agora ele fica branco original né e ainda eu vou dizer que todos os parágrafos vão ter uma cor de A9 abb3 que é um cinza clarinho a contrastar com os títulos que são brancos tá Então temos aqui o nosso CSS Inicial Eu Vou colocar aqui agora um pouco de estilo no Meu Container onde vai ficar os dados da aplicação né para quem é ponto CSS e vai ter uma maxwift mil pixels é como determinei uma largura eu posso centralizar com margem né Vamos botar dois vem alto ou seja eu tô colocando dois e vem aqui da barra de navegação Aqui de baixo e centralizando conteúdo né esse cara agora que tá em mil pixels ele tá no máximo meu pixels né ele tá Centralizado aqui na minha área da minha página ainda vou adicionar um pequeno pad e dois apenas nas laterais dá para quando justamente fazer aqui e não ficar tão colado no fim da tela tá Então a gente tem aqui os estilos base componentes base nas aplicação agora eu vou fazer alguns tios aqui em nave barra ponto CSS então cria o arquivo igual o nome do componente né o padrão do react importa ele aqui no componente ponto na viva que eu colocar aqui você aplicado lá o nave bar display de Flex vou colocar os itens do lado do outro a lineites Center centralizando na vertical passando eles justify content na lateral com Space ou seja cada um vai ficar em um canto tem o blog navegação eu vou colocar também um pad de um Rain embaixo dois Rain nas laterais eu vou ter também aqui na minha meu H2 eu vou colocar o past de um porque senão o nome do projeto né ele fica opaco eu não quero isso quero que ele fique bem bonito tá Seguindo aqui nas barra o l também vai ter um display de Flex para poder colocar um link do lado do outro um GAP e um Rain seria o espaçamento entre eles então cria esse espaçamento aqui não precisa lidar com margem dos elementos e não sei se vocês lembram galera a gente tem snew btn aqui ó é o de novo post eu vou colocar aqui ó meu btn também vai ter alguns para chamar atenção uma borda de um pixel Solid fff uma pagem de meio Rain sem abaixo um raio nas laterais para dar um aspecto de botão né retangular borders e o passe de um também nesse cara tá então vou ter esse botãozinho aqui ó uma cor de fundo galera vou botar 17 19 um F vai dar um contraste na cor do bagre é um destaquezinho assim bem Sutil e agora sim a gente tem a nossa barra de navegação pronta e também os estilos base da aplicação aplicados agora bora começar a desenvolver Nossa home Então galera agora a gente vai fazer uma requisição via axios lá no servidor da Jason Place holder ligar os posts e colocar na nossa home tá então vamos partes aqui porque muitas etapas tá vou abrir com home jsx depois a gente faz os estilos tá e aqui a gente vai precisar de alguns componentes do react que são ao longo da utilização explicando para que a gente vai utilizar cada um deles também vou utilizar o link aqui lá do backgrouterdom tá porque aqui também vai ter que ter um link de cada post para sua página individual tá então Além disso eu vou ter um arquivo de CSS eu já posso importar agora galera Vou deixar ele criado aqui depois a gente trabalha nele né fazendo as importações aqui primeiro bom Começando aqui o componente eu vou ter que resgatar os dados dos posts em uma variável a gente usa o state tá que é o jeito correto de manipular e visualizar dados Então vou criar aqui duas novas variáveis ou sete post tá e elas vão conter um your State com a rei vazio e acontece aqui esse post automaticamente viram aí vazio tá que é o argumento Cruise state e sete post ele ganha habilidade de modificar o valor do post tá é como se fosse um GAP E daqui a gente vai ter agora uma função chamada de get post ela vai ser uma função assim vai justamente resgatar os dados lá da pi para executar ela eu vou ter que utilizar também é a maneira mais correta de fazer isso no react porque eu posso coordenar a execução essa função quantas vezes na página eu quiser então fica algo que eu determina e não deixo a cargo do react porque se eu colocar ela aqui fora não nos efect ela vai Executar a cada renderização do componente e isso ocorre muitas vezes durante a utilização do app tá então aqui como segundo argumento depois da função do meu e Usaflex eu vou colocar uma Rei vazio e isso vai fazer com que essa função Execute apenas uma vez tá isso aí dependências a gente vai trabalhar em outros projetos ele contém algum valor que vai ser monitorado pelos Effects para executar ele quando eu coloco vazio é só executa uma vez no load da página tá é que eu vou chamar o gato a gente vê a execução eu vou colocar aqui ó console blog E aí a gente vê aqui no console ele vai exibir mensagem testando isso aqui é uma das dúvidas né os que estão iniciando no react Por que executou uma vez eu falei que executar apenas uma certo One Direct quando ele tá nesse processo de desenvolvimento ele faz essa dupla execução e uma é a execução de Fato e a outra é um teste interno dele tá então ele acaba exibindo essas duas vezes aqui foi quando a gente faz o build Ou seja que vai para a produção ele executa uma vez só tá pode confiar em mim eu tô falando a verdade então galera continuando aqui ó depois do get post dentro do gás post né eu vou ter a execução da função eu quando eu como uma chamada síncrona servidor que pode ser ou não meu ele Pode falhar então eu vou colocar essa execução em um try Cat é uma maneira mais segura de conseguir identificar um possível problema durante essa requisição aqui eu vou estar esperando uma resposta da minha api então eu vou dar um Awake axios como é que eu posso ter acessor a gente pode ir lá na documentação do dia seu Place role tá E aqui ele vai me dar uma página que tem os exemplos de utilização aqui tá ele vai me dizer exatamente a pegar um recurso para listar todos os recursos tá então ele vai me dando aqui as opções a gente pode copiar essa URL aqui exatamente que a gente quer usar né do poço ainda colocar ela aqui no argumento do Gatti e eu tenho essas aspas aqui agora ele vai me Executar a chamada para essa pi e vai colocar a resposta nessa variável meu esposo tá aqui eu vou logar um eventual erro Azul tenha né que eu falei um tratamento de erro Recebi na mensagem para o usuário por exemplo mas Vamos considerar aqui na função de try eu vou exibir a resposta para vocês tá então aqui ó veja o que acontece access e agora sim a gente pode utilizar ele e ó ele me dá aqui uma resposta com alguns dados não o objeto vamos usar configuração data que são realmente dados que a gente quer cabeçalho aquisição né que alguns parâmetros que a gente teve na requisição status que eu recebi da resposta da api o texto do status E por aí vai ter um objeto rico de informações mas aqui a gente vai utilizar aqui para poder exibir os dados eu vou pegar aqui galera e vou transferir a minha variável deita a minha resposta Tá e agora se não consola logo nisso aqui vocês vão ver que eu vou ter apenas os dados os 100 posts é o que interessa para a gente nesse momento né então beleza galera a gente fez a requisição aqui tá eu vou quebrar essa aula em duas porque agora a gente vai ter que escrever JS x e daí vai para um lugar muito alto então vamos parar nesse ponto e na próxima a gente conclui a exibição Bora lá então galera agora vamos lá concluir Nossa exibição dos posts tá eu preciso fazer aqui eu preciso alterar essa variável de post para colocar o que eu recebi da pi Então vou botar aqui ó 7 post isso vai fazer a modificação desse cara a partir desse momento esse componente já vai renderizar ele vai renderizar e vai alterar esse valor eu vou conseguir exibir na tela Então olha só o que a gente pode fazer aqui eu vou colocar um H1 primeiramente últimos ou está e aqui eu vou fazer uma checagem se no posto silencio a gente tiver zero ou seja não tem imposto é quando inicia eu vou exibir uma mensagem de carregando como se fosse meu estado de loading da minha aplicação tá porque eu tô fazendo isso Centenário né e agora se já tiver post eu vou exibir assim ó arregou só para a gente ver o estado mudando tá olha só vou dar um contra o chifre aqui vai mudar bem rápido carregando carregou Então a gente tem esse feedback para o usuário né a gente poderia que inserir um loading por exemplo né vamos fazer isso porque foge um pouco do projeto Mas seria um momento ideal né entre Estou esperando uma requisição um erro da api e receba a resposta agora a gente tem que fazer esse carregou aqui mudar os posts tá como é que a gente vai fazer isso em vez de carregou Vou colocar aqui um parente está quando eu quero colocar mais de uma linha de código de arma script eu coloco entre parentes para ele entender que é um objeto então aqui eu vou fazer um post.
map vou passar por cada um dos posts vou chamar de post cidade individual aqui eu também coloco um parênteses tá é um outro objeto e aqui a gente vai ter uma Dive com uma classe de post eu tenho que colocar uma propriedade especial chamada aqui e é um valor único que não se repete Entre esses elementos pode dizer que eu postei é um valor que o react vai utilizar para poder controlar cada um desses componentes individualmente tá e ainda que dentro eu vou colocar o h2posto ponto Type só disso aqui a gente já consegue ver os pulso aparecendo esse aqui são todos os títulos do post não tem muito CSS ainda tá meio feio mas já é conteúdo que a gente quer aqui eu vou botar esse ponto Bari que seria conteúdo inicial do post né galera esses dados eles não são tão completos né É tudo utilizando um alien Y da vida então fica meio esquisito aqui mas seria o título e o início do conteúdo né a gente pode pensar assim e depois eu vou ter a minha meu componente de link eu postei lá em cima com um botão de ler mais né uma chamada para ler mais aqui a gente vai ter um two onde é que eu vou mandar esse cara eu não tenho essa rota ainda vai querer depois tá a barra post barra Wig do post não vai ser uma rota única para cada post isso ainda vai fazer pelo reactton ainda fazer por meio desse argumento aqui ele carregar esse dado lá tá a gente pode mandar para esse cara aqui e vou botar uma classe name de btn então assim a gente tem Nossa HTML que pronto trazendo os dados da pijai então a gente fez um get um Axis de anos assim tá eu clico aqui em ler mais ó ele dá um 404 mas ele já tá indo para o RL correta por X1 por 3 e assim por dia tá a gente finalizou O carregamento da api e exibição de dados na tela agora bora melhorar essa página que com CSS para concluir ela de fato a gente poder avançar no projeto vamos lá galera vamos para o CSS Nossa home page não é tão complexo temos algumas ações aqui para fazer ó home H1 a gente vai ter um textransform para up Case vamos alinhar ao centro E vamos colocar uma margem embora de um e-mail vai fazer com que centralize caixa alta vamos ver porque não pegou aqui galera deixa eu ver Ah tá na verdade eu não coloquei a classe não tem como mesmo né Lembrando que o react tem que ser sempre quase nem tá galera ó agora sim fechou agora continuando ali a gente vai ter no post individual um display de flex com flexion layout colunar dentro do post uma margem embora de um e-mail Rain uma pele embora também de um e-mail Rain Eu queria um espaçamento interno e externo igual coloca uma borda no meio é dividido cada um dos postos 17 é que nesse espaçamento aqui igual eu coloco a bordinha no meio né e agora a gente vai dar um espaçamento entre institui subtítulo é um posto H2 ou de p margem embora 1 Rain bastão do outro e eu vou como esse dado aqui não veio da maneira que eu quero olha só o texto em caixa baixa e isso aqui não acontece no título né o título geralmente começa com caixa alta eu vou utilizar a primeira letra desse cara aqui para se encaixa alta é o seguinte ponto post H2 first só fazer com que é a primeira letra maiúscula Isso incomoda menos o meu toque tá conseguindo aqui a gente vai estilizar o botão tá e dessa maneira que ele está fazendo CSS aqui né uma Dani para vocês que não sabe todos CSS que eu importo Mesmo ele estando com o nome do componente ele vai vazar para todos os componentes projetos tá é um ponto negativo dessa abordagem de CSS porém é interessante eu posso utilizar isso para reaproveitar Steel tá é justamente quem vai fazer aqui eu vou criar essa classe btn e vou reutilizar em vários locais do meu projeto não precisa criar o CSS aqui no botão a gente vai ter uma cor de fundo branca uma cor de texto zeroe 1217 uma borda de um pixel Solid FF tá então deixando uma borda uma cor de fundo igual para depois fazer o contraste no Hover opacidade de um tá E os links começa com menos opacidade o pé de meio raining para dar um aspecto de Botão veja aqui que eu tô transformando esse cara aqui vai ter uma border radios de um Rain para quebrar o canto uma largura máxima sem pixels o botão ficou da largura de 100% por causa do Flex né Agora tô limitando ele para 100 pixels mas eu vou alinhar o texto para não ficar para esquerda ele fica meio estranho curso Pointer aparecer ponteiro da mãozinha no botão uma transição de ponto três segundos que eu vou fazer um efeito de roubo Olha só eu botar né só falta o Rover branca ou uma cor de fundo de zero e um dois um sete a gente vai ter esse efeito aqui tá Beleza a gente tem nos estilos aqui da home galera já criamos esse do botão aqui que vai ser reaproveitado depois agora na próxima aula eu quero fazer uma configuração Extra do axes pra gente aprender uma coisa nova Bora lá agora galera a gente vai configurar um objeto do axios para poder padronizar algumas coisas na requisição eu vou criar aqui uma pastinha chamada axios a gente vai criar um arquivo chamado config de S e galera a gente cria tudo dentro da pasta src tá E aqui eu vou importar lá que acontece galera quando a gente tem as requisições da pi sempre na mesma URL eu vou criar muito códigos necessários repetindo isso aqui aonde toda aplicação se um dia mudar a URL da pi eu vou ter que mudar o projeto todo então o que que o Axis me dá aqui ele me dá uma espécie de configuração de um objeto Global eu posso reaproveitar a base URL e ainda configurar outros tipos de dados mas aquisições eu vou dar um exemplo para vocês aqui ao chamar de blog feat vai ser um método Create esse objeto do Access aqui eu vou configurar a base URL para ser esse início aqui ó até o eu vou colocar aqui beleza vou exportar esse cara com default e agora em vez de utilizar o axios lá no meu home ou qualquer outro componente eu vou na verdade utilizar o blog fat Tá eu vou trocar a minha chamada do Whats aqui para blockchat o que que vai acontecer eu não preciso mais sair o RN aqui porque já tem uma url base Então você sabe apenas 200 points é o mais correto né geralmente no backing também tá só acessando 200 points então vai ficar espelhado né E isso também nos poupa de futuras alterações na manutenção do código ajuda bastante Olha só eu venho aqui em Neto e recarrega vocês vem aqui eu recebo os dados igual e faz a requisição para mesmo RL não tem diferença nenhuma a bisu RL tá configurada no nosso projeto porém não serve só para isso eu posso configurar outros dados como o cabeçalho da requisição não poderia botar o headers aqui é algo que também é bem comum a te enviar algum dado pelo cabeçalho content staipe por exemplo de application é esse conteúdo tô esperando receber então agora em todas as minhas requisições a gente vai ter nos headers um envio desse cara também aqui em equest vem aqui que ele tem o WhatsApp application esse dado ele pode ser o padrão da maioria das aplicações Tá mas para mostrar alguma coisa diferente para vocês por exemplo poderia ter assim alguma coisa teste e ele mandaria isso pelo cabeçalho tá aqui alguma coisa teste no que que isso me ajuda bom poderia ser o token de um api por exemplo né Posso enviar qualquer coisa pelo cabeçalho isso permite uma comunicação do front com servidor uma forma diferenciada tá só para explicar para vocês como funciona esse cara vou pagar não precisa aquilo ali né vou deixar apenas os redres e a biz URL agora a partir desse momento a gente vai seguir nosso projeto com o box tá pessoal Então galera agora vamos seguir para essa página de novo post tá para a gente fazer a inserção de dados na api Claro que não funciona do jeito que a gente espera né que insira ou dado no banco que tá desde porque senão ele é problema para eles é que muita gente usa isso aqui mas ele vai nos encaminhar a resposta correta né o status correto quando a gente enviar a requisição para rota que é determinada esse fim tá então a fim de tudo isso vai funcionar como se fosse um outro projeto real que realmente seríssimo Então vamos começar lá o nosso componente de New post e vamos estruturar ele primeiro para depois a gente fazer requisição tá Como é que vai ser aqui o jcxd a gente vai ter uma classe name aqui de New post primeiro tem o H2 inserir um novo post e aqui dentro Eu vou ter um formulário Esse é um lado não precisa de action dentro dele eu vou ter dois inputs tá a gente vai ter aqui uma dívida conforme control dentro dela uma Label HTML for seria o HTML né Para qual inputs aqui tá referindo o Titan que seria o título do post tá eu vou colocar um input a gente vai preencher o título nem igual taito o tal please Digite o título e aqui vou colocar também um ID de Tyler alguma coisa assim então esse padrão também vai se repetir no bar é o corpo do post eu vou ter aqui em vez de Type aqui conteúdo tá E aqui em vez desse input eu vou ter um text área e Bari tá vou ter que também é um Place holder Digite o conteúdo Por fim eu tenho um input para fazer o envio do formulário um vela e de criar post e a classe na M de btn a gente reaproveitar a classe do botão tá essa é a estrutura inicial da página agora bora fazer o CSS também nessa aula para depois a gente poder trabalhar com axios eu vou criar aqui um arquivo New host aqui a gente vai até chamar aqui primeiro já né forte new post. s e nesse cara a gente vai acessar o H2 Vamos colocar em um teste lá de Center a margem embora um Rain para afastado formulário no formulário eu vou ter uma largura máxima de 500 pixels podemos centralizar com a margem tá E também vou colocar aqui que a largura Pode ser 100%.
