jsx fragment babel plugin
npm i -S babel-plugin-jsx-fragment
To use include jsx-fragment
in your plugins array in your .babelrc
or config object. Works with React 0.13
+ .
By default the fragment tag name is <frag>
but you can configure it to whatever you want with the tagName
option.
The Problem
JSX gets ugly when using conditionals that return more than one jsx element
<div> true && <span/> <div/> </div>
You need to use commas (gross) and an array literal (yuck). jsx-fragment
allows for a simple syntax to hide the ugliness, based on the discussion here. Just use the pseudo element <frag>
to wrap arrays of Elements.
<div> condition && <frag> <span/> <div/> </frag></div>
the <frag>
element will be compiled away into the following.
React;