An In-depth Introduction to React

Style a React song list by importing index.css, resetting defaults, and using variables and classes. Render with createElement, add left move and right edit/delete actions, and note JSX is coming.

Style the list by importing a css file and applying classes to a songs array rendered with React createElement. Add left move buttons and right delete and edit actions.

Learn to break the UI into components like header and list, use functions as components, and organize with App, preparing for JSX and libraries like MUI and Ant Design.

Learn how React uses the useState hook to manage the songs state, implement deleteSong with a setter that filters the deleted song, and embrace state immutability.

Explore how a React app builds a virtual DOM from components, renders to real DOM, updates state with setSongs, and re-renders with diffing to apply minimal changes, noting keys.

Explore how React detects state changes with useState and the setter functions, like setSongs, and why you must replace state with new objects or arrays instead of mutating them.

Explore how React batches state updates by queuing changes and rendering after the queue clears, and why using a setter with a callback matters when updates depend on current state.

Lift the songs state to a common ancestor to share data between the list and search. Pass songs, onSearch, and onDelete callbacks as props and implement a case-insensitive search.

Learn prop drilling and resolve it with component composition by moving Search component into App and rendering it as Header's child, using children prop and SearchCount with filteredCount and totalCount.

Install node.js and npm, then install vite as a development dependency and bundle with vite build. Preview the production bundle with vite preview.

Extract components into separate files, organize code with a src directory and components folder, export and import each piece, and bundle for performance with a Vite dev server.

move react and reactdom from the cdn into the project with npm, import them in index.js and components, and configure vite to use splitVendorChunkPlugin for vendor bundling.

See how JSX shortens React code by replacing React.createElement with HTML-like syntax, including tags, attributes, and expressions. Understand bundlers transform JSX to plain JavaScript and that browsers require .jsx extensions.

Refactor React components to JSX, rename files to JSX, and ensure Vite processes them; map songs to list items and replace unicode icons with SVG icons, addressing keys.

Refactor the app using JSX for custom components like Header, Search, SearchCount, and List, explaining props, children, tags, and the uppercase component-name rule to avoid unrecognized tags and key warnings.

Split styles into component css files by moving Header.css and List.css from index.css and importing them in Header.jsx and List.jsx, enabling bundlers like Vite to bundle CSS with the app.

Learn to move list items by implementing moveSong and passing onMove as a prop to List, locate the item with findIndex, swap for up or down, and disable out-of-bounds moves.

Enable inline editing of a song title by toggling between a div and input with an edit button, using an activeSong state and a ternary expression to render.

Discover how editing elements work by changing activeSong to an array called activeSongs, use some() to detect edits, and update onChange and onClick for multiple saves.

Learn how to fix React list warnings by assigning stable, unique keys to each item, using song IDs to ensure correct re-renders and efficient virtual DOM updates.

Use React fragments to group adjacent elements without adding extra nodes, solving key warnings in App.jsx by returning multiple elements with a Fragment or the JSX shorthand <>.

Learn how to use the useEffect hook to fetch data from a server, manage loading state, and handle errors while building a simple Node API server alongside a React app.

Implement server support for adding a song via POST /songs and build a React SongAdd form that enables submission when input has text and shows a message area for errors.

Learn to implement controlled versus uncontrolled fields in a React app, manage server responses, show a loader, and add new songs with proper state and error handling.

Learn how to cancel ongoing fetch requests in React by using an AbortController with useRef to persist the controller across re-renders, ensuring a fresh controller per request.

Learn how useEffect manages the component lifecycle, runs effects on mount and updates, and uses a cleanup function to cancel fetch requests on unmount.

Learn to access the actual DOM in React using ref and useRef to focus an input and select text on error, with useEffect ensuring proper cleanup on unmount.

Highlight newly added songs with a 1.5 second color burst and the highlight class, leveraging highlightedSongs to coordinate multiple simultaneous animations.

Add server routes for deleting and editing songs, then refactor client logic into a useFetch custom hook that manages request status, timing, and cancellation for fetch requests.

Learn to build a flexible useMultiFetch hook for multiple parallel requests with per-request status and abort controllers, and wrap useFetch for single requests.

Manage server-side delete and edit with a multi fetch hook, tracking per-request status to update the user interface; discuss how many props to use and treat props as user-interface configuration.

Explore dynamic refs in a react list by enabling in-place song editing, adding a cancel button, focusing inputs on edit, and using processStatus function to handle delete and edit statuses.

Learn how to synchronize spinner animations with useLayoutEffect by aligning currentTime across elements, and understand why useLayoutEffect avoids flicker, using DOM measurements like getBoundingClientRect for accurate tooltip placement.

React strict mode runs components and effects twice in development to reveal unintended side effects, such as fetch aborts, guiding fixes via proper cleanup before production.

Explore advanced topics like external state management with Redux or Recoil, server side rendering with hydration, and Suspense to optimize data fetching and performance in React apps.

Sort songs on the client by adding a button in the SearchCount component and triggering a list sort when clicked, guided by progressively hinted exercises and repository references.

Explore implementing server communication for moving a song up or down with a patch request to the move endpoint, addressing optimistic updates and synchronizing state between the client and server.

Build a state atom with get, set, subscribe, unsubscribe, and observer pattern to track fetch activity, and connect it to a React hook that shows a spinner during in-flight requests.