React.Fragment
React.Fragment is a built-in React component that groups multiple children without adding a corresponding DOM element.
Build a Frontend Web Framework (From Scratch)
A virtual DOM node that groups multiple children without adding a parent element to the rendered document.
- How it is used
- Groups multiple component-generated children without adding a wrapper element to the DOM.
- How deep it goes
- Works through child mounting and reconciliation flattening rather than treating the fragment as a DOM element.
- Examples
- Uses a to-do application component that groups a heading, a form component, and a list component.
- What you can do after
- Build it from scratch with hFragment(), then mount its children directly under a shared DOM parent.
Read how Build a Frontend Web Framework (From Scratch) explains React.Fragment →
React Quickly, Second Edition
React.Fragment is a built-in React component that groups multiple children without producing a corresponding DOM element or HTML output.
- How it is used
- Groups sibling JSX elements when a root or component return requires one element without adding a DOM wrapper.
- How deep it goes
- Defines explicit and shorthand syntax, then applies keyed Fragments to mapped definition-list entries.
- Examples
- Demonstrates heading-and-link siblings and dog-breed definition lists rendered with keyed Fragments.
- What you can do after
- Apply it via React and JSX to group siblings without wrapper markup and render mapped pairs with stable keys.
Read how React Quickly, Second Edition explains React.Fragment →
Related concepts
- Document Object Modelcontrasts with · The Document Object Model (DOM) is a standard programming interface that represents a document as a structured tree of objects and provides ways to access and modify its content and structure.
- DOM elementcontrasts with · A DOM element is an object representing an element node in a document tree, with properties such as its type, attributes, content, and children.
- virtual DOMkind of · A virtual DOM is an in-memory user-interface tree that frameworks compare or process to determine updates to the rendered DOM.
- componentkind of · A software component is a modular part of a larger system that provides related functionality and interacts with other parts through defined boundaries or interfaces.
- arraykind of · An array is an indexed, ordered collection of elements arranged in one or more dimensions, with elements accessed by position.
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.