This course is for anyone that wants to learn React and also for React developers looking to build some projects and sharpen their skills. The first project (Feedback App) is structured in a way so I can explain the fundamentals such as components, hooks, props, state, etc in a way that beginners can understand. The second project (Github Finder) will show you how to work with 3rd party APIs and the third project (House Marketplace) is a larger app that uses Firebase 9 and includes authentication, Firestore queries, file storage and more.
React Front To Back 2022
19h 57m 45s
English
Paid
Here are some of the things you will learn in this course:
React fundamentals including components, props, hooks, state, etc
React hooks such as useState, useEffect, useContext, useReducer, useRef, etc
Creating custom hooks
React Router v6 (latest version)
How to handle global state with context, reducers and hooks
Firebase 9 authentication, queries, storage
Deploying React apps to Vercel & Netlify
Basic Animation with Framer Motion
Implement Leaflet maps and Swiper sliders
Much More...
This course has been completely re-done with new projects and concepts from the old course. I have a few React courses and this is the one that I always suggest people start with before moving on to the MERN courses
I am also working on a 4th project for the course, which will be a full-stack MERN ticketing system that uses Redux for state management.
About the Authors
Brad Traversy
Brad Traversy is a US developer behind Traversy Media — one of the largest independent web-development YouTube channels, with millions of subscribers and one of the most-viewed introductory tutorial libraries on the platform. He has been publishing daily-or-near-daily web development content continuously for nearly a decade and has anchored a generation of self-taught developers' first exposure to HTML, CSS, JavaScript, and the modern framework landscape.
The course catalog (sold via Udemy and the standalone Traversy platform) covers the full web-development stack: HTML and CSS fundamentals, JavaScript, React (including Next.js), Vue, Node.js, Express, MongoDB, full-stack MERN applications, Tailwind CSS, modern CSS layout, and the surrounding tooling. Brad's teaching style is calm, patient, and deliberately accessible to absolute beginners.
The CourseFlix listing under this source carries over 17 Brad Traversy courses spanning that range. Material is paid and aimed primarily at self-taught developers building real proficiency with web development from a clean start.
Udemy
Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.
Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.
Watch Online 150 lessons
0:00
/ #1: Welcome To The Course!
All Course Lessons (150)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Welcome To The Course! Demo | 01:55 | |
| 2 | What Is React? | 08:32 | |
| 3 | Environment Setup | 05:51 | |
| 4 | Code Repos | 02:00 | |
| 5 | Feedback Project Intro | 02:50 | |
| 6 | Create React App | 07:02 | |
| 7 | Initializing React | 07:13 | |
| 8 | Intro To JSX | 07:06 | |
| 9 | Dynamic Values & LIsts in JSX | 05:24 | |
| 10 | Conditionals in JSX | 05:09 | |
| 11 | Creating Your First Component & Props | 08:01 | |
| 12 | Adding Styles To A Component | 05:35 | |
| 13 | State & useState Hook | 08:22 | |
| 14 | Managing Global State | 08:29 | |
| 15 | Card Component & Conditional Styles | 10:16 | |
| 16 | Events & Prop Drilling | 10:19 | |
| 17 | FeedbackStats Component & Reactivity | 07:32 | |
| 18 | Form Input & State | 06:03 | |
| 19 | Custom Button Component | 05:28 | |
| 20 | Real-Time Validation | 04:32 | |
| 21 | Rating Select Component | 07:08 | |
| 22 | Add Feedback | 07:21 | |
| 23 | Fade Animation With Framer Motion | 03:52 | |
| 24 | Creating Routes (React Router 5) | 08:22 | |
| 25 | Upgrading To React Router 6 | 02:33 | |
| 26 | Creating Links (v5 & v6) | 05:13 | |
| 27 | NavLink & useParams | 06:40 | |
| 28 | Navigate & Nested Routes | 06:52 | |
| 29 | Create a Context & Provider | 06:35 | |
| 30 | Get Global State With The useContext Hook | 04:42 | |
| 31 | Moving Functions To Context | 07:25 | |
| 32 | Edit Feedback Event | 05:47 | |
| 33 | Side Effects With useEffect | 07:33 | |
| 34 | Update Feedback Item | 05:14 | |
| 35 | Deploy To Netlify | 05:23 | |
| 36 | APIs & Requests Explained | 06:26 | |
| 37 | Setting Up JSON-Server Mock Backend | 07:47 | |
| 38 | Run Client & Server With Concurrently | 02:37 | |
| 39 | Fetch Data From JSON-Server Backend | 04:56 | |
| 40 | Spinner Component | 05:34 | |
| 41 | Add Feedback & Setting a Proxy | 05:26 | |
| 42 | Update & Delete From JSON-Server | 04:17 | |
| 43 | GitHub Finder Project Intro | 02:35 | |
| 44 | Setup Tailwind & Daisy UI | 08:26 | |
| 45 | Navbar Component | 09:06 | |
| 46 | Footer Component | 03:33 | |
| 47 | Pages & Routes | 07:39 | |
| 48 | Github API & Getting Token | 07:07 | |
| 49 | UserList Component | 10:16 | |
| 50 | Loading Spinner | 03:08 | |
| 51 | Display Users | 06:49 | |
| 52 | Setup Github Context | 09:18 | |
| 53 | Reducers & useReducer Hook | 09:17 | |
| 54 | Clean Up Fetch Users | 03:43 | |
| 55 | User Search Component | 10:27 | |
| 56 | Search Users | 04:32 | |
| 57 | Clear Users | 03:27 | |
| 58 | Alert Context & Reducer | 08:09 | |
| 59 | Alert Component | 07:43 | |
| 60 | Get Single User | 09:39 | |
| 61 | User Profile Top | 11:32 | |
| 62 | User Profile Stats | 08:44 | |
| 63 | Get User Repos | 10:06 | |
| 64 | Repo Items | 08:25 | |
| 65 | Move SearchUsers To Actions File | 06:20 | |
| 66 | Move getUser To Actions File | 07:48 | |
| 67 | Cleaning Up Our Actions & Axios | 07:52 | |
| 68 | Deploy To Vercel | 02:30 | |
| 69 | Section Intro | 00:46 | |
| 70 | useRef Example 1 - Create DOM Reference | 08:20 | |
| 71 | useRef Example 2 - Get Previous State | 05:16 | |
| 72 | useRef Example 3 - Memory Leak Error Fix | 09:44 | |
| 73 | useMemo Example | 10:44 | |
| 74 | useCallback Example | 07:12 | |
| 75 | Custom Hook 1 - useFetch | 09:12 | |
| 76 | Custom Hook 2 - useLocalStorage | 15:10 | |
| 77 | House Marketplace Project Intro | 04:41 | |
| 78 | App & FIrebase Setup | 06:57 | |
| 79 | Enable Authentication & Create Rules | 07:55 | |
| 80 | Dummy Data & Indexes | 11:49 | |
| 81 | Pages & Routes | 06:48 | |
| 82 | Navbar Component | 10:03 | |
| 83 | Sign In & Sign Up Forms | 14:56 | |
| 84 | Register User | 05:29 | |
| 85 | Save User To Firestore | 04:52 | |
| 86 | User Sign In | 08:26 | |
| 87 | Alerts With React Toastify | 04:55 | |
| 88 | User Logout | 05:38 | |
| 89 | Display & Update User Details | 13:25 | |
| 90 | PrivateRoute Component & useAuthStatus Hook | 14:51 | |
| 91 | Forgot Password Page | 09:16 | |
| 92 | Google OAuth | 14:00 | |
| 93 | Explore Page | 05:00 | |
| 94 | Fetch Listings From Firebase | 15:07 | |
| 95 | Listing Item Component | 11:44 | |
| 96 | Offers Page | 03:30 | |
| 97 | Start Create Listing Page | 12:48 | |
| 98 | Create Listing Form | 17:38 | |
| 99 | Get Coords With Geocoding API | 16:34 | |
| 100 | Uploading Images To FIrebase | 11:52 | |
| 101 | Save Listings To Firestore | 08:03 | |
| 102 | Quick Note & Change | 02:06 | |
| 103 | Fetch Single Listing | 08:04 | |
| 104 | Listing Details | 10:57 | |
| 105 | Contact Landlord Page | 12:30 | |
| 106 | Leaflet Map | 07:30 | |
| 107 | Listings Page Slider | 07:02 | |
| 108 | Explore Slider | 13:29 | |
| 109 | Profile Listings & Delete | 12:43 | |
| 110 | Load More Pagination | 08:28 | |
| 111 | Edit Listing Icon | 05:21 | |
| 112 | Edit Listing | 12:42 | |
| 113 | Clear Up Console Warnings | 03:37 | |
| 114 | Deploy To Vercel | 03:18 | |
| 115 | Project Intro | 02:00 | |
| 116 | What Is The MERN Stack? | 04:30 | |
| 117 | MongoDB Setup | 05:08 | |
| 118 | Server File Stucture | 05:51 | |
| 119 | Basic Express Server Setup | 06:25 | |
| 120 | Add Routes & Controller | 05:58 | |
| 121 | Error & Exception Handling | 11:43 | |
| 122 | Connect To The Database | 06:01 | |
| 123 | Register User | 10:05 | |
| 124 | Login & Create JWT | 09:14 | |
| 125 | Protect Routes & Authentication | 13:24 | |
| 126 | Frontend Folder Setup | 09:02 | |
| 127 | Header & Initial Pages | 08:03 | |
| 128 | Home, Login & Register UI | 15:06 | |
| 129 | Redux Setup & Auth Slice | 08:42 | |
| 130 | Hook Register Form To Redux | 09:40 | |
| 131 | Register User | 21:01 | |
| 132 | Logout User | 08:13 | |
| 133 | User Login | 07:54 | |
| 134 | Ticket Model & Routes | 11:08 | |
| 135 | Get & Create Tickets (Backend) | 06:22 | |
| 136 | Single Ticket, Update & Delete (Backend) | 09:21 | |
| 137 | Route Guard | 10:00 | |
| 138 | New Ticket Form | 08:35 | |
| 139 | Add Tickets To Redux | 05:08 | |
| 140 | Create Ticket Functionality | 16:11 | |
| 141 | Fetch Tickets From Backend | 08:52 | |
| 142 | Listing Tickets In UI | 06:42 | |
| 143 | Single Ticket Display | 15:22 | |
| 144 | Close Ticket Functionality | 09:44 | |
| 145 | Notes Backend | 13:31 | |
| 146 | Fetch Notes Through Redux | 08:58 | |
| 147 | Display Notes | 07:54 | |
| 148 | Note Form Modal | 10:19 | |
| 149 | Submit a Note | 05:31 | |
| 150 | Deploy To Heroku | 12:06 |
Unlock unlimited learning
Get instant access to all 149 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 1y agoReact Simplified - Advanced
By: Web Dev Simplified (Kyle Cook)Once you become a good React developer, it is time to start diving into advanced React concepts. This course will take you from a junior to a mid-level React d11h 34m5/5 -
Updated 2y agoReact Js A-Z With Laravel - For Beginner to Advanced Level
By: UdemyThis React Js A-Z With Laravel Course will help you to become a Full Stack Web Developer. React has rapidly become one of the most powerful tools for building W68h 1m -
Updated 2y agoAdd React Storybook to a Project
By: egghead.ioIn this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.3m
Frequently asked questions
What prerequisites are needed before taking this React course?
Before enrolling in this React course, a basic understanding of HTML, CSS, and JavaScript is recommended. Familiarity with JavaScript ES6 features will be particularly beneficial, as concepts like components, hooks, and state management are built upon these foundations. No prior knowledge of React is required, as the course starts with the fundamentals and progresses to more advanced topics.
What kind of projects will I build during the course?
The course includes three main projects: a Feedback App, a GitHub Finder, and a House Marketplace app. The Feedback App focuses on React fundamentals such as components, hooks, props, and state. The GitHub Finder project teaches how to interact with third-party APIs using React. The House Marketplace app is a larger project incorporating Firebase 9 for authentication, Firestore queries, and file storage.
Who is the target audience for this React course?
The course is designed for both beginners who want to learn React from the ground up and experienced React developers looking to strengthen their skills through practical projects. It's particularly beneficial for those interested in building real-world applications using modern React features and integrating with third-party services like Firebase and GitHub APIs.
What tools and libraries will be used in this course?
Throughout the course, students will use Create React App for setting up React projects, React Router for routing, and Firebase 9 for backend services including authentication and Firestore. Tailwind CSS and Daisy UI are used for styling in the GitHub Finder project. Additionally, JSON-Server is utilized for setting up a mock backend during the Feedback App project.
What topics are not covered in this React course?
While the course covers many aspects of React, including state management and working with APIs, it does not focus on advanced topics like server-side rendering or advanced state management libraries such as Redux or MobX. The course also does not cover React Native for mobile app development.
How much time should I expect to commit to complete the course?
The course comprises 150 lessons. While the total runtime is not specified, students should anticipate spending additional time on exercises, projects, and reviewing materials. The time commitment will vary depending on individual pace and prior experience, but students should expect to dedicate several weeks to complete the course thoroughly.
How will this course benefit my career or future learning?
This course equips students with practical skills in building React applications, making them valuable for front-end development roles. Understanding React fundamentals and working with APIs and Firebase broadens career opportunities in web development. The skills gained are also transferrable to other JavaScript frameworks and libraries, enhancing future learning and career prospects.