Come sviluppare un Component Design System

Speaker: Luca Pagliaro
Lingua: italiano | Livello: intermedio
Tecnologie: HTML, React, Vite, Storybook


Vedremo come standardizzare e scalare il nostro processo di sviluppo sul front-end creando un Design System di componenti su Storybook. Per farlo useremo React, Vite e TailwindCSS con un approccio sia teorico che pratico.

Cosa imparerai:
✓ Cos'è un design system
✓ Cos'è e come usare Storybook
✓ Come configurare un ambiente con React, Vite e Storybook
✓ Come sviluppare degli atomi che possono scalare
✓ Sviluppare componenti usando la composition
✓ Best practices per usi comuni di form, modali e dropdown
✓ Best practices per tipizzare componenti front-end"

Prerequisiti: HTML, CSS, JavaScript

Mentre segui il corso, consulta qui il materiale condiviso dallo speaker.

Watch all videos

Episodes:

1
1:30
Introduzione
1. Introduzione
by Luca Pagliaro
Italian Intermediate tech lesson January 10th, 2023
2
12:49
Cos'è un Design System
2. Cos'è un Design System
by Luca Pagliaro
Italian Intermediate tech lesson January 10th, 2023
3
12:30
Setup dell'ambiente di sviluppo (React, Vite, Tailwind)
3. Setup dell'ambiente di sviluppo (React, Vite, Tailwind)
by Luca Pagliaro
Italian Intermediate tech lesson January 10th, 2023
4
14:29
Storybook: cos'è, installazione ed addon
4. Storybook: cos'è, installazione ed addon
by Luca Pagliaro
Italian Intermediate tech lesson January 10th, 2023
5
22:22
Il primo atomo: il componente <Button />
5. Il primo atomo: il componente <Button />
by Luca Pagliaro
Italian Intermediate tech lesson January 10th, 2023
6
22:57
Component composition, sviluppiamo una <Card />
6. Component composition, sviluppiamo una <Card />
by Luca Pagliaro
Italian Intermediate tech lesson January 10th, 2023
7
26:50
Mettiamoci in Action con un Dropdown
7. Mettiamoci in Action con un Dropdown
by Luca Pagliaro
Italian Intermediate tech lesson January 10th, 2023
8
19:55
Creiamo <Form /> scalabili usando un po' di contesto
8. Creiamo <Form /> scalabili usando un po' di contesto
by Luca Pagliaro
Italian Intermediate tech lesson January 10th, 2023
9
3:34
Conclusioni
9. Conclusioni
by Luca Pagliaro
Italian Intermediate tech lesson January 10th, 2023