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.

10 Apps

47 Videos

6+ Hours

The Apps We'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.

Pomodoro Timer

Use timers to learn the intricacies of how React renders and re-renders its components. It's not as easy as it sounds!

Markdown Editor

Create a real-time markdown editor and learn how to use 3rd party packages from npm. Integrating and extending packages is crucial to your apps.

Browser Tabs and Routing

We'll use browser events like hovering and mouse movement to create these tabs.

Paper Rock Scissors

Lots of fun JavaScript goes into this one from learning how to calculate a winner to handling the marking X and Os.

Moving Link Across a <canvas>

Use HTML <canvas> inside of React and use arrow keys to move things around.

Infinite Image Gallery

Infinite scrolling lists is often used in web development. Learn how to fetch real data right before a user hits the bottom of a list.

Trivia Game

Use a real Trivia API and create a game that has multiple choice, true/false, and also keeps track of your wins and losses.

Authentication

Learn how to use the Auth0 API to create a login and signup form.

Web Speech and Timers

Make your browser talk to you. Also another example with timers which makes us understand how React renders its components.

Calendar Picker

A fantastic example at storing state and manuevering our UI and styles to match that state.

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
49+lessons
6.1+hours of content
support on Discord

Get the Course

Buy Just This Course

$20 one time

Features

  • Get this course for life
  • Use the code in your own projects
  • Access to Discord for support

Lifetime Refund Guarantee

Get All Courses

$12/mo

Features

  • Become a Better Dev Pro
  • Get access to all courses
  • Use the code in your own projects
  • Priority Discord support

Cancel at any time

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