CF

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

Additional

https://github.com/mosh-hamedani/react-course-part1

https://github.com/mosh-hamedani/game-hub

About the Author: Mosh Hamedani (Code with Mosh)

Mosh Hamedani (Code with Mosh) thumbnail

Mosh Hamedani is the founder of Code with Mosh, one of the highest-volume independent online instructors in software education. He has been publishing courses continuously since the early Udemy era and has taught over a million students across his Udemy catalog and his standalone Code with Mosh platform. His teaching style is patient, rigorously structured, and deliberately beginner-tolerant — the courses are widely cited as some of the most accessible introductions to their respective topics.

The Code with Mosh catalog covers an unusually wide span: web development with HTML / CSS / JavaScript / React / Angular / Node.js, Python and Django, C# and .NET, mobile development with React Native and Flutter, SQL and database fundamentals, and the algorithm / data-structure interview prep tracks. Few independent instructors maintain this much breadth at consistent quality.

The CourseFlix listing under this source carries over 35 Code with Mosh courses spanning that range. Material is paid; Code with Mosh runs on per-course pricing on the original platform. Courses are aimed primarily at developers picking up a new technology from a clean start through to working production proficiency.

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

Related courses

Frequently asked questions

What is React for Beginners about?
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…
Who teaches this course?
It is taught by Mosh Hamedani (Code with Mosh). You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 119 lessons with a total runtime of 7 hours 58 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/react-for-beginners. The page hosts every lesson with the integrated video player; no download is required.