Mô tả

** 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)

Bạn sẽ học được gì

Become an advanced, confident, and modern React developer from scratch

Build 8+ beautiful projects, including one HUGE professional real-world app

Become job-ready by working with libraries and tools used in professional projects

Join my other 1,800,000+ happy students on this journey

Think like a senior React engineer with advanced design patterns

React fundamentals: components, JSX, props, events, state, forms

State management: thinking about state, where to place, local vs. global, UI vs. remote

Build reusable, composable, and versatile components

Master the confusing but important useEffect hook once and for all

Build many custom hooks, reusable in your future projects

Build single-page applications with React Router (including v6.4+ with data loading)

Performance optimization with memo, useMemo, useCallback, and code splitting

Advanced React features: useReducer, Context API, cloneElement, portals, etc.

Advanced state management with Redux, Redux Toolkit, Thunks, React Query

Build real-world app features: authentication, data sorting, filtering and pagination, dark mode, charts, etc.

Understand how React actually works behind the scenes: virtual DOM, reconciliation, fiber tree, key prop, etc.

Style your apps with Tailwind CSS, CSS Modules, Styled Components (CSS-in-JS)

Practice your skills with many challenges, exercises, and practice projects

Yêu cầu

  • NO React experience necessary! I take you from beginner to expert!
  • Basic understanding of JavaScript is required (this course contains a quick JavaScript review section)
  • Any computer and OS will work — Windows, macOS or Linux

Nội dung khoá học

31 sections

Welcome, Welcome, Welcome!

5 lectures
Course Roadmap and Projects
02:57
Building Our First React App!
18:52
Watch Before You Start!
05:24
Read Before You Start!
00:39
Downloading Course Material
03:34

PART 1: REACT FUNDAMENTALS [4 PROJECTS]

2 lectures
Introduction to Part 1
00:55
Useful Resources for Part 1
00:20

A First Look at React

9 lectures
Section Overview
00:39
Why Do Front-End Frameworks Exist?
10:27
React vs. Vanilla JavaScript
07:08
What is React?
09:17
Setting Up Our Development Environment
08:47
Pure React
14:49
A Quick Look at React's Official Documentation
03:16
Setting Up a New React Project: The Options
07:41
Setting Up a Project With Create-React-App
12:48

[Optional] Review of Essential JavaScript for React

15 lectures
Section Overview
00:55
Destructuring Objects and Arrays
10:58
Rest/Spread Operator
09:53
Template Literals
04:50
Ternaries Instead of if/else Statements
05:49
Arrow Functions
04:59
Short-Circuiting And Logical Operators: &&, ||, ??
10:32
Optional Chaining
06:30
The Array map Method
08:35
The Array filter Method
08:36
The Array reduce Method
07:20
The Array sort Method
06:38
Working With Immutable Arrays
11:06
Asynchronous JavaScript: Promises
08:11
Asynchronous JavaScript: Async/Await
07:30

Working With Components, Props, and JSX

24 lectures
Section Overview
00:54
Rendering the Root Component and Strict Mode
07:25
Before We Start Coding: Debugging
09:46
Components as Building Blocks
04:34
Creating And Reusing a Component
09:40
What is JSX?
06:25
Creating More Components
08:07
JavaScript Logic in Components
04:26
Separation of Concerns
05:57
Styling React Applications
12:17
Passing and Receiving Props
09:08
Props, Immutability, and One-Way Data Flow
07:09
CHALLENGE #1: Profile Card (v1)
17:25
The Rules of JSX
03:37
Rendering Lists
11:24
Conditional Rendering With &&
09:16
Conditional Rendering With Ternaries
04:45
Conditional Rendering With Multiple Returns
05:03
Extracting JSX Into a New Component
04:32
Destructuring Props
04:52
React Fragments
05:36
Setting Classes and Text Conditionally
08:00
Section Summary
05:33
CHALLENGE #2: Profile Card (v2)
08:15

State, Events, and Forms: Interactive Components

