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
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
About the Author: 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.
Watch Online 90 lessons
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 subscriptionRelated courses
-
Updated 2y agoAdvanced React For Enterprise: React for senior engineers
By: UdemyWelcome to the React for Senior engineers course ! Knowledge of React is 100% required for this course. I've been working with React.js for over 5 years now6h 4m -
Updated 2y agoReact Node FullStack - Ecommerce from Scratch to Deployment
By: UdemyLearn to Deploy your fully functioning Ecommerce app to production by using Digital Ocean cloud servers. Learn to add your own custom Domain name.16h 15m -
FreeUpdated 3y agoReact and Typescript: Build a Portfolio Project
By: Udemy, Stephen GriderKick off your learning experience with an introduction on how to use React and Typescript together. Not familiar with Typescript? No problem!29h 21m5/5
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.