liveBookmanning.com

What you will learn in React in Depth

by Morten Barklund

Read it on liveBook Get the book at manning.com

Chapter by chapter

Concepts explained in this book

• TypeScriptTypeScript is a statically typed programming language that extends JavaScript with type syntax and compiles to JavaScript.
• memoizationMemoization is a technique that caches a computation or component result so it can be reused when relevant inputs have not changed.
• type argumentA type argument is an argument supplied to a parameterized construct to specify a type or constrain the kinds of values it accepts.
• testSoftware testing is the category of practices and tools for evaluating software behavior and correctness.
• technology stackA technology stack is the set of programming languages, frameworks, libraries, tools, and infrastructure used to build and operate an application.
• React contextReact context is a mechanism for making a value available to components in a descendant component tree without passing it explicitly through every intermediate component.
• CSSCSS (Cascading Style Sheets) is a stylesheet language for specifying the presentation and layout of documents such as HTML pages.
• provider patternThe Provider pattern is a component-structuring pattern in which a provider supplies shared values to descendant components, commonly through React context.
• dependency arrayA dependency array is the optional second argument to a React effect or memoization hook that determines when its computation is rerun.
• data layerThe data layer is the application-stack layer responsible for data management and state flow.
• PrettierPrettier is an opinionated code formatter that automatically rewrites source code according to configured formatting rules.
• frontend developmentThe development of the client-side interface and behavior of software applications.
• useCallbackuseCallback is a React hook that memoizes a function reference between renders according to a dependency array.
• useMemouseMemo is a React hook that caches the result of a calculation between renders until its dependencies change.
• VitestVitest is a JavaScript testing framework with built-in support for test execution, assertions, mocking, and related testing features.
• zustandzustand is a small JavaScript state-management library based on centralized stores and hooks.
• componentA component is a self-contained software building block that provides a specific part of a user interface or application behavior.
• type inferenceType inference is the compiler's determination of a type from available values, expressions, or contextual constraints without an explicit type annotation.
• UI libraryA UI library is a software library that provides reusable user-interface components and related styling or interaction behavior.
• custom hookA custom hook is a JavaScript function that follows React hook conventions to encapsulate reusable stateful or effectful component logic.
• stateState is the data maintained by a component that represents its current condition and can cause updated rendering when changed.
• frameworkA software framework written for or centered on JavaScript that structures frontend application development.
• React Developer ToolsReact Developer Tools is a browser extension and standalone debugging application for inspecting React component trees and application behavior.
• server-side renderingServer-side rendering is the process of producing application interface output on a server before sending it to the client.
• useStateuseState is a React hook that adds a state value and its updater function to a function component.
• finite-state machineA state machine is a computational model that represents behavior as discrete states and transitions triggered by events or conditions.
• hydrationHydration is the client-side process of attaching interactive behavior to server-rendered interface markup while verifying that the markup matches.
• useEffectuseEffect is a React hook that synchronizes a component with external systems by running an effect after rendering when its dependencies change.
• routingA route is a configured application endpoint or location that maps incoming requests to a handler or interface output.
• TanStack QueryTanStack Query is a library for asynchronous server-state management, remote data fetching, caching, synchronization, and related lifecycle handling.
• propTypesA prop type is a runtime specification that validates the expected type or structure of a React component property.
• formattingA formatting rule is a specification for the syntactic style or layout that source files must follow.
• CSS ModulesCSS Modules is a CSS scoping technique that locally transforms class names into unique names during build processing.
• genericsA generic function is a function declared with type parameters whose parameter and return types can vary for each invocation.
• react ecosystemThe React ecosystem is the surrounding collection of libraries, tools, technologies, practices, and community resources built around React development.
• accessibilityThe property of software being operable and understandable by people with diverse abilities and assistive technologies.
• styled-componentsstyled-components is a JavaScript and React library for defining component-scoped CSS through styled components.
• CSS-in-JSCSS-in-JS is a technique for defining, composing, or generating CSS styles from JavaScript code.
• debuggingDebugging is the process of investigating a running or non-running program to locate and understand defects or unexpected behavior.
• complexitySoftware complexity is the degree to which a software system has many interacting elements, conditions, and behaviors that make it harder to understand and maintain.
• cachingA cache is a stored copy of retrieved or computed data that can be returned without obtaining or calculating it again.
• generic React componentA generic React component is a React component whose properties or behavior are parameterized by types that can be specified when the component is used.
• ESLintESLint is a static analysis tool for identifying problematic patterns and enforcing coding rules in JavaScript code.
• memoA memoized component is a React component that can skip rendering when its input properties have not changed by identity.
• useReduceruseReducer is a React hook that manages component state through a reducer function and dispatched actions.
• useMutationuseMutation is a TanStack Query hook that performs a server-side mutation and exposes its mutation state and operations.
• composite design patternThe Composite pattern is a structural design pattern that composes individual objects into hierarchical structures while allowing individual objects and compositions to be treated uniformly.
• RemixRemix is a full-stack web framework for React applications with nested routing, server rendering, and data-loading conventions.
• use-context-selectoruseContextSelector is a hook that reads a selected portion of a React context value and limits updates to components whose selected value changes.
• developer experienceDeveloper experience is the overall quality and efficiency of developers' interactions with a software project and its development processes.
• static typingA static type is a type assigned and checked during program analysis before the code executes.
• forwardRefforwardRef is a React API function that creates a component capable of receiving a ref and forwarding it to a child element.
• style attributeAn inline style is a CSS declaration assigned directly to an individual HTML element through its style property.
• CSS classA CSS class is a named selector target that associates one or more style rules with elements carrying that class name.
• Redux ToolkitRedux Toolkit is the officially recommended package for simplifying Redux state management through standardized store configuration, reducers, and middleware.
• configurationA configuration is a set of settings that specifies how a software tool or rule behaves.
• styleStyling is the specification and application of visual presentation rules for an interface.
• React renderingReact rendering is the process by which React evaluates components and produces their user-interface output.
• default valueA default property value is the value assigned to a component property when the caller does not provide one.
• optional propAn optional property is an object or component property that may be omitted from a value of its type.
• user-eventuser-event is a Testing Library library that simulates realistic user interactions in automated tests.
• callbackA callback function is a function supplied to another function or API to be invoked as part of that operation.
• cache invalidationQuery invalidation marks cached query results as no longer valid so they can be refreshed or otherwise reconsidered.
• ReduxRedux is a predictable state container that manages application state through dispatched actions and pure reducers.
• context objectMachine context is the state-machine data container that holds information shared across the overall flow and manipulated during transitions.
• state transitionA state transition is a state machine operation that changes the machine from one state to another in response to an event or condition.
• reduction operationA reducer is a function that computes a new state from the current state and an action describing a requested change.
• XStateXState is a JavaScript library for modeling application logic with state machines and statecharts.
• cookieA web cookie is a small piece of data that a website stores in a browser and can send with subsequent requests to a server.
• specificityCSS specificity is the priority calculation that determines which applicable CSS rule overrides another when their declarations conflict.
• pure functionA pure function produces the same return value for the same inputs and has no dependence on external state, randomness, or side effects.
• Remix actionA Remix action is a server-side function associated with a route that handles non-GET mutations submitted to that route.
• mockingMocking is a testing technique that replaces a dependency or functionality with a controlled substitute having behavior specified by the test.
• components inspectorThe React Developer Tools components inspector is an inspection interface for examining React components, their properties, state, and hierarchy.
• namespace collisionA namespace collision occurs when distinct software entities use the same identifier within a shared naming scope, causing ambiguity or conflict.
• foundation layerThe application-stack layer containing foundational development technologies such as build tools, bundlers, and TypeScript.
• union typeA discriminated union is a TypeScript union type whose alternatives are distinguished by a shared property with distinct literal values.
• state managementThe organization, updating, and synchronization of data representing an application's current state.
• lintingLinting is the automated analysis of source code to identify coding errors, undesirable practices, and stylistic violations.
• optimistic updateAn optimistic update is a technique that changes locally cached data before a server mutation is confirmed, then reconciles it with the server result.
• contractAn API is a defined interface through which software applications exchange requests and responses with another application or service.
• web formA web form is a browser interface that groups controls for collecting structured user input and submitting it to an application or server.
• Next.jsA React framework for building full-stack web applications with features including routing, server rendering, and build tooling.
• cookies-nextcookies-next is a utility library for reading and writing cookies in Next.js applications on the client and server.
• encrypted cookieAn encrypted cookie is a web cookie whose contents are protected by encryption so that unauthorized readers cannot interpret its data.
• server-only cookieA server-only cookie is a web cookie that can be read and set only by server-side application code.
• type safetyStrong typing is a type-system property in which operations enforce compatibility between values and their types rather than freely coercing incompatible values.
• PropsWithChildrenPropsWithChildren is a React TypeScript utility type that adds a typed children property to another props type.
• ReactNodeReact's exported type representing values that React can render as children, including text, numbers, elements, arrays, and empty values.
• React Testing LibraryReact Testing Library is a JavaScript library for testing React components through their user-visible behavior.
• performance optimizationPerformance optimization is the improvement of software execution efficiency, such as by reducing unnecessary computation or rendering.
• arrange act assert patternArrange-Act-Assert is a test-organization pattern that separates setup, behavior execution, and result verification.
• type informationType information is metadata specifying the kinds of values that variables, parameters, expressions, or return values may contain.
• propA React prop is an input value passed to a component to configure its rendering or behavior.
• accessible nameAn accessible name is the programmatically determined text label by which an interface element is identified to assistive technologies.
• aria semanticsAn ARIA role is a semantic classification that describes how an element should be understood and interacted with by users and assistive technologies.
• getByRolegetByRole is a React Testing Library query function that finds an element by its semantic role and optionally its accessible name.
• WAI-ARIAWAI-ARIA is a W3C specification defining semantics, roles, states, and properties that make web content accessible to assistive technologies.
• component hierarchyA component hierarchy is a tree-like organization of components in parent and child relationships.
• bundlingThe process of transforming source files and dependencies into optimized application bundles.
• resource cleanupA cleanup function is a function returned by a React effect to undo or release resources created by that effect.
• reference equalityReferential equality is equality determined by whether two values reference the same object or function rather than merely having equivalent contents.
• recordRecord is a built-in TypeScript utility type that constructs an object type with a specified set of property keys and a uniform property value type.
• HTMLHTML is the standard markup language for structuring documents and controls displayed by web browsers.
• dead-code eliminationDead-code elimination is a technique that removes code or styles that are unreachable or unused from delivered software.
• remote dataRemote data is application data retrieved from an external service or system rather than stored solely within the application.
• authentication and authorizationAuthorization is the process of determining which authenticated users may access particular application resources or perform particular actions.
• refA React ref is a special property that provides access to a rendered DOM node or component instance rather than being handled as an ordinary component prop.
• UML state diagramA state diagram is a visual representation of states, transitions, and associated actions in a state machine.
• required keyA required prop is a component input that must be supplied for the component to function correctly.
• data providerA data provider is a wrapper component that exposes application data or state-management capabilities to descendant components.
• summary patternThe Summary pattern is a component-design pattern for organizing a component around a concise summary of its relevant content or behavior.
• @xstate/react@xstate/react is a library that provides React bindings for XState state machines and statecharts.
• user-defined typeA custom type is a programmer-defined type specification that restricts or describes the values permitted in a program.
• rerenderrerender is a React Testing Library function that updates an existing rendered component with new props while preserving the mounted instance.
• component re-renderingComponent re-rendering is the process of rendering a React component again after its relevant inputs or state change.
• colocationA software-organization technique that places related code, such as styles and the elements they affect, next to each other.
• composite componentA composite component is a React component pattern that organizes a complex interface as cooperating subcomponents with a shared structure or behavior.
• pseudo-classA CSS pseudo-class is a selector construct that targets an element according to a special state or condition rather than only its document identity.
• ImmerImmer is a JavaScript library that lets code express immutable state updates through drafts that can be modified directly.
• childThe special React prop containing the values nested between a component's opening and closing JSX tags.
• componentpropsComponentProps is a React-provided generic type that derives the property type accepted by a specified component or intrinsic element.
• componentpropswithoutrefComponentPropsWithoutRef is a React-provided generic type that derives a component's properties while excluding its ref property.
• property constraintA property constraint is a specification of the valid types or ranges for properties passed to a component.
• query keyA query key is an array of values that uniquely identifies a TanStack Query query and its parameters.
• useQueryuseQuery is a TanStack Query hook that declares and retrieves asynchronously fetched data for a component.
• context valueA context value is the data supplied by a React context provider for access by consuming components.
• equalityThe strict equality operator (===) compares two JavaScript values without type conversion and returns true only when their types and equality conditions match.
• React portalA React portal is a mechanism for rendering React children into a DOM node outside their parent component's DOM hierarchy.
• toast componentA toast component is a user-interface component that displays a transient, potentially dismissible notification about an event or status in an application.
• stable valueA stable value is a value whose identity remains unchanged across renders of a component.
• StorybookStorybook is a development environment for building, testing, and documenting UI components in isolation.
• statefulnessA stateful component is a React component that maintains state and can trigger updates when that state changes.

These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.