CF

Classic React

4h 10m 15s
English
Paid

Classic React is a 54-lesson 4 hours 10 minutes self-paced course by Build UI. This course helps you learn React from the first steps to real projects.

Course facts

Lessons
54
Duration
4 hours 10 minutes
Level
All levels
Language
English
Updated
Instructor
Build UI
Price
Premium

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.

Who teaches Classic React? 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.

What lessons are included in Classic React?

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

What courses are similar to Classic React?

  • My first Remix app thumbnailUpdated 3y ago

    My first Remix app

    By: Build UI
    Remix is a modern full-stack React framework built on the foundations of the web platform. It layers the latest innovations in the frontend ecosystem on top of
    5h5/5
  • Mastering React.js Interviews: From 0 to Hero thumbnailUpdated 5mo ago

    Mastering React.js Interviews: From 0 to Hero

    By: Kristiyan Velkov
    This book is your guide to preparing for interviews on React.js. Master key concepts and techniques for successfully navigating interviews.
    5/5
  • Zero to Full Stack Hero thumbnailUpdated 2y ago

    Zero to Full Stack Hero

    By: PAPA React (Sonny Sangha)
    PAPA React presents.. Zero to Full Stack Hero. It's NOT just another COURSE. It's the world's BEST COMMUNITY.
    101h 29m5/5
  • React for Beginners thumbnailUpdated 2y ago

    React for Beginners

    By: Mosh Hamedani (Code with Mosh)
    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.
    7h 58m
  • ReactJS Ultra for Beginners thumbnailUpdated 3mo ago

    ReactJS Ultra for Beginners

    By: Pedro Henrique Machado
    Master ReactJS from scratch by learning components, states, routing, and forms through practical projects. This course will help you confidently apply React...
    14h 58m
  • React & TypeScript - The Practical Guide thumbnailUpdated 2y ago

    React & TypeScript - The Practical Guide

    By: Academind Pro (Maximilian Schwarzmüller)
    TypeScript is an amazing technology that helps developers write better code with less errors - simply because it let's you catch & fix type-related errors.
    7h 22m5/5
  • React: Flux Architecture (ES6) thumbnailUpdated 3y ago

    React: Flux Architecture (ES6)

    By: egghead.io
    As a React application grows, so does the needs for organization and patterns. How do components communicate? How do we manage state across the application? How
    49m

More courses by Build UI

Frequently asked questions

What are the prerequisites for this course?
The course does not explicitly list prerequisites, but familiarity with JavaScript basics would be beneficial. The course begins with foundational topics like 'An Introduction to npm' and 'Webpack- A Gentle Introduction', suggesting some prior understanding of JavaScript and web development tools would be helpful.
What projects will I build in this course?
Throughout the course, you will build several projects that reinforce the concepts taught. Early projects include creating a 'Popular Navbar' and handling 'Navbar State'. Later, you will develop more complex applications such as 'Fetch Repos', 'Repositories Table', and implement routing with 'Adding Routes'. The course culminates in deploying a production build using Vercel.
Who is the target audience for this course?
This course is designed for individuals new to React who want to understand its core concepts and apply them to build real-world applications. It is suitable for those with some basic knowledge of JavaScript who wish to transition into React development.
What specific tools or platforms will I learn to use?
You will learn to use npm for package management and Webpack for module bundling, both essential tools in modern JavaScript development. The course also introduces React-specific tools and patterns, including React Router for navigation and Vercel for hosting.
What is not covered in this course?
The course focuses on React and related tools, but it does not cover advanced topics such as server-side rendering or state management libraries like Redux. These areas might require additional learning beyond the scope of this course.
How much time should I expect to commit to this course?
With a total of 54 lessons, the course requires a significant time commitment. Each lesson builds on the previous one, and hands-on practice is integral to the learning process. While the exact time can vary, students should be prepared for intensive coding sessions and project work.
How will this course benefit my career or future learning?
By completing this course, you gain a solid understanding of React, a highly sought-after skill in web development. The skills learned, such as component-based architecture, state management, and routing, are transferable to other React-based frameworks and libraries, enhancing your versatility as a developer.