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 Joy of React

The Joy of ReactJosh Comeau

Category: React.js, Next.js
Duration 25 hours 35 minutes 33 seconds
Magic UI Pro

Magic UI ProDillion Verma

Category: React.js, Next.js, Other (Mobile Apps Development)
Duration
React Supabase Full Course

React Supabase Full Coursefireship.io

Category: React.js
Duration 1 hour 39 minutes 49 seconds
Build a Spotify Connected App

Build a Spotify Connected Appfullstack.io

Category: React.js, Node.js
Duration 3 hours 47 minutes 28 seconds
React Summit Remote Edition 2021

React Summit Remote Edition 2021reactsummit.com

Category: React.js, Conferences
Duration 16 hours 1 minute 10 seconds
Learn React Hooks By Building A Real Application

Learn React Hooks By Building A Real Applicationreacttraining (Ryan Florence)

Category: React.js
Duration 7 hours 14 minutes 44 seconds
Full Stack Advanced React + GraphQL

Full Stack Advanced React + GraphQLwesbos

Category: React.js, GraphQL
Duration 15 hours 43 minutes 10 seconds
Add React Storybook to a Project

Add React Storybook to a Projectegghead

Category: React.js
Duration 3 minutes 36 seconds
MERN Invoice Web App with Docker,NGINX and ReduxToolkit

MERN Invoice Web App with Docker,NGINX and ReduxToolkitudemy

Category: React.js
Duration 24 hours 38 minutes 4 seconds
MERN Stack - React Node from Scratch Building Social Network

MERN Stack - React Node from Scratch Building Social Networkudemy

Category: React.js, Node.js, MongoDB
Duration 20 hours 49 minutes 20 seconds