Learn React best practices and concepts that you can use on the job, in side projects, and in any React app.
Make 20 React Apps
12h 20m 3s
English
Paid
Make 20 React Apps is a 90-lesson 12 hours 20 minutes self-paced course by Chris Sev. Learn React best practices and concepts that you can use on the job, in side projects, and in any React app.
Course facts
- Lessons
- 90
- Duration
- 12 hours 20 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Chris Sev
- Price
- Premium
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
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.
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.
Additional
Who teaches Make 20 React Apps? Chris Sev
Chris Sev is a US developer and educator focused on practical front-end tutorials — particularly Tailwind CSS and the project-based React work that builds working applications fast.
His CourseFlix listing carries two Chris Sev courses: Beginner Tailwind (one of the canonical introductory Tailwind CSS courses) and Make 20 React Apps (a project-based React curriculum built around shipping 20 small finished applications rather than working through abstract tutorials).
Material is paid and aimed at intermediate web developers picking up Tailwind or building React fluency through volume practice. For broader content, see CourseFlix's CSS and React.js category pages.
What lessons are included in Make 20 React Apps?
0:00
/ #1: Hello!
All Course Lessons (90)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Hello! Demo | 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 |
Unlock unlimited learning
Get instant access to all 89 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionWhat courses are similar to Make 20 React Apps?
-
Updated 3y agoMERN Stack React, Socket io, Next.js Express,MongoDb, Nodejs
By: UdemyIf you are a person who is not picky about a CSS framework and wants to learn how to create enterprise-grade, practical full stack app using new technologies.13h 2m5/5 -
Updated 1y agoChrome Extension Mastery: Build Full-Stack Extensions with React & Node.js
By: Ryan FitzgeraldYou learn to build Chrome extensions with React and Node.js. The text covers setup, UI, API work, tests, and publish steps.10h 3m5/5 -
Updated 2y agoTesting React with Jest and Testing Library
By: UdemyReact Testing Library has become an extremely popular option for testing React, and with good reason! This detailed, comprehensive course7h 41m -
Updated 3y agoReact with TypeScript
By: UI.dev (Tyler McGinnis)We'll start the course off with some housekeeping items. You'll learn about the best strategy for getting the most out of the course as well as what you'll.2h -
Updated 2y agoAWS AppSync & Amplify with React & GraphQL - Complete Guide
By: UdemyDeploy a Serverless GraphQL & React JS based Javascript application in the AWS Cloud using AWS AppSync and AWS Amplify. AWS AppSync & AWS Amplify is the BEST wa11h 11m -
ClassicThe Official React Query Course - query.gg
By: UI.dev (Tyler McGinnis)React Query has quickly become one of the most popular third-party libraries in the React ecosystem.4h 17m5/5 -
Updated 2y agoReact, NextJS and NestJS: A Rapid Guide - Advanced
By: UdemyReact with Typescript, Next.js, Redux, NestJS, Docker, Redis, Stripe, Frontend & Backend Filtering. Learn how to create an Ambassador App using React, NextJS an8h 40m0/5
More courses by Chris Sev
-
Updated 2y agoBeginner Tailwind
Tailwind makes writing CSS easier and lets us customize our designs faster than any other CSS framework.9h 33m
Frequently asked questions
What are the prerequisites for enrolling in this course?
Before enrolling in this course, students should have a basic understanding of JavaScript and familiarity with HTML and CSS. Knowledge of using a code editor like VS Code and working with version control systems such as GitHub will be helpful, as these tools are used throughout the course. While the course covers setting up VS Code and using npm or yarn in the terminal, foundational programming skills are assumed.
What kind of projects will I build in this course?
The course focuses on building 20 different React applications, each designed to teach specific React concepts and best practices. Projects include a Pomodoro timer, a Markdown editor, a browser tab manager, a rock-paper-scissors game, an infinite image gallery using Unsplash, a trivia app, and several others. These projects cover a range of functionalities, from basic state management to advanced features like authentication with Auth0 and implementing custom hooks.
Who is the target audience for this course?
This course is ideal for developers who have a basic understanding of JavaScript and wish to enhance their skills in React by applying best practices through hands-on projects. It is suitable for both professionals looking to use React in their jobs and hobbyists interested in building side projects using React. Those aiming to gain practical experience with real-world React applications will find this course particularly beneficial.
How does this course compare in depth and scope to similar courses?
The course provides a practical approach by guiding students through the creation of 20 React applications. It emphasizes hands-on learning and application of React concepts in varied scenarios, making it more project-focused than theory-centric. Unlike many introductory courses, this one covers a wide range of topics, including custom hooks, React Router, and authentication, offering a comprehensive learning experience suitable for those seeking practical skills.
What specific tools and platforms are covered in the course?
Throughout the course, students will use VS Code for code editing and GitHub for managing project files. The course also introduces npm and yarn for package management. Additionally, students will learn to implement authentication using Auth0, manage client-side routing with React Router, and enhance user interfaces with styled components and animations. These tools are integral to the development of React applications in the course.
What topics are not covered in this course?
The course does not cover server-side programming or backend development. It focuses solely on frontend development using React. While it includes authentication with Auth0, it does not delve into setting up or managing backend authentication systems. Additionally, performance optimization and advanced React topics like concurrent mode or server-side rendering are not part of the curriculum.
What is the expected time commitment to complete the course?
The course features 90 lessons designed to be completed incrementally. While the total runtime information is not specified, students should expect to dedicate several hours per week to complete the lessons, work on projects, and practice coding. The time commitment will vary based on individual pace and previous experience with React. Regular practice and engagement with the course material are recommended for a thorough understanding.