Función de exportación en React

A veces necesitamos crear una biblioteca que contenga las variables y funciones necesarias. La pregunta es cómo podemos obtener las variables y funciones dentro de una biblioteca y usarlas en otro script.

La respuesta es el uso de la palabra clave exportar. Ahora la palabra clave exportar aquí especificará los elementos compartibles de una biblioteca.

Este breve artículo mostrará cómo podemos exportar funciones en React JS. Además, veremos ejemplos y explicaciones necesarias para facilitar el tema.

Usa la función exportar en React

Creamos un archivo JS separado en el siguiente ejemplo, y dentro del archivo hay una función llamada showmessage(). Declaramos la función showmessage() como una exportación predeterminada.

Código - Exportar.js:

function showmessage() {
  console.log('This is an exported function !!!');
}
export default showmessage;  // Exporting the function

Eche un vistazo a nuestro archivo JS principal, donde exportamos la función showmessage() para nuestro archivo JS externo. Este código para nuestro archivo JS principal se verá como el siguiente.

Código - App.js:

import './App.css';

import showmessage from './Export';

function App() {
  const handleClick = (e) => {
    e.preventDefault();
    showmessage();
  }

  return (
    <a href='#' onClick={handleClick}>
      Click me
    </a>
  );
}
export default App;

En el código anterior, primero importamos los archivos necesarios y, dentro de la función principal, creamos un handleClick. Dentro de handleClick, acabamos de pasar la función showmessage(), que importamos de nuestro archivo JS externo.

Cuando ejecute el código anterior, obtendrá el siguiente resultado en su consola web.

This is an exported function !!!

Los códigos de ejemplo compartidos en este artículo están escritos en el proyecto React JS. Su sistema debe contener la última versión de Node JS para ejecutar un proyecto React.