The Complete React.js Course: Beginner to Advanced (2025)

Learn how to manage an object as state in React using the useState hook, and prevent property loss by merging updates with the spread operator.

Master the use effect hook to run side effects in React functional components, covering mount, update, and unmount lifecycles. Learn its two-parameter syntax and dependency array for controlled execution.

Fetch multiple posts from the Jsonplaceholder API using axios in a React component, manage state with useState and trigger the request with useEffect, then render post titles in a list.

Master the context API by implementing a price context and an item context, wrapping components with providers, and consuming values via context consumers, then simplify with the useContext hook.

Learn how to consume multiple contexts with the useContext hook, importing price and item contexts from the app component and using them in a single line to avoid props drilling.

Learn to implement use reducer by modeling state and actions as objects, dispatching actions, and managing multiple counters with a single state object for scalable React state management.

Use context and useReducer to manage and distribute global state across components via the context API, demonstrated with a shared counter across A, X, and Z.

Learn to fetch data with useEffect and manage state using useReducer, including a reducer and initial state. Implement axios calls, handle loading and errors, and dispatch success and failure actions.

Explore the useRef hook to access a DOM element in a functional component, persist values between renders, and auto-focus the first input on page load.

Open the side nav by clicking the hamburger menu, toggling a boolean state to show an overlay and a left-drawer that slides in.

Build a featured component in a React app by creating a responsive image slider with left and right arrows, bullet indicators, and hover-to-show controls using an image URL array.

Build a newsletter component in a React app, wire an email input and a notify me button, and style it with a responsive grid layout and custom colors.

Implement a footer component for a React app by importing social icons from react-icons, styling a three-column responsive grid with Tailwind, and refining the layout alignment for a polished footer.

Build a footer component in a React app using react-icons, add social icons for dribble, Facebook, GitHub, Instagram, and Twitter, and style a responsive three-column grid with tailwind classes.

Install styled-components and create a background image reusable component using a styled div with template literals, a Netflix background image, and responsive CSS rules.

Create the login page by reusing sign up page components, render the background image and header, and style a centered form with email and password inputs and a login button.

Build a sign up page using firebase auth in react, creating users with email and password, managing form state, and redirecting to the Netflix home page after signup.

Set up a top navigation to link to components, display a hero image, and implement an onscroll handler with window.onscroll and pageYOffset to toggle the initial state.

Implement logout functionality by wiring the top-right lockout button to sign out with Firebase Auth and redirect to the login page when no user remains.

Create a movie player component by wiring the play button to navigate to the player route using useNavigate, and implement a styled video with autoplay, loop, and controls.

Create an interactive movie card that reveals a trailer on hover and includes like, dislike, and add to favorites actions, using react router and styled components.

Place fetched movie data into the global state so any component can access it. Use useSelector to read state.netflix.movies across the app.

Identify and stop the infinite loop by commenting out the console log that logs movies, preventing endless data output and laptop slowdown.

Style the movie component with styled components, building a container and wrapper, and display a header title for Netflix rows. Refine spacing, width, and colors to create a neat slider.

Understand the folder structure and component layout of a React dashboard, including top nav, side nav, and users and products pages with lists and profiles.

Style a React top navigation bar with CSS, featuring a 40x40 circular admin image, a sticky full-width layout, space-between logo and notifications, and a red badge.

Style the filtered components into a horizontal flex row with space between items, assign distinct classes for featured items, and apply individual colors such as aqua, violet, and dodger blue.

Build and style an order widget component in a ReactJS course, rendering a latest transactions table with customer, date, product, amount, location, and status indicators.

Design the members widget in a React app using a flex layout, create the component and CSS, render under the order widget, and display newly joined members with avatars.

Implement route-based navigation in a React app using react-router-dom: wrap with BrowserRouter, define Routes for home, user list, and product pages, and use Link for redirects.

Style the members widget avatar as a circular 40 by 40 image with widget img, object-fit cover, and border-radius 50%, then use flex with padding, margins, and a rounded button.

Style the profile component using flexbox and CSS properties like image sizing, box shadow, and dodger blue backgrounds, and align profile details and updates for a polished UI.

Style the create user interface with a flex-based form, a dodger blue background, alice blue text, and a box shadow, aligning items to center and justifying content with space between.