Top 9 Recommended React Self-Study Materials! [December 2023]

** Just launched in June 2023!

** Take this course after taking my #1 bestselling JavaScript course (850,000+ students)

In 2023, React is still the #1 skill to learn if you want to become a successful front-end developer!

But it can be hard. There are so many moving parts, so many different libraries, so many tutorials out there.

That's why you came here... And you came to the right place! This is THE ultimate React course for 2024 and beyond.

A practice-heavy approach to master React by building polished apps, backed up by diagrams, theory, and looks under the hood of React.

The all-in-one package that takes you from zero to truly understanding React and building modern, powerful, and professional web applications.

Real projects. Real explanations. Real React.

[01] Why is this the right React course for you?

This is the most in-depth React course on Udemy, and it's fundamentally different from all the other ones.

Here's why:

• Contains the biggest and most professional project, where we implement many common app features (see promo video!)

• Super detailed explanations of all important concepts with carefully crafted and animated diagrams

• A huge focus on "how to think in React" and modern best practices

• A long section that explores how React actually works behind the scenes will give you the confidence to use React effectively on your own

• Advanced design patterns like compound components will make you think like a senior React engineer

And these are just the highlights! Check out the full list below (+ the promo video and curriculum).

Also, make no mistake: "React course" actually means "Front-end development with React and modern libraries course".

That's right, besides the React library itself, you will learn and master them all: React Router, Redux, Redux Toolkit, React Query, React Hook Form, Styled Components, Tailwind CSS, and more.

This is how we plan, build, and deploy professional projects! We even use industry-standard tools such as Supabase (fully-fledged back-end), GitHub, Netlify, and Vercel.

As you expect, this course is 100% project-based. So throughout the course, you'll start building your portfolio of 8+ beautiful and high-quality React apps, where each one will showcase a few of the new skills you will be learning.

By the end of the course, you will have all the knowledge and confidence that you need to ace your job interviews and become the professional React developer that companies are looking for.

[02] Why am I the right React teacher for you?

My name is Jonas, I'm an experienced web developer and designer, and one of Udemy's top instructors. I've been teaching web development courses since 2015 to over 1,800,000 developers, so I know exactly how students learn and what is needed to master any subject.

With this in mind, I designed the ideal curriculum for this course: a unique blend of real-world projects, deep explanations, and theory lectures, to turn you into a confident React developer in just a couple of weeks.

Ready to become a confident and independent React developer, highly capable of building your own apps? Then don't wait any longer, and start your React journey today!

[03] Still not sure? Here are all the nerdy details of what we'll cover:

• React fundamentals [why we even need React, components, JSX, props, events, forms, state, props vs. state]

• How to think about state [where to place state, guidelines, lifting state up, local vs. global state, UI vs. remote state]

• How to think about components [how to split components, props as API, how to build reusable and composable components, the children prop]

• Deep dive into effects and useEffect [data fetching, lifecycle vs. synchronization, when to use effects, effects vs. event handlers]

• Deep dive into hooks [rules of hooks, how hooks work, useRef, building super-reusable custom hooks]

• Performance optimization [wasted renders, memoization with memo, useMemo, and useCallback, optimizing Context API, code splitting + Suspense]

• Advanced state management [useReducer hook, the Context API, Redux, Redux Toolkit, Thunks, React Query]

• Building Single-Page Applications (SPA) [Vite, routing with React Router, URL parameters and query strings for state management, data loaders and actions (v6.4+)]

• Building real-world features found in many apps [authentication and authorization, data sorting, filtering and pagination, dark mode, dashboard with charts, etc.]

• Creating your own back-end with a DB and API using Supabase [gain the power to build full-stack apps on your own!]

• How to style React apps [Tailwind CSS, CSS Modules, and Styled Components]

• Advanced React patterns used by senior developers [render props, higher-order components, compound components (to build a modal, a context menu, and more)]

• How React works behind the scenes [rendering, virtual DOM, reconciliation, fiber tree, key prop, events, state batching, etc.]

[04] By signing up today, you'll also get:

• Up-to-date HD-quality videos, that are easy to search and reference (great for Udemy Business learners)

• Downloadable slides PDF for 60+ theory videos (not boring, I promise!)

• Professional English captions (not auto-generated)

• Downloadable assets and starter and final code for each project

• Free and fast support in the course Q&A

• 10+ challenges and exercises to practice your skills (solutions included)

