¿Cómo modularizar el código en ReactJS?

El código modularizado se divide en segmentos o módulos, donde cada archivo es responsable de una característica o funcionalidad específica. El código de React se puede modularizar fácilmente mediante el uso de la estructura de componentes. El enfoque es definir cada componente en diferentes archivos. Con cada componente separado en diferentes archivos, todo lo que tenemos que hacer es descubrir cómo acceder al código definido en un archivo dentro de otro archivo. Para acceder a un archivo en otro archivo, React proporciona la funcionalidad para importar y exportar los archivos.

Importar y exportar: nos permite usar el código de un archivo en otras ubicaciones en nuestros proyectos, lo que se vuelve cada vez más importante a medida que desarrollamos aplicaciones más grandes. 

Exportar: exportar un componente o módulo de código nos permite llamar a esa exportación en otros archivos y usar el código incrustado dentro de otros módulos.

Hay dos formas de exportar código en reaccionar:

• Exportación predeterminada: podemos usar la sintaxis predeterminada de exportación.
• Exportaciones con nombre: podemos nombrar explícitamente nuestras exportaciones.

Exportación predeterminada: solo podemos usar la exportación predeterminada una vez por archivo. La sintaxis nos permite dar cualquier nombre cuando queremos importar el módulo dado. 

Sintaxis:

export default COMPONENT_NAME

Exportaciones con nombre: con las exportaciones con nombre, podemos exportar varias piezas de código desde un solo archivo, lo que nos permite llamarlas explícitamente cuando importamos. Y para múltiples exportaciones de este tipo, podemos usar una coma para separar los nombres de dos parámetros dentro de las llaves. 

Sintaxis:

export {CODE1, CODE2}

Importar: la palabra clave de importación nos permite llamar a los módulos que hemos exportado y usarlos en otros archivos a través de nuestras aplicaciones. Hay muchas formas de importar los módulos en React, y el método que usamos depende de cómo lo exportamos.

Importación de la exportación predeterminada: para importar la exportación predeterminada de un archivo, podemos usar solo la dirección y usar la palabra clave import antes, o podemos darle cualquier nombre a la importación. 

Sintaxis:

import ANY_NAME from ADDRESS

Importación de exportaciones con nombre: el código de exportación con nombre se puede importar dando el nombre de ese módulo entre llaves seguido de la dirección del archivo que contiene ese módulo. Para varios módulos, podemos usar una coma para separar los nombres de dos parámetros dentro de las llaves. 

Sintaxis:

import {Code1, Code2} from ADDRESS

Ejemplo: Veámoslo en el siguiente ejemplo donde usaríamos las operaciones de importación y exportación de varias maneras. Deje que haya tres archivos, index.js , DefaultExport.js y NamedExport.js . Veamos cómo implementar las operaciones de importación y exportación.  

Nombre de archivo: index.js 

import React from "react";
import ReactDOM from "react-dom";
  
// Importing CSS
import "./index.css";
  
// Importing default export
import File from "./DefaultExport";
  
// Importing named exports
import { NamedExport } from "./NamedExport";
ReactDOM.render(
  <React.StrictMode>
    <File />
    <NamedExport />
  </React.StrictMode>,
  document.getElementById("root")
);

Nombre de archivo: DefaultExport.js

import React from "react";
  
const DefaultExport = () => {
  return (
    <div>
      <h1>This is from default export</h1>
      <h2>Hello Coders</h2>
    </div>
  );
};
  
// Default export
export default DefaultExport;

Nombre de archivo: NamedExport.js

import React from "react";
  
const NamedExport = () => {
  return (
    <div>
      <h1>This is from named export</h1>
      <h2>Nice to see you</h2>
    </div>
  );
};
  
// Named Export
export { NamedExport };

Producción: