About React Fragments
When writing in React, you are required to have an enclosing parent element for your HTML elements. The result is that without using fragments, you end up wrapping your HTML code around
<div> ... your HTML ...</div> tags.
Not only these tags are semantically insignificant, but they also bloat your web application with useless markup, and because web performance is death by a thousand cuts, those extra
<div></div> tags can end up negatively impacting application responsiveness when added together.
React Fragments introduce a tag that allow you to replace empty
<div></div> elements with
<React.Fragment> or it’s shorthand,
<> ...your html... </> .
<> </> fragment tag, when compiled, does not leave any extraneous div elements in your application, while at the same time satisfying React’s requirements of wrapping your HTML elements in a parent tag.
Depending on your Visual Studio Code configuration, React Fragment syntax highlighting might look broken. Here are my stack versions:
// Visual Studio Version:
// The stack used for compilation as it appears in package.json.
- Question on Stack Overflow complaining that compilation is failing: https://stackoverflow.com/questions/48316365/react-fragment-shorthand-failing-to-compile
- About support for Fragments in React.js: https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html
- About support for Fragment syntax in Visual Studio: https://code.visualstudio.com/updates/v1_19#_jsx-fragment-syntax
The problem breakdown:
- According to the Visual Studio Code update, as of November 2017 (version 1.19), the
<>...</>fragment syntax is supported in VSC, therefore my version of VSC (1.39, 2019) should support the syntax and not be an issue.
- Fragment syntax is supported in React as of version 16.2 (2017), and I’m on 16.8, so the React version should be an issue.
- The problem is that out of the box, syntax highlighting does not seem to work in Visual Studio Code.
- The release notes for VSC version 1.19 specifically state that TypeScript supports the fragment syntax. However, there is no mention of any other language there supporting fragment syntax ?
- My VSC is set up to automatically detect the language being used, and it sets my
- Manually changing the language of the file I’m working on to
- Manually changing the Visual Studio Code language to
Typescript Reactfixes the syntax highlighting issue.
- Compiling the application using Webpack -> Babel -> React was successful even though the syntax highlighting was borked in VSC, indicating that the Webpack/Babel setup was not the issue, and probably more of a VSC issue.
Broken fragment syntax. Note how the closing
</> fragment is red on
</ and yellow on
> , indicating that there is a missing closing tag. Note the language at the bottom of the editor set to
Fixed syntax. Note the colors in the editor — how
export default * is no longer yellow, meaning there isn’t a missing tag anymore (at least in the code editor’s eyes). Again, this was fixed by setting the language on the bottom of the VSC editor to
Note that I’m using Typescript React even though my file is technically not Typescript — doesn’t end in
I don’t know if there’s a way of making fragment syntax work with the language set as
Hope this was helpful to anyone that might have come across this issue, thanks for reading!