1. Welcome, Welcome, Welcome!
2. Course Roadmap and Projects
3. Building Our First React App!
4. Watch Before You Start!
5. Read Before You Start!
6. Downloading Course Material
7. PART 1: REACT FUNDAMENTALS [4 PROJECTS]
8. Introduction to Part 1
9. Useful Resources for Part 1
10. A First Look at React
11. Section Overview
12. Why Do Front-End Frameworks Exist?
13. React vs. Vanilla JavaScript
14. What is React?
15. Setting Up Our Development Environment
16. Pure React
17. A Quick Look at React's Official Documentation
18. Setting Up a New React Project: The Options
19. Setting Up a Project With Create-React-App
20. [Optional] Review of Essential JavaScript for React
21. Section Overview
22. Destructuring Objects and Arrays
23. Rest/Spread Operator
24. Template Literals
25. Ternaries Instead of if/else Statements
26. Arrow Functions
27. Short-Circuiting And Logical Operators: &&, ||, ??
28. Optional Chaining
29. The Array map Method
30. The Array filter Method
31. The Array reduce Method
32. The Array sort Method
33. Working With Immutable Arrays
34. Asynchronous JavaScript: Promises
35. Asynchronous JavaScript: Async/Await
36. Working With Components, Props, and JSX
37. Section Overview
38. Rendering the Root Component and Strict Mode
39. Before We Start Coding: Debugging
40. Components as Building Blocks
41. Creating And Reusing a Component
42. What is JSX?
43. Creating More Components
44. JavaScript Logic in Components
45. Separation of Concerns
46. Styling React Applications
47. Passing and Receiving Props
48. Props, Immutability, and One-Way Data Flow
49. CHALLENGE #1: Profile Card (v1)
50. The Rules of JSX
51. Rendering Lists
52. Conditional Rendering With &&
53. Conditional Rendering With Ternaries
54. Conditional Rendering With Multiple Returns
55. Extracting JSX Into a New Component
56. Destructuring Props
57. React Fragments
58. Setting Classes and Text Conditionally
59. Section Summary
60. CHALLENGE #2: Profile Card (v2)
61. State, Events, and Forms: Interactive Components
62. Section Overview
63. Let's Build a Steps Component
64. Handling Events the React Way
65. What is State in React?
66. Creating a State Variable With useState
67. Don't Set State Manually!
68. The Mechanics of State
69. Adding Another Piece of State
70. React Developer Tools
71. Updating State Based on Current State
72. More Thoughts About State + State Guidelines
73. A Vanilla JavaScript Implementation
74. CHALLENGE #1: Date Counter (v1)
75. Starting a New Project: The "Far Away" Travel List
76. Building the Layout
77. Rendering the Items List
78. Building a Form and Handling Submissions
79. Controlled Elements
80. State vs. Props
81. EXERCISE #1: Flashcards
82. CHALLENGE #2: Date Counter (v2)
83. Thinking In React: State Management
84. Section Overview
85. What is "Thinking in React"?
86. Fundamentals of State Management
87. Thinking About State and Lifting State Up
88. Reviewing "Lifting Up State"
89. Deleting an Item: More Child-to-Parent Communication!
90. Updating an Item: Complex Immutable Data Operation
91. Derived State
92. Calculating Statistics as Derived State
93. Sorting Items
94. Clearing the List
95. Moving Components Into Separate Files
96. EXERCISE #1: Accordion Component (v1)
97. The "children" Prop: Making a Reusable Button
98. More Reusability With the "children" Prop
99. EXERCISE #2: Accordion Component (v2)
100. CHALLENGE #1: Tip Calculator
101. [Optional] Practice Project: Eat-'N-Split
102. Section Overview
103. Project Setup
104. Building the Static App: List of Friends
105. Building the Static App: Forms
106. Displaying the New Friend Form
107. Adding a New Friend
108. Selecting a Friend
109. Creating Controlled Elements
110. Splitting a Bill
111. PART 2: INTERMEDIATE REACT [2 PROJECTS]
112. Introduction to Part 2
113. Useful Resources for Part 2
114. Thinking in React: Components, Composition, and Reusability
115. Section Overview
116. Setting Up the "usePopcorn" Project
117. How to Split a UI Into Components
118. Splitting Components in Practice
119. Component Categories
120. Prop Drilling
121. Component Composition
122. Fixing Prop Drilling With Composition (And Building a Layout)
123. Using Composition to Make a Reusable Box
124. Passing Elements as Props (Alternative to children)
125. Building a Reusable Star Rating Component
126. Creating the Stars
127. Handling Hover Events
128. Props as a Component API
129. Improving Reusability With Props
130. PropTypes
131. CHALLENGE #1: Text Expander Component
132. How React Works Behind the Scenes
133. Section Overview
134. Project Setup and Walkthrough
135. Components, Instances, and Elements
136. Instances and Elements in Practice
137. How Rendering Works: Overview
138. How Rendering Works: The Render Phase
139. How Rendering Works: The Commit Phase
140. How Diffing Works
141. Diffing Rules in Practice
142. The Key Prop
143. Resetting State With the Key Prop
144. Using the Key Prop to Fix Our Eat-'N-Split App
145. Rules for Render Logic: Pure Components
146. State Update Batching
147. State Update Batching in Practice
148. How Events Work in React
149. Libraries vs. Frameworks & The React Ecosystem
150. Section Summary: Practical Takeaways
151. Effects and Data Fetching
152. Section Overview
153. The Component Lifecycle
154. How NOT to Fetch Data in React
155. useEffect to the Rescue
156. A First Look at Effects
157. Using an async Function
158. Adding a Loading State
159. Handling Errors
160. The useEffect Dependency Array
161. Synchronizing Queries With Movie Data
162. Selecting a Movie
163. Loading Movie Details
164. Adding a Watched Movie
165. Adding a New Effect: Changing Page Title
166. The useEffect Cleanup Function
167. Cleaning Up the Title
168. Cleaning Up Data Fetching
169. One More Effect: Listening to a Keypress
170. CHALLENGE #1: Currency Converter
171. Custom Hooks, Refs, and More State
172. Section Overview
173. React Hooks and Their Rules
174. The Rules of Hooks in Practice
175. More Details of useState
176. Initializing State With a Callback (Lazy Initial State)
177. useState Summary
178. How NOT to Select DOM Elements in React
179. Introducing Another Hook: useRef
180. Refs to Select DOM Elements
181. Refs to Persist Data Between Renders
182. What are Custom Hooks? When to Create One?
183. Creating our First Custom Hook: useMovies
184. Creating useLocalStorageState
185. Creating useKey
186. CHALLENGE #1: useGeolocate
187. [Optional] React Before Hooks: Class-Based React
188. Section Overview
189. Our First Class Component
190. Working With Event Handlers
191. Class Components vs. Function Components
192. Starting the "Classy Weather" App
193. Fetching Weather Data
194. Displaying the Weather
195. Removing Boilerplate Code With Class Fields
196. Child to Parent Communication
197. Lifecycle Methods
198. PART 3: ADVANCED REACT + REDUX [4 PROJECTS]
199. Introduction to Part 3
200. Useful Resources for Part 3

