React 19 and .NET 10 API - The Complete Full Stack Bootcamp

Learn to set up a JavaScript file in Visual Studio Code, create index.js, define a function that logs the destination set to New York, and run with Node.js.

Learn how to declare and manage variables in javascript using const and let, avoid var due to function scope, and apply reassignment rules with practical examples like destination updates.

Master string interpolation in JavaScript using template literals with backticks and ${} to embed variables and expressions, including a ternary example with days needed and destination updated.

Learn how to convert traditional functions to arrow functions in ES6, manage parameters and initialization, and write concise single-line syntax for React projects.

Master the rest and spread operators in JavaScript, using the three-dot syntax to collect values, expand arrays, and perform dynamic parameter handling through array and object destructuring.

Explore how the spread operator expands arrays and objects, copies data, and merges details to build React applications.

Explore truthy and falsy values in JavaScript and how the and and or operators return first falsy or last truthy operand. See console.log examples and apply to React conditional rendering.

Explore how the JavaScript find and findIndex methods work on arrays, returning the first matching element or its index, with examples using numbers and student objects.

Learn how to use array filter to return multiple values based on conditions, compare it with find, and build simple predicates like top performer with proper returns.

Explore how to sort arrays in JavaScript, including case-sensitive and case-insensitive sorting with a custom comparator, and sort numbers correctly using a minus b, enabling ascending and descending order.

Master looping arrays with forEach to access indices and log items, and transform data with map to return a new array, enabling immutability and method chaining with filter.

Learn to use map to transform arrays and return new results, including mapping fruits to uppercase and shaping user objects with id, name, and age group.

Explains mutable versus immutable in JavaScript arrays, showing which methods mutate the original array (push, unshift, splice, sort) and highlighting non-mutating alternatives (spread, rest, filter, map, slice) for React.

Switch back to the react app we were building, open the folder, navigate to the task, open the terminal, and run npm run dev to continue from the next video.

Learn how to style in React by using the style prop as a JavaScript object inside double curly braces, with camelCase properties like textAlign and proper quotes for hyphenated names.

Learn to manage style objects by adding styles such as background color and padding, create page style constant, and apply it with curly brackets to access JavaScript values in React.

Add bootstrap to a react project via npm or a CDN, then apply bootstrap classes in JSX. Learn that React uses className instead of class because of JavaScript reserved keywords.

Learn to create a custom css file in the src folder, define a class custom heading with brown color and large font size, and import styles.css into main.js.

Define a constant for the course name and embed it in JSX with curly brackets to render topics like JSX, React components, routing, and state management, with UI updating automatically.

Discover declaring numbers and booleans with constants, rendering them in JSX, and using a ternary operator to show active or inactive states in a React UI.

Explore how to use input fields in JSX, apply camelCase props like maxLength, employ curly braces for numbers, and pass booleans such as disabled in React forms.

learn two ways to handle images in a react app: use the public folder or import from the src folder, then render in components with jsx.

Learn to modularize a react app by moving header and footer into separate components in a layout folder, exporting defaults, and importing with correct relative paths for reuse.

Create a dedicated footer component by exporting default footer and moving it from main.js into the layout folder, then import it in main.js to separate header and footer.

Learn to build a student component in a React project, displaying a student profile with image, full name, and programming experience using Bootstrap layout in main.js.

Compare default and named exports in React, using a function export in two forms. Learn when to prefer default export (one main thing) versus named exports (multiple functions).

Display a student image using avatars, generate initials, fetch a name-based image via API, build the URL with string interpolation, and style the image with max width and padding.

Separate the students into their own component, practice creating multiple components, and link and call the new component from Main.js to reinforce modular React structure.

Separate the student component into a new src file named students.jsx, export it, import it where needed, and add header padding top 3 to prevent console errors.

Learn how to pass props from a parent to a child component in React by defining and using props such as experience and name, enabling dynamic student listings.

Pass a string property into a component and access it with props.name to render the correct name and update visuals; avoid spelling mistakes.

Learn to pass a React component as a children prop to a student component, render a student review with bootstrap icons, and access the content via props.children.

Convert classic functions to arrow functions inside React functional components to maintain consistency for button clicks and form handlers, noting that this isn’t used.

Create a fresh react project named Count Opda, clean up by removing extraneous files and leaving only main.js that renders hello world, and learn to run and verify the app.

Create a react project named counter pedia, install dependencies, and run the dev server to display hello world; then clean boilerplate, commit changes, and privately push for later public release.

Create an images folder in src and add three images, copy the Bootstrap script into index to apply a dark theme container, and display hello world with Bootstrap.

Build and wire the header and footer components in a React layout, applying JSX structure, bootstrap classes, and a sticky footer to create a complete layout.

