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 2y agoReact and Django: A Practical Guide with Docker
By: UdemyLearn how to create an Admin App using React and Django Rest Framework. Django 3.1, React Typescript, Redux, Docker, Authentication and Authorisation, Upload Im6h 50m -
Updated 1mo agoReactJS Ultra for Beginners
By: Pedro Henrique MachadoMaster ReactJS from scratch by learning components, states, routing, and forms through practical projects. This course will help you confidently apply React...14h 58m -
Updated 3y agoMERN Invoice Web App with Docker,NGINX and ReduxToolkit
By: UdemyHi, welcome to this course on building a functional fullstack MERN app, that can be used for generating invoices, quotations and receipts. We shall build this24h 38m5/5 -
FreeUpdated 11mo agoReact JS 19 Crash Course | Build an App and Master React in 2 Hours
By: JavaScript Mastery, Adrian HajdinThis course offers a practical approach: clear explanations, real tasks, and necessary tools, so you can not only understand but also immediately apply the new.2h 7m -
Updated 1y agoReact Simplified - Bonus Project
By: Web Dev Simplified (Kyle Cook)What if I told you that by the end of this course, you could independently build an advanced job board project ?5h 8m -
FreeUpdated 2y agoNext.js - The Full Course
By: FireshipNext.js - The Full Course provides a in-depth look into the Next.js App Router introduced in version 13.2. It puts React Server Components into practice by buil1h 14m5/5 -
Updated 2y agoBuild Product Hunt with ReactJS and Firebase
By: Code4StartupIn this course, you will be learning how to build ReactJS app in ES6 syntax (a modern version of Javascript) with Firebase, a real-time back-end by cloning Prod4h 47m -
Updated 3y agoThe Creative React and Redux Course
By: Dev EdThis course will teach you everything you need to know about React. Get started now with 0 experience in React, we will take it step by step from the beginning18h 13m
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.