Learn to use string interpolation in JavaScript with template literals, embed variables and expressions via ${}, and apply a ternary operator for dynamic content in React.

Explore arrow functions in JavaScript, converting traditional functions to concise const arrow forms, understanding initialization before use, parameter handling, single-line syntax, and React button click usage.

Learn how truthy and falsy values affect logical and operator behavior in JavaScript, with practical examples of short-circuit evaluation and conditional rendering in React.

Use the array find method to return first matching element in a numbers array, and demonstrate find index with a students' grades example, noting zero-based indexing and -1 or undefined.

Master array iteration with for each and data transformation with map in JavaScript, logging numbers with indices and returning new arrays, plus using method chaining with filter.

Explore mutable vs immutable arrays in JavaScript, identify mutating methods like push and sort, and use non-mutating operations (spread, filter, map, slice) to create new arrays for React.

Learn to style React components using the style prop as a JavaScript object in JSX, with double curly braces and camelCase properties like textAlign to avoid errors.

Learn how variables in JSX power dynamic UIs by embedding JavaScript expressions with curly brackets and updating a course name constant to render React topics in real time.

Display a student image using UI avatars and initials generated from the full name via an API, then render it with an img src built by JavaScript string interpolation.

Pass props from the parent to the child component to render each student's name and experience, making the student component dynamic and reusable.

Convert classic functions to arrow functions in React components to maintain consistency and readability. Functional components return JSX and avoid using this, while class becomes className.

Create a header and a footer in a React app using JSX components, import a logo, and apply bootstrap flex and a sticky footer to structure the main content.

Define state in React with the useState hook to create a count and setter, so the UI re-renders when updated. Lecture covers importing useState, initializing with zero, and updating state.

See how set count uses previous plus one to compute a new value and update game status to U1 at five, or you lost at minus five, otherwise empty.

Explore managing a complex React state as a single object with count and game status, updated via setState, and conditions to show you won, you lost, or reset.

Set up a react project from scratch, install axios, connect to randomuser.me API, scaffold a contact book with header and sticky footer using bootstrap, and prepare for CRUD basics.

Practice building the general contact component in React, focusing on fundamentals and the React syntax, not copy-pasting, and compare with the favorite contacts to understand two separate components.

Learn to use the built-in form data object to collect form fields, retrieve values with get(name), and build a contact data object (name, email, phone) for submission.

Add checkboxes and radio buttons to forms, retrieve single and multiple values with form data get and get all, and handle on or null states for checkboxes.

Implement error handling with a try-catch, log errors to the console, and manage success and error messages using a useState object; render messages conditionally to reflect operation outcomes.

Explore prop drilling, where props pass through multiple components to reach a final child, and learn why state management libraries like Redux can prevent this prop hell.

Learn to populate the edit contact form by updating name, email, and phone when the selected contact changes, using useEffect and props to drive updates in React.

Learn how Axios simplifies http requests in React, with built-in json parsing and automatic error handling, using get, post, and more, and access response data via response.data.

Learn how to clean up effects with useEffect on unmount by returning a cleanup function, clearing intervals, and removing listeners to prevent memory leaks.

Use useRef to track the previous value of a counter by storing it in previousCount.current in an effect after renders, showing that ref updates don’t trigger re-renders.

Create a new react project named router pedia, install react router dom 7.6.3, run the dev server, and set up routing with a navbar to navigate components via the url.

Organize a React app with a pages folder, create home and contact components, and add routing with browser router to render pages as the landing content.

Learn how to add navigation links in a React app using react-router-dom's link and navLink components to update the URL without reloads and auto-highlight active routes.

Complete a practice assignment to remove the extra home element and the dropdown, use the logo icon to navigate home, and keep only the contact component.

Learn to implement dynamic navigation with React Router by creating a product detail route that captures an ID parameter, renders the correct product, and updates links.

Explore nested routing with multiple roots by building category-based product pages—electronics, clothing, and books—each as a separate component under a product category folder.

Extend the auth utility with hasRole and hasAnyRole endpoints to check the current user's roles and export them, plus a logout function that clears session storage under 'demo auth'.

Implement a protected route wrapper in React that restricts access to product details and admin or customer areas by checking auth state and redirecting to login.

Implement role-based routing to guard admin and customer portals using a role-based route component. Enforce authentication, check user roles, and render access denied with navigation options when roles don't match.

Explore connecting a react app to a redux store with redux toolkit, install react-redux and toolkit, and grasp the basics of configuring a redux store.

Learn to create a counter slice with reducers and actions using Redux toolkit's createSlice, export its actions and reducer, and integrate it into a central store.

Use the useSelector hook from Redux Toolkit to read Redux state in a React app. Access the counter store.count and render it, showing initial and updated values.

Learn to extend a counter with a multiplier in React by dispatching increment and decrement actions that use a payload from a controlled input, leveraging useState and action.payload.

Create a destination fact component that displays the selected destination's name, days, and fun fact using useSelector to read from the destination store and slice.