Storybook and Component Driven, Atomic Design in React

[00:00 - 00:12] Before diving deep into Storybook, it's important to learn about the key concepts around it. Storybook strongly revolves around the component-driven approach, a development and design practice of building user interfaces with modular components.

[00:13 - 00:35] It works by building UI from bottom to top, one component at a time, starting from the simplest like a button, or an input, then going up and combining these components into features like a form, then going even further to assembling pages and finally integrating those pages into your application. Breaking things down like that brings a lot of benefits, speed and efficiency to your Y development workflow.

[00:36 - 00:49] A lot of tools follow this concept including React. In the Thinking in React article from the official documentation, it says that React makes it easier to think in design systems and UI states, and that's because it follows the component-driven development structure.

[00:50 - 01:12] It mentions that you should start with the mock-up of the data as well as the designs, and then you can break that UI into a component hierarchy, which essentially yields something like this. As an example, you've got an entire component which is called Filterable Product Table, that is a composition of other components, which could also be a composition of even inner components.

[01:13 - 01:19] Once you've done that study, then you will have a component hierarchy. Once you have that, you can start building your application.

[01:20 - 01:40] You start building by the bottom specific components like this product category row, which is over here, and then you go to the product row, and then you go to the product table. You keep going up all the way to finally getting into your application, which receives the mock data, and then will yield the final result.

[01:41 - 02:02] There is also the concept of Atomic Design, a term from a book by Brad Frost that explores component breakdown using scientific terms to categorize them, where you start from the most atomic component, and they get composed into molecules, organisms, templates, and then pages. This exercise really helps you simplify the complexity that is building application pages.

[02:03 - 02:15] These concepts are pretty important to keep in your minds because they can serve as a tool to improve the way we think and develop UI. Although you don't need to necessarily follow 100% of them by the book, it's just important to use them as reference.

[02:16 - 02:20] But anyways, now that we are familiar with these terms, we should get going and start with Storybook.