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 STACK 2022 - Build Ultimate CMS (WordPress Clone)udemy
Category: React.js, Node.js, MongoDB
Duration 34 hours 4 minutes 17 seconds
Course

React Summit Remote Edition 2021reactsummit.com
Category: React.js, Conferences
Duration 16 hours 1 minute 10 seconds
Course

Complete React Developer in 2023 (w/ Redux, Hooks, GraphQL)udemyzerotomastery.io
Category: React.js, Redux
Duration 39 hours 24 minutes 36 seconds
Course

MERN Invoice Web App with Docker,NGINX and ReduxToolkitudemy
Category: React.js
Duration 24 hours 38 minutes 4 seconds
Course

Stripe Payments JavaScript Coursefireship.io
Category: React.js, Node.js
Duration 1 hour 29 minutes 26 seconds
Course

Go Full Stack with Spring Boot and Reactudemy
Category: React.js, Spring Boot, Spring Security
Duration 11 hours 43 minutes 36 seconds
Course

React Router v5ui.dev (ex. Tyler McGinnis)
Category: React.js
Duration 3 hours 38 minutes 49 seconds
Course

Responsive LLM Applications with Server-Sent Eventsfullstack.io
Category: TypeScript, React.js, Python
Duration 1 hour 18 minutes 18 seconds
Course

Redux Sagapluralsight
Category: React.js, Redux
Duration 2 hours 54 minutes 54 seconds
Course