React - Versão 19.2

6 - Fragment

Nesta aula, vamos aprender sobre o Fragment no React. Fragments permitem que você agrupe múltiplos elementos dentro de um componente sem adicionar elementos extras ao HTML.

---

1. Por que usar Fragment?

No React, cada componente precisa retornar apenas um elemento pai. Às vezes queremos retornar dois ou mais elementos sem criar uma <div> extra. É aí que o Fragment é útil.

---

2. Sintaxe abreviada do Fragment

Exemplo de componente usando Fragment:

function MeuPrimeiroComponente() {
    return (
        <>
            <h1>Hello World!</h1>
            <p>Aprendendo a utilizar o Fragment</p>
        </>
    );
}

export default MeuPrimeiroComponente;

O que acontece:

• O React agrupa os elementos <h1> e <p> sem criar um elemento extra no HTML.
• O HTML gerado fica mais limpo.

---

3. Usando React.Fragment

Outra forma de escrever Fragment é usando React.Fragment:

import React from "react";

function MeuPrimeiroComponente() {
    return (
        <React.Fragment>
            <h1>Hello World!</h1>
            <p>Aprendendo a utilizar o Fragment</p>
        </React.Fragment>
    );
}

export default MeuPrimeiroComponente;

Essa forma é equivalente à sintaxe abreviada <></>, mas mais explícita.

---

4. Dicas importantes

• Use Fragment quando precisar retornar múltiplos elementos de um componente sem criar wrappers desnecessários.
• A sintaxe abreviada <></> é mais curta e prática para componentes simples.

---

Agora você já sabe como usar Fragment no React, tornando seus componentes mais organizados e o HTML mais limpo.

Acompanhe nossa aula no YouTube e veja este exemplo funcionando na prática: