FeaturedNOTICIAS

Cómo iniciar una biblioteca de componentes de React con Storybook y Create-React-App – CloudSavvy IT


Reaccionar logotipo sobre un fondo oscuro

React es uno de los marcos líderes para el desarrollo frontend con JavaScript. Es un enfoque naturalmente basado en componentes en el que crea su aplicación a partir de partes reutilizables de la funcionalidad independiente.

Un paso lógico es separar los componentes centrales de la interfaz de usuario del código de aplicación específico del escenario. La creación de una biblioteca de componentes ofrece bloques de construcción listos para usar que puede insertar en su próximo proyecto.

En este artículo, vamos a armar un conjunto simple de componentes React con Storybook, luego los empaquetaremos usando Babel. Storybook proporciona una manera conveniente de inspeccionar los componentes durante y después de su desarrollo. Es una interfaz para explorar su biblioteca, experimentar con los componentes incluidos y ver la documentación.

No profundizaremos en ninguna tecnología individual en este artículo; en cambio, esta es una guía paso a paso sobre cómo desarrollar, empaquetar y visualizar componentes usando la combinación de React, Storybook y Create-React-App.

¿Qué es el libro de cuentos?

Storybook es simplemente un conjunto de herramientas para desarrollar y renderizar componentes aislados, fuera del contexto en el que aparecen en su aplicación. Proporciona un mecanismo para crear componentes, documentar sus accesorios y proporcionar representaciones de ejemplos interactivos en una interfaz de usuario basada en la web Storybook es independiente del marco: puede usarlo con Angular, Vue, Ember, Svelte y otros además de React.

Los componentes se crean escribiendo su código React normal y luego agregando un segundo archivo complementario que describe las «historias» de ese componente. Su componente real no cambia; Storybook obtiene toda la información que necesita del acompañamiento .stories.jsexpediente. Storybook descubre estos archivos automáticamente y utiliza su contenido para crear entradas en la interfaz de usuario web de su biblioteca.

Veremos el modelo en acción más adelante cuando lleguemos a escribir los componentes. Primero debe crear un nuevo proyecto React y agregarle Storybook.

Inicialización del proyecto React

Usaremos el popular kit de herramientas create-react-app (CRA) para inicializar el proyecto. Esto le brinda todo lo que necesita para construir componentes de React. También es totalmente compatible con Storybook.

Abra su terminal y escriba este comando para crear su biblioteca:

npx create-react-app my-components

prensa y para confirmar la instalación de create-react-app si nunca ha utilizado la herramienta antes. El proceso de instalación puede tardar un par de minutos. Una vez hecho esto, vaya a su nuevo my-components directorio. CRA habrá agregado las dependencias de React a las suyas package.json y creó una aplicación React básica en el public Y src directorio.

CRA asume que está desarrollando una base de código que se entregará directamente al navegador. Dado que en realidad estamos creando una biblioteca que no se ejecutará como una aplicación independiente, puede eliminar de forma segura la biblioteca predeterminada public Y src directorio si lo desea.

Adición del libro de cuentos

Es sencillo agregar Storybooks a un proyecto CRA existente. Ejecutar este comando le dará todo lo que necesita:

npx sb init

Prepárese para esperar un par de minutos más mientras se agregan los paquetes de libros de cuentos a su proyecto. El instalador creará nuevos .storybook Y stories directorio. Este último contiene una serie de componentes de muestra. Elimine este directorio ahora ya que no lo usaremos.

Los archivos dentro .storybook configurar su servidor Storybook. main.js contiene configuraciones globales como patrones de nombres de archivo en los que buscar historias. preview.js controla cómo se muestran las historias en la interfaz de usuario web de Storybook. Las referencias para ambos archivos están disponibles en los documentos de Storybook; por ahora, solo se requiere un cambio.

De forma predeterminada, Storybook busca historias en la tuya stories directorio. Esto no tiene mucho sentido para un proyecto que es puramente una biblioteca de componentes. Pondremos nuestros componentes con sus historias directamente en el src directorio, usando el formato src/ComponentName.js Y src/ComponentName.stories.js. Cambiar el stories campo en el tuyo .storybook/main.js archivo para consultar src directorio en lugar de stories:

module.exports = {
    "stories": [
        "../src/**/*[email protected](js|jsx|ts|tsx)"
    ],
    // ...
}

Este fragmento significa que Storybook descubrirá las historias en los archivos dentro del src directorios que tienen un .stories.js sufijo; .jsx (Reaccionar JSX), .tsY .tsx También se admiten variantes (TypeScript). Si no desea utilizar esta estructura de archivos, tómese un tiempo ahora para adaptar las plantillas de correspondencia de Storybook a su gusto.

Escribe tus componentes

Ahora está listo para escribir su primer componente. Cree sus componentes de forma familiar, utilizando el enfoque que prefiera. Aquí hay un botón simple que queremos usar en todos nuestros proyectos frontend:

import PropTypes from "prop-types";
 
const styles = {
    background: "#fff",
    border: "0.2rem solid #0099ff",
    color: "#0099ff",
    letterSpacing: "0.1em",
    fontWeight: "bold",
    padding: "1em",
    textTransform: "uppercase"
};
 
const Button = ({disabled, label, onClick}) => (
    <button disabled={(disabled ? "true" : "")} onClick={onClick} style={styles}>
        {label}
    </button>
);
 
Button.propTypes = {
    disabled: PropTypes.bool,
    label: PropTypes.label,
    onClick: PropTypes.func
};
 
Button.defaultProps = {
    disabled: false
};
 
export default Button;

Luego cree el archivo de historial del componente. De esta manera, Storybook encontrará el componente y comprenderá su configuración.

import Button from "./Button.js";
 
export default {
    title: "Button",
    component: Button,
    args: {
        label: "Demo Button"
    }
};
 
const Template = args => <Button {...args} />;
 
const Standard = Template.bind({});
 
const Disabled = Template.bind({});
Disabled.args = {disabled: true, label: "Disabled Button"};
 
export {Standard, Disabled};

El módulo default export proporciona metadatos a Storybook. Debe ser un objeto que incluya title Y component propiedad. los title se utiliza para etiquetar su componente en la interfaz de usuario de Storybook; component es la función o clase del componente que está exponiendo.

Libros de historia args son equivalentes a los de React props. los args la propiedad de exportación predeterminada establece efectivamente los valores de apoyo predeterminados para aplicar a las instancias de componentes representadas por Storybook. Aquí los botones están etiquetados con Demo Button si la hélice no se cambia más tarde.

Las exportaciones con nombre de su módulo definen las instancias de componentes reales que se presentarán en su libro de cuentos. Se requiere al menos uno. Aquí se crean dos, el Standard botón en su estado predeterminado ea Disabled botón que establece la disabled apoyar un true.

Ahora inicie Storybook Development Server:

npm run storybook

para iniciar el servidor de desarrollo de Storybook

Visita localhost:6006 en el navegador para ver la biblioteca de componentes. deberías ver el tuyo Button en la barra lateral con sus dos variantes de historia con nombre. Al hacer clic en una de las historias, se mostrará el estado de representación del componente.

La pestaña «Controles» debajo del área de renderizado le permite cambiar dinámicamente los valores de los objetos dentro de la interfaz de usuario de Storybook. Esto hace que sea rápido y fácil experimentar con diferentes combinaciones de accesorios al descubrir componentes hechos por otros. Storybook puede encontrar controles de varias formas; en este caso, vienen de propTypes asignado a Button componente.

Storybook gestiona automáticamente las «acciones» de componentes como nuestros botones onClick apuntalar. En una aplicación real, debe proporcionar una función a este objeto que se llamará cuando se haga clic en el botón. Dentro de Storybook, al hacer clic en el botón se registra un evento en la pestaña «Acciones» debajo del lienzo. Esto incluye el nombre de la propiedad llamada y los parámetros que se habrían pasado a su devolución de llamada.

Construyendo con Babel

Ahora escribimos un componente React simple, creamos una historia para él y usamos Storybook para controlar los renderizados del componente según lo previsto. El siguiente paso es crear la biblioteca de componentes y empaquetarla con npm, lista para incluirla en la siguiente aplicación.

Desafortunadamente, simplemente no puedes npm publish sus archivos JavaScript sin procesar. La aplicación Create React no llevará JSX dentro de los paquetes de su aplicación node_modules carpeta, por lo que obtendrá un error de compilación cuando intente ejecutar un proyecto con sus componentes. Debe transponer la biblioteca de componentes antes de publicar con una herramienta como Babel.

Comience agregando un src/index.js archivo que exportará la API pública de su módulo:

import Button from "./Button.js";
export {Button};

Esto permitirá a los usuarios de su paquete acceder al archivo. Button formulario escribiendo:

import {Button} from "@example/example-components";

Le da la libertad de cambiar las rutas de los archivos en el futuro sin afectar a los usuarios de su biblioteca. La API pública de su paquete ahora está definida por las exportaciones de index.js.

Luego agregue Babel a su proyecto con el siguiente comando:

npm install --save-dev 
    @babel/cli 
    @babel/plugin-transform-react-jsx 
    @babel/preset-env 
    @babel/preset-react

Crear un .babelrc archivo en la raíz de su proyecto con este contenido:

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
            "@babel/plugin-transform-react-jsx",
            {
                "runtime": "automatic"
            }
        ]
    ]
}

Esta configuración de Babel activa el soporte para React con la nueva transformación JSX. Significa que no es necesario import React from "react"; en la parte superior de cada archivo que usa JSX.

Finalmente, agregue las siguientes líneas a scripts sección tuya package.json expediente:

"scripts": {
    "prepare": "npm run dist",
    "dist": "rm -rf dist/* && babel src/ --out-dir dist --copy-files --no-copy-ignored --ignore src/**/*.stories.js"
}

los prepare npm ejecuta automáticamente el script antes de que el paquete se publique en un registro. Se utiliza aquí para compilar componentes cada vez que se envía una nueva versión.

Ahora puedes correr npm run dist para crear una compilación lista para distribución de su biblioteca. Los archivos de salida se depositarán en dist directorio. Es una buena idea agregar esto a la tuya. .gitignore expediente.

Todavía hay dos cambios por hacer. Se debe indicar al primer npm que publique solo los archivos compilados en el suyo dist directorio. Esto se controla a través de la files campo en el tuyo package.json. El segundo cambio es hacer referencia a la versión compilada de la suya. index.js como el punto de entrada del paquete usando main campo:

{
    "files": [
        "dist"      
    ],
    "main": "dist/index.js"
}

¡Ya terminaste! Ahora usted puede npm publish tu paquete e npm install en una de sus aplicaciones. El paquete descargado contendrá solo el código compilado, despojado de JSX y listo para usar en su proyecto. Pruébelo con un ejemplo mínimo en una nueva aplicación CRA:

import {Button} from "@example/example-components";
 
export default () => <Button />;

Su componente debe tener el mismo aspecto que su representación de Storybook. Cualquier discrepancia se deberá a la presencia de estilos globales que se filtran del CSS de la aplicación.

Conclusión

Se necesita algo de trabajo por adelantado para armar una biblioteca de componentes React. Debe escribir los componentes usted mismo, encontrar una manera de inspeccionarlos durante el desarrollo y luego brindar a los usuarios un mecanismo para descubrir, probar y aprender sobre los componentes disponibles. Cuando llegue el momento de publicar su paquete, debe configurar la transpiración y configurar npm para servir sus archivos compilados.

Storybook resuelve el primero de estos desafíos al proporcionar una interfaz dedicada para renderizar y experimentar con componentes. Es fácil de integrar con la aplicación Create React, no requiere cambios en los componentes reales y se superpone a la perfección con los conceptos de React.

Puede solucionar problemas de distribución utilizando Babel para producir compilaciones transpiladas de sus componentes antes de publicarlos. npm main Y files Los campos son útiles para controlar lo que se comprime y brindan a los usuarios una API pública conveniente. Una vez que haya terminado de configurarlo, puede publicar su paquete en el registro de npm o en su servidor privado y luego importar sus componentes predeterminados donde los necesite.

TE INTERESA>>  Disney superó a Netflix en cantidad de suscriptores totales por primera vez

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Botón volver arriba