Una de las ventajas de usar React es que puede crear componentes de interfaz de usuario, reutilizarlos en toda su aplicación y, en última instancia, evitar la rotación de códigos. Aún así, es difícil crear componentes de interfaz de usuario completamente independientes solo con React. Deberá crear vistas que muestren estos componentes para verlos.
Aquí es donde entra el libro de cuentos. Le permite crear y probar componentes de interfaz de usuario en un entorno de tiempo de ejecución independiente y en este tutorial aprenderá a usarlo en React. Al final de esta publicación, habrá creado un componente de botón y documentado algunos de sus posibles estados en React.
¿Qué es un libro de cuentos?
libro de cuentos es una herramienta de desarrollo que le permite ejecutar y probar sus componentes de interfaz de usuario sin un entorno React completo. Esto hace desarrollo basado en componentes más fácil porque puede desarrollar los componentes de forma aislada.
Con Storybook, una vez que crea un componente, puede crear varias historias que definen los distintos estados del componente. Para un componente de botón, estos estados pueden incluir el estado principal, el estado secundario, el estado deshabilitado, etc.
Dado que Storybook le permite incluir código al crear las historias, también puede servir como una herramienta de documentación.
Para usar Storybook, deberá tener Node instalado en su máquina y tener una comprensión básica de React.
Creación de una aplicación de reacción
Para empezar a usar Storybook, primero creará un proyecto React y luego crear componentes y sus historias.
Ejecute el siguiente comando para crear una aplicación React:
npx crear-react-app btn-libro de cuentos
Esto generará una carpeta llamada btn-storybook con todas las dependencias que necesita una aplicación React.
A continuación, con solo unos pocos pasos más, puede instalar y ejecutar Storybook.
Instalación del libro de cuentos
Navegue a la carpeta btn-storybook e instale storybook:
discos compactos btn-libro de cuentos
inicio de libro de cuentos npx
Dado que usó create-react-app, este es el único comando que debe ejecutar para configurar Storybook. Storybook instalará todas las dependencias necesarias y realizará toda la configuración necesaria. También creará algunas historias repetitivas para que pueda comenzar.
Una vez que el comando anterior haya terminado de ejecutarse, inicie el libro de cuentos con el siguiente código.
npm ejecutar libro de cuentos
Esto abrirá el tablero del libro de cuentos en su navegador. Debería verse algo como esto:
Crear el componente de botón
En la carpeta ./src, cree una carpeta llamada Componentes y en ella cree otra carpeta llamada Botón. La carpeta Button debe estar en esta ruta: ./src/Components/Button.
Ahora, en esta carpeta, cree Button y agregue el siguiente código:
importar Tipos de propiedad de "tipos de accesorios"
Botón de función ({ etiqueta, color de fondo = "#6B4EFF", color = "blanco", radiodelborde="48px", borde="ninguna"}) {
constante estilo = {
color de fondo,
relleno: "0,5 rem 1 rem",
color,
bordeRadio,
borde
}
devolver (
<estilo de botón = {estilo}>
{etiqueta}
</button>
)
}
Botón.propTypes = {
etiqueta: Tipos de propiedad.cuerda,
color de fondo: Tipos de propiedad.cuerda,
color: Tipos de propiedad.cuerda,
borde:PropTypes.cadena,
bordeRadio: Tipos de propiedad.cuerda,
}
exportardefecto Botón;
Este componente acepta algunos Reaccionar accesorios que incluyen la etiqueta del botón y sus estilos. También está utilizando propTypes para verificar los tipos de accesorios pasados y generar una advertencia si usa el tipo incorrecto. El componente devuelve un elemento de botón.
Creación de las historias de los botones
Cuando instaló Storybook en el proyecto React, generó una carpeta que contenía algunos ejemplos de historias, llamada cuentos. Navegue a esa carpeta y elimine todo lo que contiene. Crearás las historias desde cero.
Creará dos historias que representan el botón principal y el botón secundario. Cada uno de estos botones tiene un estilo diferente que lo diferencia del resto. Podrá ver cada uno de ellos en el tablero de Storybook una vez que cree las historias.
En la carpeta de historias, cree un nuevo archivo llamado button.stories.js. Es importante incluir .cuentos antes de .js, ya que eso es lo que le dice a Storybook cuál es un archivo de historias.
Importe el componente Botón.
importar Botón de "../Componentes/Botón/Botón"
A continuación, exporte el título del componente y el propio componente. Tenga en cuenta que el título es opcional.
exportardefecto {
título: "Componentes/Botón",
componente: Botón,
}
La primera historia que creará es para el botón principal. Por lo tanto, cree una nueva función llamada Primaria y expórtela.
export const Primario = () =><Color de fondo del botón ="#6B4EFF" etiqueta="Primario"/>
Ahora, si va al tablero de Storybook, podrá ver el botón renderizado.
Para editar el componente renderizado en vivo y cambiar su estado en el tablero de Storybook, usará args. Los argumentos le permiten pasar argumentos a Storybook que, cuando se modifican, hacen que el componente se vuelva a procesar.
Para definir los argumentos de la historia del botón, cree una plantilla de función.
const Plantilla = argumentos =><Botón {... argumentos}/>
Esta plantilla acepta argumentos y los pasa como accesorios al componente Button.
Ahora puede reescribir la historia principal usando la plantilla como se muestra a continuación.
exportarconstante Primario = Plantilla.bind({})
Primario.args = {
color de fondo: "#6B4EFF",
etiqueta: "Primario",
}
Si revisa el tablero de Storybook, debería ver los controles en la parte inferior. Estos controles le permiten cambiar cómo se muestra el botón. Puede cambiar el color de fondo, el color del texto, la etiqueta, el borde y el radio del borde.
Solo necesita cambiar los valores de los argumentos para crear las otras historias. Por ejemplo, para crear un botón secundario, use el siguiente código.
exportarconstante Secundario = Plantilla.bind({})
Secundario.args = {
color de fondo: "#E7E7FF",
color: "#6B4EFF",
etiqueta: "Secundario",
}
En el tablero de Storybook, navegue a diferentes historias haciendo clic en ellas en la barra lateral. Verás cómo se renderiza cada uno. Puede continuar agregando más estados a las historias de botones como desee. Intente agregar un esquema o una historia de esquema.
Prueba de los componentes de la interfaz de usuario
Este tutorial le dio una breve introducción al uso de Storybook con componentes React UI. Aprendió cómo agregar Storybook a un proyecto React y cómo crear una historia básica para un componente Button con argumentos.
Es posible que haya notado que durante este proceso, estaba probando cómo se representaba el componente del botón en diferentes estados. Es posible que esté escribiendo más código pero, una vez que haya escrito las historias de los componentes, minimizará los errores que puedan surgir al reutilizar los componentes en su aplicación. Además, será más fácil rastrear el error si ocurre. Esa es la belleza del desarrollo basado en componentes.
