Make 10 React Apps

Build real apps and get real-world React experience. These React videos will teach you specific parts of React so that you can grow your skills and React tools.

49 lessons6.1 hours
Make 10 React Apps

The Apps You'll Build

We'll build a series of apps that you can use to learn React. These will be fun apps that will teach you the practical skills needed to build your own React applications.

App Preview

Pomodoro Timer

App Preview

Markdown Editor

App Preview

Browser Tabs and Routing

App Preview

Paper Rock Scissors

App Preview

Moving Link Across a <canvas>

App Preview

Infinite Image Gallery

App Preview

Trivia Game

App Preview

Authentication

App Preview

Web Speech and Timers

App Preview

Calendar Picker

What You'll Learn

  • The React basics
  • Functional React components
  • React hooks like useState() and useEffect()
  • Handling user events
  • JSX and Rendering templates
  • Props and State
  • Creating and organizing components
  • Building real-world React applications

Course Content

49 lessons6.1 hours

Getting Started

31 minutes
Welcome!
VS Code Setup
Terminal Setup
GitHub Files

#1. Pomodoro

26 minutes
Preview
Time and Start
Stop and Reset
Restarting the Timer

#2. Markdown Editor

16 minutes
Preview
Markdown Editor

#3. Highlight Tabs

41 minutes
Preview
Tab Highlight
React Router
Refactoring

#4. Paper Rock Scissors

38 minutes
Preview
Handling Choices
Game State
Choosing a Winner

#5. Moving Boxes and Zelda

30 minutes
Preview
Canvas and Box
Keyboard Arrows
Link Sprites
Custom Hook

#6. Infinite Image Gallery

18 minutes
Preview
Images from Unsplash
Infinite Scroll
Searching Unsplash
useEffect() Performance

#7. Trivia

50 minutes
Preview
Displaying a Question
Trivia Category
Right and Wrong
Scoreboard
useTrivia()

#8. Authentication

55 minutes
Auth0 Setup
Preview
Auth0 SPA SDK
React Context
Auth0 in Context
<PrivateRoute />
Auth Token

#9. Web Speech and Timers

32 minutes
Preview
Timer Forms
Adding a Stopwatch
Adding Speech

#10. Calendar Picker

31 minutes
Preview
Choosing a Date
Styled Components
Hovering Days