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

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Advanced React & Storybook: From Components Library to CI/CD with these activities:

Review React Fundamentals

Show steps

Refresh your knowledge of React fundamentals before starting the course to ensure a strong foundation.

Show steps

Read documentation on React fundamentals
Review React lifecycle methods
Practice creating simple React components

Organize Course Materials

Show steps

Organize your notes, assignments, quizzes, and exams to enhance your review and retention.

Show steps

Create folders for different course materials
Label and file materials logically
Review materials regularly

Write JSX code

Show steps

Writing JSX code will help reinforce the understanding of JSX syntax and its use in building React components.

Browse courses on JSX

Show steps

Create a new React project using create-react-app.
Write JSX code to create a simple component.
Render the component to the DOM.

11 other activities

Expand to see all activities and additional details

Show all 14 activities

Use Storybook for component development

Show steps

Utilizing Storybook will enhance the efficiency and effectiveness of developing and testing React components in isolation.

Browse courses on Storybook

Show steps

Install and set up Storybook in a React project.
Create stories for different component states and scenarios.
Run Storybook to visualize and interact with components.

Compose and Test React components

Show steps

Composing and testing React components will help solidify the concepts of component reusability, state management, and testing techniques.

Show steps

Create multiple React components with different functionalities.
Compose these components into a larger, more complex component.
Write unit tests for each component to ensure their correctness.

Build a React Component Library

Show steps

Practice building a React component library to enhance your understanding of component development and reusability.

Browse courses on React Components

Show steps

Choose a component design system
Create a new React project
Design and implement core components
Document and test your components

Join a React Study Group

Show steps

Collaborate with peers in a study group to enhance your understanding and troubleshoot challenges.

Show steps

Find or create a study group
Establish regular meeting times
Review course materials together
Work through problems and projects collaboratively

Debug React applications

Show steps

Debugging React applications will equip students with the skills to identify and resolve errors, ensuring the stability and reliability of their applications.

Browse courses on Error Handling

Show steps

Introduce intentional bugs into a React application.
Use debugging tools to identify the root cause of the bugs.
Fix the bugs and test the application to verify the fixes.

Build a React component library

Show steps

Building a React component library will provide practical experience in designing, developing, and maintaining reusable React components.

Browse courses on Component Development

Show steps

Plan the structure and design of the component library.
Develop reusable React components with well-defined APIs.
Package and publish the component library for easy consumption.

Follow Advanced React Development Tutorials

Show steps

Seek out and follow advanced React development tutorials to expand your skills and knowledge.

Show steps

Identify credible online resources or courses
Follow tutorials on specific React topics
Practice implementing advanced React techniques

Explore advanced React features

Show steps

Delving into advanced React features will expand the student's knowledge and skillset, empowering them to build more sophisticated and dynamic React applications.

Browse courses on React Hooks

Show steps

Learn about React Hooks and how to use them effectively.
Explore the concept of React Context and its applications.
Apply these advanced features in practical React projects.

Participate in React Code Challenges

Show steps

Test and refine your React skills by participating in code challenges and competitions.

Browse courses on Competitive Programming

Show steps

Identify relevant code challenges or competitions
Study problem statements and requirements
Implement React solutions within time constraints
Review and analyze your performance

Create a React Tutorial or Blog Post

Show steps

Solidify your understanding by creating a tutorial or blog post on a React-related topic.

Show steps

Choose a specific React topic
Research and gather information
Write clear and concise content
Proofread and edit your work

Become a React Mentor

Show steps

Reinforce your learning by mentoring other students in React and guiding them through challenges.

Show steps

Identify ways to share your knowledge
Offer support through Q&A forums or online communities
Provide guidance on best practices and troubleshoot issues

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

14 deals to help you save

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses