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

Explore JavaScript basics for React, focusing on the scope of var, let, and const, and preview topics like mapping, destructuring, and spread while practicing debugging in Visual Studio Code.

Explains the scope rules of var, let, and const in JavaScript, showing how var uses function scope while let and const are block-scoped, and clarifies mutability with const objects.

Master arrow functions, compare to traditional functions, use one-line and multi-line forms with and without return, and apply them in a for each loop on arrays.

Learn how to create functions with declarations using the function keyword and with expressions assigned to const, and understand why expressions require initialization before use.

Explore the rest operator in ES6 to collect an indefinite number of arguments into an array, illustrating how the first argument and the rest parameters create flexible function signatures.

Learn how to use the spread operator, or three dots, to merge arrays and update React state immutably by creating new arrays rather than mutating the original.

Create the movies grid component that renders movie cards loaded from a JSON file, and manage the data with React state to drive rendering.

Learn how React state manages component data and triggers automatic updates to the user interface using useState; create a movies state, update with setMovies, and see the interface rerender.

Learn to manage React state with useState to store movies and update the UI with setMovies, and use useEffect to load data from a JSON file or demo data.

Set the movies state with useEffect, updating once on mount to avoid infinite loops, then render the movies length and reflect state changes.

Install and use the React developer tools in Chrome to inspect components and the profiler, and observe how state and hooks drive automatic UI updates.

Fetch the movies from the public folder's movies.json, convert the response to JSON, and set the movies state to render a 20-movie responsive grid.

Learn to render a responsive movie grid by mapping a movies array to card elements, using a unique key, image paths, and details like title, genre, and rating.

Learn how to pass data, events, and functions to components using props, with destructed props, and explore prop drilling and Redux as options for shared state.

Refactor the movie grid by extracting a reusable MovieCard component and wiring it with component properties to render each movie via props and keys.

Learn to implement an on error image handler in React that swaps a broken image with images/default.jpeg using event.target.src and a reusable error handler.

Explore building a rating color system in a React app by classifying ratings into green (≥8), orange (5–7.9), and red (<5) using a get rating class function and JSX interpolation.

Add a search bar to the movie grid, manage a search term state, and filter movies in real time as the user types using an input with an onchange event.

Connect the search bar to state and implement a real-time filter to update the movie list as users type, using a controlled input and onchange handler.

Add a new filter bar with genre and rating dropdowns, manage state with useState, populate options including all genres and all ratings, and prepare UI bindings for live filtering.

Connect the filter dropdowns to state by implementing handle genre change and handle rating change, binding values to make controlled components.

Learn how to implement a multi-step filter in React: filter by genre, then by rating with a switch (all, good, ok, bad), and then by search term.

Set up a react router, create routes with paths like home and watch list, assign elements to render, and build a navigation bar with links to move between routes.

Install React Router DOM version 6.22.3, add a /watch list route, manage the watch list state at the app level, and pass it to subcomponents to enable navigation between pages.

Configure a React router dom navigation by creating a watch list component, defining home and watch list routes, and building a simple navbar with links.

Lift the movie state from the grid to the app.js root to share data. Pass movies as props and load data from JSON with useState and useEffect.

Toggle watch list demonstrates managing a watch list state with useState, adding or removing movies by id, and immutably updating state with the spread operator.

Learn to implement a watch list by wiring state and props across app.js, the movies grid, and the watch list, with a toggle function and movie data.

Add a watch list toggle to the movie card with a styled checkbox and dynamic label, and manage watch-list state at the app level to persist across views.

Set up a package.json with type module, export default functions, and import them in JavaScript, then learn aliasing and why only one default export per module, plus named exports.

Learn to export multiple items with named exports, mix default and named imports, and use aliasing or import * as math to access module functions in React.

Learn how template literals enable string interpolation and multi-line strings in JavaScript for React, using backticks, the ${} syntax, and variables or expressions to create dynamic text.

Explore the array find method in React using a to do data set, retrieving items by id or by conditions like completed false, and returning the first matching element.

Discover how to use the JavaScript array filter in React to create filtered arrays based on conditions, such as completed todos or matching task names, without mutating the original data.

Learn how to use the forEach method in JavaScript and React to iterate over a todos array, set each item's completed to true, and optionally access the index for debugging.

Use the map method to transform an array into new objects, renaming task to description and omitting the completed flag; extend with the spread operator to add a priority property.

Build the Bug Blaster ticket management app using a reducer to create, edit, delete, and sort tickets by priority, illustrated with red, yellow, and green dots.

Set up the Bug Blaster React project in Visual Studio 2022, install dependencies with npm install, import styles.css, and start the development server with npm start.

Create a ticket form component in React for the bug blaster app, managing title, description, and priority with useState, defaulting priority to low and providing a clear form function.

Build a ticket form component with the ticket form class, handle submit, prevent default, and clear state; bind title and description, and add a priority radio group.

Map priority labels to radio buttons inside a fieldset with a legend, creating low, medium, and high options that update the priority state on change.

Create a ticket object from form states (title, description, priority), generate a date id, log for validation, and set up a reducer for adding, updating, and deleting tickets.

Use the useReducer hook to centralize state and separate UI from logic. Dispatch actions like add, delete, and update tickets with immutable state.

Set up a ticket reducer to centralize state logic, dispatch add, delete, and update actions with a payload, and handle them via a switch on action.type with a default return.

Implement the ticket reducer actions by creating initial state with a tickets array and performing add, update, and delete using immutable updates via spread, map, and filter.

Dispatch an add ticket action with the useReducer hook to update the tickets state, passing dispatch to the ticket form and handling actions in the reducer.

Create the ticket item component to display title, description, and priority. Wrap it in a ticket list component and enable dispatch-based edit and delete actions.

Create a ticket list component that maps tickets to items, passes dispatch to a reducer, and conditionally renders all tickets in app.js when the list is nonempty.

Learn how to delete a ticket in a React app by dispatching a delete ticket action with the ticket id, using an onClick handler and a reducer.

Extend the ticket state to track the editing ticket, preload form fields when editing, and dispatch set editing ticket or clear editing ticket to update or add tickets.

Learn how to reset the editing ticket to null when the edited ticket is deleted in a one-page React app, while preserving other edits and validating reducer logic.

Learn how to cancel an edit in a ticket form by adding a cancel edit button, clearing the form, and resetting the editing state with a dispatch action.

Learn how the React context API enables global state sharing without prop drilling. Use createContext, useContext, and providers to share information like the current user across components.

Explore a real-world prop drilling example that passes user information through app, blog, post, and comments components, and learn why switching to the context API can improve clarity.

Learn to create and use a React context in your app, with createContext, a provider, and useContext to share values across components without prop drilling.

Use context to share the logged-in user across components, avoiding prop drilling. Create a user info context with a provider and consume it in blog components to reveal admin controls.

Learn how to combine context and prop drilling in React by drilling user info from the blog page to posts and comments, or selectively use context in deeper components.

Learn to manage app themes with React context. Create a theme context and a theme provider, wiring a light/dark toggle with useState and exposing theme state.

Finish the context api section in React and apply your growing ability to share global state within a React application.

Learn how to model asynchronous operations with promises in JavaScript and React, including creating promises, using resolve and reject, and handling success with then and errors with catch.

Demonstrate promises in action by loading data from an API with fetch, handling errors with catch, and logging the JSON result to the console.

Learn how to use async and await with promises to create clearer, maintainable asynchronous code. The lecture shows fetching data with await and handling errors using try/catch.