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?
UpdatedReact Testing Library and Jest: The Complete Guide
By: Udemy, Stephen GriderLearn to test React apps properly with React Testing Library and Jest, covering auth, data fetching, mocking, and real-world testing patterns.7h 40m
Updated 2y agoCrash Course: Build a Full-Stack Web App in a Weekend!
By: UdemyDo you want to learn the fundamentals of modern web development fast ? Do you want to find out if building websites and apps is the right career path for you?12h 13m
Updated 3y agoREACT ROUTER (v6)
By: UI.dev (Tyler McGinnis)There s an easier way to master React Router. Our linear course is like having a smart, experienced friend sit down next to you, walk you through each concept.3h 15m5/5
Updated 2y agoMastering Next.js - 50+ Lesson Video Course on React and Next
By: Mastering NuxtThe premiere video course for building static and server-side rendered applications with Next.js and React. Sign up now and get two videos instantly!5h 9m
UpdatedNext.JS with Sanity CMS - Serverless Blog App (w/ Vercel)
By: UdemyBuild a serverless blog with Next.js and Sanity CMS across 81 lessons: content modeling, filtering, dark mode, and Vercel deployment.13h 5m
UpdatedReact: Flux Architecture (ES6)
By: egghead.ioLearn Flux architecture with ES6, Babel, and Webpack: actions, dispatcher, stores, and views for scalable React state management.49m
Updated 2y agoMaster Custom React Hooks with TypeScript
By: Fullstack.ioLearn how to build your own custom React Hook package with clear steps and real TypeScript code.2h 21m5/5
UpdatedReact with TypeScript
By: UI.dev (Tyler McGinnis)A 29-lesson course applying TypeScript directly to React development, building practical typing skills through a hands-on project.2h
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.