¿Cuál es el uso de Fragment en React?

En ReactJS, representamos el JSX del componente con la ayuda de una declaración de retorno, ya sea escrita dentro del componente funcional o dentro de la función de representación de los componentes de clase. Ahora, el punto es que en javascript, la declaración de devolución solo puede devolver una entidad, por lo que cuando tenemos que devolver los elementos múltiples de las declaraciones de devolución, generalmente creamos el Node adicional. Este Node adicional tiene algunas desventajas, por lo tanto, para evitarlas, usamos React Fragment. 

Requisitos previos: conocimiento de cómo iniciar y crear una aplicación de reacción, JSX en reacción y conocimiento básico de HTML DOM.

¿Cómo se renderiza un componente?

Después de crear la aplicación de reacción, haga los siguientes cambios en index.js y app.js aquí, solo vamos a trabajar con estos dos archivos. El archivo index.js es el punto de entrada principal y, dentro de él, App.js se procesa en la identificación raíz del DOM con la ayuda del método de procesamiento . Dentro de App.js solo existe una etiqueta h1.

import React from 'react';
import ReactDOM from 'react-dom';
  
import App from './App';
  
ReactDOM.render(<App />, 
    document.getElementById('root'));

import React from 'react';
  
function App() {
  return (
    <h1>Hello There</h1>
  );
}
  
export default App;

Producción:

¿Qué sucede si tenemos que devolver dos elementos diferentes al mismo nivel en DOM?

En este caso, tenemos que usar el contenedor, es decir, div; de lo contrario, React mostrará un error que dice » Los elementos JSX adyacentes deben estar envueltos en una etiqueta envolvente «.

import React from 'react';
  
function App() {
  return (<div>
    <h1>Hello, There</h1>
    <h2>This is the another element.</h2>
  </div>);
}
  
export default App;

Producción:

Fragmento de reacción

Nos permite devolver los múltiples elementos del componente, usando esto podemos agrupar la lista de elementos secundarios.

import React from 'react';
  
function App() {
  return (<React.Fragment>
    <h1>Hello, There</h1>
    <h2>This is the another element.</h2>
  </React.Fragment>);
}
  
export default App;

Producción:

Explicación: aunque la salida sigue siendo la misma, pero el punto clave completo es mientras se agrupa, no crea ningún Node adicional. Hay muchos escenarios en los que este div adicional puede llevarnos a un estado problemático, por eso siempre debemos preferir fragmentos para agrupar.

Nota: También podemos usar esta forma de azúcar sintáctica <> </> en lugar de <React.Fragment> <React.Fragment/>.