Master The Core Concepts of React and Storybook

Focused View

Bassam Guide

3:48:22

136 View

1 - React Fundamentals

1 - Course Introduction.mp4

02:41

2 - React Introduction.mp4

02:02

3 - React in the Browser.mp4

06:03

3 - github repo source code.zip

4 - JSX.mp4

05:29

5 - JSX perks.mp4

05:35

6 - Class based Components.mp4

03:32

7 - Functional Components.mp4

04:28

8 - Props.mp4

07:21

9 - Handeling Events.mp4

06:46

10 - State.mp4

08:09

11 - Introducing Nodejs.mp4

04:33

12 - React app using Webpack.mp4

06:15

12 - setup-webpack.zip

12 - webpack config file.zip

13 - Install these packages.html

2 - React with Storybook

14 - Component Driven Development.mp4

10:35

14 - thinking in react.zip

15 - Atomic Design.mp4

03:18

16 - Use createreactapp CLI.mp4

05:19

16 - github repo source code.zip

17 - Adding Stylesheets.mp4

03:40

18 - Install Storybook.mp4

02:56

19 - Storybook intro with Button component.mp4

03:37

20 - Counter component.mp4

12:21

21 - React State with useState.mp4

02:53

22 - Rating component.mp4

05:24

23 - Accordion Component.mp4

12:01

24 - useRef with Accordion.mp4

05:32

25 - Change Components Title.mp4

02:02

26 - TextInput Component.mp4

09:20

27 - Controlled Component TextInput.mp4

03:09

28 - Setup TailwindCSS.mp4

05:58

29 - Style TextInput.mp4

05:32

3 - Testing

30 - Unit test Button Component.mp4

06:52

31 - Testing with Storybook.mp4

07:18

32 - Testing Accessibility a11y.mp4

07:11

33 - Setup Visual Regression Test VRT.mp4

08:39

4 - CICD

34 - What CICD.mp4

04:24

35 - Github Actions.mp4

01:50

36 - Create CI Workflow.mp4

05:12

37 - Fix Failed test on the CI.mp4

04:59

38 - Add Codecov.mp4

09:33

39 - Add Status Badge.mp4

03:49

40 - Publish Storybook with VRTs.mp4

07:39

41 - Fix VRT.mp4

04:25

Description

Learn to build professional components library using React with Storybook and test them in isolation

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

Who is this for?

Beginner frontend developer who want to learn React

Someone who knows React but want to learn developing components in isolation with Storybook

More details

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

User Reviews

Rating

average 0

Total votes0

Focused display

React

Bassam Guide

Instructor's Courses

Hello, I'm Bassam. I am a Software Architect with more than a decade of experience working in different tech companies in different industries! I love building software applications with more focus on web application!I love building things. I'm most attracted to tackling large scale consumer performance problems and solving real customer problems with a business justification.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.