Exportación e importación

En una aplicación de React, tanto los componentes, como los estilos o cualquier otro tipo de archivo estático (imágenes, videos, etc.) se encuentran en el directorio src. Por lo tanto, para poder utilizarlos en nuestra aplicación, debemos importarlos en el archivo donde los queremos utilizar.

Exportación de componentes

Hasta el momento hemos visto como crear componentes y como utilizarlos en nuestra aplicación. Sin embargo, los componentes que hemos creados se encuentran en el mismo archivo, App.jsx. Esto no es muy práctico ya que, a medida que nuestra aplicación crezca, el archivo App.jsx se volverá muy grande y difícil de mantener.

Siguiendo esta línea, y dado que los componentes son elementos reutilizables podemos trabajar bajo las siguientes metodologías, de las cuales recomendamos la primera.

1. Idealmente, cada componente debe tener un archivo separado. Por ejemplo, el componente Task debería tener un archivo Task.jsx y el componente TaskList debería tener un archivo TaskList.jsx.

2. En su defecto, podemos agrupar varios componentes en un mismo archivo. Por ejemplo, podemos crear un archivo Tasks.jsx que contenga todos los componentes relacionados con las tareas de nuestra aplicación. En nuestro caso, Tasks.jsx podría contener los componentes Task y TaskList.

En cualquier caso, debemos exportar los componentes en el archivo donde los creamos y luego importarlos en el archivo donde lo queremos utilizar.

Para exportar un componente tenemos varias alternativas.

1. Exportar el componente en el momento de su creación. Para esto, debemos agregar la palabra reservada export antes de la declaración del componente. Por ejemplo, suponiendo que cada componente tiene su propio archivo, para nuestro componente Task podríamos crear un archivo Task.jsx y exportarlo de la siguiente manera:

export function Task({name, description}) {
  return (
        <div>
            <h2>{name}</h2>
            <p>{description}</p>
        </div>
    );
}

2. Exportar el componente luego de su creación. Para esto, debemos agregar la palabra reservada export antes de la declaración del componente. Por ejemplo, para nuestro componente Task podríamos crear un archivo Task.jsx y exportarlo de la siguiente manera:

function Task({name, description}) {
  return (
        <div>
            <h2>{name}</h2>
            <p>{description}</p>
        </div>
    );
}

export {Task};

De igual manera, deberíamos hacer esto para el componente TaskList.

Por otro lado, debemos tener en cuenta que en Javascript existen dos tipos de exportación.

• Exportación por defecto: se utiliza cuando queremos exportar un único elemento, el cual puede tener cualquier nombre. Para exportar por defecto un componente, debemos agregar la palabra reservada default antes de la declaración del componente. Por ejemplo, podríamos exportar nuestro componente Task por defecto.

export default function Task({name, description}) {
  ...   // Código del componente
}

• Exportación por nombre: se utiliza cuando queremos exportar varios elementos, los cuales deben tener un nombre específico. Para exportar por nombre un componente, debemos agregar la palabra reservada export antes de la declaración del componente. Por ejemplo, podríamos exportar nuestro componente Task por nombre.

export function Task({name, description}) {
  ...   // Código del componente
}

Importación de componentes

Una vez que hemos exportado nuestros componentes, podemos usarlos en otros archivos. En nuestro caso, como recomendamos que cada componente tenga su propio archivo, debemos importar los componentes Task en el archivo TaskList.jsx y el componente TaskList en el archivo App.jsx. Es decir, realizar una cadena de importaciones.

Sin embargo, antes de hacer esto, debemos tener en cuenta que dependiendo de la exportación que hayamos utilizado, la sintaxis de importación será diferente. La siguiente tabla muestra la sintaxis de importación para cada tipo de exportación.

Sintaxis	Sentencia export	Sentencia import
Por defecto	export default function Task() { ... }	import Task from './Task'
Por nombre	export function Task() { ... }	import { Task } from './Task'

Como vemos en la tabla, la sintaxis de importación difiere en la utilización de llaves ({}) y en la ausencia de un nombre específico para el componente.

En el caso de la exportación por defecto, no es necesario utilizar llaves y podemos asignarle cualquier nombre al componente al momento de importarlo. En el caso de la exportación por nombre, debemos utilizar llaves y el nombre del componente debe ser el mismo que el utilizado en la exportación.

Por último, debemos tener en cuenta que sólo podemos utilizar la exportación por defecto una vez por archivo, pero podemos utilizar la exportación por nombre tantas veces como queramos.

En general, la exportación por defecto se utiliza en mayor medida porque suele definirse un único componente por archivo. Sin embargo, en los casos en que agrupamos varios componentes en un mismo archivo, por la naturaleza de la aplicación, nos veremos en la necesidad de utilizar la exportación por nombre para poder exportar todos los componentes.

Con todas estas consideraciones en mente y suponiendo que los componentes Task y TaskList cuentan con sus propios archivos, resolveremos la cadena de importaciones de la siguiente manera.

