Add release jsx fragment blog post by clemmy · Pull Request #345 · reactjs/react.dev

clemmy · 2017-11-27T04:46:32Z

First draft of the blog post for the upcoming React v16.2 release.

Todos:

Ensure CRA release link is correct
Add a CodePen link for live demo

Do not merge yet!

reactjs-bot · 2017-11-27T04:50:08Z

Deploy preview ready!

Built with commit cdde744

https://deploy-preview-345--reactjs.netlify.com

RyanCavanaugh · 2017-11-27T20:14:21Z

+
+Unfortunately, support for Babel 6.x is not available, and there are currently no plans to back-port.
+
+#### Typescript


"TypeScript"

And the same for the below too

DanielRosenwasser · 2017-11-27T20:51:04Z

+npm update typescript # for npm users
+```
+
+Also, editors may complain about errors in `.tsx` and `.js/.jsx` files using the new syntax. These errors can be safely ignored, or configured for [VS Code](https://code.visualstudio.com/Docs/languages/typescript#_using-newer-typescript-versions) and [Sublime Text](https://github.com/Microsoft/TypeScript-Sublime-Plugin/#note-using-different-versions-of-typescript).


How about

These errors can be safely ignored, but editor support for JSX fragments are already available with updates for [Visual Studio 2015](https://www.microsoft.com/en-us/download/details.aspx?id=48593), [Visual Studio 2017](https://www.microsoft.com/en-us/download/details.aspx?id=55258), and [Sublime Text via Package Control](https://packagecontrol.io/packages/TypeScript). Visual Studio Code will be updated soon, but [can be configured to use TypeScript 2.6.2 and later](https://code.visualstudio.com/Docs/languages/typescript#_using-newer-typescript-versions).

gaearon · 2017-11-27T21:22:33Z

+
+### Why Fragments?
+
+When React released version 16, the ability to render an array of elements from a component's `render` method was added. This allowed developers to prevent extraneous markup with `div`s that pollute the HTML. However, it was inconvenient because every element in the array had to be explicitly keyed. Previously, in order to render an array of elements, the following code would be necessary:


When React released version 16, the ability to render an array of elements from a component's render method was added.

This reads a bit clumsy to me (too much passive voice!)

Maybe:

The React 16 release included the new ability to return an array from a component's render method.

?

gaearon · 2017-11-27T21:24:30Z

+}
+```
+
+However, the keys are only necessary for React's reconciliation algorithm when child elements are re-arranged and React needs to figure out which item in one render corresponds to in a subsequent render. If the array is static, then keys aren't necessary and only add extra noise to the code. So, let's omit them:


Let's be consistent about "rearrange" vs "re-arrange". I'd pick "rearrange" everywhere.

gaearon · 2017-11-27T21:30:57Z

+author: [clemmy]
+---
+
+Today, we're excited to bring the new `Fragment` export to React, which allows users to render **static** fragments without the unnecessary keying of each element in the fragment!


This paragraph is slightly confusing because it doesn't mention the new syntax but shows the new syntax. Maybe:

Today, we’re excited to bring the new Fragment export to React, which allows users to render static fragments without the unnecessary keying of each element in the fragment!

render() { return ( <React.Fragment> <li>Look ma</li> <li>no keys!</li> </React.Fragment> ); }

There is also a new short syntax for it that is already supported by some tools:

render() { return ( <> <li>Look ma</li> <li>no keys!</li> </> ); }

gaearon · 2017-11-27T21:33:36Z

