O que são componentes no React - Part II?

Introdução

Se você preferir a versão em vídeo:

No último post (clique aqui), começamos a entender o que são componentes em React.

Agora vamos criar nosso primeiro componentes, ou seja, bora codar!

Preparativos

Vamos utilizar o Vite + TypeScript (se é a primeira vez utilizando, não se preocupe, vai ser bem simples e vamos aprendendo aos poucos).

Acesse esse link, onde o Vite já disponibiliza um ambiente web para podermos começar de forma rápida.

Nosso primeiro componente

Vamos primeiro entrar no arquivo App.tsx e limpar ele, deixando somente o básico, dessa forma:

function App() {
  return (
    <div>
      Hello World
    </div>
  )
};
 
export default App;
 

Lembra que falamos no último post que um componente React é uma função que retorna um HTML? Perceba que temos uma função chamada App e retorna uma div escrito "Hello World".

Vamos agora criar nosso primeiro componente de fato. Dentro da pasta src, crie um novo arquivo chamado: MyComponent.tsx.

function MyComponent() {
  return (
    <p>My component</p>
  )
};
 
export default MyComponent;
 

Agora precisamos chamar esse componente em algum lugar.

Volte no arquivo App.tsx e importe o MyComponent

import MyComponent from './MyComponent'; // <- importação do MyComponent
 
function App() {
  return (
    <MyComponent /> // <- Componente
  );
}
 
export default App;
 

Agora, no browser, podemos ver "My component" que é o texto que temos dentro no nosso componente MyComponent certo? Massa né?!

Mas e se quisermos ter dois componentes sendo exibidos em tela? Por exemplo nosso "Hello World" e o "My component", como podemos fazer?

import MyComponent from './MyComponent';
 
function App() {
  return (
    <div>
      Hello World
 
      <MyComponent /> {/* <- Podemos colocar o MyComponent dentro da div (children) */}
    </div>
  );
}
 
export default App;
 

Mas se quisermos ter mais de um elemento HTML, como podemos fazer?

Daí, nesse caso precisamos sempre ter um único por volta, como um container.

// 🚫 Forma errada! Isso vai retornar erro, pois temos dois elementos dentro do return
return (
  // 1 elemento
  <div>
    Hello World
  </div>
 
  // 2 elemento
  <MyComponent />
);
 
// ✅ Forma correta! Apenas um elemento dentro do return
return (
  // 1 elemento
  <div>
   	<div>
    	Hello World
  	</div>
 
    <MyComponent />
  </div>
);
 
 

Fragment

Outra forma que podemos ter vários elementos sendo retornados de um componente, é utilizando Fragment do React.

return (
  <React.Fragment>
   	<div>
    	Hello World
  	</div>
 
    <MyComponent />
  </React.Fragment>
);
 
// OU simplesmente
 
return (
  <>
   	<div>
    	Hello World
  	</div>
 
    <MyComponent />
  </>
);

Componentes mais dinâmicos

Tá, mas como eu crio componentes que posso passar um texto e ele exibir em tela?

Boa pergunta! Para isso, precisamos entender o próximo conceito conceito importante no React: props.

O próximo post vai ser focado apenas em props, para entendermos bem e começarmos a criar componentes mais dinâmicos.

Conclusão

Nesse post, aprofundamos mais sobre componentes, como podemos criar nossos próprios e utilizarmos em nossos projetos.

Criamos nosso primeiro componente, aprendemos sobre o Fragment do React, que nos permite "envelopar" vários componentes dentro do return.

No próximo post, vamos aprender sobre props e enviar informações para nossos componentes e muito mais!

Até a próxima!