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 Supabase Full Coursefireship.io
Category: React.js
Duration 1 hour 39 minutes 49 seconds
Course

React Queryui.dev (ex. Tyler McGinnis)
Category: React.js
Duration 7 hours 1 minute 30 seconds
Course

React Query (OLD)ui.dev (ex. Tyler McGinnis)
Category: React.js
Duration 7 hours 1 minute 30 seconds
Course

CodeFast | Learn to code in weeks, not months.Marc Lou
Category: React.js, Next.js
Duration 11 hours 38 minutes 42 seconds
Course

MERN React Node Next.js Multi User SEO Blogging Platformudemy
Category: React.js, Next.js, Node.js
Duration 20 hours 25 minutes 13 seconds
Course

Python/Django + React QR Digital Menu BuilderPythonYoga
Category: React.js, Python
Duration 10 hours 49 minutes 22 seconds
Course

React & TypeScript - The Practical GuideAcademind Pro
Category: TypeScript, React.js
Duration 7 hours 22 minutes 54 seconds
Course

The Joy of ReactJosh Comeau
Category: React.js, Next.js
Duration 25 hours 35 minutes 33 seconds
Course

Learn React 19 with Epic React v2Kent C. Dodds
Category: TypeScript, React.js
Duration 26 hours 51 minutes 3 seconds
Course