React for Beginners

Name: React for Beginners
Price: 9 USD
Availability: InStock

7h 58m 3s

English

Paid

March 6, 2024

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.

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

React for Beginners

Watch Online React for Beginners

Similar courses to React for Beginners

Full-Stack React with GraphQL and Apollo Boost

Understanding React | Don’t Imitate Understand

React Node FullStack - Ecommerce from Scratch to Deployment

Zero to Full Stack Hero

Building Applications with React 17 and ASP.NET Core 6

React Simplified - Advanced

React and NestJS: A Practical Guide with Docker

Crash Course: Build a Full-Stack Web App in a Weekend!