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
Free
React Front To Back 2022 is a 150-lesson 19 hours 57 minutes self-paced course by Brad Traversy, Udemy. This course is for anyone that wants to learn React and also for React developers looking to build some projects and sharpen their skills.
Course facts
- Lessons
- 150
- Duration
- 19 hours 57 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Brad Traversy, Udemy
- Price
- Free
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.
Who teaches React Front To Back 2022?
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.
What lessons are included in React Front To Back 2022?
- Space or K: play or pause
- J: rewind 10 seconds
- L: forward 10 seconds
- Left Arrow: rewind 5 seconds
- Right Arrow: forward 5 seconds
- Up Arrow: volume up
- Down Arrow: volume down
- M: mute or unmute
- F: toggle fullscreen
- T: toggle theater mode
- I: toggle mini player
- 0 to 9: seek to 0 to 90 percent of the video
- Shift plus N: next video
- Shift plus P: previous video
0:00 0:00
| # | Lesson Title | Duration |
|---|---|---|
| 1 | Welcome To The Course! | 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 |
What courses are similar to React Front To Back 2022?
-
ClassicReact Query
By: UI.dev (Tyler McGinnis)Learn React Query with the official React Query course. WANT TO SKIP THE DOCS? There s an easier way to master React Query.7h 1m5/5 -
Updated 2y agoMy first Remix app
By: Build UIRemix is a modern full-stack React framework built on the foundations of the web platform. It layers the latest innovations in the frontend ecosystem on top of5h5/5 -
ClassicThe interactive way to master modern React - react.gg (FULL COURSE)
By: UI.dev (Tyler McGinnis)OPTIMIZED FOR AHA! We’re obsessed with helping you reach your aha! moments. Our text sections help you master the “why” behind React concepts and include fun, i7h 53m5/5 -
Updated 2y agoBuild a Notion Clone with React and TypeScript
By: Zero To MasteryMaster React and TypeScript by building a Notion clone. Learn to use Vite for project setup and Supabase for database management. Showcase your skills with a7h 57m5/5 -
Updated 2y agoBuilding a Component Library with Storybook
By: Handlebar Labs (Spencer Carli)Learn to create a library of components that are easy to use, self documenting, and easily tested. I've found that using Storybook to define my component's API1h 10m -
Updated 2y agoSolidity & Ethereum in React (Next JS): The Complete Guide
By: UdemyCreate real Smart Contracts in Solidity and DApps with React & Next JS. Understand how the Ethereum blockchain works.38h 47m
More courses by Brad Traversy
-
FreeClassicNext.js From Scratch 2024
The main project in this course is a full-featured property rental website with property search, browsing and management. User authentication using Next Auth al11h 54m5/5 -
Updated 2y agoPHP From Scratch 2024 | Beginner To Advanced
Learn PHP fundamentals then build a job listing website from the ground up, using a Laravel-like infrastructure. This course is broken up into two parts. First18h 17m5/5 -
ClassicMERN Stack From Scratch
We spend 12 hours creating this project from scratch. It includes a multi-step checkout process with PayPal integration, product search, rating & review, user p13h 32m5/5 -
Updated 3y agoDjango with React | An Ecommerce Website
Build an eCommerce platform from the ground up with React, Redux, Django & Postgres.18h 6m5/5 -
Updated 3y ago20 Web Projects With Vanilla JavaScript
This is a fun, practical & project based course for all skill levels. The projects in this course are designed to get you building things using HTML5, CSS & Jav16h 8m -
ClassicModern JavaScript From The Beginning 2.0
This is a 37+ hour in-depth course that will take you from the absolute beginning of JavaScript, learning about data types, functions and loops to learning DOM36h 42m5/5
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.