Top 9 Recommended React Self-Study Materials! [November 2024]

Learn React with a course that respects your time!

Summing up, this course allows you to learn React JS (v18 - 2024) in depth, from scratch, and in only a few hours. It's the best React course choice for every busy developer or individual in general.

Enroll in this course now and learn how to:

• Create comprehensive front-end applications using React

• Use React components, routing, and states to create maintainable applications

• Use the most important features of the React framework to build real-world applications

• Build clean and scalable React applications by using reducers

• Implement global state management using the Context API

• Deal with real-world data

• Consume a web API using axios from within your React applications

  
  

What's inside this course:

• Setting up Development Environment for React projects

• Components

• React Hooks (e.g. useState, useEffect, useReducer)

• States

• Effects

• React Router including query parameters and private routes

• Reducers

• Context API and Providers (useContext and createContext)

• JSX

• Filtering

• Searching

• Dynamically assigning styling

• Reacting to HTML events

• Forms

• Validation

• Data Binding

• Adding Packages

• React Dev Tools

  
  

In addition, you will easily apply and understand more advanced concepts like:

• Error Handling

• Sending Data to child components

• Sending Data to parent components

• Creating controlled components

• Building scalable react applications by improving state handling (reducers and context)

  
  

30 Day Full Money Back Guarantee

This course comes with a 30-day full money-back guarantee. Take the course, watch every lecture, and do the exercises, and if you feel like this course is not for you, ask for a full refund within 30 days. All your money back, no questions asked.

Enroll now, take the fast lane, and master React JS in only a few hours.

1. React Fundamentals
2. Project "Moviedux" Introduction
3. Sourcecode: Moviedux
4. React 101: React itself
5. Installing Visual Studio Code
6. Installing NodeJS
7. React extensions that make our life easier
8. Creating a React project and handling package versions
9. Cheat Sheet: React Introduction
10. Exploring our ReactJS project
11. Download: Moviedux Project Resources (Images, Logos, Css, etc.)
12. Importing the Moviedux project resources
13. Modifying the app component
14. React 101 - Components
15. Creating the Header component
16. Footer component with dynamic date and JSX
17. Assignment - React Components
18. Quiz Components
19. Cheat Sheet: React Components
20. JavaScript for React Part 1: Scope, Arrow Functions and more
21. JavaScript for React Intro
22. Scope of var, let and const
23. Arrow functions
24. Functions as declarations or expressions
25. Rest Operator
26. Spread Operator
27. Handling state with React
28. Creating the MoviesGrid component
29. React 101 - State
30. Creating the movies state with UseState
31. Setting the movies state with UseEffect
32. Using the react developer tools
33. Loading movies from JSON
34. Rendering the movies in cards
35. A small request
36. Quiz State
37. Assignment - React State
38. Cheat Sheet: React State and Effect
39. Events, Searching, Refactoring and Domain Logic
40. React 101 - Props
41. Refactoring to a MovieCard and component properties
42. Error handler for image loading
43. Dynamic rating color
44. Search state and search bar
45. Search bar logic
46. Quiz Props
47. Filtering with advanced UI and events
48. Filter bar
49. Filter event handling
50. Filter logic
51. React Router, Watchlisting, Lifting State and Props
52. React 101: Router
53. Installing React Router
54. Configuring the router
55. Lifting the movie state
56. Watchlist state
57. Watchlist component props
58. Watchlist UI toggle
59. Quiz Router
60. Cheat Sheet: React Router
61. JavaScript for React Part 2: Modules, Interpolations and Array Methods
62. Default export of modules
63. Named export of modules
64. Template literals, string interpolations and multi-line strings
65. Array find()
66. Array filter()
67. Array forEach()
68. Array map()
69. Building a web application with React Reducers
70. Project "Bug Blaster" Introduction
71. Source Code: Bug Blaster
72. Resources for "Bug Blaster" Project
73. Setting up the bug blaster project
74. Creating the ticket form logic
75. Building the ticket form
76. Building the priority selection
77. Building a ticket from the form
78. React 101 - Reducer
79. Creating the ticket reducer
80. Quiz: Reducer
81. Implementing the ticket reducer actions
82. Dispatching the ADD_TICKET action using the useReducer hook
83. Creating the TicketItem component
84. Creating the TicketList component and conditional rendering
85. Deleting tickets
86. Editing Tickets
87. Deleting an "under-edit" ticket
88. Canceling an edit procedure
89. Sorting tickets by priority
90. Cheat Sheet: React Reducer
91. Using the context API for global state
92. React 101 - Context
93. Example of prop drilling for context
94. Creating your first context
95. Blog application with Context API
96. Combining context and prop drilling
97. Combining state and context part 1
98. Combining state and context part 2
99. Congratulations! You have finished the section
100. Cheat Sheet: React Context
101. JavaScript for React Part 3: Promises, Async and Await
102. Promises
103. Promises fetch example
104. Async and await
105. Consuming a web API using axios in React
106. Intro consuming an API
107. Mock API
108. React 101: HTTP requests and responses
109. Project creation
110. Creating a service layer with axios
111. Creating the post component
112. Getting posts and promises
113. Displaying posts
114. Deleting posts
115. Creating a new post
116. Post form
117. Post state after creating a new one
118. Updating an existing post
119. Update post logic part 1
120. Update post logic part 2
121. React Router In-Depth
122. Setting up the project
123. Book context
124. Component to show all books
125. Default router setup
126. Router redirection
127. Dynamic route parameter part 1
128. Dynamic route parameter part 2
129. Not found route (404)
130. Reading query parameters part 1
131. Reading query parameters part 2
132. Private routes
133. Completing the course
134. Congrats

