React Bootcamp - The Complete Guide

Learn to declare variables in JavaScript using const by default and let for reassignments, avoid var, and update values like destination from New York to Los Angeles.

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.

Explore the rest and spread operators in JavaScript, using the three-dot syntax to pack and unpack values, destructure arrays and objects, and handle dynamic function parameters.

Master the spread operator as it expands arrays and objects, enabling copying, merging, and updating data for use in React applications.

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.

Use the filter method to return multiple values from an array based on a condition, such as numbers greater than ten; ensure you return to avoid empty arrays.

Learn how to sort arrays in JavaScript with the built-in sort, including a custom comparator for case-insensitive order and numeric sorting with a minus b approach for ascending and descending.

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.

Use dot map to transform arrays and return a new one, such as uppercasing fruit or creating a formatted user object with id, name, and age group.

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.

Switch back to the application we were building, open the project, run npm run dev in the terminal, and continue from the next video to reinforce React fundamentals.

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 to create and combine style objects in React, apply a background color and padding, and store styles in a constant. Use curly brackets to inject JavaScript values into styles.

Learn to integrate bootstrap into a react project using npm or CDN, update index.html with the link and script, and use className in JSX to apply bootstrap classes like text-success.

Learn how to create and import a custom css file in a React project by adding style.css in src, defining a custom heading class, and importing it in main.js.

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.

Explore JavaScript variables and constants in React, learn to display a numeric lecture count and boolean states, and use ternary operators to render active or inactive status in JSX.

Explore adding an input inside a JSX component, using camelCase attributes like maxLength, numbers in curly braces, and boolean props such as isActive to control disabled state.

Learn how to store and display images in React by using the public folder or importing from the src folder, enabling Webpack optimizations and proper image rendering.

Learn to modularize a React app by creating a layout folder, exporting header and footer components, and resolving relative paths to reuse components in Main.js.

Create a new footer component and export it, then import it into main.js. Separate header and footer into the layout folder to keep the app functional.

Learn to build a student component in react by rendering a section in main.js that shows each student's image, full name, and two years of programming experience using bootstrap layout.

Demonstrates default export vs named export in React, showing how to export a function with the export keyword and import with curly braces, and explains when to use each.

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.

separate the students into its own component and practice creating multiple components, then add the component link and call it from Main.js.

Separate the student component into its own file at src/students.jsx, export it, and import it into the header to update the layout and ensure no console errors.

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

Pass a component as children in a React app to the student component, render a student review section with bootstrap icons (thumbs up/down), and access it via props.children.

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 fresh React project named Counter Pedia, clean up the workspace, and display hello world in a div in main.js to practice creating and running a React project.

Add bootstrap and images by creating a src/images folder with three images, copying the bootstrap script to the index, and displaying a hello world in a dark theme container.

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.

Build a counter component in React as a functional component with JSX, rendering the current count. Use two bootstrap-styled buttons to increment and decrement on click.

Learn how to handle button click events in react by using the camelCase onClick prop, defining a function or an inline arrow function to display an alert.

Learn how local functions inside a counter component and inline invocation affect updating the count, with plus and minus handlers and debugging why the DOM does not refresh.

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.

Learn how to update React state correctly by using updater functions instead of mutating count, avoid async bugs, and implement clean, immutable value changes.

Understand how React's useState batches updates and why the functional form with a previous value (prev) preserves correct increments. Adopt best practices by returning the new state via a function.

Learn to build a counter game UI with the use state hook, center layout, and attack/defense images, with win at plus ten and lose at minus ten.

Implement interactive counter controls with increment, decrement, and reset actions, plus a random play toggle using Math.random and Math.round to choose between attack or defend.

Implement state management in assignment 6 by tracking a counter, logging changes, and updating game status via handle increment and handle decrement to display you won or you lost.

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.

Discover why nested state updates are discouraged in React, and fix by computing the new value first, then updating setCount separately, and updating game state with a separate check.

Learn how the useEffect hook runs side effects in a function component by watching count with a dependencies array. Update game status when count crosses five or minus five.

Practice conditional rendering in React by displaying elements only when a condition is true, using JSX and end conditions; learn patterns for showing or hiding components based on state.

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.

Learn how to manage complex state as an object in React by safely resetting game status and count, avoiding null score, and using the spread operator to preserve previous state.

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.

Organize a components folder and build a contact index root component using useState to manage an initial array of contacts with id, name, phone, email, and is_favorite.

Create a basic UI template for a contact index using container, row, and column layouts, display favorites, and implement add, remove, and new-contact form components.

