React JS Masterclass

Learn how to use props in React by passing data to components, accessing it inside child components, and rendering dynamic values, including using the children prop.

Learn how props pass values, objects, and functions from a parent to a child component in class-based React components, trigger prop functions with onClick, and access them inside the child.

Explore how state exists inside a React class component, update it with setState or a previous-state callback, and how functional components use useState to manage state and the UI.

Learn to create a dynamic counter in React by managing state and handling onClick events to increment count, update the state, and re-render the user interface from inside the component.

Learn how arrow functions and binding handle this in React class components, fixing undefined this errors by binding methods in the constructor and contrasting with normal functions.

Explore conditional rendering in React by showing how UI changes based on login state, using if statements, the conditional operator, and related approaches to display login or logout UI.

Master conditional rendering in React by toggling login and logout states, using three methods—if statements, a single return with conditional logic, and a third approach—to render login or logout button.

Learn to render arrays with map, produce list items, and assign unique keys using the items' database identities from the API instead of using the index.

Use the map function to transform each array item, such as multiplying by five, and render the results as a list in React; map is a JavaScript higher-order function.

Explore how filter function works in a React JS Masterclass, using conditions and index to remove items from an array, and compare it with map as a higher-order function.

Explore event handling in React by using onClick events, passing function references without invoking them during render, and leveraging inline handlers to trigger dynamic content on user interaction.

Learn to output dynamic content by handling input events and using state in React, updating a paragraph as you type and rendering typed values in real time.

Explore how the spread operator clones and merges objects in React to maintain immutability, override properties, and extend data without mutating the originals.

Learn object destructuring in React to extract count and countTo from props, simplifying props management and improving readability in large-scale applications.

Explore how to install and use the React DevTools browser extension in Chrome and Firefox, inspect components and props, and profile component performance to benchmark rendering.

Explore the class component life cycle in React, covering mounting, updating, and unmounting, with focus on componentDidMount for API calls and unsubscribing to prevent memory leaks.

Explore functional components by building a counter, importing React, and exporting the component. Learn to convert a normal function to a functional component and pass props with destructuring.

Learn how to manage local state with the useState hook in functional components, initialize counts, handle increments, and use multiple state values within a single component.

Explore how to implement lifecycle in a functional component with useEffect, including mount, update, unmount, and controlling runs with a dependency array.

Learn inline styling in React by creating a style object and using the style attribute to set background and padding. See how to apply conditional styling based on values.

Learn how to import CSS files into a React component, apply class names, and use dynamic classes for conditional styling while avoiding global style conflicts.

Learn to build dynamic class names in React with template literals and a counter that toggles text color based on whether it is divisible by two.

Learn how to import images and display them in a React app using the import statement, a direct image source, and optional inline styling for presentation.

Learn how to import svgs in React and the difference between importing as assets versus components. Resize and use svgs inside a component for flexible styling.

Learn how the useRef hook manages DOM references and input values without triggering re-renders, using refs to log or submit input and decide when to use ref instead of state.

Learn how to fetch data from an API in React using axios, including setup with npm, making GET requests, handling loading and errors, and rendering user emails.

Learn to set up React routing with BrowserRouter, define routes for home, about, and contact, and navigate using Link and exact paths.

Learn the render props pattern in React by building a reusable requestor component that fetches data with axios, passes props, and renders users and posts while minimizing API calls.