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:

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:

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:

Exemplo de como aparecerá no navegador

Você pode usar esse mesmo componente inúmeras vezes, reutilizando assim o código.