Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Advanced React & Storybook: From Components Library to CI/CD
Rating: 3.7 out of 5(214 ratings)
1,950 students

Advanced React & Storybook: From Components Library to CI/CD

Learn to build professional components library using React with Storybook and test them in isolation
Created byBassam Guide
Last updated 1/2024
English

What you'll learn

  • Understand React fundamentals
  • Use React in the Browser and in Node
  • Build Reusable and Composable React components library
  • How to use Storybook and React in your project
  • How to test components with react-testing-library and Storybook
  • Style Components with TailwindCSS & CSS Modules
  • Accessibility Testing (a11y)
  • Visual Regression Testing (VRT)
  • CI/CD
  • Create Workflows with Github Actions

Course content

5 sections44 lectures4h 14m total length
  • Course Introduction2:41
  • React Introduction2:02
  • React in the Browser6:03
  • JSX5:29
  • JSX perks5:35
  • Class based Components3:32

    Explore class-based components in React, using a render method to return UI as elements. They accept props and require a capitalized component name, such as My Heading, for reuse.

  • Functional Components4:28
  • Props7:21
  • Handeling Events6:46
  • State8:09
  • Quiz for State & Props
  • Introducing Node.js4:33

    Node.js is a free, open-source cross-platform JavaScript engine built on chrome's v8, enabling single-process, non-blocking I/O for server-side JavaScript with npm packages and no browser window or document.

  • React app using Webpack6:15
  • Install these packages0:09

Requirements

  • Basic knowledge of Javascript and CSS
  • IDE, version control

Description

A Practical hands-on training to building React components library with Storybook.

In this practical, hands-on course, you will learn how to build a React components library with Storybook. You will start by learning React fundamentals and then move on to creating a whole React components library with Storybook. You will also learn about different types of automated testing for Components, how to test components in isolation and how to write CI/CD pipelines.

It doesn't matter if you're a seasoned React developer or just starting out - this course will help take your skills to the next level. With practical examples based on real-world components, we'll cover everything from building user interfaces with React's simple yet powerful DSLs all the way to properly styling our modules using CSS.

The course is designed in such a way that you will be able to create authentic-looking components for any project, whether it's a web app or Single Page Application (SPA). You'll also get insights into how companies develop and maintain standards using JavaScript-based technologies like React!

This course is perfect for anyone who wants to learn more about React and how to build Component libraries. So, if you're ready to take your React skills to the next level, sign up today!



  • What You Will Learn: You will learn how to build React components using React v17, Class-based components, Functional components, Hooks, JSX, Props , State, Storybook to develop Components, CSS Modules, Component Composition,  Unit Testing, Storybook testing, Testing Accessibility, Visual Regression Testing, CI/CD

  • Why You Should Take This Class: If you are a Frontend developer who wants to learn React or you have used React but want to learn more advanced concepts and how to use React in a production environment to create Web components and how to develop components in isolation with Storybook then you should take this class

  • Who This Class is For: Frontend developers who know the basics of Javascript and CSS

  • Materials/Resources: Javascript & CSS knowledge, Node.js installed, IDE , github account


Who this course is for:

  • Beginner frontend developer who want to learn React
  • Someone who knows React but want to learn developing components in isolation with Storybook