CF

React Simplified - Beginner

10h 58m 46s
English
Paid

React Simplified - Beginner is a 80-lesson 10 hours 58 minutes self-paced course by Web Dev Simplified (Kyle Cook). A complete video course with just under 11 hours of content spread across 79 videos and 10 modules.

Course facts

Lessons
80
Duration
10 hours 58 minutes
Level
All levels
Language
English
Updated
Instructor
Web Dev Simplified (Kyle Cook)
Price
Premium

A complete video course with just under 11 hours of content spread across 79 videos and 10 modules.

This may be called a Beginner Course, but it doesn't just stop after covering the basics. This course covers everything you need to know to be a good React developer, and will ensure that you know how to think like a React developer.

I know this sounds crazy, but this course will take you from knowing nothing about React to being able to build complex React applications on your own. Even if you already have some React knowledge, the content in this course will expand upon your current skills and push you to new levels of understanding.

While 11 hours may not seem like a lot if you are used to long Udemy courses, I can assure you this course is packed with information. Each minute is as condensed as possible with knowledge, projects, and exercises which means not a single second of your time with this course is wasted. I spent months crafting this course to shave every unnecessary second off of so none of your time with this course will be wasted.

Also, if you plan to get through this course in only 11 hours, good luck. With all the projects and exercises in this course it will easily take you over a month to get through everything, and that is if you work on the course every single day!

There are 16 projects and exercises in this course for you to complete with some taking days to finish. This doesn't even include the plethora of smaller exercises embedded into each video.

Additional

https://github.com/WebDevSimplified/React-Simplified-Beginner-Projects

Who teaches React Simplified - Beginner? Web Dev Simplified (Kyle Cook)

Web Dev Simplified (Kyle Cook) thumbnail

Web Dev Simplified (webdevsimplified.com) is the online course platform of Kyle Cook, a US developer behind one of the larger independent web-development YouTube channels. The channel publishes weekly tutorials on JavaScript, React, CSS, and the modern web ecosystem, with paid courses extending the most-requested topics into deeper long-form material.

The course catalog covers JavaScript fundamentals (the canonical JavaScript Simplified course), modern CSS (including Grid, Flexbox, animations), React deep-dives, the testing tracks, and the algorithm / data-structure material aimed at junior developers preparing for early-career interviews. Material is taught at a deliberately accessible level for self-taught developers.

The CourseFlix listing under this source carries 9 Web Dev Simplified courses spanning that range. Material is paid; courses are sold individually on the original platform. Courses are aimed primarily at junior and self-taught developers building real proficiency.