Major course updates in November 2023! 

• Projects are written in Vite, a lightweight and lightning-fast base for React apps

• Projects use Vitest, a test framework that's much faster than Jest
  Note: Vitest code syntax is identical to Jest; all code presented in the course works with both Vitest and Jest.

• The course presents Mock Service Worker v2 syntax, which was released in October 2023.

React Testing Library has become an extremely popular option for testing React, and with good reason! This detailed, comprehensive course provides a solid foundation for React app tests.

Best Practices

React Testing Library is famously opinionated about testing best practices, and is written to encourage these best practices. This course teaches:

• testing behavior over testing implementation

• tests that interact with your app the way a user would

• finding elements by accessibility handles, to make sure your code is accessible as possible

Broad range of testing examples

The course apps start very with very simple examples (clicking a button to change its color) and work up to progressively more complicated testing concepts, such as: 

• testing asynchronous page changes

• simulating data from a server using Mock Service Worker

• applying a context provider to a component when rendering

The course builds up to complex concepts gradually, in a way designed to support your learning and ensure your success.

Practice your new skills

You will also have plenty of opportunities to practice what you’ve learned. The course provides "code quizzes" while building the course projects, where you can apply what you learned and then watch a video to see the solution. The (optional) final section provides even more exercises to complete the second app and reinforce concepts from the course.

Optional React lectures

Any significant React code covered in the course is isolated into separate lectures. Students have a choice: those who want to reinforce their React skills (or learn new ones!) can watch those lectures, while students who feel confident in their React skills can skip them.

Supportive Instructor

The instructor has a proven track record of responding to course Q&A in a helpful and supportive way. She loves to engage with students, answer questions about course concepts, and help debug students' code for the course projects.

1. Introduction
2. Introduction to React Testing Library and Jest / Vitest
3. First Test with Testing Library
4. Jest and Jest-DOM Assertions
5. Jest and Vitest: How Tests Work
6. TDD: Test Driven Development
7. React Testing Library Philosophy
8. Functional Testing vs Unit Testing
9. TDD (Test Driven Development) vs BDD (Behavior Driven Development)
10. Testing Library and Accessibility
11. RESOURCE: Where to find code if you'd rather not write React for this course
12. Simple App: Color Button
13. Overall Course Plan
14. Start Color Button App
15. `logRoles` method for debugging roles
16. Test Behavior when Clicking Button
17. OPTIONAL React Code: Click Button to Change Color
18. Manual Acceptance Testing
19. Test Initial Condition of Button and Checkbox
20. Introduction to Code Quizzes
21. Code Quiz! Confirm Button Disable on Checkbox Check
22. Code Quiz Solution: Confirm Button Disable on Checkbox Check
23. Code Quiz! Disabled Button Turns Gray
24. Unit Testing Functions
25. Code Quiz! Update Tests for New Color Names
26. When to Unit Test
27. Review: Simple App
28. ESLint with Testing Library, plus Prettier
29. ESLint and Prettier
30. ESLint for Testing Library, Jest-DOM and Vitest
31. Configuring ESLint and Prettier in VSCode
32. Sundaes On Demand: Form Review and Popover
33. Introduction to Sundaes on Demand
34. WARNING: VSCode may look different!
35. Code Organization and Introduction to SummaryForm
36. Code Quiz: Checkbox Enables Button
37. OPTIONAL React Code: SummaryForm Checkbox and Button
38. React Bootstrap Popover and Testing Library userEvent
39. Replace `fireEvent` with `userEvent`
40. Screen Query Methods
41. Testing Element is Not on Page: Popover Tests
42. OPTIONAL React Code: Popover
43. Review: Summary Form
44. Simulating Server Response with Mock Service Worker
45. OrderEntry Server Data Introduction
46. Introduction to Mock Service Worker and Handlers
47. Why not mock axios using Jest / Vitest?
48. Setting up the Mock Service Worker Server
49. Tests with Mock Service Worker: Scoop Options
50. OPTIONAL React Code: Options and ScoopOption Components
51. Using `await findBy` to Find Elements that Populate Asynchronously
52. Code Quiz! Topping Options from Server
53. Error Server Response Planning
54. Simulating Server Error Response in Tests
55. OPTIONAL React Code: Alert Banner for Options Server Error
56. Tools for Debugging Tests
57. OPTIONAL: Why doesn't "name" work with the role "alert"?
58. Review: Server Error Response and Test Debugging Tools
59. Testing Components Wrapped in a Provider
60. Intro to Tests for Total and Subtotals
61. Entering Text Input: Subtotal Tests
62. OPTIONAL React Code: OrderDetails Context
63. OPTIONAL React Code: Use Context to Display Scoops Subtotal
64. Adding Context to Test Setup
65. Creating Custom Render to Wrap in Provider By Default
66. Review: Scoops Subtotal with Context
67. Code Quiz! Toppings Subtotal
68. OPTIONAL React Code: Toppings Checkboxes
69. Note on equivalent error strings for next lecture
70. Code Quiz! Grand Total
71. "Not wrapped in act()..." Error
72. OPTIONAL: Why is the explicit unmount needed
73. Manual Acceptance Testing
74. Final Exam: Order Phases
75. Introduction to Final Exam: Order Phases
76. Tips for the new MSW Handler
77. Debugging Tips
78. OPTIONAL React Hints for Order Phase Coding
79. Final Exam Solution
80. OPTIONAL React Code: Order Phases
81. Review: Final Exam, and Introduction to Optional Practice
82. Common Mistakes with React Testing Library
83. Optional Extra Practice
84. Standard Questions for New Tests and Introduction to Exercises
85. Conditional Toppings Section on Summary Page
86. Disable Order Button if No Scoops Ordered
87. Red Input Box for Invalid Scoop Count
88. No Scoops Subtotal Update for Invalid Scoop Count
89. Server Error on Order Confirmation Page
90. Congratulations and Thank You!
91. Bonus
92. Coupons!

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.