// En el archivo Task.jsx

export default function Task({name, description}) {
  ...   // Código del componente
}

// En el archivo TaskList.jsx
import Task from './Task';

function TaskList({name, tasks}) {
  ...   // Código del componente
}

export default {TaskList};

// En el archivo App.jsx
import TaskList from './TaskList';

function App() {
  ...   // Código del componente
}

export default App;

Para aquellos casos en los que necesitemos importar varios componentes, debemos utilizar la sintaxis de importación por nombre.

import { Componente1, Componente2 } from './components/Componentes';

Importación de estilos

A diferencia de los archivos HTML, donde importabamos los estilos en el head del documento utilizando la etiqueta link, en React debemos importar los estilos en el archivo donde los queremos utilizar.

Antes de continuar, queremos establecer una práctica recomendada para la organización de los estilos en una aplicación de React.

En general, cada componente tiene su propio archivo de estilos y, por lo tanto, debemos importar los estilos de cada componente en el archivo donde lo utilizamos. Por ejemplo, si queremos que el componente Task tenga estilos propios, debemos crear un archivo Task.css y luego importarlo en el archivo Task.jsx.

Con esto mente, podemos suponer que existirá una gran cantidad de archivos de estilos en nuestra aplicación. Por lo tanto, para mantener un orden en nuestra aplicación, es recomendable crear un directorio styles dentro del directorio src y guardar todos los archivos de estilos en este directorio.

A su vez, recomandamos también crear una carpeta para contener todos los archivos jsx que definamos, la cual llamaremos components. De esta manera, la estructura de nuestro directorio src debería quedar de la siguiente manera.

• Directorysrc/

  • Directorystyles/ Archivos de estilos

    • App.jsx
    • Tasks.css
  • Directorycomponents/ Archivos de componentes

    • App.jsx
    • Tasks.jsx
  • index.css
  • main.jsx

Con excepción de los archivos main.jsx, e index.css, todos los archivos de nuestra aplicación deberían seguir esta estructura.

Por último, para importar los estilos de un componente, debemos utilizar la sentencia import seguida de la ruta del archivo de estilos.

Por ejemplo, si contamos con un archivo Task.css en el directorio styles, el cual tiene la siguiente estructura.

.task {
    display: flex;
    flex-direction: column;
    align-items: center;
}

Si queremos importar los estilos en el archivo Task.jsx, debemos agregar la siguiente sentencia al inicio del archivo.

import '../styles/Task.css';

De esta manera, los estilos del archivo Task.css se aplicarán a todos los elementos del componente Task.

Importación de archivos

En ocasiones, es posible que necesitemos importar un archivo de texto plano en nuestra aplicación (archivos .txt, .json, etc.) o algún archivo binario (imágenes, videos, etc.).

Al igual que con los estilos, recomendamos crear un directorio assets dentro del directorio src y guardar todos los archivos estáticos que no sean estilos en este directorio. Con esta modificación en la estructura de nuestra aplicación, el directorio src debería quedar de la siguiente manera.

• Directorysrc/

  • Directoryassets/ Archivos estáticos

    • tasks.json Datos de las tareas
    • logo.svg
  • Directorystyles/

    • App.jsx
    • Tasks.css
  • Directorycomponents/

    • App.jsx
    • Tasks.jsx
  • index.css
  • main.jsx

Si recordamos, al momento de crear un proyecto con Vite, se crea la carpeta assets dentro del directorio src y se agrega un archivo react.svg en esta carpeta. Este archivo es el logo de React y se utiliza en el archivo App.jsx para renderizar una imagen en la aplicación de ejemplo.

Por nuestra parte, podríamos querer importar un archivo .json que contenga información sobre las tareas de nuestra aplicación.

[
    {
        "name": "Aprender HTML",
        "description": "Aprender HTML es muy fácil"
    },
    {
        "name": "Aprender CSS",
        "description": "Aprender CSS puede ser un poco tedioso"
    },
    {
        "name": "Aprender JavaScript",
        "description": "Aprender JavaScript es muy divertido"
    },
    {
        "name": "Aprender React",
        "description": "Aprender React es muy interesante, pero puede ser un poco complicado"
    }
]

Para importar un archivo de texto plano, al igual que con los estilos, debemos utilizar la sentencia import seguida de la ruta del archivo. Por ejemplo, para importar un archivo tasks.json en el archivo App.jsx, debemos agregar la siguiente sentencia al inicio del archivo.

import '../assets/tasks.json';

De esta manera, podemos utilizar el archivo tasks.json en el archivo App.jsx para renderizar el componente TaskList con la información de las tareas.

import '../assets/tasks.json';

function App() {
    const tasks = JSON.parse(tasks);

    return (
        <div>
            <TaskList name="Lista de tareas" tasks={tasks} />
        </div>
    );
}

export default App;

Así, para cualquier archivo que necesitemos utilizar para que nuestros componentes funcionen adecuadamente, debemos importarlo en el archivo donde lo queremos utilizar.