+Note that with the `<></>` syntax, attributes are not allowed to be passed. We made the decision to disallow attributes with fragments since they're semantically different from React elements. However, a fragment can be keyed by using the explicit fragment syntax:
+
+```jsx
+import { Fragment } from 'react';


Can we remove this and just use React.Fragment? Thinking about ES6 imports here adds unnecessary overhead to an already new concept.

@sebmarkbage 's thought is that React.Fragment is quite long and will be harder to sell.

gaearon · 2017-11-27T21:34:18Z

+
+#### With Attributes and Keys
+
+Note that with the `<></>` syntax, attributes are not allowed to be passed. We made the decision to disallow attributes with fragments since they're semantically different from React elements. However, a fragment can be keyed by using the explicit fragment syntax:


Note that with the <></> syntax, attributes are not allowed to be passed.

Maybe:

Note that the <></> syntax does not allow attributes on fragments.

gaearon · 2017-11-27T21:34:34Z

+
+Additionally, there is a [pragma option available in babel-plugin-transform-react-jsx](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx#pragmafrag) that allows the Babel compiler to de-sugar the `<>...</>` syntax to a custom identifier.
+
+### Example Usages


Maybe just "Examples"?

gaearon · 2017-11-27T21:35:21Z

+
+Still, we are very thankful to the open source contributors who worked on solving this in the ecosystem.
+
+Additionally, there is a [pragma option available in babel-plugin-transform-react-jsx](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx#pragmafrag) that allows the Babel compiler to de-sugar the `<>...</>` syntax to a custom identifier.


Maybe replace "Additionally" with "If you use JSX with something other than React, " to better explain the context of this sentence.

gaearon · 2017-11-27T21:36:44Z

+
+As mentioned above, the most common way to use fragments in React is to simply use `<></>` tags. Generally, in the Javascript compiler phase of your build pipeline, the `<>...</>` will be de-sugared into a `createElement` call with `React.Fragment` as the type.
+
+Take a look at the section on [How to Use it](#how-to-use-it) to see how to update your tooling to support JSX fragments.


It is pretty confusing to me that this section is called "Example Usages" but there are no examples in it at all, and it asks me to follow to a different section. This breaks the flow. Can we avoid the jumps forward, and also rename this section if it doesn't actually contain examples?

gaearon · 2017-11-27T21:37:57Z

+
+### How to Use it
+
+JSX fragments are still very new and some tools in the ecosystem may not be ready for it yet, so please be patient! However, we've tried our best to make it as simple as possible to upgrade from several popular toolchains:


"some tools" -> "many tools"? We worked with some folks, but "some tools" makes it sound like those who are lagging behind are responsible for it. It's a really new syntax, we shouldn't expect tool authors to handle it yet.

gaearon · 2017-11-27T21:39:06Z

+
+If you are using Babel with [Webpack](https://webpack.js.org/), then no additional steps need to be done because [babel-loader](https://github.com/babel/babel-loader) will be using your peer-installed version of Babel.
+
+Unfortunately, support for Babel 6.x is not available, and there are currently no plans to back-port.


"to back-port" -> "to backport it" (I think that's a more common spelling)

gaearon · 2017-11-27T21:39:47Z

+
+#### Others
+
+For other tools, please check with the corresponding documentation to check if there is support available. However, it's not a problem at all if you want the functionality of `<></>` without your linters and tooling complaining! You can always start with `<Fragment></Fragment>` and do a code-mod later to replace it with `<></>` when the appropriate support is available.


"code-mod" -> "codemod"

sebmarkbage · 2017-11-28T00:54:23Z

+import React, { Fragment } from 'react';
+
+items.map(item => (
+  <Fragment key="item.key">


This should be key={item.key} otherwise it has the same string key for all items.

sebmarkbage · 2017-11-28T00:55:18Z

+
+Take a look at the section on [tooling support](#tooling-support) to see how to update your tooling to support JSX fragments.
+
+#### With Attributes and Keys


Drop the With. It's cleaner.

sebmarkbage · 2017-11-28T00:56:41Z

+import React, { Fragment } from 'react';
+
+render() {
+  // keys and commas are no longer needed


// keys and commas are not needed in static JSX content

To be more precise?

sebmarkbage · 2017-11-28T00:58:32Z

+
+render() {
+  // keys and commas are no longer needed
+  return <Fragment>


Should this be in a parenthesis with this line on the second line so that the comparison to the syntax below is equivalent?

Yes, I'll update all the code blocks to have consistent styling with parentheses around JSX elements.

gaearon · 2017-11-28T14:09:10Z

+which allows users to render *static* fragments using familiar JSX element syntax.
+
+```jsx
+import React, { Fragment } from 'react';


Would this work for TS users? AFAIK they have to enable a special mode to get React-as-a-default-export working. This is a thorny issue: react/react#11503. That's why I previously suggested to remove all imports from this blog post and just use React.Fragment. People will import React they way they already do, and there's no need to confuse them with a syntax that might not work.

It also doesn't match the Flow recommendation. Note they change default React import to a namespace import as part of conversion: https://flow.org/en/docs/react/components/. I just don't think we should confuse people with import syntax here. The blog post is not about it.

Fix some grammar

gaearon · 2017-11-28T21:56:30Z