The final project has been added! It is a fullstack MERN support ticket system that uses Redux and Redux Toolkit.

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

• Fullstack MERN (MongoDB, Express, React, Node.js)

• REST API creation

• Redux

• Redux Toolkit

• Authentication with JWT

• 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

1. Introduction
2. Welcome To The Course!
3. What Is React?
4. Environment Setup
5. Code Repos
6. Links & Resources
7. React Basics & JSX
8. Feedback Project Intro
9. Create React App
10. Initializing React
11. Intro To JSX
12. Dynamic Values & LIsts in JSX
13. Conditionals in JSX
14. Components, Props & State
15. Creating Your First Component & Props
16. Adding Styles To A Component
17. State & useState Hook
18. Managing Global State
19. Card Component & Conditional Styles
20. Events & Prop Drilling
21. FeedbackStats Component & Reactivity
22. Forms, Validation & Simple Animation
23. Form Input & State
24. Custom Button Component
25. Real-Time Validation
26. Rating Select Component
27. Add Feedback
28. Fade Animation With Framer Motion
29. Creating Routes & Links
30. Creating Routes (React Router 5)
31. Upgrading To React Router 6
32. Creating Links (v5 & v6)
33. NavLink & useParams
34. Navigate & Nested Routes
35. Context API, useContext Hook & Deployment
36. Create a Context & Provider
37. Get Global State With The useContext Hook
38. Moving Functions To Context
39. Edit Feedback Event
40. Side Effects With useEffect
41. Update Feedback Item
42. Deploy To Netlify
43. APIs & HTTP Requests
44. APIs & Requests Explained
45. Setting Up JSON-Server Mock Backend
46. Run Client & Server With Concurrently
47. Fetch Data From JSON-Server Backend
48. Spinner Component
49. Add Feedback & Setting a Proxy
50. Update & Delete From JSON-Server
51. GitHub Finder Project Start
52. GitHub Finder Project Intro
53. Setup Tailwind & Daisy UI
54. Navbar Component
55. Footer Component
56. Pages & Routes
57. Working With The GitHub API
58. Github API & Getting Token
59. UserList Component
60. Loading Spinner
61. Display Users
62. Setup Github Context
63. Reducers & useReducer Hook
64. Clean Up Fetch Users
65. User Search Component
66. Search Users
67. Clear Users
68. User Profile & Alerts
69. Alert Context & Reducer
70. Alert Component
71. Get Single User
72. User Profile Top
73. User Profile Stats
74. Get User Repos
75. Repo Items
76. Refactoring Context & Actions
77. Move SearchUsers To Actions File
78. Move getUser To Actions File
79. Cleaning Up Our Actions & Axios
80. Deploy To Vercel
81. More Advanced React Hooks
82. Section Intro
83. useRef Example 1 - Create DOM Reference
84. useRef Example 2 - Get Previous State
85. useRef Example 3 - Memory Leak Error Fix
86. useMemo Example
87. useCallback Example
88. Custom Hook 1 - useFetch
89. Custom Hook 2 - useLocalStorage
90. House Marketplace Project Start
91. House Marketplace Project Intro
92. App & FIrebase Setup
93. Enable Authentication & Create Rules
94. Dummy Data & Indexes
95. Pages & Routes
96. Navbar Component
97. Firebase Authentication & Profile
98. Sign In & Sign Up Forms
99. Register User
100. Save User To Firestore
101. User Sign In
102. Alerts With React Toastify
103. User Logout
104. Display & Update User Details
105. PrivateRoute Component & useAuthStatus Hook
106. Forgot Password Page
107. Google OAuth
108. Get & Create Listings
109. Explore Page
110. Fetch Listings From Firebase
111. Listing Item Component
112. Offers Page
113. Start Create Listing Page
114. Create Listing Form
115. Get Coords With Geocoding API
116. Uploading Images To FIrebase
117. Save Listings To Firestore
118. Quick Note & Change
119. Single Listings, Map, Slider & Edit
120. Fetch Single Listing
121. Listing Details
122. Contact Landlord Page
123. Leaflet Map
124. Listings Page Slider
125. Explore Slider
126. Profile Listings & Delete
127. Load More Pagination
128. Edit Listing Icon
129. Edit Listing
130. Clear Up Console Warnings
131. Deploy To Vercel
132. MERN Project Start, API & Backend Authentication
133. Project Intro
134. What Is The MERN Stack?
135. MongoDB Setup
136. Server File Stucture
137. Basic Express Server Setup
138. Add Routes & Controller
139. Error & Exception Handling
140. Connect To The Database
141. Register User
142. Login & Create JWT
143. Protect Routes & Authentication
144. Frontend Authentication
145. Frontend Folder Setup
146. Header & Initial Pages
147. Home, Login & Register UI
148. Redux Setup & Auth Slice
149. Hook Register Form To Redux
150. Register User
151. Logout User
152. User Login
153. Tickets Functionality
154. Ticket Model & Routes
155. Get & Create Tickets (Backend)
156. Single Ticket, Update & Delete (Backend)
157. Route Guard
158. New Ticket Form
159. Add Tickets To Redux
160. Create Ticket Functionality
161. Fetch Tickets From Backend
162. Listing Tickets In UI
163. Single Ticket Display
164. Close Ticket Functionality
165. Notes Functionality & Deploy
166. Notes Backend
167. Fetch Notes Through Redux
168. Display Notes
169. Note Form Modal
170. Submit a Note
171. Deploy To Heroku