Build a React counter component as a functional, JSX-based unit that tracks a count state, renders plus and minus buttons with Bootstrap styles, and updates on clicks.

Learn to handle click events in React using the camel-cased onClick in JSX, with inline or separate functions and a simple alert example that confirms the button click.

Explore organizing local functions inside a counter component, wiring plus and minus actions to handleIncrement and handleDecrement, and investigate why the UI may not render even after count updates.

Local variables don’t trigger user interface updates in React; use the useState hook to create a state variable with a setter so the user interface re-renders when the count changes.

Update state in React using the updater function and never mutate the state directly. Pass a new value, such as count + 1, to the setter instead of plus-equals.

Master best practices for updating React state with useState by using a functional update that reads the previous value to handle batched updates.

Update the ui by using useState to run a counter game with plus ten and minus ten, remove logs, display attack and defense images, and adopt responsive layout.

Add random play and reset to a React app with image click handlers; use Math.random and Math.round to choose attack or defend and update the count.

Add a counter state and a game status that updates to you won or you lost when the counter crosses five or minus five, using increment and decrement handlers.

Walks through updating a counter's state: compute new value as previous plus one, update game status at thresholds, and display status during increment and decrement; notes a not recommended approach.

Updating a state inside another updater is discouraged in React because updates are batched and can cause rerender issues; compute the value, then set count and update the game state.

Use the useEffect hook to run side effects based on count changes, watching the count value and updating game status when it crosses thresholds like five or minus five.

Master conditional rendering in React by showing the game status element only when its length is greater than zero, using curly braces and end conditions.

Learn to manage a state object in React by consolidating count and game status into a single object and updating both properties with useState and setState for win/lose logic.

Learn how resetting an object state replaces the entire state. Discover why you must preserve existing properties with the spread operator to reset game status and count correctly.

Create a new React project called contacto pedia, install axios, fetch random user data, and lay out a contact book with header and sticky footer for future CRUD features.

Create a contact index component in a React project and initialize its state. Define the initial state as an array of contacts with id, name, phone, email, and is favorite.

Build a basic React UI layout for a contact index with a container, rows, and columns, and add and remove contact actions. Add a form to create new contacts.

Develop a favorite contact component in a full-stack React bootcamp project, adjust layout, and pass contact data to display favorites alongside all contacts.

Filter contact list to show only favorites, pass it as a prop from the contact index, and render a contact component that displays name, email, and phone with action icons.

learn how to render the contact component multiple times by mapping a favorites-filtered contacts array and passing each contact via props, with a unique key for each item.

Make the contact component dynamic by inspecting props to render the contact name, email, and phone with UI avatars and a string-interpolated image src.

Create a general contacts component that displays non-favorite contacts using the same information as the favorite contact, and add a new file named general contacts dot JSX.

Practice building a general contact component in React by recreating the logic from the favorites, filtering non-favorites, and comparing two separate components to reinforce fundamentals.

Implement a favorites toggle that adds or removes a contact, shows a star indicator for favorites, and uses a dynamic class name built from a JavaScript object with ternary condition.

Learn to toggle a contact's favorite status in a multi-level React component tree, showing that children cannot update props and that the parent must handle state updates via callbacks.

Pass the handle toggle favorite from the parent to the child and then to the grandchild contact component via props, and invoke it to trigger the favorite action.

Toggle a contact's favorite by mapping the previous state and updating the object with opposite is favorite, leveraging parent to child data flow and function props.

Practice deleting a contact from state by its id, so the record disappears from the screen. Use the filter method to update the array; refreshing resets the state.

Build a dedicated add contact form in a React app, featuring a new add contact component, input fields for name, email, and phone, and success or error messaging.

Implement delete by passing only the contact id, use array filter to remove the item, and wire the delete action through props to update the UI.

Create a handle add contact form function, wire it to the form submit, prevent default, and read values from e.target to capture name, email, and phone.

Leverage the built-in form data object to collect form fields, retrieve values with get('name') and other keys, assemble a contact data object (name, email, phone), and log results.

Learn to implement checkboxes and radio buttons in a form, extract values with form data get and getAll, handle single or multiple selections, and understand on, null, and array results.

React 19 introduces actions in forms that automatically handle submit and provide form data directly as a parameter, simplifying code compared with onsubmit.

Add a messages state with error and success fields using useState, implement try-catch and console logging, and render feedback via conditional rendering.

Add a new contact to the app state with a handle add contact function, generating a new id and defaulting favorite to false. Pass the handler via props and update.

Display a success message when a contact is created by handling the add contact response and showing 'contact was added successfully', while presenting error messages on failure.

