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

The Road to NextRobin Wieruch
Category: React.js, Next.js
Duration 30 hours 40 minutes 42 seconds
Course

Microservices with NodeJS, React, Typescript and Kubernetesudemy
Category: TypeScript, React.js, Node.js, Kubernetes
Duration 95 hours 13 minutes 4 seconds
Course

Build a Notion Clone with React and TypeScriptzerotomastery.io
Category: TypeScript, React.js
Duration 7 hours 57 minutes 47 seconds
Course

React Summit 2024 - Amsterdamreactsummit.com
Category: React.js, Conferences
Duration 18 hours 56 minutes 36 seconds
Course

Build Web Apps with React & Firebaseudemy
Category: React.js, Firebase
Duration 23 hours 34 minutes 47 seconds
Course

Learn React Hooks By Building A Real Applicationreacttraining (Ryan Florence)
Category: React.js
Duration 7 hours 14 minutes 44 seconds
Course

React and NestJS: A Practical Guide with Dockerudemy
Category: React.js, Docker, NestJS
Duration 6 hours 54 minutes 20 seconds
Course

The interactive way to master modern React - react.gg (FULL COURSE)ui.dev (ex. Tyler McGinnis)
Category: React.js
Duration 7 hours 53 minutes 34 seconds
Course
![Modern React with Redux [2023 Update]](https://cdn.courseflix.net/courses/100x56/modern-react-with-redux-2023-update.jpg?d=1745099732021)
Modern React with Redux [2023 Update]udemyStephen Grider
Category: React.js, Redux
Duration 37 hours 44 minutes 46 seconds
Course