The Ultimate React Course 2025: React, Next.js, Redux & More

Master the React fundamentals by setting up new apps, building components with props and JSX, handling events, and managing state to create dynamic applications.

Explore why we need React, what React is, and how it compares to vanilla JavaScript, then review setup options and build your first project with Create-React-App.

Front-end frameworks exist to keep the user interface in sync with data and avoid the complexity of vanilla JavaScript by centralizing state and enforcing consistent development patterns.

Compare a React app with a Vanilla JavaScript version side by side to see how React automatically keeps the UI in sync with state, unlike manual DOM updates.

Explore how React, a popular JavaScript library for building user interfaces, uses a component-based, declarative approach with JSX and state to render and update UIs.

Set up your React development environment by installing VS Code, Chrome, and Node.js (v18+), configure ESLint and Prettier, and enable auto-save and format-on-save with starter snippets.

Explore pure React by building a simple app inside a regular HTML file without any modern tooling, using React and React-dom, createRoot, and a clock with useState and useEffect.

Navigate React's official documentation at react.dev, focusing on the Learn and Reference sections to grasp fundamentals, hooks like useState, and how these pages support real-world project setup.

Explore setting up a new React project with Create-React-App and Vite, compare preconfigured tooling to manual setup, and choose the right approach for learning and real-world apps.

Set up your first create-react-app project using the terminal, navigate folders with cd and ls, install with npx create-react-app@5, and start the app with npm start in VS Code.

Refresh essential JavaScript fundamentals for React, including destructuring, spread operator, template literals, ternaries, promises, and async/await, and study immutable arrays with map, filter, reduce, and sort.

Master object and array destructuring in JavaScript by extracting book data (title, author, pages, genres) from a simulated API, with VS Code and Quokka demonstrations.

Learn how rest and spread operators work with arrays and objects, using rest for remaining elements and spread to add or override properties in React state updates.

explore template literals in ES6 that create dynamic strings with JavaScript variables and expressions using backticks and ${}, as shown with title, pages, author, and publicationDate.

Learn how to use the ternary operator in JavaScript to conditionally return values in React, with examples of true/false branches, template literals, and page range logic.

Explore arrow functions in ES6, compare them to traditional functions, and learn to extract the year from a date in date-month-day format using a concise one-liner.

Explore how short-circuiting works with && and || in JavaScript, using truthy and falsy values, and apply ?? to provide nullish defaults without misinterpreting zero.

Learn to use optional chaining and the nullish coalescing operator in JavaScript to safely compute total review counts from nested book data, handling missing Goodreads or libraryanything fields.

Master map, filter, and reduce, the three functional array methods, returning new arrays without mutating the original, and learn to extract book titles and essential data.

Apply the array filter method to select books by a condition, chain filters with other array methods, and pair with map to project titles, using includes and adventure genre examples.

Master the array reduce method to collapse a JavaScript array into a single value by summing numbers, using a callback, an accumulator, and a starter value.

Sort arrays using JavaScript's sort method, using a and b to achieve ascending or descending order, and copy with slice to avoid mutating the original when sorting objects by pages.

Learn to work with immutable arrays in React by adding, deleting, and updating elements without mutating the original data, using the spread operator, filter, and map.

Master asynchronous JavaScript by using the fetch API and promises to fetch data from an API, handle fulfilled responses with then and JSON conversion, and display results.

Learn to fetch data with async/await, replacing then handlers with an asynchronous function and await for cleaner, synchronous-like code. Explore how promises and React state fit into asynchronous data flows.

Explore components, props, and JSX as building blocks of React, learn to reuse components, pass data with props, and render lists with conditional rendering in a developer profile card.

Start from scratch by creating index.js, import React and ReactDOM, and render the App into the root with ReactDOM.createRoot in React 18, optionally wrapping in StrictMode to double-render in development.

Develop debugging skills for React apps by ensuring the app runs with npm start, using hard reloads when needed, and inspecting errors via the browser console, ESLint, and dev tools.

Explore how React builds user interfaces from reusable components, nesting, and props, forming a component tree that links parent and child components to render the UI.

Create a brand new React component and render it three times to demonstrate reusability. Use public assets, add alt text for accessibility, and prepare for prop-driven data.

Describe how JSX provides a declarative syntax to define a component's appearance from data and logic, and how Babel converts JSX to React.createElement to render the UI.

Create additional components with JSX for header, menu, and footer, reusing the pizza component to display six pizzas. Compare JSX with React.createElement to see how small components form an app.

Explore how to write JavaScript inside React components, using variables and if-else logic to determine open hours and display results, while understanding render behavior.

Discover how React embraces separation of concerns by co-locating data, logic, and ui in single components using jsx that blends html, css, and javascript.

Learn to style React components using inline styles in JSX and external CSS files, import a CSS file with Webpack, and use className for global styles.

Learn how props enable data flow from a parent to a child component in React, letting you customize each pizza with image, name, ingredients, and price.

