Master React from the Ground Up

Ultra React will teach you everything from basic concepts to advanced patterns and best practices.

ReactJS Ultra For Beginners

Secure payment powered by Paddle

Curriculum

Welcome to the Course

Intro to The Course3:33

How to Learn This Course3:02

What is React and Why You Should Learn It?4:14

Getting Started with React

Installing Nodejs3:03

Setting up a React Development Environment4:30

VSCode Extensions3:17

JavaScript Refresher - All JS You Need To Know Before React

Functions5:39

Ternary and Logical Operators7:21

Objects and Arrays7:11

Map and Filter Functions7:15

Array Function Key Prop3:13

String Templating4:27

Basic React Concepts

React Project Folder Structure6:55

An Intro To JSX10:33

What is the App Component?2:46

How to use Components?10:23

Lists in React9:45

CSS in React9:10

Component Project - Build A Simple Website

First React Project3:34

Making A Navbar7:11

Displaying Images7:11

Making the About Us Section2:35

Creating A Footer3:38

Intro To States In React

What is the useState Hook?10:38

What is the useState Hook? Part 24:42

What is the useState Hook? Part 314:50

Intro React Project - Task Tracker App

Beginner Project - Task Tracker App35:03

React Component Lifecycle

The Virtual Dom1:50

React Component Lifecycle1:42

The useEffect Hook15:40

The useEffect Hook Part 28:41

Routing in React

React Router14:05

React Router Part 214:28

Advanced Forms In React

Forms in React - React Hook Form25:36

State Management

Intro To State Management - Global States18:37

Beginner Project - Build A Blog App

Intermediate Project - Build A Blog App40:40

Intermediate Project - Build A Blog App (Part 2)26:57

Other Useful React Hooks

Rules of Hooks4:05

Learn the useReducer Hook9:54

Learn the useRef Hook12:03

Making Your Own Custom Hook12:10

Advanced State Management - Zustand

Why Zustand?5:22

Intro to Zustand11:08

Zustand Subscriptions9:01

Advanced Data Handling With React Query

Why React Query?6:18

The useQuery Hook16:38

The useMutation Hook8:45

Intermediate Project - Build A FullStack Game Manager

What are we building?2:54

Project Demo2:26

Project Structure5:28

Setup REST API12:43

Set Up React Project6:02

Setup the Project Routes9:12

Fetch List of Games8:13

Display List of Games1:44

Create Game Page20:03

Invalidating Queries5:34

Update Game Page6:05

Fetch Game By Id3:47

Reseting the Form7:21

Update Game Endpoint4:28

Update Game Mutation2:49

Invalidating More Queries2:58

Creating the Delete Game Endpoint1:58

Adding the Delete Button5:28

Creating the Theme Manager11:59

Creating the 404 Page Not Found2:19

Thinking In React - Best Practices

Rules of React4:01

Keeping Components Focused5:08

What Are Class Components?4:19

Transition to TypeScript in React

Why Typescript?3:16

Basic Typescript Types6:23

Functions in Typescript2:41

Custom Typescript Types4:34

Unions3:33

Interfaces5:31

Intersections1:54

Enums2:40

Setting Up Typescript in React4:05

Props using Typescript3:39

States using Typescript3:30

Forms using Typescript2:02

Zustand using Typescript2:16

Advanced Final Project - Real Time Chat Messaging App

What are we building?4:44

Project Demo4:05

Project Setup4:42

Setting up SupaBase8:27

Creating the Login Page8:19

Setting Up Supabase Auth9:42

Supabase Auth Listener12:04

Setting Up Project Routes11:08

Chat Room Page7:45

Creating the Database Table17:42

Loading the Chat Messages11:04

Displaying the Messages9:44

Realtime Messages9:34

Create a New Room Page11:08

List Available Rooms8:00

Testing Strategies in React

Intro to Testing In React3:25

Setup Testing9:16

How to Test A Simple Component?9:35

How to Test User Events?10:14

How to Test Data Fetching?11:46

Bonus: Writing Tests for The Final Project16:38

Async React - React 19 Changes

What is Async React?6:10

Suspense and Lazy Loading10:37

Client vs Server Component6:56

The useTransition Hook8:35

The useDeferredValue Hook8:33

How To Deploy a React Website

Deploying To Vercel8:44

Features

Learn React fundamentals
Build real-world applications
Master advanced patterns
Best practices and optimization
Testing and deployment
Lifetime access
Certificate of completion

Prerequisites

This course is designed for beginners and intermediate developers. Here's what you should know before starting:

Basic understanding of HTML and CSS
Fundamental JavaScript concepts
A computer with a modern web browser
Basic knowledge of command line operations

Don't worry if you're not familiar with all of these - we'll cover the basics as we go along!