What lessons are included in React Simplified - Beginner?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 80 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 01 - Course Introduction
All Course Lessons (80)
#Lesson TitleDurationAccess
1
01 - Course Introduction Demo
06:43
2
02 - React Is Hard
04:30
3
03 - Don't Get Discouraged
02:51
4
04 - What Is React
03:21
5
05 - Download Tools
01:56
6
06 - Prettier
03:11
7
07 - Your First React App
07:44
8
08 - Your First Vite React App
06:13
9
08.5 - Vite ESlint
03:44
10
09 - Thinking In Components
07:58
11
10 - JSX Basics
15:18
12
11 - Creating Components
09:38
13
12 - Props
13:38
14
13 - Declarative Vs Imperative
05:04
15
14 - Importing Non-JS Files
03:05
16
15 - User Card Introduction
06:55
17
16 - User Card Walkthrough
06:14
18
17 - useState Hook
21:07
19
18 - State In Class Components
08:30
20
19 - Input Event Listeners
04:08
21
20 - Array State Project
17:02
22
21 - Counter With Name Project Introduction
01:06
23
22 - Counter With Name Project Walkthrough
06:45
24
23 - Virtual DOM
05:35
25
24 - Component Lifecycle
02:24
26
25 - useEffect Hook
14:23
27
26 - useEffect Hook Exercises Introduction
02:32
28
27 - useEffect Hook Exercises Walkthrough
06:51
29
28 - Class Component Lifecycle Methods
05:41
30
29 - Class Component Lifecycle Methods Exercises Introduction
00:33
31
30 - Class Component Lifecycle Methods Exercises Walkthrough
05:39
32
31 - StrictMode
06:22
33
32 - Fetching Data From An API
09:08
34
33 - React Dev Tools
08:13
35
34 - Conditional Rendering
06:17
36
35 - Rendering Lists
07:30
37
36 - Fragments
02:49
38
37 - User List Project Introduction
01:54
39
38 - User List Project Walkthrough
07:29
40
39 - Spread Props
01:53
41
40 - Render Raw HTML
02:14
42
41 - Simple Todo List Project Introduction
02:15
43
42 - Simple Todo List Project Walkthrough
11:21
44
43 - Hook Rules
05:25
45
44 - useRef Hook
07:29
46
45 - Refs In Class Components
02:01
47
46 - useMemo Hook
06:04
48
47 - useCallback Hook
05:05
49
48 - Custom Hooks
07:05
50
49 - useFetch Custom Hook Project Introduction
02:43
51
50 - useFetch Custom Hook Project Walkthrough
08:32
52
51 - useArray Custom Hook Project Introduction
01:57
53
52 - useArray Custom Hook Project Walkthrough
09:54
54
53 - useLocalStorage Custom Hook Project Introduction
02:45
55
54 - useLocalStorage Custom Hook Project Walkthrough
06:36
56
55 - Form Basics
06:15
57
56 - One Way Data Flow
03:18
58
57 - useState vs useRef
03:46
59
58 - Basic Form Validation Project Introduction
03:22
60
59 - Basic Form Validation Project Walkthrough
22:28
61
60 - Form Libraries
06:57
62
61 - React Hook Form Implementation
18:12
63
62 - useReducer Hook
20:41
64
63 - useContext Hook
09:23
65
64 - Context In Class Components
03:16
66
65 - Local State Is Best
07:39
67
66 - Never Store Derived State
08:20
68
67 - Environment Variables
05:57
69
68 - Advanced Todo List Introduction
02:40
70
69 - Advanced Todo List Walkthrough
25:14
71
70 - Routing Without A Library
06:24
72
71 - React Router Basics
08:33
73
72 - Nested Routes
18:14
74
73 - Dynamic Routes
11:02
75
74 - Loaders
09:21
76
75 - Basic Routing Project Introduction
06:52
77
76 - Basic Routing Project Walkthrough
54:25
78
77 - Actions
17:02
79
78 - Advanced Routing Project Introduction
03:27
80
79 - Advanced Routing Project Walkthrough
32:38
Unlock unlimited learning

Get instant access to all 79 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to React Simplified - Beginner?

Frequently asked questions

What prerequisites should I have before enrolling in this course?
Before enrolling, it's helpful to have a basic understanding of HTML, CSS, and JavaScript. The course assumes familiarity with these foundational web technologies, as it dives directly into React and related concepts like JSX, components, and hooks. However, it is designed to accommodate complete beginners to React, so prior experience with the library is not necessary.
What projects will I build during the course?
The course includes 16 projects and exercises, some of which are covered in detail in the lesson list. These include building a User Card, a Counter with Name, a User List, a Simple Todo List, and various custom hooks projects such as useFetch, useArray, and useLocalStorage. These projects are designed to solidify understanding of React concepts and provide practical experience.
Who is the target audience for this course?
This course is ideal for beginners who are new to React as well as individuals with some React experience looking to deepen their understanding. It is designed to take students from knowing little about React to being capable of building complex applications independently. Developers seeking to solidify their React skills will find the structured approach beneficial.
How does the depth and scope of this course compare to other React courses?
This course focuses on providing a condensed yet comprehensive overview of React. It covers foundational topics like JSX, components, and hooks, as well as advanced topics such as custom hooks and lifecycle methods. While it is an 11-hour course, the projects and exercises are designed to extend learning over a month, offering depth similar to longer courses.
Which specific tools or platforms are used in this course?
The course makes use of tools such as Vite for setting up React applications, Prettier for code formatting, and React Dev Tools for debugging. Lessons guide students through setting up their first React app with Vite and configuring ESLint. These tools are essential for a modern React development workflow.
What topics are not covered in this course?
The course does not cover server-side rendering, advanced state management libraries such as Redux, or deployment strategies for React applications. It is primarily focused on client-side React development with hooks and components. Those interested in full-stack React applications or advanced state management may need to seek additional resources.
What is the expected time commitment for completing the course?
While the video content totals just under 11 hours, the course includes numerous projects and exercises that can extend the total time commitment to over a month. This estimate assumes daily work on the course content. The projects and exercises are designed to reinforce learning and require additional time beyond the video lectures.