Exportar componentes de React

1. Tipos de declaraciones de exportación para reutilizar componentes en React
2. Usar exportación con nombre para exportar componentes en React
3. Use la exportación predeterminada para exportar componentes en React

A los desarrolladores les encanta el marco React porque les permite crear componentes reutilizables y usarlos cuando sea necesario. En la compilación de desarrollo, los componentes se dividen en muchos archivos diferentes, por lo que es útil conocer las convenciones para importarlos y exportarlos.

Este artículo analizará diferentes formas de exportar componentes en React.

Tipos de declaraciones de exportación para reutilizar componentes en React

Las declaraciones de exportación e importación permiten a los desarrolladores de React dividir componentes en varios archivos. Si es necesario, los desarrolladores también pueden poner varios componentes conectados lógicamente en un solo archivo.

El tipo de declaraciones de exportación puede influir en la disponibilidad de los componentes en archivos externos. La declaración de exportación hace que los enlaces en vivo de un archivo específico estén disponibles en cualquier otro lugar. Otros archivos pueden cargar los valores en estos enlaces en vivo usando la instrucción import.

Al importar un enlace, debe recordar que su valor de origen puede cambiar en cualquier momento. Si se cambia el valor en el archivo fuente que exporta un módulo, se actualizará en todos los lugares importados. La instrucción export funciona automáticamente según las reglas del modo estricto de forma predeterminada.

Generalmente podemos diferenciar dos tipos de exportaciones: named y default. Las exportaciones con nombre se pueden utilizar para exportar tantos enlaces como desee, o ninguno en absoluto. Las exportaciones predeterminadas son más restrictivas, ya que solo puede haber un tipo de exportación por archivo.

Hay diferencias de sintaxis entre los dos tipos de exportaciones. Los discutiremos en detalle en las secciones a continuación. El tipo de exportaciones también influye en la sintaxis que debe usar al importarlo.

Usar exportación con nombre para exportar componentes en React

Webpack y ES6 han simplificado el proceso de importación y exportación de archivos. Aún así, es necesario aclarar cierta confusión sobre las exportaciones nombradas.

Si un archivo tiene varios componentes, puede usar exportaciones con nombre. Probablemente sea mejor usar exportaciones con nombre para exportar más de un componente (u otros enlaces) por archivo.

Además, podría decirse que la sintaxis para las exportaciones e importaciones con nombre es más sencilla. Al importar un enlace que se exportó de esta manera, debe usar el mismo nombre que el archivo de origen.

Veamos un ejemplo:

export function Greet() {
  return (
    <div className="App">
      <h1>Hello</h1>
    </div>
  );
}
export function Talk() {
  return (
    <div className="App">
      <h1>How are you?</h1>
    </div>
  );
}

Podríamos importar estos componentes en otro archivo usando la siguiente sintaxis:

import {Talk, Greet} from "./components/source.jsx"

Este ejemplo especifica la ruta al archivo de origen entre las cadenas. También usamos los mismos nombres de enlace en el archivo fuente y los ponemos entre llaves.

Si no utiliza la sintaxis de llaves, el documento interpretará que está intentando importar un enlace compartido con la exportación predeterminada. No puede usar la sintaxis para importar una exportación predeterminada para importar una exportación con nombre; obtendrá un error.

Si cree que los nombres de los enlaces no están claros, puede cambiarlos antes de exportarlos. En el ejemplo anterior, podríamos hacer:

export {Greet as Greeting}

Use la exportación predeterminada para exportar componentes en React

La mayoría de las aplicaciones de React siguen el patrón de crear un archivo separado para cada componente. Esta convención hace que las exportaciones predeterminadas sean útiles para exportar los componentes.

Los componentes exportados de esta manera son mucho más fáciles de importar. Dado que son las únicas exportaciones del archivo, puede nombrarlas como desee siempre que obtenga la ruta del archivo correcta.

JavaScript entenderá qué archivo está buscando. Y no tienes que usar llaves. Echemos un vistazo al ejemplo:

export default function App() {
  return (
    <div className="App">
      <h2>Hello world!</h2>
    </div>
  );
}

Los ejemplos de ambos tipos de exportaciones están disponibles aquí.

Si quisiéramos importar el componente App, solo tenemos que hacer esto:

import Application from "./components/App.jsx"

No tenemos que usar llaves, ni tenemos que usar el mismo nombre de enlace del archivo fuente. Tenemos la libertad de improvisar. De esta forma, el valor será renombrado, y dentro de este archivo, podemos referirnos a él como Application en lugar de App.

En el ejemplo anterior, definimos el componente de la función justo después de la sentencia export default. También podríamos definirlo por separado y hacer referencia a él en la sentencia.

Por ejemplo:

function App() {
  return (
    <div className="App">
      <h2>Hello world!</h2>
    </div>
  );
}
export default App

Para algunas personas, este es un enfoque más legible. El único inconveniente práctico de las exportaciones predeterminadas es que solo se pueden aplicar a un componente por archivo.