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.

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 React for Beginners

Join premium to watch
Go to premium
# Title Duration
1 1- Welcome 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

Similar courses to React for Beginners

MERN 2024 Edition - MongoDB, Express, React and NodeJS

MERN 2024 Edition - MongoDB, Express, React and NodeJSudemy

Category: React.js, Node.js, MongoDB
Duration 19 hours 7 minutes
NFT Marketplace in React, Typescript & Solidity - Full Guide

NFT Marketplace in React, Typescript & Solidity - Full Guideudemy

Category: TypeScript, React.js, Decentralized Applications (dApps) / 'Web 3'
Duration 16 hours 20 minutes 55 seconds
Building Large Scale Web Apps | A React Field Guide
Master Full-Stack Web Development | Node, SQL, React, & More

Master Full-Stack Web Development | Node, SQL, React, & Moreudemy

Category: React.js, Node.js
Duration 18 hours 36 minutes 51 seconds
Fullstack ASP.NET Core and React Masterclass | Learnify

Fullstack ASP.NET Core and React Masterclass | Learnify fullstack.io

Category: React.js, C Sharp (C#)
Duration 20 hours 40 minutes 31 seconds
React Three Fiber: The Ultimate Guide to 3D Web Developmen

React Three Fiber: The Ultimate Guide to 3D Web DevelopmenWawa Sensei

Category: React.js, Three.js
Duration 9 hours 18 minutes 15 seconds
Advanced Animating React with Framer Motion

Advanced Animating React with Framer Motionleveluptutorials

Category: React.js
Duration 2 hours 57 minutes 30 seconds
Doctor Appointment Booking App with React ,Firebase , ANT D

Doctor Appointment Booking App with React ,Firebase , ANT Dudemy

Category: React.js
Duration 5 hours 45 minutes 20 seconds
PHP Symfony 4 API Platform + React.js Full Stack Masterclass

PHP Symfony 4 API Platform + React.js Full Stack Masterclassudemy

Category: React.js, Symfony
Duration 19 hours 24 minutes 17 seconds