Make 20 React Apps

12h 20m 3s
English
Paid

Course description

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

Read more about the course

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 prop

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.

Watch Online

Join premium to watch
Go to premium
# Title Duration
1 Hello! 00:59
2 VS Code Setup 19:12
3 Terminal Setup (npm vs yarn) 05:37
4 Starter and Final Files in GitHub 04:56
5 00 - Pomodoro [PREVIEW] 01:14
6 01 - Time and Start 10:07
7 02 - Stop and Reset 12:29
8 03 - Restarting the Timer [FIX] 01:58
9 00 - Markdown Editor [PREVIEW] 01:30
10 01 - Markdown Editor 14:07
11 00 Browser Tabs [PREVIEW] 01:26
12 01 - Tab Highlight 19:28
13 02 - React Router 16:06
14 03 - Refactoring 03:47
15 00 - Paper Rock Scissors [PREVIEW] 01:06
16 01 - Intro + Handling Choices 10:52
17 02 - Displaying Game State 12:52
18 03 - Choosing Winner 12:56
19 00 - Moving Boxes and Link [PREVIEW] 01:29
20 01 - Setting Up Canvas and Box 09:40
21 02 - Keyboard Arrows 07:58
22 03 - Link Sprites 06:47
23 04 - Custom Hook and Background 04:22
24 00 - Infinite Image Gallery [PREVIEW] 01:03
25 01 - Getting Images from Unsplash 17:34
26 02 - Infinite Scroll 10:57
27 03 - Searching Unsplash 13:43
28 04 - useEffect's 2nd Argument 06:26
29 00 - Trivia [PREVIEW] 01:25
30 01 - Getting and Displaying a Question 16:22
31 02 - Selecting a Category 14:14
32 03 - Handling Right and Wrong 11:22
33 04 - Scoreboard 07:42
34 05 - useTrivia Custom React Hook 08:08
35 00 - Authentication [PREVIEW] 01:54
36 01 - Setting Up Auth0 09:38
37 02 - Starting with the Auth0 SPA SDK 07:25
38 03 - Starting React Context 07:25
39 04 - Adding Auth0 to Context 17:14
40 05 - PrivateRoute 07:37
41 06 - Getting a Token 04:01
42 00 - Web Speech and Timers [PREVIEW] 01:12
43 01 - Creating Timer Forms 11:22
44 02 - Adding a Stopwatch 08:44
45 03 - Adding Speech 10:23
46 00 - Calendar Picker [PREVIEW] 01:04
47 01 - Choosing a Date 09:27
48 02 - Styled Components 12:55
49 03 - Hovering Days 07:59
50 00 - Chat Box [PREVIEW] 00:57
51 01 - Visualizing Messages 07:49
52 02 - Typing Indicator 07:49
53 03 - Adding Animations 04:54
54 00 - Multi-Step Form [PREVIEW] 01:23
55 01 - Multi-Step with Router 10:46
56 02 - Forms and Validation 11:49
57 03 - Storing State with React Context 12:51
58 04 - Animating Routes 07:19
59 05 - Disabling Links 05:53
60 00 - Memory Matching [PREVIEW] 00:46
61 01 - Displaying Pokemon 07:44
62 02 - Flipping Cards 07:37
63 03 - Handling Winning 09:02
64 00 - Drag and Drop Math Card [PREVIEW] 00:56
65 01 - Handling Dragging 10:44
66 02 - Handling Dropping 07:19
67 03 - Storing Values in State 09:20
68 00 - Browser Browser [PREVIEW] 01:35
69 01 - Showing iframes 06:43
70 02 - Choosing and Adding 05:03
71 03 - Address Bar 08:13
72 04 - useReducer 14:25
73 05 - Closing Tabs 13:18
74 00 - Real-Time Search [Preview] 01:39
75 01 - Algolia Setup 09:59
76 02 - React Components for Algolia 11:10
77 00 - Weather Chart [Preview] 01:17
78 01 - High Level Strategy 10:57
79 02 - Geocoding Addresses 15:01
80 03 - Starting Charts 13:17
81 04 - Showing Weather Data in Chart 11:12
82 00 - Shopping Cart [Preview] 12:00
83 01 - Setting Up Components 01:36
84 02 - Context and Reducer 25:00
85 03 - Cart Modal 16:42
86 00 - Typing Tester [Preview] 00:59
87 01 - Showing Characters 08:12
88 02 - Finding Typos 06:47
89 03 - Countdown and WPM 11:24
90 Updates Are Coming 00:22

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React, NextJS and NestJS: A Rapid Guide - Advanced

React, NextJS and NestJS: A Rapid Guide - Advanced

Sources: udemy
React with Typescript, Next.js, Redux, NestJS, Docker, Redis, Stripe, Frontend & Backend Filtering. Learn how to create an Ambassador App using React, NextJS an
8 hours 40 minutes 51 seconds
MERN React Node Next.js Multi User SEO Blogging Platform

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
Discord Clone - Learn MERN Stack with WebRTC and SocketIO

Discord Clone - Learn MERN Stack with WebRTC and SocketIO

Sources: udemy
Learn how to connect MERN Stack with WebRTC and SocketIO. We will go through all of the steps to create application with group call functionality. We will crea
19 hours 29 minutes 29 seconds
React - The full course

React - The full course

Sources: fireship.io
React - The Full Course is unlike any other React course on the Internet. It provides a fast-paced introduction to essential concepts, then puts them into practice by building m...
1 hour 20 minutes 10 seconds
Mastering Maintainable React

Mastering Maintainable React

Sources: udemy
"Maintained React" is a comprehensive course designed to teach you the best practices for writing clean and maintainable code in React. Indepen...
7 hours 8 minutes 52 seconds