CF

Classic React

4h 10m 15s
English
Paid

This course helps you learn React from the first steps to real projects. You follow a clear path. You start with core ideas, then build apps with confidence. You do not need to hunt for random guides or old videos.

What You Learn

You learn how React works at its core. You also learn how to work with state, props, and events. You build small parts first, then full features.

Core Skills

  • Work with components
  • Share data with props
  • Manage state changes
  • Handle user input

How the Course Flows

The lessons follow a simple order. Each topic builds on the last. You write code early and often.

Hands-On Practice

You solve tasks in each module. These tasks help you check your understanding. They also prepare you for larger apps.

Building Real Projects

You build full React apps near the end of the course. You use the tools and patterns you learned. By then, you know how each piece works.

About the Author: Build UI

Build UI thumbnail

Build UI is the paid screencast platform of Sam Selikoff and Ryan Toronto, both former Frontside / EmberConf instructors and now full-time independent React educators. The platform's signature is short, focused screencasts on specific React and Next.js patterns rather than multi-hour course bundles.

The CourseFlix listing carries six Build UI courses spanning React data fetching, server components, Next.js App Router patterns, and the practical side of building modern React applications. Material is paid and aimed at intermediate React developers who already know the basics and want depth on the patterns that show up in real production codebases.

Watch Online 54 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Why React
All Course Lessons (54)
#Lesson TitleDurationAccess
1
Why React Demo
09:59
2
(Bonus) Imperative vs Declarative Programming
04:38
3
An Introduction to npm
06:06
4
Webpack- A Gentle Introduction
08:48
5
(Project) First Component
29:57
6
JSX Tips and Gotchas
02:54
7
(Bonus) Elements vs Components
01:00
8
Props
01:40
9
(Solution) Props 1
01:00
10
(Solution) Props 2
00:56
11
(Solution) Props 3
02:07
12
Rendering Lists
01:20
13
(Solution) Rendering Lists 1
00:44
14
(Project) Popular Navbar
05:12
15
The -this- keyword
13:35
16
Managing State in React
03:11
17
(Solution) State 1
01:17
18
(Solution) State 2
01:51
19
(Solution) State 3
01:10
20
(Project) Navbar State
03:13
21
Function Components
01:01
22
(Project) Languages Nav
03:01
23
PropTypes
02:16
24
(Solution) PropTypes
02:25
25
(Project) Language Nav PropTypes
01:27
26
The Component Lifecycle
03:56
27
(Project) Fetch Repos
07:22
28
(Project) Repositories Table
07:45
29
Controlled vs Uncontrolled Components
02:08
30
(Project) Player Input
12:31
31
(Project) Player Preview
06:04
32
(Project) Result's Skeleton
03:02
33
(Project) API
09:20
34
(Project) Results
06:20
35
children in React
01:01
36
Default Props
01:05
37
(Project) Loading Component
08:57
38
Higher Order Components
04:47
39
(Project) Tooltip
06:35
40
(Project) withHover Higher Order Component
04:53
41
Render Props
02:16
42
(Project) Hover Render Prop
03:33
43
React Context
04:57
44
React Router - The Fundamentals
02:24
45
(Project) Adding Routes
02:57
46
(Project) Navbar
07:52
47
React Router Query Strings
02:38
48
(Project) withSearchParams
07:37
49
Class Fields
02:14
50
(Project) Migrating to Class Fields
03:33
51
Code Splitting
05:30
52
(Project) Code Splitting
01:45
53
(Project) Production Build
02:06
54
(Project) Hosting with Vercel
04:19
Unlock unlimited learning

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

Learn more about subscription

Course content

