ReactJS | Importación y Exportación

Hemos aprendido hasta ahora que las aplicaciones React son básicamente una colección de componentes interactivos y, a partir del artículo, sobre los componentes ReactJS hemos sabido cómo crear componentes, pero incluso con ese conocimiento, no será suficiente para crear una aplicación React completa. ya que para crear una colección de componentes, primero debemos saber cómo usar y reutilizar los componentes que pueden haberse definido en otro lugar. Para ello necesitamos conocer dos operaciones ampliamente conocidas como Importación y Exportación.
Puede que no lo hayamos dicho antes, pero hemos estado usando la operación de importación en cada uno de nuestros artículos anteriores cuando estábamos importando react y react-dom en sí. Del mismo modo, también podemos importar clases definidas por el usuario, componentes o incluso una parte de los mismos. Cambiemos nuestra discusión sobre la importación.
 

Importador

El mundo de Javascript siempre está en movimiento y uno de los últimos ES2015 ahora proporciona un patrón de importación/exportación de módulos más avanzado. En motores anteriores, el desarrollador tenía que usar module.exports = { // Defina sus exportaciones aquí. } , pero ahora con ES2015 cada módulo puede tener una exportación predeterminada o puede exportar varios parámetros con nombre, y si es posible exportar, seguramente será posible importar lo mismo. Por lo tanto, con ES2015 cada módulo puede importar la exportación predeterminada o varios parámetros con nombre o incluso una combinación válida. 
React usa las mismas características que se mencionaron anteriormente, y puede tratar cada componente de React como un módulo en sí mismo. Por lo tanto, es posible importar/exportar componentes de React y es una de las operaciones básicas a realizar. En React usamos la palabra clave importary desde para importar un módulo en particular o un parámetro con nombre. Veamos ahora las diferentes formas en que podemos usar la operación de importación en React.
 

• Importación de exportación predeterminada: se dice que cada módulo tiene como máximo una exportación predeterminada. Para importar la exportación predeterminada desde un archivo, podemos usar solo la dirección y usar la palabra clave import antes, o podemos darle un nombre a la importación haciendo la sintaxis de la siguiente manera. 
   

import GIVEN_NAME from ADDRESS

• Importación de valores con nombre: Cada módulo puede tener varios parámetros con nombre y para importar uno debemos usar la siguiente sintaxis. 
   

import { PARA_NAME } from ADDRESS

• Y de manera similar, para múltiples importaciones de este tipo, podemos usar una coma para separar los nombres de dos parámetros dentro de las llaves.
• Importación de una combinación de exportaciones predeterminadas y valores con nombre: el título deja claro que lo que debemos ver es la sintaxis de las mismas. Para importar una combinación, debemos usar la siguiente sintaxis. 
   

import GIVEN_NAME, { PARA_NAME, ... } from ADDRESS

Exportador

Ahora bien, importar es una operación que requiere el permiso del módulo. La importación solo es posible si el módulo o la propiedad nombrada que se va a importar se ha exportado en su declaración. En React usamos la palabra clave export para exportar un módulo en particular o un parámetro con nombre o una combinación. Veamos ahora las diferentes formas en que podemos usar la operación de importación en React.
 

• Exportación de exportación predeterminada: ya hemos aprendido que se dice que cada módulo tiene como máximo una exportación predeterminada. Para exportar la exportación predeterminada desde un archivo, debemos seguir la sintaxis que se describe a continuación. 
   

export default GIVEN_NAME

• Exportación de valores con nombre: Cada módulo puede tener varios parámetros con nombre y para exportar uno debemos usar la siguiente sintaxis. 
   

export { PARA_NAME }

• Y de manera similar, para múltiples exportaciones de este tipo, podemos usar una coma para separar los nombres de dos parámetros dentro de las llaves.

Veámoslo en el siguiente ejemplo donde usaríamos las operaciones de importación y exportación de varias maneras. Deje que haya dos archivos, uno index.js y el otro change-color.js . Veamos cómo implementar las operaciones de importación y exportación. 

Este es el archivo  index.js :
 

// Importing combination
import React, {Component} from 'react';
// Importing Module
import ReactDOM from 'react-dom';
import ChangeColor from './change-color.js';
// Importing CSS
import './index.css';
 
class App extends Component {
    render()
    {
        return (<div><h2>Welcome to</h2>
        <ChangeColor title="GeeksforGeeks" /></div>);
    }
}
 
ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

Este es el archivo change-color.js : 
 

// Importing combination
import React, {Component} from 'react';
 
class ChangeColor extends Component {
    constructor(props)
    {
        super(props);
        this.state = { color : '#4cb96b' };
    }
 
    getClick()
    {
        if (this.state.color === '#4cb96b')
            this.setState({ color : '#aaa' });
        else
            this.setState({ color : '#4cb96b' });
    }
 
    render()
    {
        return <h1 style = { this.state }
                   onClick = {this.getClick.bind(this)}>
               {this.props.title} < /h1>
  }
} 
 
// Exporting the component
export default ChangeColor;

Producción:

Los códigos anteriores generan la siguiente aplicación que al hacer clic en «GeeksforGeeks» cambia el color del texto. Se ilustra en la siguiente figura. 
Ahora aparentemente hemos completado todos los requisitos básicos para crear nuestra propia aplicación básica pero presentable. Estén atentos para crear uno para usted.