Explore how props pass data from parent to child, why props are immutable, and how one-way data flow in React keeps UI in sync with state and avoids side effects.

Build a developer profile card in React with avatar, name, bio, and a skills list, using props to customize each skill and choosing between Create React App or CodeSandbox.

Explore the rules of JSX: JSX works like HTML with a JavaScript mode via curly braces, allows JavaScript expressions, forbids statements, and requires a root element or a React fragment.

Render lists in React by mapping an array to create one component per item, using a unique key and passing the item as a prop. Use ul and li markup.

Learn how to conditionally render React components using the && operator and short-circuiting, based on conditions like isOpen or available pizzas.

Learn to render conditionally in React using the ternary operator inside JSX, understanding its three parts and why it yields a value in JavaScript.

Use multiple returns to conditionally render JSX in React components, enabling early returns, null returns, and alternative JSX based on props such as soldOut.

Learn to extract a complex JSX fragment from a footer into a new React component, pass data via props, and render the order component with the correct hours.

Learn to simplify React components by destructuring props, receiving a pizza object and other props directly, eliminating repetitive props access, and avoiding common mistakes with curly braces.

Learn what a React fragment is and how to render multiple elements without a wrapper, using React fragment when needed and adding keys for lists.

Learn to conditionally display text and set class names in React using the ternary operator and template literals, illustrating sold out states and price in a pizza app.

Explore how React components form a UI using JSX, style props, and props data; render lists with map and apply conditional rendering.

Render a dynamic developer profile card by mapping a skills array to components, using color and level to display beginner, intermediate, or advanced emojis in a React course project.

Explore fundamental React concepts by making components interactive, handling events, and managing state with controlled forms, then summarize props and state through a small flashcards app.

Learn to build a simple three-step component in React by scaffolding with Create-React-App, rendering static JSX, highlighting the current step, and wiring next/previous buttons for future interactivity.

Learn to handle events in React with the onClick prop, avoid addEventListener, and pass a function as the handler while using JSX event naming, camel case, and state concepts.

Understand what state is in React and why it powers interactivity. Learn to manage state with useState, useReducer, context, and Redux, triggering re-renders and keeping the user interface in sync.

Create a dynamic step state with useState, destructure the array, and update it via event handlers for next and previous buttons, while guarding against invalid steps.

Learn why you should only update React state with the setter function, avoid mutating state, and embrace immutability for reliable re-renders and correct updates.

Explore how state drives rendering in React using the useState hook; updating state on events re-renders the component while preserving state until unmount.

Introduce an isOpen state with useState to toggle content on click. Use conditional rendering and a button to show or hide parts, and illustrate React fragments for multiple elements.

Learn to use React dev tools to inspect the component tree and state, view hooks like useState, and toggle values in the console to see UI changes and component behavior.

Update state using a callback that receives the current value to ensure safe, correct updates; avoid relying on current state when updating twice.

Learn how components isolate state, view the UI as a reflection of state, and apply practical state guidelines, including modal isOpen handling and avoiding unnecessary re-renders.

Compare a vanilla JavaScript implementation with the React version to show how state drives user interface updates, from manual DOM manipulation to declarative rendering.

Learn to build a date counter in React using state, with a configurable step to add or subtract days from the current date, and show days from today.

Create travel-list app with npx create-react-app v5 to add, pack, and clear items, with sorting by input order or description; organize into logo, form, packing list, item, stats, form submissions.

Build a static layout for a React app by setting up starter CSS, scaffolding app components (logo, packing list, stats), and rendering static items from an array with JSX.

Learn to render a dynamic packing list in React by mapping an array to a ul, passing item props to a component, and styling packed items with a line-through.

Learn to build and handle forms in React using the HTML form element, dynamically generate select options with array.from and map, and prevent page reload with onSubmit.

Learn how to implement controlled elements in React forms by keeping state in React, binding inputs and selects, and updating state with onChange, then reset on submit.

Explain how state stores internal data and drives interactivity, while props pass external, read-only data from parent to child, triggering re-renders on updates.

Learn to manage flashcard state in React by building a small app that uses a single useState hook to track the selected question, render questions, and reveal answers on click.

Upgrade the date counter with a range slider and a numeric text input, convert values to numbers, make both inputs controlled, and render a reset button only when changes occur.

Learn to think in React by mastering state management: decide when to create and derive state, and lift state up to communicate between child and parent components.

Learn to think in React by breaking the UI into components, mastering state, props, and one-way data flow, and building reusable interfaces with a clear component tree.

Explore the fundamentals of state management in React, distinguish local and global state, and learn when to place, derive, or lift state, using context or Redux.

Learn to add and manage state with useState, then lift state up to the app component and pass onAddItems to the form and packing list.

Lift state up to a common parent to share coupons between promotions and total components, then pass a setter to enable updates via inverse data flow in React.

Learn to delete items via child-to-parent communication by passing a delete handler from the app to the packing list and items, using item.id to filter and update state.

