Already purchased?Login

MakeReactApps

Build real-world React projects

Learn React best practices and concepts that you can use on the job, in side projects, and in any React app.

⚛️ See the Courses
How do I get better at React?

Made w/ Modern React

Learn React Hooks

Projects for your Portfolio

High Quality Videos

The Courses

Learn by building with these practical courses.

Make 10 React Apps Series A

Make these React apps...

  1. Pomodoro
  2. Markdown Editor
  3. Browser Tabs
  4. Paper, Rock, Scissors
  5. Moving Zelda & canvas
  6. Infinite Image Gallery
  7. Trivia App
  8. Authentication
  9. Web Speech & Timers
  10. Calendar Picker
View the apps
48videos
6hours

Make 10 React Apps Series B

Make these React apps...

  1. Animated Chat Box
  2. Multi-Step Form
  3. Memory Matching Game
  4. Drag & Drop Math Card
  5. iframes and Browsers
  6. Real-time Search
  7. Charting the Weather
  8. Shopping Cart
  9. Typing Speed Game
  10. Gatsby Site
View the course
48videos
6hours

Bundle and Save30% Off

10 React Apps Series A

10 React Apps Series B

$110$79

The Apps We'll Build

Hover to see previews

Pomodoro Timer

🎬3 videos
🎤26 minutes

Markdown Editor

🎬2 videos
🎤17 minutes

Browser Tabs and Routing

🎬4 videos
🎤43 minutes

Paper Rock Scissors

🎬4 videos
🎤39 minutes

Moving Link Across a <canvas>

🎬5 videos
🎤32 minutes

Infinite Image Gallery

🎬5 videos
🎤52 minutes

Trivia

🎬6 videos
🎤57 minutes

Drag and Drop Math Card

🎬4 videos
🎤30 minutes

Web Speech and Timers

🎬4 videos
🎤30 minutes

Calendar Picker

🎬4 videos
🎤33 minutes
Buy 10 React Apps (Series A)

Videos List

Getting Started

Hello!
VS Code Setup
Terminal Setup (npm vs yarn)
Starter and Final Files in GitHub

#1Pomodoro

View Demo
00 - Pomodoro [PREVIEW]
01 - Time and Start
02 - Stop and Reset

#2Markdown Editor

View Demo
00 - Markdown Editor [PREVIEW]
01 - Markdown Editor

#3Browser Tabs

View Demo
00 - Browser Tabs [PREVIEW]
01 - Tab Highlight
02 - React Router
03 - Refactoring

#4Paper Rock Scissors

View Demo
00 - Paper Rock Scissors [PREVIEW]
01 - Intro + Handling Choices
02 - Displaying Game State
03 - Choosing Winner

#5Moving Boxes and Zelda

View Demo
00 - Moving Boxes and Link [PREVIEW]
01 - Setting Up Canvas and Box
02 - Keyboard Arrows
03 - Link Sprites
04 - Custom Hook and Background

#6Infinite Image Gallery

View Demo
00 - Infinite Image Gallery [PREVIEW]
01 - Getting Images from Unsplash
02 - Infinite Scroll
03 - Searching Unsplash
04 - useEffect's 2nd Argument

#7Trivia App

View Demo
00 - Trivia [PREVIEW]
01 - Getting and Displaying a Question
02 - Selecting a Category
03 - Handling Right and Wrong
04 - Scoreboard
05 - useTrivia Custom React Hook

#8Authentication

00 - Authentication [PREVIEW]
01 - Setting up Auth0
02 - Starting the Auth0 SPA SDK
03 - Starting React Context
04 - Adding Auth0 to Context
05 - PrivateRoute
06 - Getting a Token

Web Speech and Timers

View Demo
00 - Web Speech [PREVIEW]
01 - Creating Timer Forms
02 - Adding a Stopwatch
03 - Adding Speech

#10Calendar Picker

View Demo
00 - Calendar Picker [PREVIEW]
01 - Choosing a Date
02 - Styled Components
03 - Hovering Days

Meet Chris on Code

Chris on Code is the founder of scotch.io, a popular web dev tutorial site. Scotch reaches 3M+ readers monthly and $30,000/mo in revenue.

Scotch.io was successfully acquired by DigitalOcean in 2019. Chris now focuses on helping others code so they can build/sell their own businesses.

He's a Google Developer Expert in Web Technologies and fights to keep coding simple and practical.

FAQs

(Frequently Answered Questions)

Is this for people that have never used React?

This course is for beginners to intermediate devs that are familiar with and have used React. I'll be creating a beginner React course shortly for those looking to learn React from scratch!

Do these videos expire? Is there a monthly subscription?

Pay once and have access forever. Updates are free and you'll always get them.

Can I use these apps in my portfolio?

Yes please! That's exactly what these are for. Learn React by building. Use the things you build as your portfolio on GitHub. Take it a step further and write articles on what you've learned to boost your resume.

Does this course use React Hooks?

Yup! This course is made for best practices of React in 2020 and beyond. A great way to learn the nuances of hooks and how they help simplify our React apps.

What other courses do you have?

All my courses will be found on my Courses site. learn.chrisoncode.io.

How do I login and view the course?

You can login at learn.chrisoncode.io. Use the login button in the top right.

Are there refunds?

Yup! I want to stand by the quality of these courses. If you don't feel they gave you value and were not up to par, I'm happy to provide a refund. Email me at hey@chrisoncode.io.

Is there a student discount?

Yup 50% off! Email me at hey@chrisoncode.io with your student id and I'll send you a discount code.

Is there purchase parity for my country?

Yup 50% off! Email me at hey@chrisoncode.io and I'll send you a discount code.

Is there an affiliate program?

Yup! You get 50% of every sale that you bring in. You can sign up for a course and turn on affiliate mode from your dashboard at learn.chrisoncode.io. Or you can email me at hey@chrisoncode.io.

I have more questions!

Drop me an email at hey@chrisoncode.io. Let's chat.

Sign up to the newsletter and get 1 free app and 5 free videos.

Powered by PodiaCodeRight © CopyWrong © Chris on Code 1756