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

Discover how React hooks enable state and lifecycle features in functional components, replacing classes with simple, reusable stateful logic and backward compatibility.

Learn to build a React counter with the use state hook, initialize state to zero, destructure count and setCount, and increment via a button while following top-level hook rules.

Explore updating React state based on the previous value using the useState hook, including increment, decrement, and reset patterns, and learn why functional updates prevent batching issues for accurate counts.

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.

Learn to use an array as a state variable in React by adding items from an input field with useState and the spread operator, then render them with map.

Organize the code by structuring folders and moving use state hooks into a dedicated use state practice directory. Resolve imports from the app component to ensure the browser runs smoothly.

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.

Build a simple React app that updates the document title on button clicks using use state and use effect, illustrating component did mount and update behavior.

Learn to conditionally run the useEffect hook in a functional component by using a dependency array to fire only when the count updates, boosting performance.

Strengthen your understanding of useEffect cleanup functions by preventing memory leaks, as you implement a mouse position logger with x and y state, an event listener, and a cleanup return.

Toggle the mouse container to unmount and learn how useeffect cleanup cancels event listeners, preventing memory leaks by removing the mouse position listener.

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.

Learn how to trigger an effect on button click by updating a state variable button click id, capturing input, and performing a fetch request in the click handler.

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.

Explore the useReducer hook with a simple counter app that increments, decrements, and resets state using dispatch and a reducer function.

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.

Learn how to manage multiple counters using separate useReducer hooks with identical state transactions, avoiding object state complexity and code duplication for increment, decrement, and reset.

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 in React with useState and useEffect, showing loading and error states, then compare this approach to useReducer for state management.

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 how the useCallback hook improves React performance by memoizing increment functions, preventing unnecessary renders when paired with React.memo in a parent-child component setup.

Learn how the usememo hook caches a computed even/odd result for counter A, improving performance by recalculating only when dependencies change and leaving counter B unaffected.

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.

Build a clock timer in React using useRef and useEffect, create a timer component with setInterval, and clear the interval with a button to stop the timer.

Explore the context API and useContext hook to share data across a component tree, reducing props drilling and simplifying data such as language preferences, authentication, and UI theme.

Start building the Yum Eat website by installing a new React app with npx create-react-app in a client folder, then run the dev server and consider Tailwind CSS later.

Clean up boilerplate by deleting unnecessary files such as setup test.js, Logo.svg, reportWebVitals, and app.css, while preserving app.js, to prepare a blank project for building components.

Learn to break a complex React app into reusable components, including top nav, hero, quick delivery, top picks, categories, newsletter, and footer, laying the foundation before installing Tailwind.

Install and configure tailwind in your React project, initialize the config, update content and index.css, and set up a base button style with rounded borders and padding.

Build a responsive top navigation component in React with a left hamburger and Yum eat logo, a center search bar, and a right cart, styled with Tailwind and react-icons.

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

Design and implement a responsive side drawer menu with a close icon, toggleable open/close state, and a vertical navigation list styled with tailwind utilities for mobile and desktop views.

Set initial state to false to keep side navigation closed by default, then use the hamburger to open it, enable closing by clicking the overlay, and bold Yum Eats logo.

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 quick delivery component in a React app with a full-width layout, responsive grid, image, bold text, and a get started button, paving the way for a slider component.

Implement the top pick component and a responsive slider using react-split, mapping topic data (title, image, price) with item.id keys; show four items per page and disable arrows.

Build a responsive meal component in React by mapping meal data to a grid of cards, using object-fit cover images and a price badge with a view more button.

Sort buttons enable category-based item filtering by clicking, using a useState hook and a filter function to display meals by pizza, chicken, or salad.

Map through categories data to display category names and images in a responsive grid with hover effects, import data, render a categories component, and use item.id as a unique key.

Use the item id as a unique key prop for each element in the array, align the item name with the view mode button, and adjust padding and spacing.

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.

Create a Netflix clone by initializing a new React app in a directory called clients, start the dev server, and clean up default files in src and index.js.

Create components and pages in src, set up folders for components, pages, utils, and store, and build login, signup, movie, tv show, Netflix pages with background image and header components.

Learn to set up routes in react using react router dom, configure browser router, define login, signup, home, tv shows, and movie routes, and test navigation with npm start.

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.

Learn to build a header reusable component in React using Styled Components, including conditional login/signup navigation via props, a Netflix logo, and responsive button styling.

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.

Fix the login form visibility by reducing the input height to 2.4 rem and adjusting the background to 0.6 ahead of sign up and login authentication.

Install Firebase in your project, create a Firebase config file, and export the getAuth module to enable authentication. Enable email/password authentication in Firebase console to prepare the sign-up page.

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.

