React for Beginners

7h 58m 3s
English
Paid

Course description

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.

Read more about the course

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

Watch Online

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

Watch Online React for Beginners

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

FULL Authentication WITH REACT JS NEXT JS TYPESCRIPT

Sources: udemy
This is simply the best course on the internet if you want to build and deploy the best authentication system that you can take and use in all of your projects
6 hours 52 minutes 28 seconds
React Router v4

React Router v4

Sources: ui.dev (ex. Tyler McGinnis)
For good reason, React Router is the most popular 3rd party library in the React ecosystem. If you're using React, odds are you're also using React Router. React Router v4 intro...
6 hours 44 minutes 1 second
React Component Testing with Vitest

React Component Testing with Vitest

Sources: Artem Zakharchenko
The closer your tests imitate real application usage, the more confidence they provide. However, for a long time, web developers had to...
1 hour 38 minutes 34 seconds
Mastering Next.js - 50+ Lesson Video Course on React and Next

Mastering Next.js - 50+ Lesson Video Course on React and Next

Sources: masteringnuxt.com
The premiere video course for building static and server-side rendered applications with Next.js and React. Sign up now and get two videos instantly!
5 hours 9 minutes 45 seconds
Learn React 19 with Epic React v2

Learn React 19 with Epic React v2

Sources: Kent C. Dodds
Ready for the React 19 revolution? The most in-demand JavaScript framework has received a major update! You are already familiar with React, but in React 19 the
26 hours 51 minutes 3 seconds