Building React components with Storybook in 30 minutes or so

  • Course provided by Udemy
  • Study type: Online
  • Starts: Anytime
  • Price: See latest price on Udemy
Udemy

Course Description

In this course, you are going to learn how to quickly build React component using Storybook. First, you will learn what Storybook is and why Storybook is such an awesome tool. You will learn how to add Storybook to an existing Create-React-App based application and start it to load all stories in an application.

Next, you will learn how to write stories to visually test your components. You will learn how to use decorators and add-ons to enhance the capabilities of Storybook stories. You will also use the Storyshots addon to create Jest snapshot tests from your stories so they are part of your unit tests.

Finally, you will learn how to publish your stories as a static site using GitHub pages.

We are going to start from scratch so no prior Storybook experience is required. I am assuming you are familiar with React, however.

Who this course is for:

  • In this course, you are going to learn how to quickly build React component using Storybook. First, you will learn what Storybook is and why Storybook is such an awesome tool. You will learn how to add Storybook to an existing Create-React-App based application and start it to load all stories in an application. Next, you will learn how to write stories to visually test your components. You will learn how to use decorators and add-ons to enhance the capabilities of Storybook stories. You will also use the Storyshots addon to create Jest snapshot tests from your stories so they are part of your unit tests. Finally, you will learn how to publish your stories as a static site using GitHub pages.

Course content

2 sections • 21 lectures • 1h 7m total length
  • Personal Introduction
    01:47
  • Writing stories
    03:21
  • Using decorators
    02:10
  • Using addons
    05:39
  • Using stories to create snapshot tests
    04:41
  • Deploying storybook
    03:50
  • Bonus
    00:09

Instructor

Tell me. Show me. Involve me.
  • 4.5 Instructor Rating
  • 284 Reviews
  • 3,064 Students
  • 3 Courses

Hello, I'm Maurice.

I am a software consultant and trainer, specializing in TypeScript, JavaScript, React, and ASP.NET. My work includes a large, global, safety application for the oil and gas industry. This is completely done with React. I have also worked on many other applications.

I am also active in the open source community. You can check out my GitHub account.

When not building applications myself I teach other developers. The topics vary from JavaScript, TypeScript and React to ASP.NET.

I have received Microsoft’s Yearly Most Valuable Professional Award since 2005. I am also active in the dotNed user group and helps organize its meetings.

Expected Outcomes

  1. Be much more efficient when developing React components using Storybook Requirements Be familiar with component development in React Description In this course, you are going to learn how to quickly build React component using Storybook . First, you will learn what Storybook is and why Storybook is such an awesome tool. You will learn how to add Storybook to an existing Create-React-App based application and start it to load all stories in an application. Next, you will learn how to write stories to visually test your components. You will learn how to use decorators and add-ons to enhance the capabilities of Storybook stories. You will also use the Storyshots addon to create Jest snapshot tests from your stories so they are part of your unit tests. Finally, you will learn how to publish your stories as a static site using GitHub pages . We are going to start from scratch so no prior Storybook experience is required. I am assuming you are familiar with React, however. Who this course is for: In this course, you are going to learn how to quickly build React component using Storybook. First, you will learn what Storybook is and why Storybook is such an awesome tool. You will learn how to add Storybook to an existing Create-React-App based application and start it to load all stories in an application. Next, you will learn how to write stories to visually test your components. You will learn how to use decorators and add-ons to enhance the capabilities of Storybook stories. You will also use the Storyshots addon to create Jest snapshot tests from your stories so they are part of your unit tests. Finally, you will learn how to publish your stories as a static site using GitHub pages. Show more Show less Course content 2 sections • 21 lectures • 1h 7m total length Expand all sections Introduction 10 lectures • 32min Building React components with Storybook Preview 04:45 Personal Introduction 01:47 Getting started with storybook Preview 03:20 Dynamically loading stories Preview 02:29 Writing stories 03:21 Using decorators 02:10 Using addons 05:39 Using stories to create snapshot tests 04:41 Deploying storybook 03:50 Bonus 00:09 Storybook 5.3 update 11 lectures • 35min Introducing Storybook 5.3 and upgrading an older Storybook project 03:00 The sample application for the Storybook 5.3 demos 02:00 Adding Storybook 5.3 to a new React application 03:47 Using the new Component Story Format to write stories Preview 02:30 Specifying the story names when using the Component Story Format 02:20 Controling the story name hierarchy 01:41 Adding a decorator and using the Knobs addon with CSF stories 03:09 Controling what export is a story with CSF stories 02:52 Adding custom Decorators to stories when using CSF 06:30 Writing stories using the MDX format and the Docs addon Preview 05:09 Conclusion and looking forward to Storybook 6.0 02:12 Instructor Maurice de Beijer Tell me. Show me. Involve me. 4.5 Instructor Rating 284 Reviews 3,064 Students 3 Courses Hello, I'm Maurice. I am a software consultant and trainer, specializing in TypeScript, JavaScript, React, and ASP.NET. My work includes a large, global, safety application for the oil and gas industry. This is completely done with React. I have also worked on many other applications. I am also active in the open source community. You can check out my GitHub account. When not building applications myself I teach other developers. The topics vary from JavaScript, TypeScript and React to ASP.NET. I have received Microsoft’s Yearly Most Valuable Professional Award since 2005. I am also active in the dotNed user group and helps organize its meetings. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'677e3a613f1d541b',m:'e97183962bb0b78f02bc33b1559154f419053c2c-1627812117-1800-AZWuvxgpqUnSCpPDQq14k6SZr8H9k+R133pS1LiocOG/0iWS71GCIpKKWmlb2MfZn5NP6j/tdm2t3z0ICUN9jkMf4zL/7eroE10hPtTJ3/dQDfej/NEQpZJMyyENInRKqcQCCJ02shd0yN8xUd2h5uzhgDAnvOhhPiOl+qOtyd3cT2GXtA+SdgPwmlm/sZDhEQ==',s:[0xaf53cd16d9,0xf627536662],}})();