From f1cbff3e17319dc8f6cc94b30cfcd350c8770161 Mon Sep 17 00:00:00 2001
From: Michael H <michael.hiiva@paperkisscrafts.com>
Date: Wed, 21 Feb 2018 20:34:02 -0800
Subject: [PATCH 01/27] Fixed Accessiblity Issue jsx docblocks - 594

set ignoreTabKey to true so that keyboard only users can tab out of jsx docblocks
---
 src/components/CodeEditor/CodeEditor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index efaab557..fa582534 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -179,7 +179,7 @@ class CodeEditor extends Component {
                   },
                 }}
                 className="gatsby-highlight">
-                <LiveEditor onChange={this._onChange} />
+                <LiveEditor ignoreTabKey={true} onChange={this._onChange} />
               </div>
             </div>
             {error && (

From 96010b5d9772518d881db07d5f89c2daece4ee20 Mon Sep 17 00:00:00 2001
From: Sophie Alpert <sophiebits@fb.com>
Date: Sat, 3 Mar 2018 19:01:18 -0800
Subject: [PATCH 02/27] Improve a11y of docs

* Add placeholder/label to input on homepage demo
* Mark sections with aria-expanded

![screenshot of markup with aria-expanded for sections](https://user-images.githubusercontent.com/6820/36941651-2f851bee-1f15-11e8-8090-e93e596b3d11.png)
---
 content/home/examples/an-application.js     |   4 +-
 src/templates/components/Sidebar/Section.js | 178 +++++++++++---------
 2 files changed, 97 insertions(+), 85 deletions(-)

diff --git a/content/home/examples/an-application.js b/content/home/examples/an-application.js
index 7b516861..ec855876 100644
--- a/content/home/examples/an-application.js
+++ b/content/home/examples/an-application.js
@@ -13,6 +13,8 @@ class TodoApp extends React.Component {
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
           <input
+            aria-label="Add a new to-do item"
+            placeholder="Add a to-do..."
             onChange={this.handleChange}
             value={this.state.text}
           />
@@ -56,4 +58,4 @@ class TodoList extends React.Component {
   }
 }
 
-ReactDOM.render(<TodoApp />, mountNode);
\ No newline at end of file
+ReactDOM.render(<TodoApp />, mountNode);
diff --git a/src/templates/components/Sidebar/Section.js b/src/templates/components/Sidebar/Section.js
index bf6db263..2738c853 100644
--- a/src/templates/components/Sidebar/Section.js
+++ b/src/templates/components/Sidebar/Section.js
@@ -10,94 +10,104 @@ import isItemActive from 'utils/isItemActive';
 import MetaTitle from '../MetaTitle';
 import ChevronSvg from '../ChevronSvg';
 
-const Section = ({
-  activeItemId,
-  createLink,
-  isActive,
-  isScrollSync,
-  location,
-  onLinkClick,
-  onSectionTitleClick,
-  section,
-}) => (
-  <div>
-    <button
-      css={{
-        cursor: 'pointer',
-        backgroundColor: 'transparent',
-        border: 0,
-        marginTop: 10,
-      }}
-      onClick={onSectionTitleClick}>
-      <MetaTitle
-        cssProps={{
-          [media.greaterThan('small')]: {
-            color: isActive ? colors.text : colors.subtle,
-
-            ':hover': {
-              color: colors.text,
-            },
-          },
-        }}>
-        {section.title}
-        <ChevronSvg
-          cssProps={{
-            marginLeft: 7,
-            transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
-            transition: 'transform 0.2s ease',
-
-            [media.lessThan('small')]: {
-              display: 'none',
-            },
+class Section extends React.Component {
+  state = {uid: ('' + Math.random()).replace(/\D/g, '')};
+  render() {
+    const {
+      activeItemId,
+      createLink,
+      isActive,
+      isScrollSync,
+      location,
+      onLinkClick,
+      onSectionTitleClick,
+      section,
+    } = this.props;
+    const uid = 'section_' + this.state.uid;
+    return (
+      <div>
+        <button
+          aria-expanded={isActive}
+          aria-controls={uid}
+          css={{
+            cursor: 'pointer',
+            backgroundColor: 'transparent',
+            border: 0,
+            marginTop: 10,
           }}
-        />
-      </MetaTitle>
-    </button>
-    <ul
-      css={{
-        marginBottom: 10,
+          onClick={onSectionTitleClick}>
+          <MetaTitle
+            cssProps={{
+              [media.greaterThan('small')]: {
+                color: isActive ? colors.text : colors.subtle,
+
+                ':hover': {
+                  color: colors.text,
+                },
+              },
+            }}>
+            {section.title}
+            <ChevronSvg
+              cssProps={{
+                marginLeft: 7,
+                transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
+                transition: 'transform 0.2s ease',
 
-        [media.greaterThan('small')]: {
-          display: isActive ? 'block' : 'none',
-        },
-      }}>
-      {section.items.map(item => (
-        <li
-          key={item.id}
+                [media.lessThan('small')]: {
+                  display: 'none',
+                },
+              }}
+            />
+          </MetaTitle>
+        </button>
+        <ul
+          id={uid}
           css={{
-            marginTop: 5,
+            marginBottom: 10,
+
+            [media.greaterThan('small')]: {
+              display: isActive ? 'block' : 'none',
+            },
           }}>
-          {createLink({
-            isActive: isScrollSync
-              ? activeItemId === item.id
-              : isItemActive(location, item),
-            item,
-            location,
-            onLinkClick,
-            section,
-          })}
+          {section.items.map(item => (
+            <li
+              key={item.id}
+              css={{
+                marginTop: 5,
+              }}>
+              {createLink({
+                isActive: isScrollSync
+                  ? activeItemId === item.id
+                  : isItemActive(location, item),
+                item,
+                location,
+                onLinkClick,
+                section,
+              })}
 
-          {item.subitems && (
-            <ul css={{marginLeft: 20}}>
-              {item.subitems.map(subitem => (
-                <li key={subitem.id}>
-                  {createLink({
-                    isActive: isScrollSync
-                      ? activeItemId === subitem.id
-                      : isItemActive(location, subitem),
-                    item: subitem,
-                    location,
-                    onLinkClick,
-                    section,
-                  })}
-                </li>
-              ))}
-            </ul>
-          )}
-        </li>
-      ))}
-    </ul>
-  </div>
-);
+              {item.subitems && (
+                <ul css={{marginLeft: 20}}>
+                  {item.subitems.map(subitem => (
+                    <li key={subitem.id}>
+                      {createLink({
+                        isActive: isScrollSync
+                          ? activeItemId === subitem.id
+                          : isItemActive(location, subitem),
+                        item: subitem,
+                        location,
+                        onLinkClick,
+                        section,
+                      })}
+                    </li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+}
 
 export default Section;

From 35ea09cf037a8d792186f2dc490934649554bbb8 Mon Sep 17 00:00:00 2001
From: Jordan Scales <scalesjordan@gmail.com>
Date: Sun, 4 Mar 2018 16:57:14 -0500
Subject: [PATCH 03/27] improve a11y in homepage examples with some labels

---
 content/home/examples/a-component-using-external-plugins.js | 6 +++++-
 content/home/examples/an-application.js                     | 4 ++++
 src/components/CodeEditor/CodeEditor.js                     | 6 +++++-
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/content/home/examples/a-component-using-external-plugins.js b/content/home/examples/a-component-using-external-plugins.js
index 38ba7292..48eac0b6 100644
--- a/content/home/examples/a-component-using-external-plugins.js
+++ b/content/home/examples/a-component-using-external-plugins.js
@@ -2,7 +2,7 @@ class MarkdownEditor extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.state = { value: 'Type some *markdown* here!' };
+    this.state = { value: 'Hello, **world**!' };
   }
 
   handleChange(e) {
@@ -18,7 +18,11 @@ class MarkdownEditor extends React.Component {
     return (
       <div className="MarkdownEditor">
         <h3>Input</h3>
+        <label htmlFor="markdown-content">
+          Enter some markdown
+        </label>
         <textarea
+          id="markdown-content"
           onChange={this.handleChange}
           defaultValue={this.state.value}
         />
diff --git a/content/home/examples/an-application.js b/content/home/examples/an-application.js
index 7b516861..cb1898fb 100644
--- a/content/home/examples/an-application.js
+++ b/content/home/examples/an-application.js
@@ -12,7 +12,11 @@ class TodoApp extends React.Component {
         <h3>TODO</h3>
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
+          <label htmlFor="new-todo">
+            What needs to be done?
+          </label>
           <input
+            id="new-todo"
             onChange={this.handleChange}
             value={this.state.text}
           />
diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index efaab557..7f74090a 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -257,9 +257,13 @@ class CodeEditor extends Component {
                       padding: '5px 10px',
                     },
 
+                    '& label': {
+                      display: 'block',
+                      marginTop: 10,
+                    },
+
                     '& textarea': {
                       width: '100%',
-                      marginTop: 10,
                       height: 60,
                       padding: 5,
                     },

From baa667c1f1e968792493c1cdf93e235d689f56d9 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexkrolick@users.noreply.github.com>
Date: Thu, 8 Mar 2018 17:22:17 -0800
Subject: [PATCH 04/27] Update PULL_REQUEST_TEMPLATE.md

---
 .github/PULL_REQUEST_TEMPLATE.md | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 0e103040..d3c56940 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,9 +1,13 @@
+
+
+<!--
+
 Thank you for the PR! Contributors like you keep React awesome!
 
 Please see the Contribution Guide for guidelines:
 
 https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md
 
-If your PR references an existing issue, please add the issue number below:
+If your PR references an existing issue, please add the issue number below
 
-#<Issue>
+-->

From 462c914163d983045284290fdf958d09b68f8dfc Mon Sep 17 00:00:00 2001
From: Abhishek Yadav <bigbeliever@gmail.com>
Date: Mon, 12 Mar 2018 10:33:17 +0530
Subject: [PATCH 05/27] Adds Chennai - India

---
 content/community/meetups.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/content/community/meetups.md b/content/community/meetups.md
index 2bc368b4..d0db1eb5 100644
--- a/content/community/meetups.md
+++ b/content/community/meetups.md
@@ -58,6 +58,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 
 ## India
 * [Bangalore](https://www.meetup.com/ReactJS-Bangalore/)
+* [Chennai](https://www.meetup.com/React-Chennai/)
 
 ## Ireland
 * [Dublin](http://www.meetup.com/ReactJS-Dublin/)

From 0ed89a57d11974a99b5601dc778ae16ea6fe821f Mon Sep 17 00:00:00 2001
From: nhducit <nhducit@users.noreply.github.com>
Date: Mon, 12 Mar 2018 21:50:47 +0700
Subject: [PATCH 06/27] Update Reasonml community link

---
 content/docs/static-type-checking.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md
index 1b407a2d..7b8b0622 100644
--- a/content/docs/static-type-checking.md
+++ b/content/docs/static-type-checking.md
@@ -309,7 +309,7 @@ You are now ready to code! We recommend to check out the following resources to
 
 [Reason](https://reasonml.github.io/) is not a new language; it's a new syntax and toolchain powered by the battle-tested language, [OCaml](http://ocaml.org/). Reason gives OCaml a familiar syntax geared toward JavaScript programmers, and caters to the existing NPM/Yarn workflow folks already know.
 
-Reason is developed at Facebook, and is used in some of its products like Messenger. It is still somewhat experimental but it has [dedicated React bindings](https://reasonml.github.io/reason-react/) maintained by Facebook and a [vibrant community](https://reasonml.github.io/community/).
+Reason is developed at Facebook, and is used in some of its products like Messenger. It is still somewhat experimental but it has [dedicated React bindings](https://reasonml.github.io/reason-react/) maintained by Facebook and a [vibrant community](https://reasonml.github.io/docs/en/community.html).
 
 ## Kotlin
 

From 0e0241654986ca4116410d1342b2562a398d7af8 Mon Sep 17 00:00:00 2001
From: Brandon Dail <aweary@users.noreply.github.com>
Date: Mon, 12 Mar 2018 19:23:01 -0700
Subject: [PATCH 07/27] Mention non-compliant implementations of Map/Set

---
 content/docs/reference-javascript-environment-requirements.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/reference-javascript-environment-requirements.md b/content/docs/reference-javascript-environment-requirements.md
index 65a58da8..44a36eb9 100644
--- a/content/docs/reference-javascript-environment-requirements.md
+++ b/content/docs/reference-javascript-environment-requirements.md
@@ -6,7 +6,7 @@ category: Reference
 permalink: docs/javascript-environment-requirements.html
 ---
 
-React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).
+React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11) or which have non-compliant implementations (e.g. IE 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).
 
 A polyfilled environment for React 16 using core-js to support older browsers might look like:
 

From 951d83d6fa75321501cded500aeb65c19e2e74f1 Mon Sep 17 00:00:00 2001
From: kovlex <kovlex.levi@gmail.com>
Date: Tue, 13 Mar 2018 13:17:19 +0200
Subject: [PATCH 08/27] Added Mobiscroll Lite React to free ui components.

---
 content/community/tools-ui-components.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/content/community/tools-ui-components.md b/content/community/tools-ui-components.md
index 5fa8889f..d963602b 100644
--- a/content/community/tools-ui-components.md
+++ b/content/community/tools-ui-components.md
@@ -65,6 +65,7 @@ permalink: community/ui-components.html
 * **[valuelink](https://github.com/Volicon/valuelink):** Full-featured two-way data binding and forms validation with extended React links.
 * **[video-react](https://github.com/video-react/video-react)**: A web video player built for the HTML5 world using React library.
 * **[Winterfell](https://github.com/andrewhathaway/Winterfell):** Generate complex, validated and extendable JSON-based forms in React
+* **[Mobiscroll Lite for React](https://mobiscroll.com/forms/react)** A collection of 15 free UI components ranging from inputs, selects, sliders, alerts to rating.
 
 ## Fee Based Components
 

From 032edd2c3ce8836490a3a55bbd99454de8f3a9ae Mon Sep 17 00:00:00 2001
From: Chafic Najjar <chafic.najjar@gmail.com>
Date: Tue, 13 Mar 2018 14:27:23 +0200
Subject: [PATCH 09/27] Change "header" to "heading" in hello-world.html

h1-h6 elements are called "headings", not "headers" (source: https://www.w3.org/TR/html52/sections.html#headings-and-sections).
---
 content/docs/hello-world.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md
index feb56394..4882d78b 100644
--- a/content/docs/hello-world.md
+++ b/content/docs/hello-world.md
@@ -23,7 +23,7 @@ ReactDOM.render(
 );
 ```
 
-It renders a header saying "Hello, world!" on the page.
+It renders a heading saying "Hello, world!" on the page.
 
 The next few sections will gradually introduce you to using React. We will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces.
 

From 883ac1a1327ecaf0ca63b884d71a945c93ab4189 Mon Sep 17 00:00:00 2001
From: Pankaj Ladhar <ladharpankaj@gmail.com>
Date: Tue, 13 Mar 2018 18:46:46 +0530
Subject: [PATCH 10/27] Update examples.md

---
 content/community/examples.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/content/community/examples.md b/content/community/examples.md
index 3b5808f1..36f0739f 100644
--- a/content/community/examples.md
+++ b/content/community/examples.md
@@ -20,3 +20,4 @@ There are many example projects created by the React community. Feel free to add
 * **[Hacker News Clone React/GraphQL](https://github.com/clintonwoo/hackernews-react-graphql)** Hacker News clone rewritten with universal JavaScript, using React and GraphQL.
 * **[Bitcoin Price Index](https://github.com/mrkjlchvz/bitcoin-price-index)** Simple bitcoin price index data from CoinDesk API.
 * **[Builder Book](https://github.com/builderbook/builderbook)** Open source web app to write and host documentation or sell books. Built with React, Material-UI, Next, Express, Mongoose, MongoDB.
+* **[GFonts Space](https://github.com/pankajladhar/GFontsSpace)** A space which allows user to play with Google fonts. Built with React, Redux and React-Router.

From 3788f5c2cf5ca3509172a52772bd7b8ca4509fb8 Mon Sep 17 00:00:00 2001
From: Rauno Freiberg <freiberggg@gmail.com>
Date: Tue, 13 Mar 2018 17:33:15 +0200
Subject: [PATCH 11/27] [docs] add reference to the explanation of capitalizing
 components

---
 content/docs/components-and-props.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 52c347d6..038145ad 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -90,6 +90,8 @@ Let's recap what happens in this example:
 >Always start component names with a capital letter.
 >
 >React treats components starting with lowercase letters as DOM tags. For example, `<div />` represents an HTML div tag, but `<Welcome />` represents a component and requires `Welcome` to be in scope.
+>
+>You can read more about the reasoning behind this convention [here.](https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
 
 ## Composing Components
 

From c384265e8ed955e45af025a266716a144c0972e4 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexkrolick@users.noreply.github.com>
Date: Tue, 13 Mar 2018 21:37:27 -0700
Subject: [PATCH 12/27] Remove redundant a11y elements

---
 content/home/examples/an-application.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/content/home/examples/an-application.js b/content/home/examples/an-application.js
index 0674fc61..e164c4b0 100644
--- a/content/home/examples/an-application.js
+++ b/content/home/examples/an-application.js
@@ -16,8 +16,6 @@ class TodoApp extends React.Component {
             What needs to be done?
           </label>
           <input
-            aria-label="Add a new to-do item"
-            placeholder="Add a to-do..."
             id="new-todo"
             onChange={this.handleChange}
             value={this.state.text}

From d9e7b42527e2b312adf8c878f9a2ca152d539eaa Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexkrolick@users.noreply.github.com>
Date: Tue, 13 Mar 2018 22:00:21 -0700
Subject: [PATCH 13/27] Update note label

---
 content/docs/components-and-props.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 038145ad..7c55df69 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -85,9 +85,7 @@ Let's recap what happens in this example:
 3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
 4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
 
->**Caveat:**
->
->Always start component names with a capital letter.
+>**Note:** Always start component names with a capital letter.
 >
 >React treats components starting with lowercase letters as DOM tags. For example, `<div />` represents an HTML div tag, but `<Welcome />` represents a component and requires `Welcome` to be in scope.
 >

From d1e8b526aee0d0cac5e25690f1a6b7db23ebfe1d Mon Sep 17 00:00:00 2001
From: Michael H <michael.hiiva@paperkisscrafts.com>
Date: Tue, 13 Mar 2018 22:06:46 -0700
Subject: [PATCH 14/27] Adds Ternary Operator to Make Example Concise Issue
 #657

---
 content/docs/conditional-rendering.md | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index 5680ee21..2112eed1 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -93,12 +93,9 @@ class LoginControl extends React.Component {
   render() {
     const isLoggedIn = this.state.isLoggedIn;
 
-    let button = null;
-    if (isLoggedIn) {
-      button = <LogoutButton onClick={this.handleLogoutClick} />;
-    } else {
-      button = <LoginButton onClick={this.handleLoginClick} />;
-    }
+    let button = isLoggedIn
+                 ? <LogoutButton onClick={this.handleLogoutClick} />
+                 : <LoginButton onClick={this.handleLoginClick} />;
 
     return (
       <div>

From a2e445b85bdd20a80ba067921066213dbeec0f98 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexkrolick@users.noreply.github.com>
Date: Tue, 13 Mar 2018 22:19:00 -0700
Subject: [PATCH 15/27] Prettier

---
 content/docs/conditional-rendering.md | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index 2112eed1..d858dbb6 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -92,10 +92,12 @@ class LoginControl extends React.Component {
 
   render() {
     const isLoggedIn = this.state.isLoggedIn;
-
-    let button = isLoggedIn
-                 ? <LogoutButton onClick={this.handleLogoutClick} />
-                 : <LoginButton onClick={this.handleLoginClick} />;
+    
+    let button = isLoggedIn ? (
+      <LogoutButton onClick={this.handleLogoutClick} />
+    ) : (
+      <LoginButton onClick={this.handleLoginClick} />
+    );
 
     return (
       <div>

From 7ff3c4e9ccfeeac967286ac43bdaf6c8423567d3 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexkrolick@users.noreply.github.com>
Date: Tue, 13 Mar 2018 23:25:30 -0700
Subject: [PATCH 16/27] let -> const

---
 content/docs/conditional-rendering.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index d858dbb6..cce00c93 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -93,7 +93,7 @@ class LoginControl extends React.Component {
   render() {
     const isLoggedIn = this.state.isLoggedIn;
     
-    let button = isLoggedIn ? (
+    const button = isLoggedIn ? (
       <LogoutButton onClick={this.handleLogoutClick} />
     ) : (
       <LoginButton onClick={this.handleLoginClick} />

From 3163c18da982a820586397d60177161421d27ac5 Mon Sep 17 00:00:00 2001
From: Rauno <freiberggg@gmail.com>
Date: Thu, 15 Mar 2018 01:46:52 +0200
Subject: [PATCH 17/27] fix: Footer keys warning

---
 src/components/LayoutFooter/Footer.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
index 602b38b0..0b9402c8 100644
--- a/src/components/LayoutFooter/Footer.js
+++ b/src/components/LayoutFooter/Footer.js
@@ -64,7 +64,9 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             {sectionListDocs.map(section => {
               const defaultItem = section.items[0];
               return (
-                <FooterLink to={`/docs/${defaultItem.id}.html`}>
+                <FooterLink
+                  to={`/docs/${defaultItem.id}.html`}
+                  key={section.title}>
                   {section.title}
                 </FooterLink>
               );
@@ -112,7 +114,9 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
             <MetaTitle onDark={true}>Community</MetaTitle>
             {sectionListCommunity.map(section => (
-              <FooterLink to={`/community/${section.items[0].id}.html`}>
+              <FooterLink
+                to={`/community/${section.items[0].id}.html`}
+                key={section.title}>
                 {section.title}
               </FooterLink>
             ))}

From e7e7770d6c176d74c7655dc8a600c9c1de72e60d Mon Sep 17 00:00:00 2001
From: Arjun SK <arjunsk15@gmail.com>
Date: Wed, 21 Mar 2018 01:32:52 +0530
Subject: [PATCH 18/27] K5 Showcase is not a react project anymore

React Developer Tools didn't recognize the site as react.
---
 content/community/examples.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/content/community/examples.md b/content/community/examples.md
index 36f0739f..d60be166 100644
--- a/content/community/examples.md
+++ b/content/community/examples.md
@@ -12,7 +12,6 @@ There are many example projects created by the React community. Feel free to add
 * **[Calculator](https://github.com/ahfarmer/calculator)** Implementation of the iOS calculator built in React
 * **[Emoji Search](https://github.com/ahfarmer/emoji-search)** Simple React app for searching emoji
 * **[Github Battle App](https://github.com/ReactTraining/react-fundamentals/tree/hosting)** Battle two Github users and see the most popular Github projects for any language.
-* **[K5 Showcase](https://showcase.cloud.global.fujitsu.com):** Sample applications for React.js and Flux.
 * **[React Powered Hacker News Client](https://github.com/insin/react-hn)** A React & react-router-powered implementation of Hacker News using its Firebase API.
 * **[Pokedex](https://github.com/alik0211/pokedex)** The list of Pokémon with live search
 * **[Progressive Web Tetris](https://github.com/skidding/flatris)** Besides a beautiful, mobile-friendly implementation of Tetris, this project is a playground for integrating and experimenting with web technologies.

From a8c69c18d165a7c1b61988d3d660992cc049c380 Mon Sep 17 00:00:00 2001
From: Balram Singh <singhbalram786@gmail.com>
Date: Wed, 21 Mar 2018 15:25:05 +0000
Subject: [PATCH 19/27] test (#693)

---
 content/community/meetups.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/content/community/meetups.md b/content/community/meetups.md
index d0db1eb5..f1b901fc 100644
--- a/content/community/meetups.md
+++ b/content/community/meetups.md
@@ -59,6 +59,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 ## India
 * [Bangalore](https://www.meetup.com/ReactJS-Bangalore/)
 * [Chennai](https://www.meetup.com/React-Chennai/)
+* [Gurgaon](https://www.meetup.com/React-Gurgaon/)
 
 ## Ireland
 * [Dublin](http://www.meetup.com/ReactJS-Dublin/)
@@ -85,6 +86,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 ## Poland
 * [Warsaw](http://www.meetup.com/React-js-Warsaw/)
 
+## Scotland (UK)
+* [Edinburgh](https://www.meetup.com/React-Scotland/)
+
 ## Spain
 * [Barcelona](http://www.meetup.com/ReactJS-Barcelona/)
 

From 54a21eeb8859acc0ab3797b4da461c96076631d6 Mon Sep 17 00:00:00 2001
From: Alex Krolick <alexkrolick@users.noreply.github.com>
Date: Wed, 21 Mar 2018 09:58:43 -0700
Subject: [PATCH 20/27] Update examples.md

---
 content/community/examples.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/content/community/examples.md b/content/community/examples.md
index d60be166..1479526f 100644
--- a/content/community/examples.md
+++ b/content/community/examples.md
@@ -12,6 +12,7 @@ There are many example projects created by the React community. Feel free to add
 * **[Calculator](https://github.com/ahfarmer/calculator)** Implementation of the iOS calculator built in React
 * **[Emoji Search](https://github.com/ahfarmer/emoji-search)** Simple React app for searching emoji
 * **[Github Battle App](https://github.com/ReactTraining/react-fundamentals/tree/hosting)** Battle two Github users and see the most popular Github projects for any language.
+* **[K5 Playground](https://playground.cloud.global.fujitsu.com):** Sample applications for React.js and Flux.
 * **[React Powered Hacker News Client](https://github.com/insin/react-hn)** A React & react-router-powered implementation of Hacker News using its Firebase API.
 * **[Pokedex](https://github.com/alik0211/pokedex)** The list of Pokémon with live search
 * **[Progressive Web Tetris](https://github.com/skidding/flatris)** Besides a beautiful, mobile-friendly implementation of Tetris, this project is a playground for integrating and experimenting with web technologies.

From 66287e122b10a99331a209a51140841adf846306 Mon Sep 17 00:00:00 2001
From: G Akshay <gakshayapps@gmail.com>
Date: Fri, 23 Mar 2018 12:36:32 +0530
Subject: [PATCH 21/27] Remove trailing comma

---
 content/docs/portals.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/portals.md b/content/docs/portals.md
index d0080447..4c0a7908 100644
--- a/content/docs/portals.md
+++ b/content/docs/portals.md
@@ -35,7 +35,7 @@ render() {
   // `domNode` is any valid DOM node, regardless of its location in the DOM.
   return ReactDOM.createPortal(
     this.props.children,
-    domNode,
+    domNode
   );
 }
 ```

From 11c7124888556d32dbb601fac2d4188e90a64feb Mon Sep 17 00:00:00 2001
From: David Guan <DavidGuanDev@Gmail.com>
Date: Sat, 24 Mar 2018 13:23:54 +1100
Subject: [PATCH 22/27] Update the minimal React fiddle resource links in "How
 to Contribute" (#701)

* Update the minimal React fiddle resource links

* Update how-to-contribute.md
---
 content/docs/how-to-contribute.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/how-to-contribute.md b/content/docs/how-to-contribute.md
index 8cbaf077..8aa3487f 100644
--- a/content/docs/how-to-contribute.md
+++ b/content/docs/how-to-contribute.md
@@ -41,7 +41,7 @@ We are using [GitHub Issues](https://github.com/facebook/react/issues) for our p
 
 #### Reporting New Issues
 
-The best way to get your bug fixed is to provide a reduced test case. This [JSFiddle template](https://jsfiddle.net/84v837e9/) is a great starting point.
+The best way to get your bug fixed is to provide a reduced test case. This [JSFiddle template](https://jsfiddle.net/Luktwrdm/) is a great starting point.
 
 #### Security Bugs
 

From c743dc39bece0959f12c62756b361514d0111909 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sat, 24 Mar 2018 07:13:03 -0700
Subject: [PATCH 23/27] Fix typo in reconciliation docs regarding uncontrolled
 inputs (#705)

---
 content/docs/reconciliation.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md
index f76e83f1..bb39ce8a 100644
--- a/content/docs/reconciliation.md
+++ b/content/docs/reconciliation.md
@@ -140,7 +140,7 @@ When that's not the case, you can add a new ID property to your model or hash so
 
 As a last resort, you can pass an item's index in the array as a key. This can work well if the items are never reordered, but reorders will be slow.
 
-Reorders can also cause issues with component state when indexes are used as keys. Component instances are updated and reused based on their key. If the key is an index, moving an item changes it. As a result, component state for things like controlled inputs can get mixed up and updated in unexpected ways.
+Reorders can also cause issues with component state when indexes are used as keys. Component instances are updated and reused based on their key. If the key is an index, moving an item changes it. As a result, component state for things like uncontrolled inputs can get mixed up and updated in unexpected ways.
 
 [Here](codepen://reconciliation/index-used-as-key) is an example of the issues that can be caused by using indexes as keys on CodePen, and [here](codepen://reconciliation/no-index-used-as-key) is a updated version of the same example showing how not using indexes as keys will fix these reordering, sorting, and prepending issues.
 

From d1d228099d41b6dc55cad4bc65cc44cdee65dd25 Mon Sep 17 00:00:00 2001
From: Chafic Najjar <chafic.najjar@gmail.com>
Date: Mon, 26 Mar 2018 11:45:22 +0300
Subject: [PATCH 24/27] Fix grammar mistake in higher-order-components.md

The word "logic" here is singular so it should be referred to with "it" instead of "them".
---
 content/docs/higher-order-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md
index 4f044669..292cbc10 100644
--- a/content/docs/higher-order-components.md
+++ b/content/docs/higher-order-components.md
@@ -106,7 +106,7 @@ class BlogPost extends React.Component {
 - Inside the listener, call `setState` whenever the data source changes.
 - On unmount, remove the change listener.
 
-You can imagine that in a large app, this same pattern of subscribing to `DataSource` and calling `setState` will occur over and over again. We want an abstraction that allows us to define this logic in a single place and share them across many components. This is where higher-order components excel.
+You can imagine that in a large app, this same pattern of subscribing to `DataSource` and calling `setState` will occur over and over again. We want an abstraction that allows us to define this logic in a single place and share it across many components. This is where higher-order components excel.
 
 We can write a function that creates components, like `CommentList` and `BlogPost`, that subscribe to `DataSource`. The function will accept as one of its arguments a child component that receives the subscribed data as a prop. Let's call the function `withSubscription`:
 

From 858d2886f93e7bb2f1c2ec7f3ffa3a9a65a819a9 Mon Sep 17 00:00:00 2001
From: Chafic Najjar <chafic.najjar@gmail.com>
Date: Mon, 26 Mar 2018 14:00:57 +0300
Subject: [PATCH 25/27] s/function components/functional components (#711)

A stateless React component is referred to as a "functional component" throughout the documentation, not a "function component".
---
 content/docs/higher-order-components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md
index 4f044669..10022bb6 100644
--- a/content/docs/higher-order-components.md
+++ b/content/docs/higher-order-components.md
@@ -190,7 +190,7 @@ function logProps(InputComponent) {
 const EnhancedComponent = logProps(InputComponent);
 ```
 
-There are a few problems with this. One is that the input component cannot be reused separately from the enhanced component. More crucially, if you apply another HOC to `EnhancedComponent` that *also* mutates `componentWillReceiveProps`, the first HOC's functionality will be overridden! This HOC also won't work with function components, which do not have lifecycle methods.
+There are a few problems with this. One is that the input component cannot be reused separately from the enhanced component. More crucially, if you apply another HOC to `EnhancedComponent` that *also* mutates `componentWillReceiveProps`, the first HOC's functionality will be overridden! This HOC also won't work with functional components, which do not have lifecycle methods.
 
 Mutating HOCs are a leaky abstraction—the consumer must know how they are implemented in order to avoid conflicts with other HOCs.
 

From 7072a011c69f3262cc5f652b2410d6575c413f22 Mon Sep 17 00:00:00 2001
From: Chafic Najjar <chafic.najjar@gmail.com>
Date: Mon, 26 Mar 2018 20:15:46 +0300
Subject: [PATCH 26/27] Remove redundant "instead" in render-props.html (#712)

---
 content/docs/render-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 6c473f12..b307f901 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -209,7 +209,7 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Now, instead of effectively cloning the `<Mouse>` component and hard-coding something else in its `render` method to solve for a specific use case, we instead provide a `render` prop that `<Mouse>` can use to dynamically determine what it renders.
+Now, instead of effectively cloning the `<Mouse>` component and hard-coding something else in its `render` method to solve for a specific use case, we provide a `render` prop that `<Mouse>` can use to dynamically determine what it renders.
 
 More concretely, **a render prop is a function prop that a component uses to know what to render.**
 

From fff4ba35a8e4f90823858728f67d3a2b6ef399f0 Mon Sep 17 00:00:00 2001
From: Chafic Najjar <chafic.najjar@gmail.com>
Date: Mon, 26 Mar 2018 21:34:12 +0300
Subject: [PATCH 27/27] s/each are/each is (#713)

"Each" here is singular so the verb that follows it must also be singular (i.e. "is" not "are"). See:

- https://english.stackexchange.com/questions/24846/how-does-each-change-are-to-is
- https://english.stackexchange.com/questions/12387/each-with-plural-or-singular-verb
---
 content/docs/integrating-with-other-libraries.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md
index 63cf9cc2..50bc87c7 100644
--- a/content/docs/integrating-with-other-libraries.md
+++ b/content/docs/integrating-with-other-libraries.md
@@ -10,7 +10,7 @@ React can be used in any web application. It can be embedded in other applicatio
 
 React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.
 
-This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each are doing.
+This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing.
 
 The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty `<div />`.