O que são componentes em React?

Olá, seja muito bem vindo(a), recentemente aprendemos a iniciar um projeto React usando o Next.Js: https://programacao-descomplicada.blogspot.com/2022/11/iniciando-um-projeto-react-usando-nextjs.html, após isso decidi refazer o projeto do e-commerce usando o Next e o React, atualmente eu configurei o projeto e subi para o github, mas ainda não refiz a tela inicial. 

  Para refazer essa tela eu pegaria o código HTML e CSS que criei anteriormente e quebraria eles para criar os componentes da nossa tela. Nós temos a tela inteira, mas imagine que ela pode ser dividida em várias partes que podem ser independentes, como o cabeçalho e o rodapé, por exemplo.

  O componente trata cada parte da aplicação como um bloco isolado, livre de outras dependências externas. Eles são como funções do JavaScript que recebem entradas e retornam o que deve aparecer na tela.

  Na página inicial do e-commerce, por exemplo, podemos pegar o cabeçalho e rodapé e separar ambos em componentes diferentes, porque isso seria interessante? Lembra que eles dois estão em outras páginas do projeto? Podemos reutilizar eles sem precisar duplicar código. 

  Mas vamos ao modo prático, primeiro eu vou abrir o meu projeto React e o meu projeto simples do e-commerce para construir o componente de cabeçalho. No projeto em React eu criei uma pasta chamada src e dentro dela coloquei outra pasta chamada components para guardar os componentes do projeto.

  Após isso, dentro da pasta components eu criei uma pasta chamada Header e dentro coloquei um arquivo index.js. Dentro desse arquivo vamos criar uma função que deve ser exportada, essa função vai se chamar Header() e dentro dela tem um return() no qual vamos colocar o código HTML do cabeçalho nele. 

export function Header() {

 return (

<>

 <header className="c-header">

  <div className="c-header__logo">

   <iconify-icon className="c-header__icon" icon="akar-icons:game-controller"></iconify-icon>

   <a href="./index.html">

    <h1 className="c-header__title">Player<span>One</span></h1>

   </a>

  </div>

  <div>

   <a href="./pages/login.html" className="c-header__button-login">Login</a>

  </div>

 </header>

</>

 )

}

  Após isso, voltamos para nossa página inicial que contém o Hello World e vamos importar nosso cabeçalho nela, para isso vamos importar a função Header que está dentro do arquivo na pasta Header.

import { Header } from "../src/components/Header"

  Por fim, dentro do return() da função Home() nós iremos chamar o cabeçalho como uma tag e abrir nosso navegador para ver o resultado. Chamamos nossa função de Header, mas ela poderia receber qualquer nome, mas vamos usar boas práticas de escrita.

export default function Home() {

 return (

<>

 <Header />

</>

 )

}

  Bom, nosso cabeçalho está lá, mas não vejo o ícone e nem peguei o código CSS ainda, mas isso fica para um próximo artigo, um abraço e até a próxima. 

Artigo Original: https://programacao-descomplicada.blogspot.com/2022/11/o-que-sao-componentes-em-react.html