How to Use Storybooks A to Z. We show you everything about storybooks.
586 learners
Level Basic
Course period Unlimited
Reviews from Early Learners
5.0
처음처럼
Oh my gosh.. I had a lot of trial and error when applying to the project, but I feel like I can solve a lot with this one lecture. I wish I had watched the lecture first and started the project, but I realized that there were many things I missed in the project I was working on after watching the lecture. The review verification and testing part was really helpful💖 Above all, it was so fun to watch for two days because it was organized neatly and only taught the key points. Please give me another lecture!
5.0
뚜우뚜우
I got my first job as a developer, and the company wanted to apply Storybook, so I suddenly started learning about it. I tried to study by myself by looking at official documents without a mentor, and I roughly knew how to do it, but I was frustrated whether I was using it properly (I was very stressed ㅠㅠㅠ). Then I found out about the Storybook lecture and paid for it right away. I really liked the lecture so much that all the frustration I had felt went away. The lecture was very thorough and easy to understand, and it was full of useful tips, not just about Storybook, so it was the perfect lecture for me who just got a job and is still immature. I learned a lot of things I didn't know through the lecture, and I think it was an opportunity for me to grow! Thank you for making such a great lecture! :) I survived thanks to it!!!😂
5.0
42
I bought the course because I was interested in design systems! While writing the storybook, I wondered if this was right? If I was using it well? I was able to get a lot of tips while watching the instructor write it. Also, I had vague difficulties with GitHub actions, but many of my difficulties were solved when I wrote the action to automatically distribute the storybook with chromatic and the action to test the user accessibility of the storybook. I was really impressed when I wrote the action myself and the dependencies were well connected and worked as I wanted... ㅠㅠ I think this was a course that solved my curiosity! Thank you for making a great course!
Component-driven development (CDD) using storybooks
Automating UI testing using GitHub Actions and CI
Utilizing design systems through npm package distribution
As user story-based planning gains traction, the diverse stories behind the UI components depicted on screen are also becoming increasingly important. For those curious about what a storybook is and what its features are, here's what we've prepared!
This course covers Storybook installation, how to apply it to React projects, its key features, and how to utilize it. We'll also explore how it can be used in real-world development through various examples. The course is structured to be easily understandable even for first-time Storybook users, allowing you to naturally learn Storybook as you go.
📌 Learn progressively from the simplest components to complex components built from multiple components.
📌 You can experience how development is done in the field through various examples.
📌 We share various ways to utilize storybooks in the field with know-how gained from our experience.
📌 We provide various useful tips for TypeScript and Tailwind that can be used in front-end development.
What is a storybook?
In the front-end project
How to use the storybook
A developer in a daze
I'm interested in design systems.
User Experience and Developer Experience
Design system for improvement
The development team I want to build
I'm curious about UI testing.
Automate UI testing using CI/CD and review
Developers curious about component validation
Understand the basic concepts and usage of storybooks and apply them to your projects.
You can develop components with Web Vitals in mind.
You can develop components more efficiently by using the Storybook decorator.
UI test automation can help ensure consistency in your design system.
You can distribute the design system as an npm package for reuse.
.png?w=960)
Chromatic Dashboard: UI Review
What if a new component is added to the design system?
Integrate GitHub with Chromatic to create a new Pull
Automatically generates a UI Review whenever a Request is created.
Storybook: UI Component Validation
Check out the UI components developed in the storybook
How components appear on the screen according to different stories
You can check if it is drawn
Story verification through interaction testing
How do we help users use our services?
Report on the use of the developed components and tell the story
can be verified
Design system using npm package
Looking to start a new project? Design
Deploy the system as an npm package and npm install
You can easily reuse components through
(Current) GS Group DX BootCamp Front-End Training Manager
(Former) Series C AI startup tech lead
Wanted Pre-Onboarding Front-End Challenge 6th Round (7,000+ total)
Naver Boostcamp Web/Mobile Mentor
Naver Cloud YouTube Channel presenter
This explanation is based on MacOS, but there are no operating system restrictions.
If you have experience setting up a development environment with React, you can follow along without any separate environment settings.
Notion Link
GitHub source code
Anyone who has ever created a component with React
Even those without team project experience can easily follow along.
Who is this course right for?
Developers who want to use storybooks
Developers who want to try component-driven development
A development team that wants to build a design system
Need to know before starting?
React
TypeScript
HTML
CSS
Inflearn Verified
Career Verified
20,608
Learners
1,687
Reviews
539
Answers
4.9
Rating
10
Courses
FAANG Senior Software Engineer
삼성, GS, 아시아나 등 대기업 강연
Building AI Agents with LangChain & LangGraph 집필
(전) GS 그룹 AX 플랫폼 개발 및 운영
(전) GS 그룹 DX BootCamp 코치/멘토
(전) Series C AI startup 테크리드
(전) Stanford University Code in Place 세션 리더
네이버 Boostcamp 웹 모바일 멘토
네이버 클라우드 YouTube Channel 프리젠터
원티드 Pre-Onboarding Frontend/Backend Challenge (누적 수강생 6,000+)
항해 AI Plus Course 1기 코치
All
24 lectures ∙ (2hr 43min)
All
46 reviews
5.0
46 reviews
Reviews 4
∙
Average Rating 5.0
5
Recently, the desire to build an in-house design system has increased, so I took the course. While listening to the course, I was able to feel not only the understanding of the design system, but also the instructor's overall development skills!! I was able to gain a lot of things in addition to the course, which I lost my direction for these days.
Thank you for your kind review, Subin! If you have any questions or concerns while taking the class, please feel free to ask questions at any time. Also, the mentoring event is ongoing, so if you have any questions about your career in general or need advice, you don’t have to meet in person to talk, so please send me a question via Google Form. I will do my best to answer to the best of my ability.
Reviews 3
∙
Average Rating 4.7
Reviews 15
∙
Average Rating 4.7
Reviews 3
∙
Average Rating 5.0
5
I took the course because Storybook has been listed as a required skill often recently. It's good because it explained the basic knowledge needed to apply a design system in an easy-to-understand way :)
Thank you for the great feedback! In a recent mentoring session, I met a new frontend developer who said their Storybook experience was viewed favorably in their first company interview. I hope you get a good result!
Reviews 6
∙
Average Rating 5.0
5
I studied Storybook by looking at the official documentation, but there was too much information and sometimes errors occurred due to parts that didn't match the documentation, so I ended up looking for an organized lecture. It was very convenient to view because you organized it concisely with content that would be essential for practical work. I would appreciate good lectures next time as well.
Thank you so much for the great review! 😊 It's understandable to find official documentation challenging, so I'm truly glad the lecture was helpful. I will continue to create useful lectures with content that can be directly applied to practical work!
Check out other courses by the instructor!
Explore other courses in the same field!
![Learn React Testing by Following [Updated November 2023]Course Thumbnail](https://cdn.inflearn.com/public/courses/327775/cover/0ef9c174-9974-4530-9470-d1ce8648aa75/327775-eng.png?w=420)
![# [Electron #1] Building a Timer App with Electron + React (With Zustand)Course Thumbnail](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?w=420)