21 lectures
Section Overview
01:02
Let's Build a Steps Component
14:48
Handling Events the React Way
07:21
What is State in React?
06:08
Creating a State Variable With useState
09:07
Don't Set State Manually!
05:17
The Mechanics of State
04:51
Adding Another Piece of State
08:36
React Developer Tools
06:09
Updating State Based on Current State
05:16
More Thoughts About State + State Guidelines
06:33
A Vanilla JavaScript Implementation
06:34
CHALLENGE #1: Date Counter (v1)
13:09
Starting a New Project: The "Far Away" Travel List
04:08
Building the Layout
08:54
Rendering the Items List
08:42
Building a Form and Handling Submissions
11:55
Controlled Elements
18:26
State vs. Props
03:30
EXERCISE #1: Flashcards
13:56
CHALLENGE #2: Date Counter (v2)
10:31

Thinking In React: State Management

17 lectures
Section Overview
00:58
What is "Thinking in React"?
04:59
Fundamentals of State Management
09:24
Thinking About State and Lifting State Up
14:41
Reviewing "Lifting Up State"
06:25
Deleting an Item: More Child-to-Parent Communication!
08:14
Updating an Item: Complex Immutable Data Operation
07:43
Derived State
03:03
Calculating Statistics as Derived State
10:43
Sorting Items
10:48
Clearing the List
05:03
Moving Components Into Separate Files
08:53
EXERCISE #1: Accordion Component (v1)
14:15
The "children" Prop: Making a Reusable Button
16:10
More Reusability With the "children" Prop
08:12
EXERCISE #2: Accordion Component (v2)
10:15
CHALLENGE #1: Tip Calculator
22:09

[Optional] Practice Project: Eat-'N-Split

9 lectures
Section Overview
00:55
Project Setup
03:52
Building the Static App: List of Friends
12:01
Building the Static App: Forms
09:27
Displaying the New Friend Form
06:33
Adding a New Friend
18:38
Selecting a Friend
15:02
Creating Controlled Elements
09:53
Splitting a Bill
12:47

PART 2: INTERMEDIATE REACT [2 PROJECTS]

2 lectures
Introduction to Part 2
01:15
Useful Resources for Part 2
00:53

Thinking in React: Components, Composition, and Reusability

17 lectures
Section Overview
01:00
Setting Up the "usePopcorn" Project
04:10
How to Split a UI Into Components
12:35
Splitting Components in Practice
23:57
Component Categories
02:42
Prop Drilling
07:31
Component Composition
04:50
Fixing Prop Drilling With Composition (And Building a Layout)
08:49
Using Composition to Make a Reusable Box
06:30
Passing Elements as Props (Alternative to children)
04:44
Building a Reusable Star Rating Component
11:22
Creating the Stars
13:04
Handling Hover Events
07:43
Props as a Component API
04:28
Improving Reusability With Props
19:27
PropTypes
07:24
CHALLENGE #1: Text Expander Component
18:20

How React Works Behind the Scenes

18 lectures
Section Overview
01:55
Project Setup and Walkthrough
11:11
Components, Instances, and Elements
05:09
Instances and Elements in Practice
07:53
How Rendering Works: Overview
06:55
How Rendering Works: The Render Phase
18:28
How Rendering Works: The Commit Phase
11:27
How Diffing Works
05:52
Diffing Rules in Practice
05:13
The Key Prop
07:41
Resetting State With the Key Prop
04:02
Using the Key Prop to Fix Our Eat-'N-Split App
04:07
Rules for Render Logic: Pure Components
09:24
State Update Batching
09:10
State Update Batching in Practice
15:43
How Events Work in React
13:42
Libraries vs. Frameworks & The React Ecosystem
09:52
Section Summary: Practical Takeaways
10:26

Effects and Data Fetching

