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

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

What's inside

Learning objectives

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

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

Syllabus

React Fundamentals

Course Introduction

React Introduction

React in the Browser

JSX

JSX perks

Class based Components

Functional Components

Props

Handeling Events

State

Quiz for State & Props

Introducing Node.js

React app using Webpack

Install these packages

React with Storybook

Component Driven Development

Atomic Design

Test your understanding of Atomic design

Use create-react-app CLI

Adding Stylesheets

Install Storybook

Storybook intro with Button component

Counter component

React State with useState

Rating component

Accordion Component

useRef() with Accordion

Change Components Title

TextInput Component

Controlled Component (TextInput)

Setup TailwindCSS

Style TextInput

Test and validate the components functionality

Unit test Button Component

Testing with Storybook

Testing Accessibility (a11y)

Setup Visual Regression Test (VRT)

CI/CD

What CI/CD ?

Github Actions

Create CI Workflow

Fix Failed test on the CI

Add Codecov

Add Status Badge

Publish Storybook with VRTs

Fix VRT

React Tools & Recommendations

Best Backend for React- Part 1

Best Backend for React- Part 2

Use ChatGPT for coding [9 Examples]

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Explores React in Node, which is used in production environments to create Web components

Examines Accessibility Testing (a11y), which is highly relevant for frontend developers

Develops CSS Modules, which are core skills for styling components

Teaches Visual Regression Testing (VRT), which helps learners ensure the consistency of their UI

Emphasizes Class-based and Functional components, providing a comprehensive understanding of React component structures

Introduces GitHub Actions, an industry-standard for CI/CD

Career center

Learners who complete Advanced React & Storybook: From Components Library to CI/CD will develop knowledge and skills that may be useful to these careers:

Full-Stack Developer

Full-Stack Developers design, develop, implement, and maintain both the client and server sides of web applications. This course provides a good introduction to React, Storybook, and writing production-quality components. The course also includes hands-on, practical training on creating CI/CD pipelines for the components library.

See salaries and explore the career path for Full-Stack Developer

UI/UX Designer

UI/UX Designers are focused on the design and functionality of a product's user interface. This course will provide a UI/UX Designer with the skills and knowledge needed to design and implement app interfaces that are both visually appealing and user-friendly.

See salaries and explore the career path for UI/UX Designer

Software Engineer

Software Engineers are involved in every phase of a product's development process, from initial concept through the development, deployment, and maintenance of the final product. This course's focus on building out a React components library and CI/CD, coupled with an emphasis on unit testing, storybook testing, accessibility testing, and visual regression testing, will help Software Engineers enhance their ability to contribute to all stages of the software development lifecycle.

See salaries and explore the career path for Software Engineer

IT Manager

IT Managers are responsible for the planning, implementation, and management of IT systems. This course will teach IT Managers about testing React components and implementing CI/CD pipelines for component libraries, both of which are valuable skills in any IT management role.

See salaries and explore the career path for IT Manager

Software Architect

Software Architects design, maintain, and improve the overall architecture of an application or a system. A course that emphasizes building a React components library from scratch is an excellent opportunity for Software Architects to enhance their ability to create and implement robust software applications.

See salaries and explore the career path for Software Architect

Web Developer

A Web Developer is a programmer specializing in designing and developing websites and web applications. With web technologies constantly evolving, Web Developers must constantly upgrade their programming skills. React's fundamentals and CSS modules are essential to efficient web development. This course's curriculum covers the most up-to-date, in-demand skills.

See salaries and explore the career path for Web Developer

Front-End Developer

Front-End Developers are in charge of the appearance and functionality of the user interface of a website or application. By taking this course, Front-End Developers can familiarize themselves with some of the most sought-after tools currently on the market for developing component libraries.

See salaries and explore the career path for Front-End Developer

Technical Architect

Technical Architects are responsible for ensuring that a software system meets the business's functional and technical requirements. Technical Architects may work across multiple teams to help coordinate software architectural decisions. The knowledge of React and Storybook that this course imparts will increase a Technical Architect's ability to make more informed decisions about designing and implementing software systems.

See salaries and explore the career path for Technical Architect

Project Manager

Project Managers plan, execute, control, and complete projects effectively. This course gives an overview of using tools like Storybook to build and test component libraries, which can help Project Managers better estimate timelines and plan for resource allocation during the software development lifecycle.

See salaries and explore the career path for Project Manager

Program Manager

Program Managers are responsible for the planning, execution, and control of programs. This course may be useful for Program Managers who are looking to gain a better understanding of the technical aspects of software development.

See salaries and explore the career path for Program Manager

Scrum Master

Scrum Masters are responsible for facilitating and coaching Scrum teams. Although this course will not provide a formal Scrum certification, it may provide Scrum Masters with an overview of the technical aspects of React and Storybook.

See salaries and explore the career path for Scrum Master

Business Analyst

Business Analysts bridge the gap between the business and IT departments. They work closely with stakeholders to understand their needs, and then develop and implement solutions that meet those needs. This course may help Business Analysts better understand the technical aspects of web development and help them collaborate more effectively with software development teams.

See salaries and explore the career path for Business Analyst

Product Manager

Product Managers are responsible for the overall vision and strategy of a product. Although this course won't teach you product management, it can provide Product Managers with a better understanding of the technical aspects of building and testing React components.

See salaries and explore the career path for Product Manager

Data Scientist

Data Scientists use a variety of statistical techniques and tools to analyze data and extract useful information. Although this course won't teach you data science, it provides an overview of a technology stack (React + Storybook) that can power dashboards and data visualization tools used by Data Scientists.

See salaries and explore the career path for Data Scientist

Marketing Manager

Marketing Managers are responsible for planning, implementing, and managing marketing campaigns. A course that covers testing and maintaining component libraries will be of limited value to Marketing Managers.

See salaries and explore the career path for Marketing Manager

Advanced React & Storybook

From Components Library to CI/CD

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses