Make 20 React Apps

⚛️ Build more than a to-do app
🍎 Learn React best practices and concepts.
✅ Built for modern React w/ React Hooks

The best way to learn is to build!

View the 20 Apps

What will you learn?

This course is built fully in React Hooks for React in 2020 and beyond. You'll work with:

✅ React templating with JSX
✅ React Hooks:
⚛️ useState()
⚛️ useEffect()
⚛️ useCallback()
⚛️ useContext()
⚛️ useRef()
⚛️ useReducer()
✅ Custom React Hooks
✅ Routing
✅ Authentication
✅ State management
✅ Rendering
✅ Component communication with props

Who is this for?

This course is for beginner-intermediate developers that want to learn by building.

It's great for those that have some React knowledge but want to create real-world code.

🧐 They always say "build to learn". They never say what to build! These 20 apps are fun projects that will introduce us to coding scenarios that we'll encounter in many React apps.

Not sure if you'll like the course? Full refund if you end up not liking anything.
View the 20 Apps

Who is Chris on Code?

Chris is the founder of scotch.io, the popular web dev tutorial site. Scotch reaches 2,500,000 readers monthly and $30,000/mo revenue. 

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

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

What's included?

Video Icon 86 videos

Table of Contents

Getting Started
Hello!
1 min
VS Code Setup
20 mins
Terminal Setup (npm vs yarn)
6 mins
Starter and Final Files in GitHub
6 mins
01. Pomodoro
00 - Pomodoro [PREVIEW]
2 mins
01 - Time and Start
11 mins
02 - Stop and Reset
13 mins
03 - Restarting the Timer [FIX]
2 mins
02. Markdown Editor
00 - Markdown Editor [PREVIEW]
2 mins
01 - Markdown Editor
15 mins
03. Highlight Tabs
00 Browser Tabs [PREVIEW]
2 mins
01 - Tab Highlight
20 mins
02 - React Router
17 mins
03 - Refactoring
4 mins
04. Paper Rock Scissors
00 - Paper Rock Scissors [PREVIEW]
2 mins
01 - Intro + Handling Choices
11 mins
02 - Displaying Game State
13 mins
03 - Choosing Winner
13 mins
05. Moving Boxes and Zelda
00 - Moving Boxes and Link [PREVIEW]
2 mins
01 - Setting Up Canvas and Box
10 mins
02 - Keyboard Arrows
8 mins
03 - Link Sprites
7 mins
04 - Custom Hook and Background
5 mins
06. Infinite Image Gallery
00 - Infinite Image Gallery [PREVIEW]
2 mins
01 - Getting Images from Unsplash
18 mins
02 - Infinite Scroll
11 mins
03 - Searching Unsplash
14 mins
04 - useEffect's 2nd Argument
7 mins
07. Trivia
00 - Trivia [PREVIEW]
2 mins
01 - Getting and Displaying a Question
17 mins
02 - Selecting a Category
15 mins
03 - Handling Right and Wrong
12 mins
04 - Scoreboard
8 mins
05 - useTrivia Custom React Hook
9 mins
08. Authentication
00 - Authentication [PREVIEW]
2 mins
01 - Setting Up Auth0
10 mins
02 - Starting with the Auth0 SPA SDK
8 mins
03 - Starting React Context
8 mins
04 - Adding Auth0 to Context
18 mins
05 - PrivateRoute
8 mins
06 - Getting a Token
4 mins
09. Web Speech and Timers
00 - Web Speech and Timers [PREVIEW]
2 mins
01 - Creating Timer Forms
12 mins
02 - Adding a Stopwatch
9 mins
03 - Adding Speech
11 mins
10. Calendar Picker
00 - Calendar Picker [PREVIEW]
2 mins
01 - Choosing a Date
10 mins
02 - Styled Components
13 mins
03 - Hovering Days
8 mins
11. Animated Chat Box
00 - Chat Box [PREVIEW]
1 min
01 - Visualizing Messages
8 mins
02 - Typing Indicator
8 mins
03 - Adding Animations
5 mins
12. Multi-Step Form
00 - Multi-Step Form [PREVIEW]
2 mins
01 - Multi-Step with Router
11 mins
02 - Forms and Validation
12 mins
03 - Storing State with React Context
13 mins
04 - Animating Routes
8 mins
05 - Disabling Links
6 mins
13. Memory Matching Game
00 - Memory Matching [PREVIEW]
1 min
01 - Displaying Pokemon
8 mins
02 - Flipping Cards
8 mins
03 - Handling Winning
10 mins
14. Drag and Drop Math Card
00 - Drag and Drop Math Card [PREVIEW]
1 min
01 - Handling Dragging
11 mins
02 - Handling Dropping
8 mins
03 - Storing Values in State
10 mins
15. Browser
00 - Browser Browser [PREVIEW]
2 mins
01 - Showing iframes
7 mins
02 - Choosing and Adding
6 mins
03 - Address Bar
9 mins
04 - useReducer
15 mins
05 - Closing Tabs
14 mins
16. Real-Time Search
00 - Real-Time Search [Preview]
2 mins
01 - Algolia Setup
10 mins
02 - React Components for Algolia
12 mins
17. Charting the Weather
00 - Weather Chart [Preview]
2 mins
01 - High Level Strategy
11 mins
02 - Geocoding Addresses
15 mins
03 - Starting Charts
14 mins
04 - Showing Weather Data in Chart
12 mins
18. Shopping Cart w/ Context + Reducer
00 - Shopping Cart [Preview]
2 mins
01 - Setting Up Components
12 mins
02 - Context and Reducer
25 mins
03 - Cart Modal
17 mins
😁 More Apps On the Way
Updates Are Coming
1 min

FAQs

Do these videos expire? Is there a monthly subscription?

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

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!

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.

How do I login and view the course?

https://learn.chrisoncode.io/You should be able to see a login button in the top right of this site learn.chrisoncode.io. 

What other courses do you have?

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

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 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/affiliate. Or you can email me at hey@chrisoncode.io.

I have more questions!

Email me at hey@chrisoncode.io. Let's chat.