Cómo Crear tu Propia Biblioteca en React (Paso a Paso)

Si eres nuevo en React y has estado desarrollando proyectos, probablemente te has dado cuenta de que muchos componentes y funciones se repiten en distintas aplicaciones. ¿No sería genial empaquetar esos componentes en una biblioteca que puedas reutilizar fácilmente? En este artículo, te enseñaré cómo crear tu propia biblioteca en React de manera sencilla, paso a paso.

Paso 1: Configurar el Entorno

Antes de comenzar, asegúrate de tener Node.js instalado en tu computadora. También necesitarás npm o yarn para gestionar paquetes.

1. Crea una carpeta para tu biblioteca:

mkdir mi-biblioteca-react
cd mi-biblioteca-react

2. Inicializa un proyecto de Node.js:

npm init -y

Esto creará un archivo package.json con la configuración de tu proyecto.

3. Instala React y TypeScript (opcional pero recomendado):

npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom

Paso 2: Crear un Componente Reutilizable

Ahora que el entorno está listo, creemos un componente de ejemplo dentro de nuestra biblioteca.

1. rea una carpeta src dentro de tu proyecto:

mkdir src

2. Dentro de src, crea un archivo Boton.tsx:

import React from "react";

type BotonProps = {
  texto: string;
  onClick: () => void;
};

const Boton: React.FC<BotonProps> = ({ texto, onClick }) => {
  return <button onClick={onClick}>{texto}</button>;
};

export default Boton;

Aquí hemos creado un botón simple que recibirá un texto y una función onClick.

Paso 3: Configurar la Exportación de la Biblioteca

Para que otros proyectos puedan importar nuestro componente, necesitamos configurar cómo se exportará.

1. Crea un archivo index.ts dentro de src:

export { default as Boton } from "./Boton";

Esto permitirá que otros desarrolladores importen el componente con:

import { Boton } from "mi-biblioteca-react";

Paso 4: Empaquetar la Biblioteca con tsup

Para convertir nuestro código en un paquete listo para publicar, usaremos tsup, una herramienta que facilita la transpilación de TypeScript.

1. Instala tsup:

npm install --save-dev tsup

2. Añade un script en package.json:

"scripts": {
  "build": "tsup src/index.ts --dts --format esm,cjs --out-dir dist"
}

3. Compila el código:

npm run build

Esto generará un directorio dist/ con los archivos listos para ser publicados.

Paso 5: Publicar en npm

Si quieres compartir tu biblioteca con el mundo, puedes publicarla en npm.

1. Inicia sesión en npm

npm login

2. Publica la biblioteca:

npm publish --access public

Ahora, cualquiera puede instalar tu biblioteca con:

npm install mi-biblioteca-react

Conclusión

Crear una biblioteca en React no es complicado y puede ahorrarte mucho tiempo en el futuro. Si sigues estos pasos, en poco tiempo tendrás tu propia librería lista para ser utilizada en múltiples proyectos. ¿Tienes dudas? ¡Déjalas en los comentarios y te ayudaré!