This bestselling course has turned more than 750,000 students into ReactJS developers (more than any other React course on Udemy)!

-

BIG COURSE UPDATE October 2023:

Updated the entire first half of the course (re-recorded lectures, other half was updated at beginning of year already)!

Improved explanations & demo projects. Course now covers even more key concepts & best practices.

Updated August 2023:

Added brand-new section on React Query (Tanstack Query)

Added brand-new section on animating React apps with Framer Motion

Updated June 2023:

Add two new practice projects

Added more coding exercises

Added brand-new JS Refresher section

Tons of minor improvements & fixes

This course is completely up-to-date with the very latest version of React with all the core, modern features you need to know & teaches you React in a practical, hands-on way!

Updated February 2023:

Completely re-recorded majority of second half of course (incl. routing, authentication)

A Course For Busy Customers & Business Professionals!

This course also comes with two paths which you can take: The "complete" path (full >40h course) and the "summary" (fast-track) path (~4h summary module) - you can choose the path that best fits your time requirements! 

React.js is THE most popular JavaScript library you can use and learn these days to build modern, reactive user interfaces for the web.

This course teaches you React in-depth, from the ground up, step by step by diving into all the core basics, exploring tons of examples and also introducing you to advanced concepts as well.

You'll get all the theory, tons of examples and demos, assignments and exercises and tons of important knowledge that is skipped by most other resources - after all, there is a reason why this course is that huge! :)

And in case you don't even know why you would want to learn React and you're just here because of some ad or "the algorithm" - no worries: ReactJS is a key technology as a web developer and in this course I will also explain WHY it's that important!

Welcome to "React - The Complete Guide"!

This course will teach you React.js in a practice-oriented way, using all the latest patterns and best practices you need. You will learn all the key fundamentals as well as advanced concepts and related topics to turn you into a React.js developer.

This is a huge course because it really covers EVERYTHING you need to know and learn to become a React.js developer!

No matter if you know nothing about React or if you already got some basic React knowledge (not required but also not a problem), you will get tons of useful information and knowledge out of this course!

My goal with this course is to ensure that you feel confident working with React, so that you can apply for React jobs, use it in your own projects or simply enhance your portfolio as a developer - whatever your goal is: This course gets you there!

I kept this course updated since its initial launch to ensure that you always learn React in the best possible and up-do-date way!

What's in this course?

• A thorough introduction to React.js (What is it and why would you use it?)

• All the core basics: How React works, building components with React & building UIs with React

• Components, props & dynamic data binding

• Working with user events and state to create interactive applications

• A (thorough) look behind the scenes to understand how React works under the hood

• Detailed explanations on how to work with lists and conditional content

• React Hooks (in-depth)!

• Working with built-in Hooks and building custom Hooks

• How to debug React apps

• Styling React apps with "Styled Components" and "CSS Modules"

• Working with "Fragments" & "Portals"

• Dealing with side effects

• Class-based components and functional components

• Sending Http requests & handling transitional states + responses

• Handling forms and user input (incl. validation)

• Redux & Redux Toolkit

• Routing with React Router

• An in-depth introduction into Next.js

• Deploying React Apps

• Implementing Authentication

• Unit Tests

• Combining React with TypeScript

• Adding Animations

• Tons of examples and demo projects so that you can apply all the things you learned in real projects

• And so much more - check out the full curriculum on this page!

This really is the "Complete Guide" - promised!

And best of all?

You don't need any prior React knowledge!

