On the right side, we’ve got the content that we’d like to show on the screen - in Winds, this is something like an RSS feed or article header, paired with an article list or article contents.In the lower left, we’ve got our “sub-navigation” - this can respond to a couple changes in global and local state, like “active” states, tabs, or collapsing navigation.
In the upper left, we’ve got our brand / top-level navigation bits.
That’s it - if you ever find yourself in a situation where a wrapper is screwing up the layout of your React components, use a React Fragment. Whenever you need to get rid of a wrapper. There’s also an alternate, more concise syntax for using React Fragments:ĭepending on your tooling, linters, build pipeline, etc, this might not work for you - the release notes say that wider support is on the way, but I’ve noticed create-react-app doesn’t support it yet. This will render those paragraph elements as an array, without any kind of wrapper. Here’s the correct way to use a React Fragment:Ĭheck this out - we write this just like we would the -wrapper method, but it’ll behave functionally equivalent to the array-render method, just with some nice JSX syntax. That doesn’t make for a good developer experience!” So, in v16.2.0, they released support for React Fragments. See, here’s the thing - Dan Abramov and the super duper smart folks on the React team looked at this and said: “Okay, so you can render an array of elements in two different ways - either by introducing an extra into the DOM, or by using some clunky non-JSX syntax. This feature got introduced with React v16.0.0.) (Remember how the JSX transpiler is just turning the and tags into React.createElement() calls? In this case, the transpiler is just putting together an array of those calls and affixing them directly to the parent element as children, as opposed to an array of uncontained elements that it can’t find a parent for. If we return an array of elements, then React will transpile and render this just fine, _without a wrapper MARKDOWN_HASHdc6dce4a544fdca2df29d5ac0ea9906bMARKDOWN HASH. But it turns out, there’s one more way to render this group of content on the page inside of a single React Component - by having the render method return an array of nodes. So, what do we do? The same thing that we do every time we need to wrap a couple elements together, Pinky - wrap it in a ! Just like web developers have been doing since the invention of the tag, another nested in the DOM won’t hurt anything (probably). See React.createElement in the React documentation.) ( What’s happening behind the curtain here? JSX is turning all of our s and s into React.createElement() calls - when the JSX transpiler sees multiple elements instead of a single element, it doesn’t know what tag name to render with. Looks fine to me! But when we run it through the JSX transpiler. Let’s back up a little - I’m sure that every React developer will have run into this at some point in their career (or will, very soon): React Fragments are a neat little feature that were released late last year with React v16.2.0 - it’s a pretty small feature, but just knowing about the existence of them can save developers a huge headache when running into some very specific layout and styling situations. In Winds, we had a couple of unique frontend situations requiring the use of React Fragments.
#React fragments code
If you’d like to check it out, head on over to, or check out the source code at. It’s built in Node.js, Electron, Redux and React, and as of this writing, has over 5,000 stars on GitHub. For the last several months, I’ve been working on Winds 2.0, an open-source RSS reader and podcast listening app. I’m a Developer Advocate over at GetStream.io, where we build personalized and scalable activity feeds.
0 kommentar(er)