** Just launched 16 BONUS hours of Next.js content in May 2024!

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

In 2024, 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 epic React (+ Next.js) 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

• Many sections (16 hours!) on Next.js with the modern "app" router (with React Server Components and Server Actions)

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, Next.js, 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 10+ 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,900,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 and Next.js developer in just a couple of weeks.

Ready to become a confident and independent React + Next.js 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.]

• Next.js with the "app" router, React Server Components, and Server Actions [server-side rendering, static vs. dynamic rendering, state management between server and client, data loading strategies, streaming, caching, image and font optimization, authentication with NextAuth, modern React hooks (useFormState and useOptimistic)]

[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 70+ 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

TypeScript is an amazing technology that helps developers write better code with less errors - simply because it let's you catch & fix type-related errors immediately whilst writing the code (instead of when testing the application).

But using TypeScript with React can sometimes be tricky. Especially when building more complex, dynamic components, defining the right types can be challenging.

That's why I built this course!

This course will teach you how to use TypeScript with React - and, of course, the course will introduce you to all the core concepts & patterns you need to work with components, state, side effects & more in a type-safe way!

This course will:

• Teach you WHY using TypeScript in your React projects might be a good idea

• Introduce you to the key TypeScript concepts you'll need - when working with React & in general

• Get you started with using TypeScript with React - for components, state & more

• Explore more advanced, complex patterns & examples

• Help you with building dynamic or even polymorphic components in a type-safe way

• Teach you how to use TypeScript with React's Context API

• Explore how you can enhance code used with useReducer() with help of TypeScript

• Cover data fetching & useEffect() with TypeScript

• Use the popular Redux library in a type-safe way

• Build or improve multiple demo projects so that can apply your knowledge

By the end of the course, you'll be able to use TypeScript in your own (future) React projects and write better, more type-safe code.

Course prerequisites:

• NO prior TypeScript knowledge is required - though basic knowledge will help (but the course includes an introduction module)

• Basic React knowledge (components, JSX, state) IS required - more advanced concepts will be explained though

1. Introduction
2. Welcome To The Course!
3. Why React & TypeScript?
4. About The Course & Course Content
5. How To Get The Most Out Of The Course
6. Learning Community & Course Resources
7. Creating & Using React + TypeScript Projects
8. Course Setup
9. TypeScript Basics & Core Concepts
10. Module Introduction
11. TypeScript Setup & Using TypeScript
12. Working with Types: Type Inference & Explicit Type Annotations
13. Basic Primitive Types
14. Invoking The TypeScript Compiler
15. Combining Types Union Types (Alternative Types)
16. Working with Object Types
17. Working with Array Types
18. Adding Types to Functions - Parameter & Return Value Types
19. Defining Function Types
20. Creating Custom Types / Type Aliases
21. Defining Object Types with Interfaces
22. Interfaces vs Custom Types
23. Merging Types
24. Being Specific With Literal Types
25. Adding Type Guards
26. Type Guards & Type Narrowing - A Closer Look
27. Making Sense Of Generic Types
28. Summary
29. Using TypeScript with React - Essentials
30. Module Introduction
31. Creating a React + TypeScript Project
32. Understanding the Role of tsconfig.json
33. Building a First Component & Facing a Missing Type
34. Defining Component Props Types
35. Storing Props Types as a Custom Type or Interface
36. Defining a Type for Props with "children"
37. Component Props & The Special "key" Prop
38. Another Way Of Typing Components
39. Exercise: Creating a Header Component
40. Using useState() and TypeScript
41. Working with State & Outputting State-based Values
42. Another Exercise & Reusing Types Across Files
43. Passing Functions as Values - In A Type-Safe Way
44. Handling & Typing Events
45. Working with Generic Event Types
46. Using useRef() with TypeScript
47. Handling User Input In A Type-Safe Way
48. Summary
49. Advanced Component Types - Dynamic Components, Polymorphic Components & More
50. Module Introduction
51. Building a More Dynamic & Flexible Component
52. Problem: Flexible Components With Required Prop Combinations
53. Solution: Building Components with Discriminated Unions
54. Onwards To A New Project
55. Building a Basic Wrapper Component
56. Building Better Wrapper Components with ComponentPropsWithoutRef
57. Building a Wrapper Component That Renders Different Elements
58. Working with Type Predicates & Facing TypeScript Limitations
59. Building a Basic Polymorphic Component
60. Building a Better Polymorphic Component with Generics
61. Examples: More Component Ideas
62. Using forwardRef with TypeScript
63. Building Another Wrapper Component (Custom Form Component)
64. Sharing Logic with "unknown" & Type Casting
65. Exposing Component APIs with useImperativeHandle (with TypeScript)
66. Alternative: Avoiding Type Casting with "as"
67. Summary
68. Advanced Type-Safe State with Context API & useReducer()
69. Module Introduction
70. The Starting Project
71. Creating a Context & Fitting Types
72. Creating a Type-Safe Provider Component
73. Accessing Context Type-Safe With A Custom Hook
74. Getting Started with useReducer() & TypeScript
75. A Basic Reducer Function & A Basic Action Type
76. Changing State via the Reducer Function
77. Using Better Action Types
78. Wiring Everything Up & Finishing the App
79. Side Effects, useEffect() & Data Fetching with TypeScript
80. Module Introduction
81. Creating a First Side Effect
82. Using useEffect() with TypeScript
83. Managing An Interval With Refs & The Effect Cleanup Function
84. useEffect() & Its Dependencies
85. A Small Bug & Its Solution
86. Onwards to Data Fetching!
87. Building a Utility "get" Function with TypeScript
88. Fetching & Transforming Data
89. Alternative: Using the "zod" Library for Response Data Validation
90. Alternative: A Generic "get" Function
91. Handling Loading & Error States
92. Using Redux with TypeScript
93. Module Introduction
94. The Starting Project
95. Redux Setup
96. Creating a Redux Store & A First Slice
97. Setting a State Type
98. A First Reducer & Controlling the Action Payload Type
99. Adding Logic To The Reducer
100. Providing the Redux Store
101. Dispatching Actions & Adjusting the useDispatch Hook
102. Creating a Type-Safe useSelector Hook
103. Selecting & Transforming Redux Store Data
104. Finishing Touches & Summary
105. Practice Project: A "Book a Session" Management Application
106. Your Task
107. Your Task - Details
108. Hints
109. An Example Solution
110. Bonus Content
111. Bonus Lecture

Whether you're a beginner or an experienced developer looking to expand your skillset, this course provides a solid foundation and hands-on experience in building modern web applications. Note that the production grade application we will create in this course is unlike anything you have ever seen. After learning how to create an application like this, you will be ready to understand and implement top applications used worldwide.

Course Overview:

HTML:

· Learn Hypertext Markup Language (HTML) for structuring web pages.

· Dive into semantic HTML to create well-organized and accessible web content.

· Master HTML5 features for multimedia, forms, and semantic elements and many more.

CSS Styling and Layout:

· Explore Cascading Style Sheets (CSS) for styling and layout design.

· Understand CSS selectors, properties, and units for precise control over styling.

· Dive into responsive design principles and techniques for creating adaptable layouts across devices.

JavaScript

· Learn Modern JavaScript Features.

· Explore functions, scope, and closures for writing modular and reusable code.

· Understand asynchronous programming and the event loop in JavaScript.

· Explore techniques for fetching data from APIs, handling errors, and managing a database code effectively.

· Learn arrow functions, template literals, destructuring, spread/rest operators, and other ES6 features and many more.

· Learn DOM manipulation.

React.js:

· Get introduced to React.js, a powerful JavaScript library for building user interfaces.

· Learn about components, state, redux, and props to create reusable and interactive UI elements.

· Explore React Router for client-side routing and managing navigation in single-page applications.

Node.js Backend Development:

· Learn server-side development with Node.js, a runtime environment for executing JavaScript code.

· Learn about Express.js, a minimalist web framework for Node.js, for building robust and scalable server applications.

· Understand RESTful API design principles and implement CRUD operations for interacting with data.

Database:

· Learn how to create and Interact with databases using MongoDB NoSQL/SQL database.

Security:

· Learn about middleware, authentication,JWT, and security best practices for Node.js applications.

Hands-On Project: Apply your knowledge through a huge production grade project that covers all the tools you need for your portfolio website, instead of creating many useless projects, I will show you how top companies create their applications.

Real-World Examples: Explore real-world examples and case studies to understand how these technologies are used in industry-standard applications.

Expert Guidance: Benefit from guidance and support from a world class experienced instructor who is passionate about web development and committed to your success.

1. HTML Fundamentals
2. What is HTML
3. What is an HTML element?
4. How To Create HTML Files and install VS Code (MAKE SURE TO WATCH THIS VIDEO)
5. VS Code save
6. How to add comments
7. HTML elements and their attributes
8. body
9. head
10. div
11. HTML attributes
12. anchor
13. paragraph and what are block level elements?
14. image
15. unordered list
16. headings
17. Semantic markup
18. HTML forms
19. form
20. types of form elements
21. placeholder
22. CSS Basics
23. CSS introduction
24. A quick note when defining CSS properties
25. comments
26. class VS id selector
27. id selector
28. class selector
29. class selector for specific element
30. class selector multiple styles
31. priority of order in CSS declarations
32. combinator selectors
33. descendant selector
34. child selector
35. adjacent sibling selector
36. general sibling selector
37. pseudo class selector (hover,active,focus,visited ....)
38. pseudo elements selector
39. attribute selectors
40. borders
41. CSS Spacing
42. margin
43. padding
44. Box Model
45. CSS Units
46. Types of units
47. pixel
48. percent
49. em unit
50. rem unit
51. vw and vh
52. vmin and vmax
53. CSS display property and its values: block, inline, inline-block, none and flex
54. display property
55. flexbox
56. flexbox flex-direction property
57. flexbox justify-content property
58. flexbox flex-wrap property
59. flexbox align-items property
60. flexbox align-content property
61. how to add space in between flexbox elements using gap
62. flexbox properties for child elements
63. flexbox child element property flex-basis
64. flexbox child element property flex-grow
65. flexbox child element property flex-shrink
66. flexbox child element property align-self
67. flexbox child element property order
68. CSS grid layout
69. grid layout
70. grid columns
71. grid rows
72. grid-column and grid-row
73. nesting grid layouts
74. grid-template-areas
75. grid-auto-columns and grid-auto-rows
76. align-items and justify-items
77. making grid layout responsive for different screen sizes
78. 12 column grid system
79. CSS intermediate
80. Width and Height properties
81. position property
82. z-index
83. media queries
84. transition property
85. translate property
86. transform property
87. center image and block level elements horizontally
88. center image horizontally and vertically using position property and translate
89. line-height propery
90. vertical-align property
91. opacity property
92. colors
93. CSS Project
94. JavaScript for Beginners
95. What is JavaScript
96. where to add JavaScript code in HTML?
97. console.log()
98. how to add comments in JavaScript
99. variables
100. data types
101. conditional statements
102. Arithmetic Operators
103. Assignment Operators
104. Comparison Operators
105. Logical Operators
106. Ternary Operator
107. Unary Operators
108. Operator Precedence
109. Strings and Template Literals
110. JavaScript Intermediate
111. Function Declarations and Function Expressions
112. More on Arrays
113. More on Objects
114. Looping Arrays
115. Looping Objects
116. The Spread Operator
117. Destructuring
118. Nullish Coalescing Operator
119. What is Shallow Copy?
120. Set
121. Map
122. filter() method
123. find() method
124. map() method
125. Regular Expressions
126. Sorting Arrays
127. Creating Dates
128. Timer
129. Object Constructor
130. The 'this' keyword
131. The bind method
132. Arrow Function
133. IIFE
134. Callback Function
135. JavaScript Advanced
136. Closure
137. Promise object
138. fetch
139. async await
140. Classes
141. JavaScript DOM
142. json
143. HTML DOM events
144. React.js and Node.js
145. What is React.js?
146. A clean Node installation from scratch
147. React structure,how to create react app using Vite(new way) and create-react-app
148. How to Create a React Component?
149. What is state?
150. props
151. children
152. Storing input element values in state
153. useEffect hook
154. Nodejs Introduction
155. How to install an external module in Node.js
156. How to install existing Node.js application
157. postman installation
158. How to create an HTTP server
159. What is a middleware and how to create one
160. How to handle post request
161. Big Project: Medical portal
162. How to install Mongo DB and MongoDB Compass
163. Creating Project folders
164. Creating the Home Component
165. Creating the Button Component
166. Creating the Custom Form component
167. Creating the Register Patient Component
168. Creating the Register Doctor Component
169. Creating the SignIn Component
170. Creating the Search Doctor Component
171. Creating the About Component
172. Creating the Header Component
173. Creating the Footer Component
174. Creating the Layout Component
175. Creating the Search Patient Component
176. Creating the Main Layout
177. Creating the admin user
178. Connecting to DB from Backend
179. What is Json Web Token
180. Creating JWT
181. Creating Return status
182. Signin Frontend
183. Creating Routers and controllers in the Backend
184. Signin Backend
185. Creating custom checkEmail and checkPassword middlewares
186. Creating Admin Panel and verify token
187. Registering a Doctor
188. Search for a Doctor
189. Adding Redux
190. Storing Signed in User Data using Redux
191. Update Doctor
192. Register Patient
193. Search and update patient
194. Updating Home Page and THE COMPLETE CODE
195. How to Build and run your application for production
196. How to prepare for the Interview?
197. Strategies

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

-

Updated  2024:

Added brand-new content (~3h) on the NextJS App Router

Added a brand-new "Best Practices & Patterns" section

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