Desenvolvendo um Projeto com ReactJS do Zero ao Deploy — Part.6 (Criar componentes ReactJS)
E ai pessoal, como vocês estão?
Hoje vamos começar a dar mais corpo ao nosso projeto e, o tema de hoje será menos denso, mas irá gerar um grande valor para a aplicação.
Antes de codificarmos nossos componentes é importante que entenda o por que dessa prática.
O projeto completo esta no github.
Vamos lá?
Nossa aplicação vai evoluir criando componentes para serem utilizados nas páginas e, enviar e receber propriedades e/ou funções. Esse conceito no ReactJS, chama-se Higher-Order Component (HOC), ou seja, é uma prática no desenvolvimento de aplicações com ReactJS para reutilizar a lógica de um componente.
Durante a evolução de aplicação, partes ou elementos específicos do nosso projeto podem ser utilizados em mais de uma página ou bloco e, quando falamos disso, podemos estar falando de funções ou elementos html.
Já peguei meu café, abri meu VSCode e aí, bora codar?
Continuando na nossa página “Sobre”, vamos bloco a bloco do nosso “html” para modulá-los em componentes para nossa aplicação.
Analisando nosso html, podemos verificar que possuímos uma “div” englobando toda a aplicação, determinando um estilo referente a essa página, ou seja, podemos ter um “template” aqui.
Vá para a pasta de “src/components” e crie uma nova pasta chama templates.
Como nossa aplicação terá uma estrutura de página padrão entre elas, vou criar dentro da “src/components/templates” uma pasta “app” que será responsável por conter a estrutura do nosso template da aplicação e o arquivo “index.js” com um componente ReactJS do tipo classe
Vamos evoluir esse arquivo!
Primeiro, vamos definir que ele será a casca de todas as outras páginas, então vamos importar no estilo “App.css” que será o estilo global desse template para todas as páginas.
Agora, veja que no html da página “about.js” existe um primeira tag de html “<div>”, vamos retira ela dessa página e colocar no render desse componente que estamos criando. Entre a tag de abertura e tag de fechamento do html, precisamos definir que ela irá receber um “props” do tipo “children”, assim poderemos importar esse template dentro da nossa página e entre a Tag do template colocar novos elementos html e componentes.
Volte ao nosso arquivo “About.js” e importe esse componente. Coloque a “Tag” dele no render.
Isso aí! Temos nosso primeiro componente criado. Simples né?
Vamos evoluir ainda mais?
Que tal criamos o componente do tipo “header” e realizar os mesmos processos do AppTemplate.
Crie uma pasta dentro de components com nomenclatura de “header” e, dentro dela um aquivo “index.js”.src/components/header/index.js
Novamente no arquivo About.js , vamos importar o header e adicionar sua Tag ao render.
Agora e, se eu criar um componente do meu botão, que tem a função de ‘onclick” dentro da nossa página “About,js”?
Na pasta components, crie uma pasta referente ao Button, o arquivo “index.js” e, dentro dele crie um componente ReactJS com sintaxe do html que estava lá na página “About.js”, (porém algumas diferenças). Aqui no parentese falta alguma palavra, por exemplo “porém note algumas diferenças)
Esse componente, para que seja dinâmico à outras partes da nossa aplicação deve receber propriedades para que cada página tenha seu comportamento único.
Assim as propriedades (type, handleChangeName e text) devem vir do componente superior (componente pai) que esta importando esse botão.
Pronto, já temos sexemplos de uma página que importa componentes que esperam ter outro componente dentro de sua “tag”, funções e “string”. (Muito componente)
Antes de sair criando os seus componentes, vá ao terminal e rode os comando “npm start” e veja sua aplicação rodando. Teste seu botão e principalmente, abra o depurador do navegador e inspecione o html.
Veja que, o browser interpreta o conteúdo do seu componente e não a Tag do seu componente.
Espero que tenha conseguido aplicar todos os passos e tenha gostado do conteúdo de hoje.
No próximo post, vamos enfim colocar nosso software em produção!
Se ficou com alguma dúvida, se não entendeu alguma parte, me mande que farei o possível para te ajudar.
Siga as nossas redes sociais (facebook e instagram)para ficar por dentro de tudo que estamos criando e acompanhar o nosso dia a dia.
Por hoje é só, nos vemos em breve!
Mas e aí, na sua máquina funciona?
