React v16.2.0: Improved Support for Fragments

React 16.2 is here:  - the biggest addition is support for

  • To make the authoring experience as convenient as possible, we’re adding syntactical support for fragments to JSX: – – In React, this desugars to a element, as in the example from the previous section.
  • Support for fragment syntax in JSX will vary depending on the tools you use to build your app.
  • Support for JSX fragments is available in Babel v7.0.0-beta.31 and above!
  • Upgrade to the latest TypeScript with the command: – – Flow support for JSX fragments is available starting in version 0.59!
  • A big thanks to everyone who filed issues, contributed to syntax discussions, reviewed pull requests, added support for JSX fragments in third party libraries, and more!

React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature fragments:

React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. We call this feature fragments:

Fragments look like empty JSX tags. They let you group a list of children without adding extra nodes to the DOM:

render ( ) { return ( < > < / > ) ; }

This exciting new feature is made possible by additions to both React and JSX.

A common pattern is for a component to return a list of children. Take this example HTML:

Prior to version 16, the only way to achieve this in React was by wrapping the children in an extra element, usually a

div

or

span

render ( ) { return ( // Extraneous div element 🙁

Some text.

A heading

More text.

Another heading

Even more text.
) ; }

method. Instead of wrapping the children in a DOM element, you can put them into an array:

render ( ) { return [ “Some text.” ,

A heading

, “More text.” ,

Another heading

, “Even more text.” ] ; }

However, this has some confusing differences from normal JSX:

component that can…

React v16.2.0: Improved Support for Fragments