liveBookmanning.com

What you will learn in React Quickly, Second Edition

by Azat Mardan,Morten Barklund

Read it on liveBook Get the book at manning.com

Chapter by chapter

Concepts explained in this book

• componentA functional component is a React component defined as a JavaScript function that receives properties as its argument and returns user-interface output.
• stateGlobal state is application data maintained at a scope accessible to multiple components or parts of an application.
• handlerEvent handling is the process of responding to events generated by user interactions or changes in a web document.
• ReactReact is a JavaScript library for building user interfaces from reusable components and rendering dynamic data.
• useStateuseState is a React Hook function that initializes component state and returns its current value together with a function for updating it.
• JSXJSX is a JavaScript syntax extension that expresses React elements with HTML-like notation and is compiled into JavaScript.
• propA React property is an immutable value assigned by a parent to a child element or component and exposed to the child through its props.
• class componentA class-based component is a React component defined as a JavaScript class with rendering and lifecycle behavior.
• useEffectuseEffect is a React Hook for synchronizing a component with external systems after rendering and browser painting.
• custom hookA custom hook is a developer-defined function that composes React Hooks to provide reusable component logic.
• component re-renderingComponent re-rendering is the repeated execution of a component's rendering logic to produce updated user-interface output.
• synthetic eventA synthetic event is a framework-provided event object that describes an occurrence and exposes related properties to an event handler.
• reduction operationA reducer is a function that calculates a next state from a current state and an action or event.
• eventA change event is a browser event dispatched when the value of a form control changes.
• resource cleanupA cleanup function is a function associated with an effect that releases resources or reverses external interactions when the effect is no longer active.
• statefulnessA stateful application is an application whose behavior or user-interface output depends on data that can change over time.
• React hookReact Hooks are functions that let functional components access React features such as state and lifecycle-related behavior.
• event propagationEvent propagation is the movement of an event through a document hierarchy from an origin toward ancestors and back through propagation phases.
• provider patternThe provider pattern is a design pattern in which a provider makes a value or service available to components in a descendant hierarchy.
• useReduceruseReducer is a React Hook function that manages component state by applying a reducer to the current state and an action.
• React contextReact Context is a built-in React mechanism for making values available to descendant components without passing them explicitly through every intermediate component.
• virtual DOMA virtual DOM is an in-memory representation of a web document’s UI tree that a rendering library compares before applying changes to the browser DOM.
• uncontrolled formAn uncontrolled input component is a form input whose current value is managed by the browser rather than controlled by React state or properties.
• buttonA button is an interactive user-interface control that can be activated to initiate an action or select an option.
• text boxA text field is a form control that accepts character input from a user.
• declarative programmingA programming style that specifies the desired result through expressions or descriptions rather than prescribing each execution step.
• modularityA software architecture that organizes functionality into reusable, loosely coupled components with separated responsibilities.
• controlled formA controlled form is a form whose input values are maintained and updated by React state.
• destructuring assignmentObject destructuring is a JavaScript syntax feature that extracts properties from an object into named bindings.
• Create React Appcreate-react-app is a command-line utility that scaffolds a new React application with its project structure and dependencies.
• server-side renderingServer-side rendering is the generation of user-interface markup on a server before it is delivered to a client.
• initializerA constructor is a class method that runs when an instance is created and initializes its state or other instance data.
• React elementA React element is an immutable description of a user-interface element, including its type, properties, and children.
• interdependent stateInterdependent state is state composed of multiple values whose meanings or valid values depend on one another.
• logical AND operatorThe logical AND operator evaluates operands from left to right and returns the first falsy operand or the final operand.
• truthinessTruthiness is the JavaScript behavior by which a value is treated as true or false in a Boolean context.
• valueAsNumbervalueAsNumber is an HTML input property that returns the input's value converted to a number.
• check boxA checkbox is a form control that represents an independently selectable true-or-false option.
• useRefuseRef is a React Hook that returns a mutable reference object whose value persists across renders without causing a re-render when changed.
• DOM diffingA technique that compares an existing and a new interface representation to determine the minimal view updates required.
• useContextuseContext is a React Hook that reads a context value or returns the context's default value when no provider is available.
• web formAn HTML form is a group of web controls and submission behavior defined by the HTML form element.
• React.createElementReact.createElement is a React API function that creates an immutable description of an element from its type, properties, and children.
• scaffoldA scaffold is an initial project structure that provides the starting point for building an application.
• useMemouseMemo is a React Hook that memoizes a calculated value and reuses it across renders until its dependencies change.
• conditional logicAn if/else statement conditionally executes one of two statement branches based on a Boolean expression.
• createContextcreateContext is a React API function that creates a context object for supplying and reading a shared value.
• pure functionA pure function is a function whose result depends only on its arguments and that has no observable side effects.
• checked propertyThe checked property is a form-control property that reports whether a checkbox input is selected.
• onChangeonChange is a React event-handler property that specifies a callback for changes to an input's value or checked state.
• event bubblingEvent bubbling is the propagation stage in which an event travels from its originating target toward outer targets.
• form dataForm data is the information entered or otherwise held while a user interacts with form fields.
• form submissionForm submission is the browser process of sending the values of an HTML form for processing and potentially navigating or reloading the page.
• dropdownA select box is an HTML control that lets a user choose one or more options from a list.
• reference equalityReferential equality is comparison based on whether two references identify the same object rather than whether their contents are equivalent.
• branchBranching is the selection of different program paths or outputs according to conditions.
• early returnAn early return exits a function before its later statements execute when a condition makes further processing unnecessary.
• optional renderingOptional rendering conditionally includes an interface element when a predicate is satisfied and produces no element otherwise.
• default actionA default action is the browser behavior normally performed in response to an event when that behavior is not canceled.
• unmountingUnmounting is the lifecycle stage in which a React component is removed from the rendered interface.
• default valueA default property value is a value assigned when an object property is absent or unspecified during destructuring.
• mountMounting is the lifecycle phase in which a component is created and its initial rendered representation is inserted into the user interface.
• calendar inputA calendar input is an HTML input control for entering a date or time-related value.
• number inputA number input is an HTML input control for entering a numeric value.
• radio buttonA radio button is an HTML input control representing one mutually exclusive choice within a group.
• dependency arrayA dependency array is an array passed to a React effect Hook that specifies values whose changes determine when the effect runs again.
• React Developer ToolsReact Developer Tools is a browser developer extension for inspecting React component trees, props, state, and rendering behavior.
• state update logicA state update function is a function passed to a state setter that receives the current state and returns the next state value.
• addEventListeneraddEventListener is a browser API method that registers a function to be invoked for a specified event on an event target.
• timerA timer is a runtime mechanism that schedules or repeats execution after a time interval.
• class methodA class method is a function defined as part of a class that can access the class or instance context in which it is invoked.
• preventDefaultpreventDefault() is an Event method that cancels an event's default action when the event is cancelable.
• component hierarchyA component hierarchy is a tree-structured organization of components connected through parent–child containment, rendering, or delegation relationships.
• context valueA context value is the data stored in React Context and made available to components that consume that context.
• static site generatorA static site generator produces deployable website files ahead of request time rather than rendering each page dynamically.
• UI libraryA component library is a software library that provides reusable user-interface components.
• single-page applicationA single-page application is a web application that dynamically updates its interface in the browser without full-page navigation for most interactions.
• useLayoutEffectuseLayoutEffect is a React Hook that runs an effect synchronously after a component renders into the DOM but before the browser paints the update.
• spread operatorThe spread operator is a JavaScript syntax feature that expands the properties of an object or elements of an iterable into another expression.
• React keyA key property is a special React property that identifies an element among its siblings so React can track and reuse elements during list rendering.
• immutable collectionData whose existing structures are not modified, with changes represented by creating new structures.
• event capturingThe capture phase is the stage in event propagation during which an event travels from an outer target toward its originating target.
• separation of concernsSeparation of concerns is a design principle that isolates distinct responsibilities so each part of a system handles a focused concern.
• React.FragmentReact.Fragment is a built-in React component that groups multiple children without producing a corresponding DOM element or HTML output.
• drag and dropDrag and drop is an interaction technique in which a user moves a pointer-selected item to a destination and releases it there.
• file inputA file input is a form control that lets a user select files from the local device for submission or processing.
• rules of hooksThe Rules of Hooks are React usage constraints requiring hooks to be called unconditionally, in the same order, directly from a component or custom hook body.
• lifecycle methodA lifecycle method is a class-based component method that runs at a particular stage or event in the component lifecycle.
• React Context ConsumerA React Context Consumer is a component that reads a context value and provides it to a child function for rendering.
• templateA template is a declarative document or markup structure containing placeholders or directives for generating user-interface output.
• onClickonClick is a React event-handler property that specifies a callback for click events on an element or component.
• side effectA side effect is an observable change or interaction caused by evaluating code beyond returning a value.
• useDeferredValueuseDeferredValue is a React Hook that returns a deferred version of a value so updates depending on it can be rendered at lower priority.
• useTransitionuseTransition is a React Hook that marks state updates as non-urgent transitions so more urgent updates can be processed first.
• ReactDOMReactDOM is the React package that provides browser DOM integration, including mounting and rendering React content into DOM nodes.
• renderingA render method is a component method that returns the element tree representing the component's user-interface output.
• submit handlerA submit handler is a function associated with a form that runs when the form is submitted.
• React rootReactDOM.createRoot is a ReactDOM API that creates a root for rendering React content into a browser DOM container.
• redux actionAn action is a description of an event or requested state transition that a reducer processes.
• event targetAn event target is the DOM node on which a browser event occurred or to which it was dispatched.
• type propertyA type property is an event-object property containing the type of event that occurred.
• event handler generatorAn event handler generator is a function that returns an event handler when invoked with configuration or event-specific arguments.
• test fixtureA test fixture is prepared data, state, resources, or setup and cleanup logic that establishes controlled conditions for one or more tests.
• dom event handlerA DOM event handler is a callback associated with a DOM node that receives a browser-native event when the specified event occurs.
• nativeEvent propertyThe nativeEvent property provides access from a React synthetic event to the underlying browser-native event object.
• react event handlerA React event handler is a callback registered through React that React invokes when a specified event occurs for a React-managed node.
• synthetic event systemA synthetic event system is an event-dispatching layer that presents normalized event objects while coordinating event handling independently of individual DOM listeners.
• context compositionContext composition is the arrangement of context providers and consumers so that descendant components receive values from the appropriate provider.
• nested contextA nested context is a React Context arrangement in which one context provider is placed within another provider or provider subtree.
• transpilationA transpiler is a program that converts source code from one programming language or syntax level into another, typically within the same broad programming domain.
• attribute syntaxA markup-like syntax that assigns values to attributes or properties inside an element tag.
• Custom ElementsA custom element in this React context is an instance of a user-defined component that can be composed into an interface.
• render propsRender props is a React pattern in which a component receives a function prop that produces part of its rendered output.
• bubble phaseThe bubble phase is the event-dispatch stage in which an event travels from its target element upward through its ancestors toward the window.
• target phaseThe target phase is the event-dispatch stage in which an event is delivered to its target element.
• local functionA local function is a function defined within another function and accessible within that enclosing function's lexical scope.
• current propertyThe current property is the mutable property on a useRef return object that stores its current referenced or retained value.
• dom referenceA DOM reference is a program-held reference to an actual DOM element rendered in a document.

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.