CF

React for Beginners

7h 58m 3s
English
Paid

React for Beginners is a 119-lesson 7 hours 58 minutes self-paced course by Mosh Hamedani (Code with Mosh). React is the most popular JavaScript library for building front-ends.

Course facts

Lessons
119
Duration
7 hours 58 minutes
Level
All levels
Language
English
Updated
Instructor
Mosh Hamedani (Code with Mosh)
Price
Premium

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

Who teaches React for Beginners? 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.

What lessons are included in React for Beginners?

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

What courses are similar to React for Beginners?

Frequently asked questions

What prerequisites are needed before starting this React course?
Before taking this course, you should be familiar with HTML, CSS, and JavaScript. A basic understanding of programming concepts is beneficial, as the course will dive into React, a JavaScript library. Lesson 2, 'Prerequisites', will provide a detailed overview of the foundational knowledge required to understand React effectively.
What kind of project will I build in this course?
The course includes building a full-blown production-grade project, specifically an Expense Tracker application. In the latter part of the course, lessons cover building components such as ExpenseList, ExpenseFilter, and the Expense Form. These lessons provide practical, hands-on experience in applying React concepts to real-world projects.
Who is the target audience for this React course?
This course is designed for beginners interested in learning React for building web, mobile, and desktop applications. It is particularly suited for software developers and engineers who want to enhance their front-end development skills using one of the most popular JavaScript libraries.
How does the depth of this course compare to other beginner React courses?
The course offers a comprehensive introduction to React, covering foundational topics like components, state and props, and advanced topics such as hooks and state management. With 119 lessons, it provides a more detailed exploration than many beginner courses, using real-world examples and best practices. The course also includes exercises to reinforce learning, making it thorough for beginners.
What specific tools and platforms are used in the course?
The course utilizes a variety of tools and platforms integral to React development. It covers React Dev Tools for inspecting components, CSS-in-JS for styling, and React Hook Form for managing forms. Additionally, the course introduces schema-based validation using Zod and popular UI libraries to facilitate efficient development.
What topics are not covered in this React course?
While the course covers a broad range of React topics, it does not delve into advanced topics such as server-side rendering with Next.js, React Native for mobile development, or complex state management libraries like Redux. The focus is primarily on core React concepts and best practices for beginners.
What is the expected time commitment to complete the course?
The course consists of 119 lessons, each varying in length. While the total runtime is not specified, learners should expect to spend several hours per week watching videos, completing exercises, and building projects. The time commitment will vary based on individual pace and prior experience with JavaScript and programming.