From a209d9ac8774624de75c81a402cd6cfcabfd7370 Mon Sep 17 00:00:00 2001
From: Rauno Freiberg <freiberggg@gmail.com>
Date: Mon, 19 Mar 2018 10:43:23 +0200
Subject: [PATCH] =?UTF-8?q?[react]=20[docs]=C2=A0make=20React.Fragment=20e?=
 =?UTF-8?q?xample=20more=20clear?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

IMHO, the previous example leads people to confusion in thinking that returning a element with a `<div>` and `<React.Fragment>` are equivalent, yet they aren't. This should clarify things up a bit and accentuate the difference.
---
 react.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/react.md b/react.md
index ab913c8e1..463b577c1 100644
--- a/react.md
+++ b/react.md
@@ -106,18 +106,19 @@ class Info extends React.Component {
   }
 }
 ```
-As of React v16.2.0
-
+As of React v16.2.0 components can return multiple grouped elements without adding extra nodes to the DOM. In this example, you would get the nested components' nodes without a wrapping element.
 
 ```jsx
 class Info extends React.Component {
   render () {
     const { avatar, username } = this.props
 
-    return <React.Fragment>
-      <UserAvatar src={avatar} />
-      <UserProfile username={username} />
-    </React.Fragment>
+    return (
+      <React.Fragment>
+        <UserAvatar src={avatar} />
+        <UserProfile username={username} />
+      </React.Fragment>
+    )
   }
 }
 ```