> For the complete documentation index, see [llms.txt](https://uclsanca.gitbook.io/learn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uclsanca.gitbook.io/learn/web-avancado/reactjs/componentes.md).

# 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

<figure><img src="/files/0mkMWnZiLwOvFG53XCtT" alt=""><figcaption><p>Onde colocaremos nosso componente</p></figcaption></figure>

A estrutura básica de um componente é a seguinte:

```jsx
import React from 'react'; // Importa o React  
function Apresentacao() { // Define o componente Apresentacao  
    return <h1>Bem vindos ao melhor site de todos</h1> // 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 (  
        <div className="App">  
            <Apresentacao /> {/* Utilizando o componente no código */}  
        </div>  
    );  
}  

export default App;
```

Resultado:

<figure><img src="/files/e075eymzPjHzd08kDq1e" alt=""><figcaption><p>Exemplo de como aparecerá no navegador</p></figcaption></figure>

{% hint style="info" %}
Você pode usar esse mesmo componente inúmeras vezes, reutilizando assim o código.
{% endhint %}