19 lectures
Section Overview
00:58
The Component Lifecycle
04:31
How NOT to Fetch Data in React
09:48
useEffect to the Rescue
04:40
A First Look at Effects
06:23
Using an async Function
05:40
Adding a Loading State
03:47
Handling Errors
13:02
The useEffect Dependency Array
12:17
Synchronizing Queries With Movie Data
15:08
Selecting a Movie
13:19
Loading Movie Details
17:43
Adding a Watched Movie
26:11
Adding a New Effect: Changing Page Title
08:44
The useEffect Cleanup Function
04:20
Cleaning Up the Title
05:22
Cleaning Up Data Fetching
10:16
One More Effect: Listening to a Keypress
14:06
CHALLENGE #1: Currency Converter
16:43

Custom Hooks, Refs, and More State

15 lectures
Section Overview
00:57
React Hooks and Their Rules
10:55
The Rules of Hooks in Practice
08:36
More Details of useState
12:30
Initializing State With a Callback (Lazy Initial State)
13:30
useState Summary
03:14
How NOT to Select DOM Elements in React
03:38
Introducing Another Hook: useRef
05:36
Refs to Select DOM Elements
10:09
Refs to Persist Data Between Renders
10:15
What are Custom Hooks? When to Create One?
04:22
Creating our First Custom Hook: useMovies
13:02
Creating useLocalStorageState
09:06
Creating useKey
08:19
CHALLENGE #1: useGeolocate
07:27

[Optional] React Before Hooks: Class-Based React

10 lectures
Section Overview
01:16
Our First Class Component
09:32
Working With Event Handlers
10:24
Class Components vs. Function Components
05:37
Starting the "Classy Weather" App
07:45
Fetching Weather Data
09:39
Displaying the Weather
14:10
Removing Boilerplate Code With Class Fields
04:05
Child to Parent Communication
04:19
Lifecycle Methods
15:36

PART 3: ADVANCED REACT + REDUX [4 PROJECTS]

2 lectures
Introduction to Part 3
01:11
Useful Resources for Part 3
00:46

The Advanced useReducer Hook

17 lectures
Section Overview
01:03
Yet Another Hook: useReducer
17:58
Managing Related Pieces of State
12:23
Managing State With useReducer
14:13
The "React Quiz" App
07:57
Loading Questions from a Fake API
18:31
Handling Loading, Error, and Ready Status
09:05
Starting a New Quiz
04:54
Displaying Questions
07:45
Handling New Answers
16:42
Moving to the Next Question
06:22
Displaying Progress
08:57
Finishing a Quiz
15:07
Restarting a Quiz
07:05
Setting Up a Timer With useEffect
20:56
Section Summary: useState vs. useReducer
05:53
CHALLENGE #1: Creating a Bank Account With useReducer
19:50

React Router: Building Single-Page Applications (SPA)

17 lectures
Section Overview
01:01
Creating Our First App With Vite: "WorldWise"
15:41
Routing and Single-Page Applications (SPAs)
06:40
Implementing Main Pages and Routes
12:15
Linking Between Routes With <Link /> and <NavLink />
09:57
Styling Options For React Applications
05:50
Using CSS Modules
16:30
Building the Pages
16:59
Building the App Layout
08:44
Nested Routes and Index Route
13:25
Implementing the Cities List
18:42
Implementing the Countries List
11:07
Storing State in the URL
05:31
Dynamic Routes With URL Parameters
10:28
Reading and Setting a Query String
10:34
Programmatic Navigation with useNavigate
11:50
Programmatic Navigation with <Navigate />
04:12

Advanced State Management: The Context API

22 lectures
Section Overview
00:59
CHALLENGE #1: Understand "The Atomic Blog" App
04:22
What is the Context API?
05:16
Creating and Providing a Context
09:26
Consuming the Context
10:53
Advanced Pattern: A Custom Provider and Hook
16:15
Thinking In React: Advanced State Management
11:38
Back to "WorldWise": Creating a CitiesContext
08:32
Consuming the CitiesContext
04:26
Finishing the City View
17:58
Including a Map With the Leaflet Library
09:25
Displaying City Markers on Map
05:58
Interacting With the Map
13:38
Setting Map Position With Geolocation
11:33
Fetching City Data in the Form
17:42
Creating a New City
23:27
Deleting a City
05:37
Advanced State Management System: Context + useReducer
22:38
Adding Fake Authentication: Setting Up Context
11:02
Adding Fake Authentication: Implementing "Login"
16:24
Adding Fake Authentication: Protecting a Route
11:21
CHALLENGE #2: Refactoring "React Quiz" to Context API
08:22