This course starts with zero knowledge assumed! All you need is basic web development and JavaScript knowledge (though the course even includes a brief JavaScript refresher to ensure that we're all on the same page!).

Check out the full curriculum, the free preview videos and join the course risk-free thanks to the 30-day money-back guarantee!

1. Getting Started
2. Welcome To The Course!
3. What is React.js? And Why Would You Use It?
4. ReactJS vs "Vanilla JavaScript": Why Use React?
5. Editing Our First React App
6. About This Course & Course Outline
7. The Two Ways (Paths) Of Taking This Course
8. Getting The Most Out Of This Course
9. Join our Online Learning Community
10. Creating React Projects
11. Why Do You Need A Special Project Setup?
12. JavaScript Refresher
13. Module Introduction
14. Starting Project
15. Adding JavaScript To A Page & How React Projects Differ
16. React Projects Use a Build Process
17. "import" & "export"
18. Revisiting Variables & Values
19. Revisiting Operators
20. Revisiting Functions & Parameters
21. Exercise: Working with Functions
22. Arrow Functions
23. More on the Arrow Function Syntax
24. Revisiting Objects & Classes
25. Arrays & Array Methods like map()
26. Exercise: Array Methods
27. Destructuring
28. Destructuring in Function Parameter Lists
29. The Spread Operator
30. Revisiting Control Structures
31. Manipulating the DOM - Not With React!
32. Using Functions as Values
33. Defining Functions Inside Of Functions
34. Reference vs Primitive Values
35. Next-Gen JavaScript - Summary
36. JS Array Functions
37. Module Resources
38. React Essentials - Components, JSX, Props, State & More
39. Module Introduction
40. It's All About Components! [Core Concept]
41. Setting Up The Starting Project
42. JSX & React Components [Core Concept]
43. Creating & Using a First Custom Component
44. A Closer Look: Components & File Extensions
45. Building & Using a Component
46. How React Handles Components & How It Builds A "Component Tree" [Core Concept]
47. Components & JSX
48. Using & Outputting Dynamic Values [Core Concept]
49. Setting HTML Attributes Dynamically & Loading Image Files
50. Outputting Dynamic Content
51. Making Components Reusable with Props [Core Concept]
52. Alternative Props Syntaxes
53. More Prop Syntaxes
54. Working with Props
55. Dynamic Values & Props
56. Best Practice: Storing Components in Files & Using a Good Project Structure
57. Storing Component Style Files Next To Components
58. Component Composition: The special "children" Prop [Core Concept]
59. Component Composition
60. Reacting to Events [Core Concept]
61. Passing Functions as Values to Props
62. Reacting to Events
63. Passing Custom Arguments to Event Functions
64. Configuring Event Handlers
65. Best Practices & Event Handling
66. How NOT to Update the UI - A Look Behind The Scenes of React [Core Concept]
67. Managing State & Using Hooks [Core Concept]
68. Working with State
69. Deriving & Outputting Data Based on State
70. State & Computed Values
71. Rendering Content Conditionally
72. Conditional Content
73. CSS Styling & Dynamic Styling
74. Dynamic Styling
75. Outputting List Data Dynamically
76. Dynamic List Content
77. Conditional Content & Dynamic Lists
78. Module Summary
79. React Essentials - Deep Dive
80. Module Introduction
81. You Don't Have To Use JSX!
82. Working with Fragments
83. Using Fragments
84. When Should You Split Components?
85. Splitting Components By Feature & State
86. Problem: Props Are Not Forwarded To Inner Elements
87. Forwarding Props To Wrapped Elements
88. Forwarding Props
89. Working with Multiple JSX Slots
90. Setting Component Types Dynamically
91. Setting Default Prop Values
92. Creating Flexible Components
93. Onwards To The Next Project & Advanced Concepts
94. Not All Content Must Go Into Components
95. Closer Look: public/ vs assets/ for Image Storage
96. New Project: First Steps Towards Our Tic-Tac-Toe Game
97. Concept Repetition: Splitting Components & Building Reusable Components
98. Concept Repetition: Working with State
99. Component Instances Work In Isolation!
100. Conditional Content & A Suboptimal Way Of Updating State
101. Best Practice: Updating State Based On Old State Correctly
102. User Input & Two-Way-Binding
103. Two-Way-Binding
104. Rendering Multi-Dimensional Lists
105. Best Practice: Updating Object State Immutably
106. Lifting State Up [Core Concept]
107. Avoid Intersecting States!
108. Prefer Computed Values & Avoid Unnecessary State Management
109. Deriving State From Props
110. Sharing State Across Components
111. Reducing State Management & Identifying Unnecessary State
112. Disabling Buttons Conditionally
113. Outsourcing Data Into A Separate File
114. Lifting Computed Values Up
115. Deriving Computed Values From Other Computed Values
116. Tic-Tac-Toe Game: The "Game Over" Screen & Checking for a Draw
117. Why Immutability Matters - Always!
118. When NOT To Lift State Up
119. An Alternative To Lifting State Up
120. Final Polishing & Improving Components
121. React Essentials - Practice Project
122. Module Introduction & A Challenge For You!
123. Adding a Header Component
124. Getting Started with a User Input Component
125. Handling Events & Using Two-Way-Binding
126. Lifting State Up
127. Computing Values & Properly Handling Number Values
128. Outputting Results in a List & Deriving More Values
129. Outputting Content Conditionally
130. Styling React Components
131. Module Introduction & Starting Project
132. Splitting CSS Code Across Multiple Files
133. Styling React Apps with Vanilla CSS - Pros & Cons
134. Vanilla CSS Styles Are NOT Scoped To Components!
135. Styling React Apps with Inline Styles
136. Dynamic & Conditional Inline Styles
137. Dynamic Styling with Inline Styles
138. Dynamic & Conditional Styling with CSS Files & CSS Classes
139. Dynamic Styling with CSS Classes
140. Scoping CSS Rules with CSS Modules
141. Introducing "Styled Components" (Third-party Package)
142. Creating Flexible Components with Styled Components
143. Dynamic & Conditional Styling with Styled Components
144. Styled Components: Pseudo Selectors, Nested Rules & Media Queries
145. Creating Reusable Components & Component Combinations
146. Introducing Tailwind CSS For React App Styling
147. Adding & Using Tailwind CSS In A React Project
148. Tailwind: Media Queries & Pseudo Selectors
149. Dynamic & Conditional Styling with Tailwind
150. Migrating The Demo App to Tailwind CSS
151. Tailwind CSS: Pros & Cons
152. --- LEGACY CONTENT BELOW ---
153. Module Introduction
154. Setting Dynamic Inline Styles
155. Exercise: Dynamic Styles
156. Setting CSS Classes Dynamically
157. Exercise: Dynamic CSS Classes
158. Introducing Styled Components
159. Styled Components & Dynamic Props
160. Styled Components & Media Queries
161. Using CSS Modules
162. Dynamic Styles with CSS Modules
163. Module Resources
164. Debugging React Apps
165. Module Introduction
166. The Starting Project
167. Understanding React Error Messages
168. Using the Browser Debugger & Breakpoints
169. Understanding React's "Strict Mode"
170. Using the React DevTools (Browser Extension)
171. Exercise: Fix Errors
172. Working with Refs & Portals
173. Module Introduction & Starting Project
174. Repetition: Managing User Input with State (Two-Way-Binding)
175. Repetition: Fragments
176. Introducing Refs: Connecting & Accessing HTML Elements via Refs
177. Manipulating the DOM via Refs
178. Accessing DOM Elements with "refs"
179. Refs vs State Values
180. Adding Challenges to the Demo Project
181. Setting Timers & Managing State
182. Using Refs for More Than "DOM Element Connections"
183. Managing Other Values with Refs
184. Adding a Modal Component
185. Forwarding Refs to Custom Components
186. Forwarding Refs
187. Exposing Component APIs via the useImperativeHandle Hook
188. Exposing Component APIs
189. More Examples: When To Use Refs & State
190. Sharing State Across Components
191. Enhancing the Demo App "Result Modal"
192. Closing the Modal via the ESC (Escape) Key
193. Introducing & Understanding "Portals"
194. Working with Portals
195. --- LEGACY CONTENT BELOW ---
196. Module Introduction
197. JSX Limitations & Workarounds
198. Creating a Wrapper Component
199. React Fragments
200. Introducing React Portals

Congratulations!  You've found the most popular, most complete, and most up-to-date resource online for learning React and Redux!

Thousands of other engineers have learned React and Redux, and you can too.  This course uses a time-tested, battle-proven method to make sure you understand exactly how React and Redux work, and will get you a new job working as a software engineer or help you build that app you've always been dreaming about.

The difference between this course and all the others: you will understand the design patterns used by top companies to build massively popular web apps.

React is the most popular Javascript library of the last five years, and the job market is still hotter than ever.  Companies large and small can't hire engineers who understand React and Redux fast enough, and salaries for engineers are at an all time high.  It's a great time to learn React!

___________________

What will you build?

This course features hundreds of videos with hundreds of custom diagrams to help you understand how React and Redux work.  No prior experience with either is necessary. Through tireless, patient explanations and many interesting practical examples, you'll learn the fundamentals of building dynamic and live web apps using React.

Each topic included in this course is added incrementally, to make sure that you have a solid foundation of knowledge.  You'll find plenty of discussion added in to help you understand exactly when and where to use each feature of React and Redux.

My guarantee to you: there is no other course online that teaches more features of React and Redux Toolkit.  This is the most comprehensive resource there is.

Below is a partial list of the topics you'll find in this course:

• Master the fundamental features of React, including JSX, state, and props

• From square one, understand how to build reusable components

• Dive into the source code of Redux to understand how it works behind the scenes

• Test your knowledge and hone your skills with numerous coding exercises

• Use popular styling libraries to build beautiful apps

• See different methods of building UI's through composition of components

• Remember all these techniques with clearly-written cheatsheets

  
  

Besides just React and Redux, you'll pick up countless other tidbits of knowledge, including design techniques, popular design patterns, and repeatable steps to build new components.

This is the course I wanted to take when I first learned React: complete, up-to-date, and clear.

1. Let's Dive In!
2. How to Get Help
3. Join Our Community!
4. Course Resources
5. Let's Build an App!
6. Critical Questions
7. Core Concepts
8. A Few More Critical Questions
9. Node Setup
10. Creating a React Project
11. What is Create React App?
12. Creating Content with JSX
13. Showing Basic Content
14. What is JSX?
15. Printing JavaScript Variables in JSX
16. Shorthand JS Expressions
17. Showing Javascript Values in JSX
18. Exercise Overview
19. Quick Practice with JSX
20. Exercise Solution
21. Typical Component Layouts
22. Customizing Elements with Props
23. Converting HTML to JSX
24. Applying Styling in JSX
25. More on JSX
26. Practice JSX Conversion
27. Exercise Solution
28. Extracting Components
29. Module Systems Overview
30. Imports and Exports
31. Cheatsheet for JSX
32. Building with Reusable Components
33. Project Overview
34. Creating Core Components
35. Introducing the Props System
36. Picturing the Movement of Data
37. Adding Props
38. Using Argument Destructuring
39. Practice with Props
40. Exercise Solution
41. The React Developer Tools
42. The Most Common Props Mistake
43. Communicating With Props
44. Images for the App
45. Including Images
46. Handling Image Accessibility
47. Review on how CSS Works
48. Adding CSS Libraries with NPM
49. A Big Pile of HTML!
50. Last Bit of Styling
51. State: How to Change Your App
52. App Overview
53. Initial App Setup
54. Introducing the Event System
55. Events in Detail
56. Variations on Event Handlers
57. Quiz on Events
58. Exercise with Events
59. Exercise Solution
60. Introducing the State System
61. More on State
62. Understanding the Re-Rendering Process
63. Got These Five Points?
64. Why Array Destructuring?
65. Back to the App
66. Picking a Random Element
67. List Building in React
68. Images for the App
69. Loading and Showing SVGs
70. Increasing Image Size
71. Adding Custom CSS
72. Finalizing Styling
73. App Wrapup and Review
74. Using an API with React
75. App Overview
76. Project Setup
77. The Path Forward
78. Overview of HTTP Requests
79. Understanding the API
80. Making an HTTP Request
81. [Optional] Using Async:Await
82. Data Fetching Cleanup
83. Thinking About Data Flow
84. Child to Parent Communication
85. Implementing Child to Parent Communication
86. Upward Communication
87. Handling Form Submission
88. Handling Input Elements
89. [Optional] OK But Why?
90. Creating a Controlled Input
91. Exercise Solution
92. Running the Search
93. Reminder on Async:Await
94. Communicating the List of Images Down
95. Building a List of Images
96. Handling List Updates
97. Notes on Keys
98. Displaying Images
99. A Touch of Styling
100. App Wrapup
101. How to Handle Forms
102. App Overview
103. Initial Setup
104. State Location
105. Reminder on Event Handlers
106. Extra CSS
107. Receiving New Titles
108. Adding Styling
109. Updating State
110. Don't Mutate That State!
111. State Updates - Cheat Sheet
112. [Optional] Adding Elements to the Start or End
113. Adding Elements
114. [Optional] Exercise Solution
115. [Optional] Inserting Elements
116. Inserting Elements
117. [Optional] Exercise Solution
118. [Optional] Removing Elements
119. Removing Elements
120. [Optional] Exercise Solution
121. [Optional] Modifying Elements
122. [Super Optional] Why the Special Syntax?
123. Modifying Elements
124. [Optional] Exercise Solution
125. [Optional] Adding, Changing, or Removing Object Properties
126. Cheatsheet for State Changes
127. Adding a Book, For Real!
128. Generating Random ID's
129. Displaying the List
130. Deleting Records
131. Toggling Form Display
132. Default Form Values
133. Updating the Title
134. Closing the Form on Submit
135. A Better Solution!
136. Collapsing Two Handlers into One
137. Adding Images
138. Data Persistence with API Requests
139. Adding Data Persistence
140. Server Setup
141. What Just Happened?
142. How the API Works
143. Introducing the REST Client
144. ECONNREFUSED 127.0.0.1:3001 Errors in VSCode
145. Using the REST Client
146. Creating a New Record
147. Fetching a List of Records
148. Introducing useEffect
149. useEffect in Action
150. More on useEffect
151. When Does it Run?
152. Updating a Record
153. Thinking About Updates
154. Deleting a Record
155. Communication Using the Context System
156. Introducing Context
157. Context in Action
158. Changing Context Values
159. More on Changing Context
160. Application vs Component State
161. Refactoring to Use Context
162. Refactoring the App
163. Quick Note
164. Reminder on Sharing with Context
165. Props and Context Together
166. Last Bit of Refactoring
167. A Small Taste of Reusable Hooks
168. Deeper Dive into Hooks!
169. Return to useEffect
170. Quick Note
171. Understanding the Issue
172. Applying the Fix
173. ESLint is Good, but be Careful!
174. Stable References with useCallback
175. Fixing Bugs with useCallback
176. Fixing UseEffect Bugs
177. useEffect Cleanup Functions
178. The Purpose of Cleanup Functions
179. Custom Navigation and Routing Systems
180. Important Info About the Following Sections and Lectures
181. Project Overview
182. Project Setup
183. Some Button Theory
184. Underlying Elements
185. The Children Prop
186. Props Design
187. Validating Props with PropTypes
188. PropTypes in Action
189. Introducing TailwindCSS
190. Updated Guidance for Installing and Configuring Tailwind
191. Installing Tailwind
192. How to use Tailwind
193. Review on Styling
194. The ClassNames Library
195. Building Some Variations
196. text-white Overriding Other Colors
197. Finalizing the Variations
198. Using Icons in React Projects
199. Issues with Event Handlers
200. Passing Props Through