Skip to main content
CourseFlix

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
Hey! We're Sam Selikoff and Ryan Toronto, and together we've been teaching frontend development for over eight years through our podcast, in-person trainings and conference talks, videos on Egghead and EmberMap, and more recently on our YouTube channels. Check out our existing resources if you're hungry for more frontend content!

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

Related courses

  • MERN React Node Next.js Multi User SEO Blogging Platform thumbnail

    MERN React Node Next.js Multi User SEO Blogging Platform

    Sources: udemy
    Master the Art of Building Real World SEO Web Applications using MERN (Mongo Express React Node) Stack. Become a true Web Developer with this Ultimate Project b
    20 hours 25 minutes 13 seconds
  • The React practice course, learn by building projects. thumbnail

    The React practice course, learn by building projects.

    Sources: udemy
    Including three full practice project, a landing page, a Firebase project and a fullstack with Mongo DB and Node. Do you want to practice your React coding or j
    43 hours 45 minutes 48 seconds
  • React Simplified - Bonus Project thumbnail

    React Simplified - Bonus Project

    Sources: webdevsimplified.com
    What if I told you that you could build this advanced job board project by the end of this course entirely on your own? That's what this entire section of...
    5 hours 8 minutes 8 seconds
  • React Chrome Extension boilerplate | Shipped thumbnail

    React Chrome Extension boilerplate | Shipped

    Sources: Luca Restagno (shipped.club)
    Launch your Chrome Extension in hours, not weeks. The boilerplate for busy makers, to launch your React Chrome Extensions fast. ou don't need to reinvent the wh
    5 / 5
  • Django with React | An Ecommerce Website thumbnail

    Django with React | An Ecommerce Website

    Sources: Brad Traversy
    Build an eCommerce platform from the ground up with React, Redux, Django & Postgres. In this course, we will build a completely customized eCommerce / shopping cart application…
    18 hours 6 minutes 7 seconds 5 / 5
  • Building Large Scale Web Apps | A React Field Guide thumbnail

    Building Large Scale Web Apps | A React Field Guide

    Sources: Addy Osmani, Hassan Djirdeh
    CODE SMART, SCALE FAST, CONQUER CHALLENGES. Learn tools and techniques to build and maintain large-scale React web applications. “Building Large Scale Web Apps” is a toolkit to…