Performance Optimization and Advanced useEffect

18 lectures
Section Overview
01:03
Performance Optimization and Wasted Renders
06:06
The Profiler Developer Tool
08:21
A Surprising Optimization Trick With children
11:49
Understanding memo
05:29
memo in Practice
13:17
Understanding useMemo and useCallback
06:39
useMemo in Practice
08:42
useCallback in Practice
10:09
Optimizing Context Re-Renders
14:47
Back to The "WorldWise" App
12:37
Optimizing Bundle Size With Code Splitting
15:52
Don't Optimize Prematurely!
02:59
useEffect Rules and Best Practices
10:01
CHALLENGE #1: Fix Performance Issues in "Workout Timer"
12:15
Setting State Based on Other State Updates
11:55
Using Helper Functions In Effects
15:04
Closures in Effects
09:52

Redux and Modern Redux Toolkit (With Thunks)

19 lectures
Section Overview
01:07
Introduction to Redux
12:13
Creating a Reducer: Bank Account
10:47
Creating a Redux Store
09:46
Working With Action Creators
06:28
Adding More State: Customer
12:30
Professional Redux File Structure: State Slices
11:47
Back to React! Connecting our Redux App With React
05:46
Dispatching Actions from Our React App
17:21
The Legacy Way of Connecting Components to Redux
04:50
Redux Middleware and Thunks
04:28
Making an API Call With Redux Thunks
17:50
The Redux DevTools
10:21
What is Redux Toolkit (RTK)?
03:40
Creating the Store With RTK
04:37
Creating the Account Slice
21:43
Back to Thunks
05:02
Creating the Customer Slice
09:14
Redux vs. Context API
07:43

PART 4: PROFESSIONAL REACT DEVELOPMENT [2 PROJECTS]

2 lectures
Introduction to Part 4
01:27
Useful Resources for Part 4
00:44

React Router With Data Loading (v6.4+)

12 lectures
Section Overview
00:51
Setting Up a New Project: "Fast React Pizza Co."
08:13
Application Planning
21:24
Setting Up a Professional File Structure
08:20
A New Way Of Implementing Routes
10:30
Building the App Layout
11:18
Fetching Data With React Router "Loaders": Pizza Menu
11:50
Displaying a Loading Indicator
06:00
Handling Errors With Error Elements
06:24
Fetching Orders
12:40
Writing Data With React Router "Actions"
19:03
Error Handling in Form Actions
10:26

[Optional] Tailwind CSS Crash Course: Styling the App

19 lectures
Section Overview
00:59
What is Tailwind CSS?
07:56
Setting Up Tailwind CSS
12:03
Working With Color
08:59
Styling Text
10:00
The Box Model: Spacing, Borders, and Display
11:17
Responsive Design
10:48
Using Flexbox
06:31
Using CSS Grid
12:20
Styling Buttons: Element States and Transitions
12:11
Styling Form Elements
10:22
Reusing Styles With @apply
04:28
Reusing Styles With React Components
12:27
Absolute Positioning, z-index, and More
06:30
Configuring Tailwind: Custom Font Family
10:53
Styling the Menu
18:27
Styling the Cart
11:46
Styling the Order Form
13:21
Styling the Order Overview
13:53

Adding Redux and Advanced React Router

14 lectures
Section Overview
00:39
Modeling the "User" State With Redux Toolkit
13:23
Reading and Updating the User State
10:37
Modeling the "Cart" State
14:20
Adding Menu Items to the Cart
07:06
Building the Cart Overview With Redux Selectors
08:59
Building the Cart Page
07:05
Deleting Cart Items
14:44
Updating Cart Quantities
13:32
Using the Cart for New Orders
14:30
Redux Thunks With createAsyncThunk
16:04
Integrating Geolocation
16:04
Fetching Data Without Navigation: useFetcher
12:44
Updating Data Without Navigation
14:37

