React 18 / 19 Course 2025 - Learn React JS the fast way

JavaScript for React Intro

Scope of var, let and const

Arrow functions

Functions as declarations or expressions

Rest Operator

Spread Operator

JavaScript for React Intro

Scope of var, let and const

Arrow functions

Functions as declarations or expressions

Rest Operator

Spread Operator

Quiz: JS for React

Creating the MoviesGrid component

React 101 - State

Creating the movies state with UseState

Setting the movies state with UseEffect

Using the react developer tools

Loading movies from JSON

Rendering the movies in cards

Creating the MoviesGrid component

React 101 - State

Creating the movies state with UseState

Setting the movies state with UseEffect

Using the react developer tools

Loading movies from JSON

Rendering the movies in cards

A small request

Quiz State

Assignment - React State

Cheat Sheet: React State and Effect

React 101 - Props

Refactoring to a MovieCard and component properties

Error handler for image loading

Dynamic rating color

Search state and search bar

Search bar logic

React 101 - Props

Refactoring to a MovieCard and component properties

Error handler for image loading

Dynamic rating color

Search state and search bar

Search bar logic

Quiz Props

Filter bar

Filter event handling

Filter logic

Filter bar

Filter event handling

Filter logic

React 101: Router

Installing React Router

Configuring the router

Lifting the movie state

Watchlist state

Watchlist component props

Watchlist UI toggle

React 101: Router

Installing React Router

Configuring the router

Lifting the movie state

Watchlist state

Watchlist component props

Watchlist UI toggle

Quiz Router

Cheat Sheet: React Router

Default export of modules

Named export of modules

Template literals, string interpolations and multi-line strings

Array find()

Array filter()

Array forEach()

Array map()

Default export of modules

Named export of modules

Template literals, string interpolations and multi-line strings

Array find()

Array filter()

Array forEach()

Array map()

Quiz JS for React

Project "Bug Blaster" Introduction

Setting up the bug blaster project

Creating the ticket form logic

Building the ticket form

Building the priority selection

Building a ticket from the form

React 101 - Reducer

Creating the ticket reducer

Implementing the ticket reducer actions

Dispatching the ADD_TICKET action using the useReducer hook

Creating the TicketItem component

Creating the TicketList component and conditional rendering

Deleting tickets

Editing Tickets

Deleting an "under-edit" ticket

Canceling an edit procedure

Sorting tickets by priority

Project "Bug Blaster" Introduction

Source Code: Bug Blaster

Resources for "Bug Blaster" Project

Setting up the bug blaster project

Creating the ticket form logic

Building the ticket form

Building the priority selection

Building a ticket from the form

React 101 - Reducer

Creating the ticket reducer

Quiz: Reducer

Implementing the ticket reducer actions

Dispatching the ADD_TICKET action using the useReducer hook

Creating the TicketItem component

Creating the TicketList component and conditional rendering

Deleting tickets

Editing Tickets

Deleting an "under-edit" ticket

Canceling an edit procedure

Sorting tickets by priority

Cheat Sheet: React Reducer

React 101 - Context

Example of prop drilling for context

Creating your first context

Blog application with Context API

Combining context and prop drilling

Combining state and context part 1

Combining state and context part 2

Congratulations! You have finished the section

React 101 - Context

Example of prop drilling for context

Creating your first context

Blog application with Context API

Combining context and prop drilling

Combining state and context part 1

Combining state and context part 2

Congratulations! You have finished the section

Cheat Sheet: React Context

Quiz: context API

Promises

Promises fetch example

Async and await

Promises

Promises fetch example

Async and await

Intro consuming an API

Mock API

React 101: HTTP requests and responses

Project creation

Creating a service layer with axios

Creating the post component

Getting posts and promises

Displaying posts

Deleting posts

Creating a new post

Post form

Post state after creating a new one

Updating an existing post

Update post logic part 1

Update post logic part 2

Intro consuming an API

Mock API

React 101: HTTP requests and responses

Project creation

Creating a service layer with axios

Creating the post component

Getting posts and promises

Displaying posts

Deleting posts

Creating a new post

Post form

Post state after creating a new one

Updating an existing post

Update post logic part 1

Update post logic part 2

Setting up the project

Book context

Component to show all books

Default router setup

Router redirection

Dynamic route parameter part 1

Dynamic route parameter part 2

Not found route (404)

Reading query parameters part 1

Reading query parameters part 2

Private routes

Setting up the project

Book context

Component to show all books

Default router setup

Router redirection

Dynamic route parameter part 1

Dynamic route parameter part 2

Not found route (404)

Reading query parameters part 1

Reading query parameters part 2

Private routes

What is Vite?

Installing the node packages for Vite

Creating a project using Vite

Manually starting React projects using Vite

Buillding a Vite React application

Adding configurations to Vite

Extra: Setting up and reading environment variables using Vite

What is Vite?

Installing the node packages for Vite

Creating a project using Vite

Manually starting React projects using Vite

Buillding a Vite React application

Adding configurations to Vite

Extra: Setting up and reading environment variables using Vite

Chapter Project Introduction

The authentication provider Clerk

Setting up the Finora React project and adding clerk

Adding the clerk provider in react

Adding Signup, Login and Logout using Clerks React Components

Grabbing an API Key for the Stock-Data-API Alphavantage

Developing the Alphavantage service

Loading the performance of a single stock

Finishing the alphavantage service

Building the stock list react component

Building a form to load stock data

Styling the app

Creating a database at Supabase

Creating a supabase table and pasting the api keys

Submitting the first test data to store in the db

Building the complete supabase watchlist service

Implementing the supabase service into the react component

Setting up effects to handle stock data updates

Finishing the stock watchlist html and styling

Enabling RLS and JWT in Supabase to improve Database security

Adding supabase authentication using clerk in the react project

Chapter Project Introduction

Source Code: GitHub Repository

The authentication provider Clerk

Setting up the Finora React project and adding clerk

Adding the clerk provider in react

Adding Signup, Login and Logout using Clerks React Components

Grabbing an API Key for the Stock-Data-API Alphavantage

Quick Note: 25 Request per day

Developing the Alphavantage service

Loading the performance of a single stock

Finishing the alphavantage service

Building the stock list react component

Building a form to load stock data

CSS code HERE (Copy it)

Styling the app

Creating a database at Supabase

Creating a supabase table and pasting the api keys

Submitting the first test data to store in the db

Building the complete supabase watchlist service

Implementing the supabase service into the react component

Setting up effects to handle stock data updates

Finishing the stock watchlist html and styling

Enabling RLS and JWT in Supabase to improve Database security

Adding supabase authentication using clerk in the react project

Unit Testing Introduction

Setting up a project and Vitest

Test Packages Explaination

Configuring Vitest

Writing and running your first react unit testing

Keeping the imports short (vite globals)

Creating a shared test-setup file

Creating a test-worthy react component

Creating a unit test group for the invoice component

Testing if the invoice component render correctly

Testing if a specific element/class is assigned (paid/overdue)

Modifying test-mock-data for specific test scenarios

The definition of a unit test

Creating a unit test group for logic (not rendering)

Unit Testing Introduction

Setting up a project and Vitest

Test Packages Explaination

Configuring Vitest

Writing and running your first react unit testing

Keeping the imports short (vite globals)

Creating a shared test-setup file

Source Code for the next lesson

Creating a test-worthy react component

Creating a unit test group for the invoice component

Testing if the invoice component render correctly

Testing if a specific element/class is assigned (paid/overdue)

Modifying test-mock-data for specific test scenarios

The definition of a unit test

Creating a unit test group for logic (not rendering)

Finishing the course