Crear una librería para React usando create-react-library

Tiempo de lectura: 3 minutos

Hoy vamos a aprender cómo podemos crear una librería con React.

Primero vamos a instalar las dependencias necesarias, vamos a desarrollarla en TypeScript:

npm install -g create-react-library

Lo primero que tenemos que hacer es crear un nuevo poyecto para nuestra librería.

npx create-react-library my-design-system --template typescript

Rellenamos todo lo que nos va indicando, en licencia puedes indicar la que quieras, aquí te indico algunas:

MIT License

• Descripción: Es una de las licencias más simples y permisivas. Permite a otros usar, copiar, modificar y distribuir tu código, siempre que incluyan el aviso de copyright original.
• Ideal para: Proyectos que desean fomentar la colaboración y el uso sin restricciones.

2. Apache License 2.0

• Descripción: Similar a la licencia MIT, pero también incluye una cláusula sobre patentes que protege a los contribuidores de demandas por patentes.
• Ideal para: Proyectos que pueden involucrar tecnología patentada y que desean proteger a los contribuidores.

3. GPL (General Public License)

• Descripción: Es una licencia copyleft que exige que cualquier software derivado también esté bajo la GPL. Esto significa que si alguien modifica tu código y lo distribuye, debe hacerlo bajo la misma licencia.
• Ideal para: Proyectos que desean asegurar que su código permanezca abierto y libre.

4. BSD License

• Descripción: Similar a la licencia MIT, pero puede tener variantes (como la licencia BSD de 2 cláusulas o 3 cláusulas). Es permisiva y permite la reutilización del código con pocas restricciones.
• Ideal para: Proyectos que desean flexibilidad y simplicidad, con un enfoque en la compatibilidad.

5. Creative Commons

• Descripción: Aunque comúnmente se usa para contenido no software (como arte y literatura), puedes usar una licencia Creative Commons si deseas compartir tu código con ciertas restricciones (como el uso no comercial o la atribución).
• Ideal para: Proyectos que desean especificar condiciones específicas sobre el uso del contenido.

Cómo Elegir una Licencia

• Objetivo: ¿Deseas que tu código sea utilizado y modificado sin restricciones, o prefieres que permanezca abierto?
• Comunidad: ¿Qué licencia es comúnmente utilizada en tu campo o por proyectos similares?
• Compatibilidad: Si tu librería interactúa con otros proyectos, considera la compatibilidad de la licencia.

Para un enfoque simple y permisivo, considera usar la MIT License. Si te preocupa la protección de patentes, la Apache License 2.0 es una buena opción. Si quieres asegurarte de que todas las versiones derivadas de tu código permanezcan abiertas, opta por la GPL.

En este caso he elegido el nombre my-design-system, pero podemos elegir el que queramos.

Se nos creará esta estructura. Ahora os recomiendo organizarla de esta forma:

src
 - components
 - constants
 - context
 - css
 - network
 - objects
 - test
 - utils

Esto es una buena estructura qué podemos seguir en nuestra librería, dónde incluyo todas las posibles carpetas necesarias.

index.tsx debemos dejarlo en la raíz.

En este ejemplo vamos a crear un pequeño boton dentro de components:

// src/components/Button.tsx
import React from 'react';

interface ButtonProps {
  label: string;
  onClick?: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

export default Button;

Ahora debemos exportar el botón dentro de index.tsx

Para ello vamos a sustituir todo el contenido de index.tsx por:

import Button from './elements/Button';

export { Button };

Y para probarlo ejecutaremos:

npm start

Ahora simplemente si ya tenemos nuestro botón probado y listo, vamos a compilar la librería.

npm run build

Ahora si no da errores, ya tenemos la librería lista en la carpeta /dist.

Si queremos crear un enlace para importarla de forma local en otro proyecto haremos lo siguiente:

• Vamos a la carpeta raíz de la librería creada y en el mismo directorío dónde está package.json ejecutamos:

npm link

Y ahora para usarlo en nuestro proyecto local, pondremos:

npm link my-design-system

Y podremos utilizarla de la siguiente forma:

import { Button } from 'my-design-system';

const App = () => {
  return (
    <div>
      <Button label="Click Me" onClick={() => alert('Clicked!')} />
    </div>
  );
};

export default App;

Para subir una versión al paquete:

npm version patch