54 lessons · 4h 10m 15s
Show all 54 lessons
  1. 1 Why React 09:59
  2. 2 (Bonus) Imperative vs Declarative Programming 04:38
  3. 3 An Introduction to npm 06:06
  4. 4 Webpack- A Gentle Introduction 08:48
  5. 5 (Project) First Component 29:57
  6. 6 JSX Tips and Gotchas 02:54
  7. 7 (Bonus) Elements vs Components 01:00
  8. 8 Props 01:40
  9. 9 (Solution) Props 1 01:00
  10. 10 (Solution) Props 2 00:56
  11. 11 (Solution) Props 3 02:07
  12. 12 Rendering Lists 01:20
  13. 13 (Solution) Rendering Lists 1 00:44
  14. 14 (Project) Popular Navbar 05:12
  15. 15 The -this- keyword 13:35
  16. 16 Managing State in React 03:11
  17. 17 (Solution) State 1 01:17
  18. 18 (Solution) State 2 01:51
  19. 19 (Solution) State 3 01:10
  20. 20 (Project) Navbar State 03:13
  21. 21 Function Components 01:01
  22. 22 (Project) Languages Nav 03:01
  23. 23 PropTypes 02:16
  24. 24 (Solution) PropTypes 02:25
  25. 25 (Project) Language Nav PropTypes 01:27
  26. 26 The Component Lifecycle 03:56
  27. 27 (Project) Fetch Repos 07:22
  28. 28 (Project) Repositories Table 07:45
  29. 29 Controlled vs Uncontrolled Components 02:08
  30. 30 (Project) Player Input 12:31
  31. 31 (Project) Player Preview 06:04
  32. 32 (Project) Result's Skeleton 03:02
  33. 33 (Project) API 09:20
  34. 34 (Project) Results 06:20
  35. 35 children in React 01:01
  36. 36 Default Props 01:05
  37. 37 (Project) Loading Component 08:57
  38. 38 Higher Order Components 04:47
  39. 39 (Project) Tooltip 06:35
  40. 40 (Project) withHover Higher Order Component 04:53
  41. 41 Render Props 02:16
  42. 42 (Project) Hover Render Prop 03:33
  43. 43 React Context 04:57
  44. 44 React Router - The Fundamentals 02:24
  45. 45 (Project) Adding Routes 02:57
  46. 46 (Project) Navbar 07:52
  47. 47 React Router Query Strings 02:38
  48. 48 (Project) withSearchParams 07:37
  49. 49 Class Fields 02:14
  50. 50 (Project) Migrating to Class Fields 03:33
  51. 51 Code Splitting 05:30
  52. 52 (Project) Code Splitting 01:45
  53. 53 (Project) Production Build 02:06
  54. 54 (Project) Hosting with Vercel 04:19

Related courses

  • Node with React: Fullstack Web Development thumbnailUpdated 2y ago

    Node with React: Fullstack Web Development

    By: Udemy, Stephen Grider
    Go beyond the basics of React and Redux! This course will teach you to combine the ultra-popular React, Redux, Express, and MongoDB technologies to build a full
    25 hours 36 minutes 19 seconds
  • React Simplified - Advanced thumbnailUpdated 1y ago

    React Simplified - Advanced

    By: Web Dev Simplified (Kyle Cook)
    Once you become a good React developer, it is time to start diving into advanced React concepts. This course will take you from a junior to a mid-level React d
    11 hours 34 minutes 10 seconds 5 / 5
  • React and NodeJS: A Practical Guide with Typescript thumbnailUpdated 2y ago

    React and NodeJS: A Practical Guide with Typescript

    By: Udemy
    I'm a FullStack Developer with 10+ years of experience. I'm obsessed with clean code and I try my best that my courses have the cleanest code possible. My teach
    6 hours 54 minutes 59 seconds 5 / 5

Frequently asked questions

What is Classic React about?
This course helps you learn React from the first steps to real projects. You follow a clear path. You start with core ideas, then build apps with confidence. You do not need to hunt for random guides or old videos. What You Learn You learn…
Who teaches this course?
It is taught by Build UI. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 54 lessons with a total runtime of 4 hours 10 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/classic-react. The page hosts every lesson with the integrated video player; no download is required.