Ogni component di React deve avere un solo nodo padre. Spesso questo nodo è un tag div o span o table o altro ancora. Esistono tuttavia dei casi in cui questo component non può essere un tag HTML. Analizziamo il prossimo esempio.

class MyTable extends React.Component {
  render() {
    return (
      <table>
        <tr>
          <MyColumns />
        </tr>
      </table>
    );
  }
}

Il component Columns renderizza una serie di colonne all'interno della riga. Se questo component utilizzasse un qualunque tag HTML come nodo principale (un div ad esempio), all'interno del tag tr avremmo un div che al suo interno avrebbe i tag td. Un tale codice HTML non è valido, ma JSX mette a disposizione una funzionalità che permette di avere un nodo padre che non viene poi renderizzato in HTML: fragment.

class MyColumns extends React.Component {
  render() {
    return (
      <>
        <td>Column1</td>
        <td>Column2</td>
        <td>Column3</td>
      </>
    );
  }
}

Nel momento in cui React andrà a renderizzare il component, il tag aperto/chiuso verrà eliminato e quindi il codice generato sarà valido.