Create a favorite contact component to display and manage favorite and general contacts, pass the contact list, and refine layout across the contact pages.

Learn to filter favorite contacts from the contact list, pass them as props to a new contact component, and render each item with map, including favorite, edit, and delete controls.

Learn to render a list of contacts by filtering and mapping an array, and pass each contact as a prop to the contact component with a unique key.

Make the contact component dynamic by logging props and extracting contact.name, contact.email, and contact.phone. Render UI avatars from the image URL with string interpolation and apply padding and border radius.

Create a general contacts component that mirrors the favorite contact, displaying the same contact information where the favorite is false, and save it in a new file named general contacts.jsx.

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.

Toggle favorite status by clicking the favorite button to unfavorite or favorite a contact; show a yellow star for general contacts and a button for favorites using a dynamic class.

Cannot update props from the child; toggle the is favorite state by updating the parent, and pass the handler down the hierarchy to the grandchild.

Learn to call a parent function from a child by passing it as a prop, then invoke it in the grandchild contact component to handle a favorite click.

Learn to toggle a contact's isFavorite by mapping the list, returning the full object with the spread operator, and updating state via setContactList, illustrating React's parent-to-child data flow.

Practice implementing delete functionality by removing a contact from state using the filter method and the contact id, with immediate ui update and default data on refresh.

Learn to delete a contact by passing only the contact ID and using filter to remove it from state, wiring the handle delete contact through components.

Create an add contact component in React to build a form for name, email, and phone, display success or error messages, and include create and cancel buttons.

Learn to handle form submission in React using a traditional onSubmit handler, prevent default behavior, and extract input values from e.target to populate a list.

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.

Discover how React 19 introduces form actions that replace onsubmit, automatically handle submit, and pass form data directly to an action function, simplifying submission with any button.

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.

Pass the handle add contact function from child to grandparent, create a new contact with id and favorite fields, and append it using concat in the React bootcamp course.

Handle the add contact flow by returning status and message from the response, display a success message when status is 'success', and update the messages state while handling errors.

Validate form entries to prevent duplicate records by checking the contact list against name and phone, returning an error when a duplicate exists.

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.

binds all input fields to a single form data state to create a controlled component. updates state with a dynamic onchange handler so the UI reflects changes as you type.

Add a remove all button with btn btn danger and form control, wire an onclick event to delete all contacts, and note a bug to be fixed in later videos.

Learn to implement a remove all contacts feature in a React app by building a handleRemoveAll function that clears the contact list and wires it to an onClick button.

Debug a React app by tracing error messages to the contact index, guard against empty lists, and ensure proper ID handling when deleting or adding contacts.

Implement the cancel button to set isUpdating to true, switching to create mode, and pass isUpdating to the child to render update or create text and styles.

Implement the cancel functionality with a handle cancel update contact endpoint. Reset selected contact to undefined and is updating to false, and pass this function to the add contact component.

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.

Implement update contact logic that matches by id via endpoint, updates name, email, and phone number, and handles create versus update flow with validation and form clearing on success.

Learn best practices for naming in JavaScript within a React app by using camelCase for variables and functions, avoiding PascalCase for non-components, and checking console errors.

Create a utility function to fetch a random user from the randomuser.me API using fetch, handle errors, parse JSON, and return data for use in the app.

Create a functional add random contact button that fetches a random user via an API on click, then displays name, phone, and email details.

Format user data from a random API by validating the response, extracting the first and last name, email, and phone, and building a formatted user object for state management.

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 to update state when a new contact arrives from the API, by creating an add random contact handler, wiring it as a prop, and validating its behavior.

Create a React project named router pedia focused on routing, install packages with npm, run npm run dev to start the app, and clean the src to display hello.

Explore basic React hooks and component lifecycle using useState to manage a parent and child counter, with toggling visibility and mounting lifecycle demos.

Explore useEffect in function components: empty dependency array runs once on mount, while no array runs on every render; strict mode can cause extra renders.

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

Learn to watch props with useEffect by monitoring child and parent counters, log updates, and handle multiple dependencies, including mounting and remounting behavior, in a React component.

Explores the use href hook (useRef) to store a stable value across renders, access it with dot current, and control first-render logging using useEffect.

Use the use ref to access dom elements and create an input ref. Execute useeffect on page load to set ref.current focus so the input auto focuses on refresh.

Track renders with useRef and useEffect on rerenders, even in strict mode. Convert the input into a controlled component by binding its value to state and updating on change.

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.

Rename the React project from router pedia to hooks pedia, update the folder and project name, and run npm run dev to verify app while continuing to learn React hooks.

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.

