Getting Started with Storybook: The Ultimate Tool for Component Documentation and Testing
1.1 هزار بار بازدید -
8 ماه پیش
-
In this YouTube video, we’ll
In this YouTube video, we’ll take a look at Storybook and explore its features and benefits. With RedwoodJS this is as a simple as running a single command! We’ll go over the basics of creating stories, showcasing the different panels and controls within Storybook, and highlighting the component variations and automated documentation. Whether you're new to Storybook or looking to enhance your development workflow, this video provides a comprehensive overview of Storybook's capabilities and how it can streamline your frontend development process.
👉 Chapters
0:00 Introduction
00:50 Setting Up Storybook
01:14 Exploring Storybook
01:36 The Purpose of Storybook
01:54 Storybook File Structure
04:02 Metadata and Grouping
04:41 Creating a Story
05:23 Styling the Footer Component
08:32 Storybook Features
09:19 Controls and Actions
09:44 Accessibility Testing
⚡ Quick Links
- Code on GitHub: https://github.com/ahaywood/brazilian...
- Figma File: https://www.figma.com/file/z6Vipsmnua...
📹 Other videos in the series:
- Part 1: Intro - Master the Full-Stack: RedwoodJS Step-by-Step Guide - Intro - Master the Full-Stack: Redwoo...
- Part 2: Setup Your Redwood.js Environment: A Beginner's Tutorial - Setup Your Redwood.js Environment: A ...
- Part 3: RedwoodJS File and Folder Structure: Everything You Need to Know - RedwoodJS File and Folder Structure: ...
- Part 4: Maximize Efficiency: Building Faster with Redwood's Generators - Maximize Efficiency: Building Faster ...
- Part 5: Mastering the Redwood Router: A Comprehensive Overview - Mastering the Redwood Router: A Compr...
- Part 6: Easy Tailwind Setup: Customize Fonts and Colors with RedwoodJS - Easy Tailwind Setup: Customize Fonts ...
👉 Part 7: THIS VIDEO 👈
🔗 Links
- RedwoodJS: https://redwoodjs.com/
- RedwoodJS Documentation: https://redwoodjs.com/docs/introduction
- Component Story Format Version 3 (CSF3) documentation - https://storybook.js.org/blog/compone...
- JavaScript API for the date object - https://www.w3schools.com/jsref/jsref...
- YouTube Video on Redwood Router - Mastering the Redwood Router: A Compr...
- RedwoodJS Documentation for working with the Router - https://redwoodjs.com/docs/router#rou...
👉 Chapters
0:00 Introduction
00:50 Setting Up Storybook
01:14 Exploring Storybook
01:36 The Purpose of Storybook
01:54 Storybook File Structure
04:02 Metadata and Grouping
04:41 Creating a Story
05:23 Styling the Footer Component
08:32 Storybook Features
09:19 Controls and Actions
09:44 Accessibility Testing
⚡ Quick Links
- Code on GitHub: https://github.com/ahaywood/brazilian...
- Figma File: https://www.figma.com/file/z6Vipsmnua...
📹 Other videos in the series:
- Part 1: Intro - Master the Full-Stack: RedwoodJS Step-by-Step Guide - Intro - Master the Full-Stack: Redwoo...
- Part 2: Setup Your Redwood.js Environment: A Beginner's Tutorial - Setup Your Redwood.js Environment: A ...
- Part 3: RedwoodJS File and Folder Structure: Everything You Need to Know - RedwoodJS File and Folder Structure: ...
- Part 4: Maximize Efficiency: Building Faster with Redwood's Generators - Maximize Efficiency: Building Faster ...
- Part 5: Mastering the Redwood Router: A Comprehensive Overview - Mastering the Redwood Router: A Compr...
- Part 6: Easy Tailwind Setup: Customize Fonts and Colors with RedwoodJS - Easy Tailwind Setup: Customize Fonts ...
👉 Part 7: THIS VIDEO 👈
🔗 Links
- RedwoodJS: https://redwoodjs.com/
- RedwoodJS Documentation: https://redwoodjs.com/docs/introduction
- Component Story Format Version 3 (CSF3) documentation - https://storybook.js.org/blog/compone...
- JavaScript API for the date object - https://www.w3schools.com/jsref/jsref...
- YouTube Video on Redwood Router - Mastering the Redwood Router: A Compr...
- RedwoodJS Documentation for working with the Router - https://redwoodjs.com/docs/router#rou...
8 ماه پیش
در تاریخ 1402/09/07 منتشر شده
است.
1,115
بـار بازدید شده