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?
-
FreeUpdated 2y agoThe Complete Guide to Advanced React Patterns (2020)
By: UdemyBuild reusable React components without relying on if statements or more props! Use hooks & trusted advanced patterns!6h 1m -
Updated 3y agoReact Router v4
By: UI.dev (Tyler McGinnis)For good reason, React Router is the most popular 3rd party library in the React ecosystem. If you're using React, odds are you're also using React Router. Reac6h 44m -
FreeUpdated 3y agoReact Front To Back 2022
By: Udemy, Brad TraversyThis course is for anyone that wants to learn React and also for React developers looking to build some projects and sharpen their skills.19h 57m -
Updated 2y agoPython/Django + React QR Digital Menu Builder
By: PythonYogaMade for restaurants, cafes, pubs and hotels. Your customers can order from their table or from their couch at home.10h 49m3/5 -
Updated 2y agoNext.js & React with ChatGPT - Development Guide (2023)
By: UdemyThroughout the course, you will gain experience developing a Next JS application from the ground up. Additionally, you'll receive instruction on integrating Ope7h 6m -
Updated 9mo agoMicroservices with NodeJS, React, Typescript and Kubernetes
By: UdemyIn building large scale applications intended for growth, microservices architecture is the go-to solution. One issue for Javascript and NodeJS learners is the97h 19m5/5 -
Updated 2y agoReact, Angular, Node In-Depth Guide: Beginner to Pro
By: UdemyIf you are planning to start your career as a developer or you just want to improve your programming skills, then this course is right for you. Get all you need80h 1m -
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.