Validate form input to prevent duplicate records by filtering the contact list and returning a duplicate record error via response.msg.

Prop drilling bundles props through multiple components to reach a grandchild, often called prop hell; use state management libraries like Redux to avoid this.

Learn to build a controlled component in React by binding inputs to a single form data state and updating it with a dynamic onChange handler to reflect changes instantly.

Implement a remove all contacts feature by adding a remove all button with btn btn danger class and wiring an onclick event to delete every contact.

Create a remove all function that clears the contact list by setting it to an empty array, wire it to the remove all control, and note console error during entry.

Debug a bug in the contact list by tracing error messages to contact index line 56, fix undefined id access when the list is empty by checking length before use.

Populate the form with existing contact details and switch the button to update when a contact is selected, using useState to track the selection and updating state.

Toggle between update and create modes by passing is updating to the child, and implement a cancel button to reset updating and show create contact.

Implement cancel update by adding an endpoint to reset the selected contact and is updating flag, pass the cancel function to the add contact component, and trigger it on click.

Learn to auto-populate a contact edit form in a React app using useEffect when a contact is selected, updating name, email, and phone fields for seamless updates.

Learn to master create and update flows for contacts in a React app, add an update endpoint, update by id, and clear the form after successful creation.

Adopt camel casing for JavaScript variables and functions, not Pascal casing for non-component code, and update across the project to follow best practices, ensuring no console errors.

Create a getRandomUser utility in api.js that fetches the randomuser.me API with fetch or axios, handles errors, parses JSON, logs the data, and returns it.

Build a functional React component with a button to add a random contact, and perform an asynchronous get random user API call to populate name, phone, and email.

Format a random user from an API response by validating response.results, selecting the first item, and building a formatted user with name (first and last), email, and phone.

Learn how axios simplifies http requests by automatically parsing json and handling errors, replacing fetch for get and other endpoints, by importing axios and returning response.data.

wire a new API endpoint to add a random contact, update the state, and pass the add handler as a prop to manage adding, editing, and removing contacts.

Set up a React project named router pedia, install dependencies, run the dev server, and clean the src to display hello, illustrating routing in React.

Explore basic React hooks and component lifecycle in functional components, using useState, mount and unmount demos, and interactive parent and child counters with toggles.

Master useEffect to manage side effects in React function components, control execution with dependency arrays, handle mounting and unmounting, and perform one-time or frequent API calls.

Learn how to clean up in useEffect by returning a function that runs on unmount, preventing memory leaks with intervals and event listeners.

Learn to monitor properties with use effect, log updates when the child counter or the parent counter changes, and observe mounting and unmounting behavior.

Explore the use ref hook for stable values via dot current, reference dom elements without triggering updates, and manage first render behavior with use effect.

Learn to access dom elements with use ref to focus an input on page load. The lecture shows assigning the input ref and using useEffect to auto focus when mounted.

Learn to track total renders in React by using useRef and useEffect to count every render, including updates from strict mode, and display the count alongside a controlled input form.

Learn how to track the previous value of a state using useRef, updating a previous count after render with useEffect, without triggering extra rerenders.

Rename the project to hooks pedia, update folder and project name, run the dev server, and confirm the project focuses on learning React hooks.

Create a new react project named router pedia, install react-router-dom 7.6.3, and set up routing with a navbar to navigate between components as the url updates.

Add bootstrap to the project by including the CDN and icons in index.html, then clean up the code by removing app.css and index.css and display hello.

Create an app.jsx template with a sticky footer, header and main content, using bootstrap flex layouts for multiple pages like home and contact us, and a dark theme.

Create a header layout using bootstrap navbar, refactor to a main layout in layouts folder, replace class with className, and import react logo to render home page on navigation.

Create a pages structure with home and contact components, then wrap the app in BrowserRouter from react-router-dom to enable routing and central route registration.

Define the app routes with React Router DOM, create the app router, and configure home and contact routes. Render at the app root so the URL selects the correct component.

Navigate between home and contact using React Router DOM's Link and NavLink components to update the URL client-side without page reloads, while NavLink automatically applies the active styling.

Learn how to implement programmatic navigation using the useNavigate hook from React Router Dom. Trigger a route change to the contact page from a button click after optional data processing.

Practice an assignment to clean up the navigation by removing the home text, relying on the logo icon for home, keeping only the contact component, and removing the dropdown.

Use a link component with a forward slash in the main layout to navigate to the home component, replacing nav link and removing the list icon, then center-align with margin-y.

Design and implement a not found page in a routing app by adding a star path, rendering a not found ui, and linking back home with React Router Dom.

Learn how to set up sample product data, create a product list component, implement routing to /products, and build navigation with categories like electronics, clothing, and books.