Add bootstrap via CDN to enable bootstrap navigation and install icons. Clean up the project by deleting app.css and index.css, and verify the hello renders.

Build the app component in app.jsx with a flex column layout and a sticky footer. Wire header and multi-page content using bootstrap classes and router snippets, dark theme.

Create a layouts folder and a main layout component to display a bootstrap navbar, convert class to className, fix tags, and wire routing to render content based on navigation.

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.

Define and configure app routes with React Router Dom by creating an app router component, importing routes and route, and wiring home and contact paths at the root level.

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.

Implement programmatic navigation using the useNavigate hook from react router dom to navigate to the contact page. Trigger it on a button click with a handleContactClick function calling navigate('/contact').

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.

Use a link component on the image in the main layout to route to the home component, replacing the nav link. Center the layout by using margin y two.

Create a not found component and configure a wildcard route with React Router Dom, plus a link to the home page for 404 not found navigation.

Create a data module with six products, implement helpers to get by id, filter by category, and get all categories, and build a routable product list page at /products.

Build a product list component by importing products and mapping over them to display name, price, and category, with a view details button and pending routing.

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.

Use useParams to read the product id from the URL, ensure the route variable matches, and render the matching product or a not-found message with a back link.

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.

Create a nested product route with a reusable product layout as the parent, an index route showing all products, and child routes for electronics, clothing, and books.

Learn to render nested child routes with an outlet in the product layout, and use end on nav links to enforce matches across books, clothing, electronics with React Router DOM.

Nest a reusable product list component that filters by category using a filter type prop, maps products to display title and description, and enables routing to view details.

Learn to use the useNavigate hook from react router dom to return to the previous page by passing minus one, keeping the electronics or clothing context intact on navigation.

Explore how absolute routes ensure reliable navigation in a react application by contrasting them with relative routes, and learn to use absolute paths for tested, predictable links.

Develop protected routes by redirecting unauthenticated users to login, create an auth folder with a login component, and add admin and customer portals with routes.

Create a fake login flow by clicking admin or customer to call end point, set the authenticated flag, and store user object with email, name, and role in session storage.

Implement a fake login with an auth utility exposing isAuthenticated and currentUser, storing state in sessionStorage and providing getAuthState and setAuthState for admin and customer roles.

Add hasRole and hasAnyRole endpoints to check the current user roles and export them. Implement logout to clear the auth state and remove the session storage item demo art.

Implement logout functionality in the main layout by reading auth state, conditionally showing logout when authenticated, and navigating back home after calling the auth utility.

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.

Learn to redirect users back to their originally requested protected page after login by capturing the current location with useLocation and passing it via state in react-router-dom.

Toggle routes based on access by showing admin only to admins and customer only to customers, hiding admin from customers. Display the user's name before logout.

Implement role-based routing in a React Router DOM app using get auth state to conditionally render admin or customer views and display the current user name and role.

Discover how Redux acts as a centralized brain for React apps, providing a global store to keep state in sync across components.

Set up the React app layout by creating a src/components folder, wiring header and footer into Main.js, and implementing a sticky footer with flexbox.

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 set up a Redux store in a React app by creating a store folder, configuring the store with Redux Toolkit, and wrapping the app with a provider.

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 how to dispatch actions from a React component using useDispatch, import action creators from a counter slice, and wire increment and decrement to update state on click.

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.

Import useState and create a multiplier state initialized to ten, making the input a controlled component. Dispatch increment and decrement actions and convert input to number to prevent string concatenation.

Add a destination slice to the redux store with a destinations array including destination, days to visit, and an interesting fact, created via createSlice and integrated into the store.

Create a destination list component as a functional React component, retrieve destinations from the destination slice, map over the list to render each name with a details button.

Retrieve the destination list from state with useSelector and render destination names by mapping. Avoid spelling and case sensitivity issues in the destination store, using the index as the key.

Users click a destination button to dispatch a destination clicked action with the selected destination as payload, updating destination selected in state via Redux toolkit.

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.

Create a reset app component with a centered user interface and a warning button; clicking it resets the counter and clears the selected destination.

Implement reset functionality for destination and counter slices by dispatching reset actions to clear destination and reset count to 15, triggered via a reset button.

Configure a slice to listen to an action from another slice using extraReducers and addCase. Enable cross-slice resets of counter when destination resets by forwarding action through store.

Extract magic strings from the destination slice by importing resetDestination and replacing hard-coded values with resetDestination.toString. Preserve behavior and keep the code clean.

Create a custom reset action with Redux Toolkit's createAction, wire it to multiple slices via extra reducers, and unify reset behavior across components for cleaner state management.