# Componentes
Componentes são blocos de códigos que serão reutilizados diversas vezes durante o desenvolvimento. Isso permite maior reutilização e clareza no código. Para criá-los devemos ir na pasta `src/components`
Lembre-se antes de criar a pasta components em src
Onde colocaremos nosso componente
A estrutura básica de um componente é a seguinte:
```jsx
import React from 'react'; // Importa o React
function Apresentacao() { // Define o componente Apresentacao
return
Bem vindos ao melhor site de todos
// Conteúdo do componente
}
// Exporta o componente para que possamos utilizá-lo em outros arquivos
export default Apresentacao;
```
Para utilizá-lo, fazemos o seguinte em App.tsx:
```jsx
import React from 'react';
import './App.css';
// Importa o componente que criamos de seu diretório
import Apresentacao from './components/Apresentacao/Apresentacao';
function App() {
return (
{/* Utilizando o componente no código */}
);
}
export default App;
```
Resultado:
Exemplo de como aparecerá no navegador
{% hint style="info" %}
Você pode usar esse mesmo componente inúmeras vezes, reutilizando assim o código.
{% endhint %}
