Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

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.

Library - Pexels

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm install -g create-react-library
npm install -g create-react-library
npm install -g create-react-library

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npx create-react-library my-design-system --template typescript
npx create-react-library my-design-system --template typescript
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.

Estructura de libreria React

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
src
- components
- constants
- context
- css
- network
- objects
- test
- utils
src - components - constants - context - css - network - objects - test - utils
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// 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;
// 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;
// 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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import Button from './elements/Button';
export { Button };
import Button from './elements/Button'; export { Button };
import Button from './elements/Button';

export { Button };

Y para probarlo ejecutaremos:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm start
npm start
npm start

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm run build
npm run build
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:
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm link
npm link
npm link

Y ahora para usarlo en nuestro proyecto local, pondremos:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm link my-design-system
npm link my-design-system
npm link my-design-system

Y podremos utilizarla de la siguiente forma:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import { Button } from 'my-design-system';
const App = () => {
return (
<div>
<Button label="Click Me" onClick={() => alert('Clicked!')} />
</div>
);
};
export default App;
import { Button } from 'my-design-system'; const App = () => { return ( <div> <Button label="Click Me" onClick={() => alert('Clicked!')} /> </div> ); }; export default App;
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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npm version patch
npm version patch
npm version patch

0

Deja un comentario