React 18 / 19 Course 2025 - Learn React JS the fast way
Develop React JS web applications including components, state, effect, hooks, React router, reducer, context, etc.
Develop React JS web applications including components, state, effect, hooks, React router, reducer, context, etc.
Learn React with a course that respects your time!
Summing up, this course allows you to learn React JS (v18 - 2024 and v19 - 2025) 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
Create unit tests using vitest
Add user management and JWT authorization to react applications
Store data in databases without building a backend
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
The popular build-tool Vite
Unit Testing
Authorization and User Management using Clerk
Database Integration using Supabase
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.
FAQ area empty
Project "Moviedux" Introduction
Xem trướcReact 101: React itself
Installing Visual Studio Code
Installing NodeJS
React extensions that make our life easier
Creating a React project and handling package versions
Exploring our ReactJS project
Importing the Moviedux project resources
Modifying the app component
React 101 - Components
Creating the Header component
Footer component with dynamic date and JSX
Project "Moviedux" Introduction
Xem trướcSourcecode: Moviedux
Xem trướcReact 101: React itself
Xem trướcInstalling Visual Studio Code
Xem trướcInstalling NodeJS
Xem trướcReact extensions that make our life easier
Xem trướcReact 18 and React 19
Creating a React project and handling package versions
Xem trướcCheat Sheet: React Introduction
Xem trướcExploring our ReactJS project
Xem trướcDownload: Moviedux Project Resources (Images, Logos, Css, etc.)
Importing the Moviedux project resources
Modifying the app component
Heads up
React 101 - Components
Creating the Header component
Footer component with dynamic date and JSX
Assignment - React Components
Quiz Components
Cheat Sheet: React Components
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
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
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)
Basic programming skills would be great
Learn React in-depth in a short amount of time
Build comprehensive web apps like a modern video platform
Learn how to deal with data within your React applications
Use React components, React router, and state to create a maintainable code base
Learn how to use reducers for building scalable applications
Learn how to consume a RESTful Web API from your React Application using axios
Create unit tests for React Applications using Vitest
Adding JWT authorization and user management
Storing user data in databases
0 Student
24 Courses
0 Review