From the course: Building UI Components with Storybook: Master React Components and UI Design with Storybook for Better Efficiency

What is Storybook and why should we care?

From the course: Building UI Components with Storybook: Master React Components and UI Design with Storybook for Better Efficiency

Start my 1-month free trial Buy for my team

What is Storybook and why should we care?

“

The internet is an ocean of complexity when it comes to building a component, building a web application. It could be as simple as a hello world going straight into somebody's phone. Think about it. Billions of people on the planet. How everybody is a unique snowflake, so to speak. And how each person, we have our own devices when we access the internet. We have our own cultures, our own browsers, our own phones, viewports. It's not a one-size-fits-all. And it's for this very reason why Storybook exists and why thousands of the most revered leading engineering teams in the world, front-end engineering teams from Airbnb to NASA, as we're going to see in this course, use Storybook, and why you as a React developer, you as an Angular developer, you as a junior developer looking to improve and impress your employers, your prospective job opportunities with real scalable, with not only scalable code, quality professional standardizations and you as a senior developer looking to implement a professional high industry standard in order to take that mature project you've been working on from being brittle and difficult to maintain, to flexible and beautiful. Well, welcome all. Take your shoes off. Get comfortable. It's going to be an exciting, fun, and clear journey together where we will uncover the official storybook tutorial code along. Step by step, we're going to build multiple projects and really look at, A, what is storybook, how it works, and how we can use it to develop excellence. So now this section, we're not doing any programming. It's just an overview important to whet our appetites and get into it. But just to get started really quickly consider this your movie preview to what's to come and it's okay if you have no idea what Storybook is. When you build a web application there are components, there are pieces, we have the pages, we have the composite components, pages like the about page, the home page, then we have buttons, we have tables, we have banners, smaller components, and you know if you're a React developer and a view developer if you've worked with libraries that act as silver bullets towards building large applications how key it is to build components you work on one component you work on another component generally speaking in the professional world companies that are looking to hire companies that have been building components for a while well their applications get quite quite complex you can have so many so many components it's not like just building a small SPA, a single-paged app. And that's where Storybook comes in. Storybook is a professional, high-industry standard for those component developments. It allows us to create, test, and showcase our UI components in an accessible and interactive format. But it's more than that. It's indispensable for you as a programmer, and if not for the technology itself, well definitely universally for the fundamentals that it implies behind the hood. So even if you choose not at the end of this course to use Storybook, this Storybook forces, pushes you towards not just developing scalable applications, but quality scalable applications for your components where you can create and test them in isolation. And it's interoperable with many different front-end view layers. So we're going to work with React, because React is a fantastic, high-in-demand library that powers so many of the most important applications in the world, and so many startups move towards React. But so does Angular, so does Vue. We've got Meteor, we've got Svelte. These are all fantastic. Storybook can work in any of these. We're going to take a look at how it works in React, but even if you're coming from Angular, fret not, I will cover fundamental React concepts so you get the hang of it. It's really not so complex. If you're already a proficient React developer, you can just skip past those fundamental videos, but we're not gonna get too caught up on the inner workings of React. I've got plenty of other courses for that. The point is, it doesn't matter where you're coming from. This course will provide to you a step-by-step code along to show you and demonstrate the benefits and strategies of incorporating Storybook into your project with simple, clear examples that will cover all the key things you need from workflow automations, testing, building the components in isolation, spinning up that story, and all that good stuff. So we've got a lot to cover, maybe a couple of puns along the way, but not too many dad jokes. 1% dad jokes, 99% efficiency. That's what we do here. All joking aside, Storybook is an incredible front-end development tool that has so much to offer, and I can't wait to get started with you whenever you're ready in the next lesson. Let's do it!

Contents