Setting Up Our Biggest Project + Styled Components

11 lectures
Section Overview
00:54
Application Planning
18:29
Please Download Starter Files Again
00:08
Setting Up the Project: "The Wild Oasis"
08:11
Introduction to Styled Components
12:22
Global Styles With Styled Components
14:36
Styled Component Props and the "css" Function
10:25
Building More Reusable Styled Components
11:02
Setting Up Pages and Routes
06:27
Building the App Layout
14:21
Building the Sidebar and Main Navigation
13:09

Supabase Crash Course: Building a Back-End!

9 lectures
Section Overview
00:46
What is Supabase?
02:24
Creating a New Database
05:27
Modeling Application State
05:34
Creating Tables
09:31
Relationships Between Tables
08:29
Adding Security Policies (RLS)
06:18
Connecting Supabase With Our React App
08:45
Setting Up Storage Buckets
04:38

React Query: Managing Remote State

16 lectures
Section Overview
00:46
What is React Query?
06:20
Setting Up React Query
07:19
Make Sure to Use React Query v4!
00:16
Fetching Cabin Data
21:41
Mutations: Deleting a Cabin
17:21
Displaying Toasts (Notifications)
08:41
Introducing Another Library: React Hook Form
11:17
Creating a New Cabin
12:13
Handling Form Errors
22:42
Uploading Images to Supabase
14:41
Editing a Cabin
30:39
Abstracting React Query Into Custom Hooks
17:26
Duplicating Cabins
06:49
Fetching Applications Settings
08:47
Updating Application Settings
11:27

Advanced React Patterns

13 lectures
Section Overview
01:13
An Overview of Reusability in React
05:44
Setting Up an Example
06:19
The Render Props Pattern
07:42
A Look at Higher-Order Components (HOC)
08:06
The Compound Component Pattern
18:17
Building a Modal Window Using a React Portal
19:54
Converting the Modal to a Compound Component
21:45
Detecting a Click Outside the Modal
13:36
Confirming Cabin Deletions
08:41
Building a Reusable Table
11:45
Applying the Render Props Pattern
04:38
Building a Reusable Context Menu
32:35

[Optional] Implementing More Features: Authentication, Dark Mode, Dashboard, etc

33 lectures
Section Overview
01:16
Client-Side Filtering: Filtering Cabins
18:49
Client-Side Sorting: Sorting Cabins
20:25
Building the Bookings Table
17:59
Uploading Sample Data
06:15
API-Side Filtering: Filtering Bookings
17:10
API-Side Sorting: Sorting Bookings
06:53
Building a Reusable Pagination Component
15:52
API-Side Pagination: Paginating Bookings
10:39
Prefetching With React Query
07:58
Building the Single Booking Page
15:17
Checking In a Booking
28:18
Adding Optional Breakfast
14:04
Checking Out a Booking (+ Fixing a Small Bug)
09:50
Deleting a Booking
13:33
Authentication: User Login With Supabase
22:06
Authorization: Protecting Routes
23:23
User Logout
09:00
Fixing an Important Bug
05:35
Building the Sign Up Form
10:59
User Sign Up
15:01
Authorization on Supabase: Protecting Database (RLS)
04:40
Building The App Header
10:18
Updating User Data and Password
28:26
Implementing Dark Mode With CSS Variables
21:29
Building the Dashboard Layout
04:25
Computing Recent Bookings and Stays
15:20
Displaying Statistics
12:02
Displaying a Line Chart With the Recharts Library
22:55
Displaying a Pie Chart
15:52
Displaying Stays for Current Day
20:41
Error Boundaries
09:44
Final Touches + Fixing Bugs
14:38

Deployment With Netlify and Vercel

4 lectures
Section Overview
01:09
Deploying to Netlify
11:20
Setting Up a Git and GitHub Repository
16:16
Deploying to Vercel
05:54

The End!

1 lectures
Where to Go from Here
03:20

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.