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 1/4] =?UTF-8?q?[react]=20[docs]=C2=A0make=20React.Fragment?=
 =?UTF-8?q?=20example=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>
+    )
   }
 }
 ```

From ed9ff3ca126e4edacfadd4e97893f7fe111c1d6f Mon Sep 17 00:00:00 2001
From: raunofreiberg <freiberggg@gmail.com>
Date: Mon, 19 Mar 2018 11:05:38 +0200
Subject: [PATCH 2/4] [react] [docs] add React.Fragment example to new features

---
 react.md | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/react.md b/react.md
index 463b577c1..1b5ae94d8 100644
--- a/react.md
+++ b/react.md
@@ -124,7 +124,7 @@ class Info extends React.Component {
 ```
 
 
-{: data-line="6,7"}
+{: data-line="5,6,7,8,9,10"}
 
 Nest components to separate concerns.
 
@@ -422,8 +422,11 @@ New features
 ------------
 {: .-three-column}
 
-### Returning fragments
+### Returning multiple elements
 
+You can return multiple elements as arrays or fragments.
+
+**Arrays**
 ```js
 render () {
   // Don't forget the keys!
@@ -435,7 +438,19 @@ render () {
 ```
 {: data-line="3,4,5,6"}
 
-You can return multiple nodes as arrays.
+**Fragments**
+```js
+render () {
+  // Fragments don't require keys!
+  return (
+    <React.Fragment>
+      <li>First item</li>
+      <li>Second item</li>
+    </React.Fragment>
+  )
+}
+```
+{: data-line="3,4,5,6,7,8"}
 
 See: [Fragments and strings](https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings)
 

From c9dc91a3b323e72e5093f18b0dad3f47ebc07685 Mon Sep 17 00:00:00 2001
From: raunofreiberg <freiberggg@gmail.com>
Date: Mon, 19 Mar 2018 11:16:55 +0200
Subject: [PATCH 3/4] =?UTF-8?q?[react]=20[docs]=C2=A0improve=20wording=20o?=
 =?UTF-8?q?f=20fragments=20example?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/react.md b/react.md
index 1b5ae94d8..303210856 100644
--- a/react.md
+++ b/react.md
@@ -106,7 +106,7 @@ class Info extends React.Component {
   }
 }
 ```
-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.
+As of React v16.2.0, fragments can be used to return multiple children without adding extra wrapping nodes to the DOM.
 
 ```jsx
 class Info extends React.Component {

From d8c2eab7871e5f40fae21d7767d8758bb32ef337 Mon Sep 17 00:00:00 2001
From: "Rico Sta. Cruz" <rstacruz@users.noreply.github.com>
Date: Mon, 26 Mar 2018 11:47:31 +0800
Subject: [PATCH 4/4] Update react.md

---
 react.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/react.md b/react.md
index 303210856..6665867b0 100644
--- a/react.md
+++ b/react.md
@@ -426,7 +426,8 @@ New features
 
 You can return multiple elements as arrays or fragments.
 
-**Arrays**
+#### Arrays
+
 ```js
 render () {
   // Don't forget the keys!
@@ -438,7 +439,7 @@ render () {
 ```
 {: data-line="3,4,5,6"}
 
-**Fragments**
+#### Fragments
 ```js
 render () {
   // Fragments don't require keys!