Learn to update items by toggling their packed status with a controlled checkbox, using state, on change, and immutable map-based updates in a packing list.

Derive state from the cart to keep data in sync and reduce re-renders by computing the number of items and total price from the cart.

Calculate statistics from the items array using derived state in React, including number of items, number packed, and packing percentage, with early returns and conditional rendering.

Sort items by input order, description, and packed status using a select box, implementing a controlled sortBy state and derived sortedItems to reorder the list without mutating the original array.

Add a clear list button, implement handleClearList to reset items to an empty array, and pass onClearList to the packing list component with a confirmation prompt to prevent accidental deletion.

Split your React app into separate component files, exporting default components and importing them correctly to keep App.js organized. Learn refactoring, moving components to a components folder, and using useState.

Build a reusable accordion in React by rendering items from a data array. Each item shows a number, title, and text, and toggles its content with a plus/minus control.

Learn to create a reusable button in React using the children prop to pass arbitrary JSX content, making components generic and highly reusable.

Learn to build reusable components with the children prop by creating a StepMessage that always displays the current step plus passed-in content, enabling flexible, reusable UI blocks.

Build a single-open accordion in React by lifting state to the accordion, using curOpen to track the open item, and passing onOpen; embrace the children prop for flexible content.

Build a dynamic tip calculator in React by composing bill input, select percentage, output, and reset components, lifting state up and deriving the tip from bill and average percentages.

Finish part one by building the Eat-'N-Split project to reinforce the React fundamentals of state, props, and events. Note this bonus project adds no new concepts, but provides essential practice.

Set up a new react project with npx create-react-app version five for the eat-n-split app, then outline ui components to split a bill among friends and prepare static, state-free implementation.

Learn to build a static React app that renders a friends list, using components, props, and map, with conditional balance styling and a functional UI.

Builds static forms for a bill-splitting app by composing a form add friend and a form split bill, reusing a button component, handling disabled inputs and a simple select.

Use a useState variable to display or hide the new friend form, triggering a re-render and toggling the button text between add friend and close.

Implement adding a new friend by wiring controlled inputs in FormAddFriend, generating a unique id with crypto.randomUUID, and lifting state to App to render updates in FriendsList.

Lift state up to the app, track the selected friend, and pass it via props to the friend list and form to render and update the selection.

Turn the input fields into controlled elements by wiring bill, paidByUser, and whoIsPaying to React state with useState. Derive paidByFriend from the bill and validate numeric input.

Finish a bill-splitting app by handling form submission, guarding input, and updating each friend's balance via state. Use a split-bill handler and auto-close the form.

Reinforce part 1 fundamentals through self-led projects, then dive into part 2 to see how React works behind the scenes and build the usePopcorn UIs with hooks.

Think in React by mastering how to split a user interface into components, their composition, and reusability, then implement a simple app layout using component-based design in React.

Set up the usepopcorn React app, explore static data, and master components and hooks while implementing real data fetching, a rating component, and a watchlist.

Learn to split a UI into well-defined components by balancing size and responsibilities. Apply criteria like logical separation, reusability, and complexity, starting big and refining into smaller, reusable parts.

Split a monolithic React component into reusable, focused parts by extracting nav bar, search, and content boxes, lifting state and passing props to create maintainable, modular UI.

Explore the three core React component categories—stateless or presentational, stateful, and structural—and see how props, state, and composition shape scalable applications.

Explore prop drilling by lifting state to the App component and passing it through Main and ListBox to MovieList, illustrating the problem and hinting at component composition as a fix.

Explore component composition to build reusable modal and message components using the children prop, solving prop drilling and enabling flexible, scalable layouts.

Fix prop drilling through component composition by using children and moving the movies prop into the app component, enabling direct data flow to NumResults and the movies list.

Learn to use composition to solve prop drilling and build a reusable box component with a children prop, isOpen state, and conditional rendering for cleaner layouts and clearer app structure.

Compare the children prop with an explicit element prop to pass JSX into a box component, noting React Router uses this pattern while children remains preferred.

Learn to build a reusable star rating component in React that supports a configurable max rating, hover preview, click to set, and default props via destructuring.

Build a dynamic star rating component in React, using useState to track rating, handle clicks, and render full or empty stars via an SVG icon and accessibility role.

Learn to implement hover-based star rating by tracking a temporary rating on mouse enter and resetting on mouse leave, updating the UI without altering the actual rating.

Think of each component as a creator and consumer, and define its public API by exposing the right props for a simple, flexible weather component.

Define a flexible public interface for the star rating component with color and size props, plus default values. Enable state updates via onSetRating and allow styling through an optional className.

Learn to implement prop-types for type checking in a reusable React star rating component by importing prop-types and using validators such as number, string, array, func, and isRequired with defaults.

Build a reusable text expander in React that toggles collapsed and expanded text with a button, using props like children, collapsed word count, and button text.