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

  • React - The full course thumbnailUpdated 2y ago

    React - The full course

    By: Fireship
    React - The Full Course is unlike any other React course on the Internet. It provides a fast-paced introduction to essential concepts, then puts them.
    1 hour 20 minutes 10 seconds
  • React, Angular, Node In-Depth Guide: Beginner to Pro thumbnailUpdated 2y ago

    React, Angular, Node In-Depth Guide: Beginner to Pro

    By: Udemy
    If you are planning to start your career as a developer or you just want to improve your programming skills, then this course is right for you. Get all you need
    80 hours 1 minute 57 seconds
  • Redux Saga thumbnailUpdated 2y ago

    Redux Saga

    By: Pluralsight
    Redux Saga is a fast-growing library with over 9,000 stars on GitHub. It lets you rapidly create asynchronous apps using a new tool called ES6 Generators. In th
    2 hours 54 minutes 54 seconds

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 Classic React?
Classic React is taught by Build UI. You can find more courses by this instructor on the corresponding source page.
How long is Classic React?
Classic React contains 54 lessons with a total runtime of 4 hours 10 minutes. All lessons are available to watch online at your own pace.
Is Classic React free to watch?
Classic React is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Classic React online?
Classic React 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.