Demonstrates implementing login authentication with Firebase using email and password, managing input state and errors, and routing to the Netflix page after successful sign-in.

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.

Create the top navigation component in React by rendering a left logo and a right logout button, mapping a nav links array to router links with React icons and styled-components.

Apply global css settings in index.css by setting a black background and resetting margins and paddings. Use border-box sizing and hide horizontal overflow to prevent rightward scrolling.

Stylize the top navigation by passing scroll state as props to toggle a black background on scroll, and refine the logo, links, and the logout button with a flex layout.

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.

Design and style a responsive hero component using styled-components, featuring a top nav, hero image with a darkened background, and a title, description, and play and more buttons positioned above.

Implement a consistent layout by setting five rem left margins for content and logo, and one rem right margin for the logout button, then proceed to the movie player component.

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.

Create a responsive card css for a movie poster, with max width, image sizing, hover effects, then organize content with flex and style icons and svgs.

Learn to obtain and use a tmdb api key, configure the base url, and set up constants for fetching movie data, with redux toolkit planned next.

Install and configure the redux toolkit, create the Netflix slice with initial states for movies and categories, fetch data from tmdb api endpoint, and wrap the app with the provider.

Fetch movie genres from the tmdb api with axios in a redux workflow. Use an async thunk to hit the genre list endpoint and dispatch to update state.

learn to fetch TMDb movies with posters, loaded genres, and up to 80 results, mapping genre names and preparing data for redux via an async thunk.

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.

Fetch movies from the TMDB API and render them in a reusable slider, displaying posters, titles, and genres in ten-item rows with hover details and watch/like interactions.

Learn to optimize app performance by memoizing components with React.memo, a higher-order component, and applying it to the slider and card components for faster rendering during scrolling.

Implement left and right slider control icons with React Icons, render them in the slider UI, and reveal these controls only when the user hovers over the slider.

Implement a React slider by using useState and useRef to track the slider position, compute x-axis distance with getBoundingClientRect, and animate translateX to slide cards left or right.

learn how to install React, bootstrap a new front-end app from scratch, create a dashboard directory in a client folder, and start the dev server to view the landing page.

Clean boilerplate by deleting app.test, Logo.svg, report web vitals, and setup test.js; adjust index.js and app.css to center the h1 tag, then left-align it, prepping for future structure.

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.

Build the top nav component by installing material ui and icons, then structure a left logo and a right edge with notification, language, settings, and profile icons.

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.

Build a responsive side nav in a React app using flexbox, five units, and material UI icons; render it in the app component with CSS styling.

Develop and style a two-column layout with a sticky left side navigation using CSS, including responsive typography, hover states, and colored icons to create a polished navigation experience.

Build a featured items section in a React app showing revenue, sales, returns, and profit with a future items component, styled by home CSS and flex layouts using material icons.

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.

Implement chart analytics in a React app by building a chart component and rendering a data-driven area chart using the Richards library, with x and y axes.

Import the CSS file into the chat component, style the chat container with flex, 10px padding, 30px top margin, and a box shadow to align analytics with featured info.

Master quick style configuration in React by copying the style from the dash materials, pasting it into index.html, saving, and preparing for the display total component.

Build a display total component in React using the React Circular Progress Bar, install it with yarn or npm, render an 80% total revenue chart, and display recent transactions.

Style the display total component using CSS and flexbox, adding box-shadow, borders, and typography adjustments to align top, title, amount, and description for a responsive, centered layout.

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.

Style the order widget by configuring the orders container, the order table, images, and status colors; apply flex layout, borders, shadows, and green, red, or yellow statuses.

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.

Learn to build a user list table with a Material UI data grid in a React app, including columns, rows, sorting, filtering, and checkbox selection.

Refactor the code by separating data from the user interface component, create a data file called user data.js, export const usersData, and import it into the users list.

Add custom data to a table using the render cell method to return a React node displaying avatar and username, with edit and delete actions and styling.

Implement a delete button to remove a table item by id using state and onClick, updating the table; note data isn’t persisted on reload.

Learn to implement user profile routing by passing a user id to a profile page. Build and style a dynamic profile view with editable details and an update form.

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.

implement the create users route by building a create user component, adding a route in app.js, and wrapping the create users button with a link from react-router-dom to redirect.

Build a user component in React app, with a form for username, full name, email, password, and gender, and wire navigation from create users button to the create user page.

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.

Learn to build the product list component in a React course by reusing the user list pattern, wiring routes, styling with a css file, and debugging display issues.

Design the product list with a data grid, mapping id, name, img, stock status, and price. Copy user data approach, create a product data file, and wire delete actions.

Style the product list: image to 50x50 with border radius 5 and object-fit cover, set page size to eight, use flex for centered items and add edit and delete actions.