Show all products by importing product data, map over it to render each item with name, price, and category, using product ID as the key and a view details link.

Learn to implement dynamic navigation with React Router by adding a products/:id route, capturing the id from the URL, and rendering the product detail component with the correct data.

Learn how to extract a URL parameter with the useParams hook, validate and convert the id, find and display the product details, and handle not-found cases with a back link.

Learn nested routes and sub routing to filter products by category in a full stack react app, building separate components for all products, electronics, clothing, and books.

Build a product layout and nested routes in a React app to navigate electronics, clothing, and books, wiring index and child routes in the app router.

Learn to render nested child routes with an outlet in a product layout. Configure nav links with the end prop to ensure exact route matches for books, clothing, and electronics.

Create a reusable product list component in a full stack React bootcamp with .NET API, filtering products by category and rendering title and description for electronics, clothing, and books.

Demonstrates using react-router-dom's useNavigate to return to the previous category page, passing -1 to navigate back from product detail to electronics or clothing.

Learn how absolute versus relative routes affect navigation in a React app, and why using absolute routes prevents unexpected navigation issues.

Learn to implement protected routes by adding a login component and role-based portals for admin and customer, configure navigation and routes, and simulate a login flow.

Implement a fake login by clicking admin or customer, call an endpoint, and store an authenticated flag true in session storage with role-based user objects.

Learn to implement a fake login using an auth utility that stores isAuthenticated and currentUser in session storage, with get/set functions and role-based admin or customer flows.

Add endpoints in the auth utility to check a single or multiple roles against the current user, export them, and implement logout to clear auth state and session storage.

Implement logout in the main layout using get auth state and the auth utility to conditionally render login or log out with a ternary operator, then navigate home.

Protect routes by wrapping admin, customer, and product detail components in a protected route that redirects to login when the user is not authenticated, using get auth state and navigate.

Implement role based routing to secure admin and customer portals by creating a role based route wrapper that checks the current user's roles and redirects unauthenticated users to login.

Use the location hook to capture the original page from a protected route, pass it as state during login, and redirect back after successful authentication.

Toggle route visibility by user role: display admin only to admin users and customer only to customers, and show the logged-in user's name before logout.

Explore role-based routing with react router dom by implementing admin and customer views, conditional rendering based on authentication and user roles, and dynamic navigation with protected routes and welcome messages.

Explore how Redux provides state management as a centralized brain for your application's data in a React app.

Learn to scaffold a React project, integrate header and footer components, set up a sticky footer with flexbox, and fix asset paths while organizing src components for a full-stack app.

Connect your React app to a Redux store with Redux Toolkit, enabling easy configuration; install React Redux and Redux Toolkit, follow getting started commands, and run the dev server.

Configure a Redux store with Redux Toolkit, create a store file, wrap the app with React Redux provider, and define reducers to avoid empty reducer errors, following the single-store guideline.

Create a counter slice with initial state, implement increment and decrement reducers using Redux Toolkit, export actions and reducer, and wire the counter reducer into the store.

Utilize the useSelector hook from react-redux to read the counter store's count from redux state and render it in a counter component.

Dispatch actions from a React component using the dispatch hook, importing increment and decrement from the counter slice, and wiring them to button clicks to update state.

Add a multiplier counter to the React app by wiring increment and decrement actions to a value in a controlled input via dispatch and action.payload, using useState.

Import useState, create a local multiplier state, implement a controlled input, wire increment and decrement actions in the counter slice, and convert input to number to avoid string concatenation.

Create a new destination slice to manage destinations and days to visit, define an initial state with a destinations array, export the destination reducer, and integrate it into the store.

Create a destination list component as a functional React component that retrieves all destinations from the destination slice, maps them to display each name, and adds a details button.

Use useSelector to fetch the destination list from the destination store, map over it to render destination names, and ensure correct spelling and case sensitivity to avoid undefined data.

In a full stack react bootcamp with .NET API, selecting a destination updates the destination selected in state via dispatching the destination clicked action with the chosen payload.

Create a destination fact component that uses useSelector to read selected destination from the destination store, and render its name, days, and fun fact with a select a destination fallback.

Create a reset app component with a centered text and a warning button, display it before the counter, and reset the counter and clear the selected destination on click.

Implement reset functionality by creating and dispatching reset destination and reset counter actions to clear the selected destination and reset the count to 15.

Configure cross-slice action handling by using extraReducers and addCase so the counter slice listens to a destination action and resets the counter to 15.

Refactor magic strings by extracting the reset destination from the destination slice and using reset destination.toString, ensuring the reset functionality works identically.

Learn to implement a custom Redux Toolkit action and listen for it across slices, replacing confusing extra reducers with a clean reset action.