+
+```bash
+# for yarn users
+yarn add eslint@3.x babel-eslint@7


Why are we suggesting to use a pretty old version of ESLint?

Sync with reactjs.org @ d2ade76

docs(en): merge reactjs.org into zh-hans @ 99b7901

facebook-github-bot added the CLA Signed label Nov 27, 2017

clemmy closed this Nov 27, 2017

clemmy reopened this Nov 27, 2017

clemmy force-pushed the fragments-blog-post branch 2 times, most recently from b385743 to 3fbbbd0 Compare November 27, 2017 17:21

RyanCavanaugh reviewed Nov 27, 2017

View reviewed changes

DanielRosenwasser reviewed Nov 27, 2017

View reviewed changes

gaearon reviewed Nov 27, 2017

View reviewed changes

alexkrolick mentioned this pull request Nov 27, 2017

Support (or document non-support) for Fragments preactjs/preact#946

Closed

sebmarkbage reviewed Nov 28, 2017

View reviewed changes

gaearon reviewed Nov 28, 2017

View reviewed changes

Clement Hoang and others added 4 commits November 28, 2017 12:56

Add release jsx fragment blog post

cad1de9

Fix some grammar

Update TypeScript text

14ddaca

Update fragment blog post

33d8409

Revisions

71b4765

acdlite force-pushed the fragments-blog-post branch from 5dec98c to 71b4765 Compare November 28, 2017 20:56

Clement Hoang and others added 4 commits November 28, 2017 13:08

Update changelog

dba7b65

Update examples

00fb21c

Nits

698543b

Nits

028b52d

acdlite force-pushed the fragments-blog-post branch from f5c3cac to 028b52d Compare November 28, 2017 21:46

Change site version

cdde744

acdlite merged commit 0e3e124 into reactjs:master Nov 28, 2017

gaearon reviewed Nov 28, 2017

View reviewed changes

jhonmike pushed a commit to jhonmike/reactjs.org that referenced this pull request Jul 1, 2020

Merge pull request reactjs#345 from reactjs/sync-d2ade76c

b62ad62

Sync with reactjs.org @ d2ade76

BetterZxx pushed a commit to BetterZxx/react.dev that referenced this pull request Mar 21, 2023

docs(en): merge reactjs.org into zh-hans @ 99b7901 (reactjs#345)

5f91774

docs(en): merge reactjs.org into zh-hans @ 99b7901


		Unfortunately, support for Babel 6.x is not available, and there are currently no plans to back-port.

		#### Typescript


		### Why Fragments?

		When React released version 16, the ability to render an array of elements from a component's `render` method was added. This allowed developers to prevent extraneous markup with `div`s that pollute the HTML. However, it was inconvenient because every element in the array had to be explicitly keyed. Previously, in order to render an array of elements, the following code would be necessary:


		#### With Attributes and Keys

		Note that with the `<></>` syntax, attributes are not allowed to be passed. We made the decision to disallow attributes with fragments since they're semantically different from React elements. However, a fragment can be keyed by using the explicit fragment syntax:


		Additionally, there is a [pragma option available in babel-plugin-transform-react-jsx](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx#pragmafrag) that allows the Babel compiler to de-sugar the `<>...</>` syntax to a custom identifier.

		### Example Usages


		Still, we are very thankful to the open source contributors who worked on solving this in the ecosystem.

		Additionally, there is a [pragma option available in babel-plugin-transform-react-jsx](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx#pragmafrag) that allows the Babel compiler to de-sugar the `<>...</>` syntax to a custom identifier.


		As mentioned above, the most common way to use fragments in React is to simply use `<></>` tags. Generally, in the Javascript compiler phase of your build pipeline, the `<>...</>` will be de-sugared into a `createElement` call with `React.Fragment` as the type.

		Take a look at the section on [How to Use it](#how-to-use-it) to see how to update your tooling to support JSX fragments.


		### How to Use it

		JSX fragments are still very new and some tools in the ecosystem may not be ready for it yet, so please be patient! However, we've tried our best to make it as simple as possible to upgrade from several popular toolchains:


		If you are using Babel with [Webpack](https://webpack.js.org/), then no additional steps need to be done because [babel-loader](https://github.com/babel/babel-loader) will be using your peer-installed version of Babel.

		Unfortunately, support for Babel 6.x is not available, and there are currently no plans to back-port.


		#### Others

		For other tools, please check with the corresponding documentation to check if there is support available. However, it's not a problem at all if you want the functionality of `<></>` without your linters and tooling complaining! You can always start with `<Fragment></Fragment>` and do a code-mod later to replace it with `<></>` when the appropriate support is available.


		Take a look at the section on [tooling support](#tooling-support) to see how to update your tooling to support JSX fragments.

		#### With Attributes and Keys

Conversation

clemmy commented Nov 27, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

reactjs-bot commented Nov 27, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DanielRosenwasser Nov 27, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gaearon Nov 28, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gaearon Nov 28, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

clemmy commented Nov 27, 2017 •

edited

Loading

reactjs-bot commented Nov 27, 2017 •

edited

Loading

DanielRosenwasser Nov 27, 2017 •

edited

Loading

gaearon Nov 28, 2017 •

edited

Loading

gaearon Nov 28, 2017 •

edited

Loading