React for Beginners

7h 58m 3s
English
Paid

React is the most popular JavaScript library for building front-ends. It was created by Faceook and is widely used for building web, mobile, and desktop apps.

With so many uses, it's one of best the tools to learn these days.

The problem is: React is complicated and most books and courses confuse learners or show outdated ways of using React that nobody uses anymore. That's why I've created this series for you.

I've put together what I've learned about React over the last 5 years into a series of easy-to-understand videos packed with the latest best practices and techniques using real-world examples and a full-blown production-grade project.

Who is this course for?

  • Beginners who want to learn React from scratch and build real-world apps
  • React developers who want to fill in the gaps in their knowledge and take their skills to the next level.
  • Anyone who wants to become a confident and proficient React developer

About the Author: codewithmosh (Mosh Hamedani)

codewithmosh (Mosh Hamedani) thumbnail
Hi! I am Mosh Hamedani! I am a passionate and pragmatic software engineer with 20 years of professional experience and I've taught over 10 million people how to code or how to become professional software engineers through my YouTube channel and online courses. I have a Bachelor of Science in Software Engineering and a Master of Science in Networks Systems. My mission is to make coding and software engineering accessible to everyone through courses that are simple to digest, and practical to implement.

Watch Online 119 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 119 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 1- Welcome
All Course Lessons (119)
#Lesson TitleDurationAccess
1
1- Welcome Demo
01:42
2
2- Prerequisites
00:50
3
1- What is React
02:15
4
2- Setting Up the Development Environment
01:29
5
3- Creating a React App
02:55
6
4- Project Structure
02:04
7
5- Creating a React Component
05:23
8
6- How React Works
02:21
9
7- React Ecosystem
01:24
10
1- Introduction
00:36
11
2- Creating a ListGroup Component
05:37
12
3- Fragments
02:29
13
4- Rendering Lists
03:31
14
5- Conditional Rendering
05:26
15
6- Handling Events
06:08
16
7- Managing State
06:04
17
8- Passing Data via Props
03:59
18
9- Passing Functions via Props
03:47
19
10- State vs Props
01:34
20
11- Passing Children
05:06
21
12- Inspecting Components with React Dev Tools
02:11
22
13- Exercise- Building a Button Component
07:03
23
14- Exercise- Showing an Alert
05:03
24
1- Introduction
00:27
25
2- Vanilla CSS
04:12
26
3- CSS Modules
03:46
27
4- CSS-in-JS
07:52
28
5- Separation of Concerns
02:31
29
6- Inline Styles
01:03
30
7- Popular UI Libraries
02:04
31
8- Adding Icons
01:53
32
9- Exercise- Using CSS Modules
03:01
33
10- Building a Like Component
05:20
34
1- Introduction
00:26
35
2- Understanding the State Hook
04:29
36
3- Choosing the State Structure
02:57
37
4- Keeping Components Pure
02:04
38
5- Understanding the Strict Mode
02:43
39
6- Updating Objects
02:22
40
7- Updating Nested Objects
02:16
41
8- Updating Arrays
01:50
42
9- Updating Array of Objects
01:47
43
10- Simplifying Update Logic with Immer
02:57
44
11- Sharing State between Components
06:23
45
12- Exercise- Updating State
04:50
46
13- Exercise- Building an ExpandableText Component
06:23
47
1- Introduction
00:25
48
2- Building a Form
03:46
49
3- Handling Form Submission
02:24
50
4- Accessing Input Fields
05:47
51
5- Controlled Components
04:34
52
6- Managing Forms with React Hook Form
04:34
53
7- Applying Validation
05:39
54
8- Schema based Validation with Zod
07:34
55
9- Disabling the Submit Button
00:46
56
10- Project- Expense Tracker
01:24
57
11- Building ExpenseList
10:29
58
12- Building ExpenseFilter
05:52
59
13- Building the Expense Form
04:37
60
14- Integrating with React Hook Form and Zod
09:55
61
15- Adding an Expense
03:36
62
1- Introduction
00:54
63
2- Understanding the Effect Hook
03:51
64
3- Effect Dependencies
08:35
65
4- Effect Clean Up
02:31
66
5- Fetching Data
05:33
67
6- Understanding HTTP Requests
03:03
68
7- Handling Errors
02:04
69
8- Working with Async and Await
04:22
70
9- Cancelling a Fetch Request
02:28
71
10- Showing a Loading Indicator
03:03
72
11- Deleting Data
05:51
73
12- Creating Data
05:10
74
13- Updating Data
05:26
75
14- Extracting a Reusable API Client
03:56
76
15- Extracting the User Service
08:23
77
16- Creating a Generic HTTP Service
08:01
78
17- Creating a Custom Data Fetching Hook
03:54
79
1- What We'll Build
01:24
80
3- Setting Up the Project
01:32
81
4- Installing Chakra UI
05:01
82
5- Creating a Responsive Layout
04:54
83
6- Building the Navigation Bar
03:59
84
7- Implementing the Dark Mode
02:45
85
8- Building the Г‡olor Mode Switch
03:37
86
9- Fetching the Games
08:20
87
10- Creating a Custom Hook for Fetching Games
05:00
88
11- Building Game Cards
06:09
89
12- Displaying Platform Icons
13:43
90
13- Displaying Critic Score
04:21
91
14- Getting Optimized Images
03:57
92
15- Improving User Experience with Loading Skeletons
05:38
93
16- Refactor- Removing Duplicated Styles
02:35
94
17- Fetching the Genres
04:32
95
18- Creating a Generic Data Fetching Hook
06:43
96
19- Displaying the Genres
08:53
97
20- Showing a Spinner
01:28
98
21- Filtering Games by Genre
12:34
99
22- Highlighting the Selected Genre
01:44
100
23- Building Platform Selector
04:31
101
24- Filtering Games by Platform
06:16
102
25- Refactoring- Extracting a Query Object
05:12
103
26- Building Sort Selector
03:00
104
27- Sorting Games
08:11
105
28- Handling Games without an Image
01:08
106
29- Fixing the Issue with Chakra Menus
01:29
107
30- Building Search Input
02:39
108
31- Searching Games
06:06
109
32- Adding a Dynamic Heading
04:39
110
33- Cleaning Up the Genres
02:21
111
34- Cleaning Up the Game Cards
01:24
112
35- Adding Emojis
05:36
113
36- Shipping Static Data
03:17
114
37- Customizing the Chakra Theme
02:58
115
38- Refactoring Game Grid
00:57
116
39- Building for Production
02:50
117
40- Deploying to Vercel
04:43
118
41- What's Next
00:31
119
42- Course Wrap Up
00:26
Unlock unlimited learning

Get instant access to all 118 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription