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

React Chrome Extension boilerplate | Shipped

React Chrome Extension boilerplate | ShippedLuca Restagno (shipped.club)

Category: React.js, Assemblies, ready-made solutions for development
Duration
AWS AppSync & Amplify with React & GraphQL - Complete Guide

AWS AppSync & Amplify with React & GraphQL - Complete Guideudemy

Category: React.js, AWS, GraphQL
Duration 11 hours 11 minutes 36 seconds
Build fancy landing pages with React and Threejs

Build fancy landing pages with React and ThreejsPaul Henschel (@0xca0a)

Category: React.js, Three.js
Duration 38 minutes 9 seconds
Make 20 React Apps

Make 20 React AppsChris Sev

Category: React.js
Duration 12 hours 20 minutes 3 seconds
React and Django: A Practical Guide with Docker

React and Django: A Practical Guide with Dockerudemy

Category: React.js, Docker, Django
Duration 6 hours 50 minutes 20 seconds
React Testing Library and Jest: The Complete Guide

React Testing Library and Jest: The Complete GuideudemyStephen Grider

Category: React.js
Duration 7 hours 40 minutes 24 seconds
Master Class: React + Typescript 2021 Web Development

Master Class: React + Typescript 2021 Web Developmentudemy

Category: TypeScript, React.js
Duration 22 hours 4 minutes 13 seconds
Testing React Apps with React Testing Library

Testing React Apps with React Testing Librarycodewithmosh (Mosh Hamedani)

Category: React.js
Duration 6 hours 48 minutes 20 seconds
Starting with React & Redux: Build modern apps (2nd edition)

Starting with React & Redux: Build modern apps (2nd edition)udemy

Category: React.js, Redux
Duration 30 hours 13 minutes 51 seconds