Learn React In Depth (2024 Edition)

Explore how React components are the building blocks of the user interface, with header, sidebar, cards, and footer examples. Learn to create and render components using JSX.

Demonstrates how JSX blends JavaScript and HTML-like markup, enabling React to develop rich and dynamic applications, with Babel transforming JSX into JavaScript for rendering to the web.

Learn the rules of JSX, including a single root element, proper closing tags, and className usage, then apply inline styles, expressions, and conditional operators for dynamic rendering.

Learn to create your React app on your machine using Create React App or Next.js, install Node.js, set up VS Code, and run a development server with hot module replacement.

Create your first React component in App.js using JSX. Build a profile component displaying name, email, and phone, export and import it, and render it in the app.

Learn to render dynamic content in React by using expressions to insert name, email, and phone, updating instantly as you modify variables before the return.

Learn to render dynamic lists in React by mapping arrays to list items, using unique keys, and displaying structured data such as technologies and people with id, name, and profession.

Pass data from a parent to a child via props to enable one-way communication and dynamic rendering in React, demonstrated with profile and list components.

Learn how to pass JSX data as props using the children property, enabling components to render nested content between parent and child wrappers.

Explore how react events handle user interactions with on click and on submit, update the user interface, trigger navigation, menus, or API requests.

Explore how state drives interactivity in React by storing component data with the useState hook, updating the UI in response to input, filters, and actions like adding to cart.

Create a React component that uses the useState hook to manage a count and render it. Increment on click with setCount, using the previous state for reliable updates.

Master useState in depth by learning how React schedules state updates, why updates are asynchronous, and how to use the previous state in a callback to increment correctly.

Learn how rendering visualizes React components by creating a new virtual DOM from JSX and reconciling it with the prior version to update user interfaces, driven by state and props.

Explore the concept of state in React, showing how component data changes with user interactions and how useState enables automatic UI updates without manual DOM manipulation.

Declare and render a count with the useState hook, then update it via setCount on clicks, using a callback to rely on the previous state for correct increments.

Explore how use state handles multiple updates, why set count updates batch asynchronously, and how using a functional updater (previous => previous + 1) guarantees the latest state.

Explore building a real-world React project by managing state, handling form inputs, and logging submitted data to demonstrate practical form workflows.

Designing UI guides you to build a reusable form component in React, wire it into the app, apply css styling, and implement a dynamic quantity select to capture product data.

Learn how to handle form data with the useState hook in React, managing title, description, price, and quantity with onChange, event.target.value, and preventing the default form submit.

Refactor a React form to use a single state object for all inputs, and implement a dynamic handleChange that updates fields by name, simplifying form handling.

Explore hooks in React, special functions that manage state and the lifecycle in functional components, enabling reusable code, easier code generation, and migration from class components introduced in 16.8.

Explore how the use state hook manages component data and how the use effect hook handles side effects, with a focus on dependency arrays and post-render execution.

Learn how the use effect hook runs after render, controlled by a dependencies array, and its cleanup function to unsubscribe and clean up subscriptions.

Learn how React lifecycle methods translate to hooks with useEffect, covering component did mount, did update, and will unmount, plus cleanup and dependency-driven updates.

Learn React in depth presents a real-world example that fetches API data with useState and useEffect, stores it in state, renders a list, and shows a loading bar during fetch.

Fetch data from an external api using React by wiring up useEffect and fetch to call the GitHub api users endpoint, parse json, handle errors, and render a user list.

Store and display data using useState, render a list of users with avatars and logins via map, and manage loading state with conditional rendering in React.

Render a user list by displaying each user with avatar and login in a flex container with wrap and gap, styled via CSS, showing a loading bar during API fetch.

Discover how useRef accesses DOM properties and methods without causing re-renders, using the current property to persist values across renders for inputs, buttons, and other elements, improving performance.

Explore useRef in depth for React, to focus inputs, manage mutable values, and access HTML elements and JavaScript data via ref.current. Apply onClick, useEffect, and API requests for ref usage.

Learn how the useReducer hook manages complex state by dispatching actions to a reducer, producing new state copies, and leveraging a Redux-like pattern for expensive UI calculations.

Explore use reducer in depth by building a counter with forward and backward actions, dispatching typed actions, and extending with a dynamic payload for custom steps.