From 4d1342506d8823c714278e88b035838e42c6144d Mon Sep 17 00:00:00 2001
From: Vishal Raj <vishalraj1802@gmail.com>
Date: Wed, 22 Nov 2017 02:36:54 +0530
Subject: [PATCH 01/23] doc: added documentation for input type=file

---
 content/docs/forms.md | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 8136e42d..16742268 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -189,6 +189,46 @@ Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select
 >```js
 ><select multiple={true} value={['B', 'C']}>
 >```
+## The file input Tag
+
+In HTML, a `<input type="file">` lets the user choose one or more files from their device's storage, allowing the app to handle them as per the use case.
+
+```html
+<input type="file" />
+```
+
+In React, a `<input type="file" />` works similarly to a normal `<input/>` with some major differences. The `<input type="file" />` in React is read-only and hence setting the value of a file programmatically is impossible. You can use the various File management API provided by Javascript to handle the files that are uploaded by the user.
+
+```javascript{7-10,17}
+class FileInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit (event) {
+    event.preventDefault();
+    alert(`Selected file - ${this.fileInput.files[0].name}`);
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <label>
+          Upload file:
+          <input type='file' ref={input => {this.fileInput = input}} />
+        </label>
+        <br/>
+        <button type='submit'>Submit</button>
+      </form>
+    );
+  }
+}
+```
+
+[Try it on CodePen.](https://codepen.io/fetard/pen/bYvaJY?editors=0010)
+
+Note how a `ref` to the file input is used to access the file(s) in the submit handler
 
 ## Handling Multiple Inputs
 

From 1b80d3658eeb1e9c6bd3c43c69d5e87c0c6a9b75 Mon Sep 17 00:00:00 2001
From: Ravshan Samandarov <ravshansbox@gmail.com>
Date: Wed, 20 Dec 2017 00:43:30 +0500
Subject: [PATCH 02/23] Update introducing-jsx.md (#443)

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

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 7a8733bf..3d12828f 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -62,7 +62,7 @@ We split JSX over multiple lines for readability. While it isn't required, when
 
 ### JSX is an Expression Too
 
-After compilation, JSX expressions become regular JavaScript objects.
+After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
 
 This means that you can use JSX inside of `if` statements and `for` loops, assign it to variables, accept it as arguments, and return it from functions:
 

From 184a7ef9476c524df0ff82362257c02bfbe8698d Mon Sep 17 00:00:00 2001
From: Joe Critchley <joecritch@gmail.com>
Date: Wed, 20 Dec 2017 15:06:12 +0000
Subject: [PATCH 03/23] Reorganized footer nav (#448)

* Reorganized footer nav to match latest structure

* Footer nav - skip Installation page for Quick Start
---
 src/components/LayoutFooter/Footer.js | 57 ++++++++++++++-------------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
index f3b81885..c7e80ccd 100644
--- a/src/components/LayoutFooter/Footer.js
+++ b/src/components/LayoutFooter/Footer.js
@@ -12,6 +12,7 @@ import FooterNav from './FooterNav';
 import MetaTitle from 'templates/components/MetaTitle';
 import React from 'react';
 import {colors, media} from 'theme';
+import {sectionListCommunity, sectionListDocs} from 'utils/sectionList';
 
 import ossLogoPng from 'images/oss_logo.png';
 
@@ -60,17 +61,27 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
           }}>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
             <MetaTitle onDark={true}>Docs</MetaTitle>
-            <FooterLink to="/docs/hello-world.html">Quick Start</FooterLink>
-            <FooterLink to="/docs/thinking-in-react.html">
-              Thinking in React
-            </FooterLink>
-            <FooterLink to="/tutorial/tutorial.html">Tutorial</FooterLink>
-            <FooterLink to="/docs/jsx-in-depth.html">
-              Advanced Guides
-            </FooterLink>
+            {sectionListDocs.map(section => {
+              // Skip the Installation page for Quick Start
+              const defaultItem =
+                section.items[0].id === 'installation'
+                  ? section.items[1].id
+                  : section.items[0].id;
+              return (
+                <FooterLink to={`/docs/${defaultItem}.html`}>
+                  {section.title}
+                </FooterLink>
+              );
+            })}
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Community</MetaTitle>
+            <MetaTitle onDark={true}>Channels</MetaTitle>
+            <ExternalFooterLink
+              href="https://github.com/facebook/react"
+              target="_blank"
+              rel="noopener">
+              GitHub
+            </ExternalFooterLink>
             <ExternalFooterLink
               href="http://stackoverflow.com/questions/tagged/reactjs"
               target="_blank"
@@ -103,34 +114,26 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             </ExternalFooterLink>
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Resources</MetaTitle>
-            <FooterLink to="/community/conferences.html">
-              Conferences
-            </FooterLink>
-            <FooterLink to="/community/videos.html">Videos</FooterLink>
-            <FooterLink to="/community/examples.html">Examples</FooterLink>
-            <FooterLink to="/community/debugging-tools.html">
-              Complementary Tools
-            </FooterLink>
+            <MetaTitle onDark={true}>Community</MetaTitle>
+            {sectionListCommunity.map(section => (
+              <FooterLink to={`/community/${section.items[0].id}.html`}>
+                {section.title}
+              </FooterLink>
+            ))}
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
             <MetaTitle onDark={true}>More</MetaTitle>
+            <FooterLink to="/tutorial/tutorial.html">Tutorial</FooterLink>
             <FooterLink to="/blog/">Blog</FooterLink>
-            <ExternalFooterLink
-              href="https://github.com/facebook/react"
-              target="_blank"
-              rel="noopener">
-              GitHub
-            </ExternalFooterLink>
+            <FooterLink to="/acknowledgements.html">
+              Acknowledgements
+            </FooterLink>
             <ExternalFooterLink
               href="http://facebook.github.io/react-native/"
               target="_blank"
               rel="noopener">
               React Native
             </ExternalFooterLink>
-            <FooterLink to="/acknowledgements.html">
-              Acknowledgements
-            </FooterLink>
           </FooterNav>
         </div>
         <section

From b71288c3ec679fc2f4b02ffddbed7c1fe68062a4 Mon Sep 17 00:00:00 2001
From: Victor Hom <vh62@cornell.edu>
Date: Wed, 20 Dec 2017 23:18:53 -0500
Subject: [PATCH 04/23] update a link

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

diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md
index 9a695102..e8f819f1 100644
--- a/content/docs/codebase-overview.md
+++ b/content/docs/codebase-overview.md
@@ -176,7 +176,7 @@ React was originally created for the DOM but it was later adapted to also suppor
 
 Renderers are also located in [`packages/`](https://github.com/facebook/react/tree/master/packages/):
 
-* [React DOM Renderer](https://github.com/facebook/react/tree/master/packages/react-dom) renders React components to the DOM. It implements [top-level `ReactDOM` APIs](/docs/top-level-api.html#reactdom) and is available as [`react-dom`](https://www.npmjs.com/package/react-dom) npm package. It can also be used as standalone browser bundle called `react-dom.js` that exports a `ReactDOM` global.
+* [React DOM Renderer](https://github.com/facebook/react/tree/master/packages/react-dom) renders React components to the DOM. It implements [top-level `ReactDOM` APIs](/docs/react-dom.html) and is available as [`react-dom`](https://www.npmjs.com/package/react-dom) npm package. It can also be used as standalone browser bundle called `react-dom.js` that exports a `ReactDOM` global.
 * [React Native Renderer](https://github.com/facebook/react/tree/master/packages/react-native-renderer) renders React components to native views. It is used internally by React Native.
 * [React Test Renderer](https://github.com/facebook/react/tree/master/packages/react-test-renderer) renders React components to JSON trees. It is used by the [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) feature of [Jest](https://facebook.github.io/jest) and is available as [react-test-renderer](https://www.npmjs.com/package/react-test-renderer) npm package.
 

From dd41d34c20e02d9f2a614c35d0b2db648e7a588d Mon Sep 17 00:00:00 2001
From: Vishal Raj <vishalraj1802@gmail.com>
Date: Thu, 21 Dec 2017 16:33:32 +0530
Subject: [PATCH 05/23] modification: gatsby-remark-code-plugin

---
 content/docs/forms.md                         |  2 +-
 .../components-and-props/input-type-file.js   | 26 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 examples/components-and-props/input-type-file.js

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 16742268..ca4edf9d 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -226,7 +226,7 @@ class FileInput extends React.Component {
 }
 ```
 
-[Try it on CodePen.](https://codepen.io/fetard/pen/bYvaJY?editors=0010)
+[Try it on CodePen](codepen://components-and-props/input-type-file)
 
 Note how a `ref` to the file input is used to access the file(s) in the submit handler
 
diff --git a/examples/components-and-props/input-type-file.js b/examples/components-and-props/input-type-file.js
new file mode 100644
index 00000000..18f2c6f1
--- /dev/null
+++ b/examples/components-and-props/input-type-file.js
@@ -0,0 +1,26 @@
+class FileInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit (event) {
+    event.preventDefault();
+    alert(`Selected file - ${this.fileInput.files[0].name}`);
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <label>
+          Upload file:
+          <input type='file' ref={input => {this.fileInput = input}} />
+        </label>
+        <br/>
+        <button type='submit'>Submit</button>
+      </form>
+    );
+  }
+}
+
+ReactDOM.render(<FileInput />, document.getElementById('root'));

From 81464292a82b784e2c716a4f07fe5e3446534be6 Mon Sep 17 00:00:00 2001
From: John Darryl Pelingo <john-d-pelingo@users.noreply.github.com>
Date: Thu, 21 Dec 2017 13:41:14 +0200
Subject: [PATCH 06/23] Add React Finland 2018

---
 content/community/conferences.md | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/content/community/conferences.md b/content/community/conferences.md
index f42ac3fa..40f86580 100644
--- a/content/community/conferences.md
+++ b/content/community/conferences.md
@@ -31,6 +31,11 @@ April 13 in Amsterdam, The Netherlands
 
 [Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam)
 
+### React Finland 2018
+April 24-26 in Helsinki, Finland
+
+[Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland)
+
 ### ReactEurope 2018
 May 17-18 in Paris, France
 

From 76988ced6f9171f91d763f11eacb8ca414a732f0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Thu, 21 Dec 2017 09:00:58 -0800
Subject: [PATCH 07/23] Bumped deps. Added gatsby-remark-embed-snippet.

---
 gatsby-config.js |   7 +
 package.json     |   1 +
 yarn.lock        | 393 ++++++++++++++++++++++++++---------------------
 3 files changed, 227 insertions(+), 174 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index 6c65bdf2..ebfe67f9 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -69,6 +69,13 @@ module.exports = {
               target: '_blank',
             },
           },
+          {
+            resolve: 'gatsby-remark-embed-snippet',
+            options: {
+              classPrefix: 'gatsby-code-',
+              directory: `${__dirname}/examples/`,
+            },
+          },
           'gatsby-remark-use-jsx',
           {
             resolve: 'gatsby-remark-prismjs',
diff --git a/package.json b/package.json
index 1449a589..e46a1d3b 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "gatsby-remark-autolink-headers": "^1.4.4",
     "gatsby-remark-code-repls": "^1.0.2",
     "gatsby-remark-copy-linked-files": "^1.5.2",
+    "gatsby-remark-embed-snippet": "^1.0.3",
     "gatsby-remark-images": "^1.5.11",
     "gatsby-remark-prismjs": "^1.2.1",
     "gatsby-remark-responsive-iframe": "^1.4.3",
diff --git a/yarn.lock b/yarn.lock
index f85a39ed..54c9bf22 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,59 @@
 # yarn lockfile v1
 
 
+"@babel/code-frame@7.0.0-beta.31":
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.31.tgz#473d021ecc573a2cce1c07d5b509d5215f46ba35"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
+"@babel/helper-function-name@7.0.0-beta.31":
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.31.tgz#afe63ad799209989348b1109b44feb66aa245f57"
+  dependencies:
+    "@babel/helper-get-function-arity" "7.0.0-beta.31"
+    "@babel/template" "7.0.0-beta.31"
+    "@babel/traverse" "7.0.0-beta.31"
+    "@babel/types" "7.0.0-beta.31"
+
+"@babel/helper-get-function-arity@7.0.0-beta.31":
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.31.tgz#1176d79252741218e0aec872ada07efb2b37a493"
+  dependencies:
+    "@babel/types" "7.0.0-beta.31"
+
+"@babel/template@7.0.0-beta.31":
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.31.tgz#577bb29389f6c497c3e7d014617e7d6713f68bda"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.31"
+    "@babel/types" "7.0.0-beta.31"
+    babylon "7.0.0-beta.31"
+    lodash "^4.2.0"
+
+"@babel/traverse@7.0.0-beta.31":
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.31.tgz#db399499ad74aefda014f0c10321ab255134b1df"
+  dependencies:
+    "@babel/code-frame" "7.0.0-beta.31"
+    "@babel/helper-function-name" "7.0.0-beta.31"
+    "@babel/types" "7.0.0-beta.31"
+    babylon "7.0.0-beta.31"
+    debug "^3.0.1"
+    globals "^10.0.0"
+    invariant "^2.2.0"
+    lodash "^4.2.0"
+
+"@babel/types@7.0.0-beta.31":
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.31.tgz#42c9c86784f674c173fb21882ca9643334029de4"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
 "@types/node@*":
   version "8.0.50"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.50.tgz#dc545448e128c88c4eec7cd64025fcc3b7604541"
@@ -40,9 +93,9 @@ acorn@^3.0.0, acorn@^3.0.4, acorn@^3.1.0, acorn@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
 
-acorn@^5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.2.tgz#911cb53e036807cf0fa778dc5d370fbd864246d7"
+acorn@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.2.1.tgz#317ac7821826c22c702d66189ab8359675f135d7"
 
 address@1.0.3, address@^1.0.1:
   version "1.0.3"
@@ -72,7 +125,7 @@ ajv@^5.1.0:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
-ajv@^5.2.0, ajv@^5.2.3:
+ajv@^5.2.3:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.3.tgz#c06f598778c44c6b161abafe3466b81ad1814ed2"
   dependencies:
@@ -81,6 +134,15 @@ ajv@^5.2.0, ajv@^5.2.3:
     json-schema-traverse "^0.3.0"
     json-stable-stringify "^1.0.1"
 
+ajv@^5.3.0:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
+  dependencies:
+    co "^4.6.0"
+    fast-deep-equal "^1.0.0"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.3.0"
+
 align-text@^0.1.1, align-text@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
@@ -421,14 +483,6 @@ babel-code-frame@6.26.0, babel-code-frame@^6.11.0, babel-code-frame@^6.22.0, bab
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
-babel-code-frame@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-7.0.0-beta.0.tgz#418a7b5f3f7dc9a4670e61b1158b4c5661bec98d"
-  dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^3.0.0"
-
 babel-core@^6.24.1, babel-core@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
@@ -454,13 +508,13 @@ babel-core@^6.24.1, babel-core@^6.26.0:
     source-map "^0.5.6"
 
 babel-eslint@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.0.1.tgz#5d718be7a328625d006022eb293ed3008cbd6346"
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.0.3.tgz#f29ecf02336be438195325cd47c468da81ee4e98"
   dependencies:
-    babel-code-frame "7.0.0-beta.0"
-    babel-traverse "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-    babylon "7.0.0-beta.22"
+    "@babel/code-frame" "7.0.0-beta.31"
+    "@babel/traverse" "7.0.0-beta.31"
+    "@babel/types" "7.0.0-beta.31"
+    babylon "7.0.0-beta.31"
 
 babel-generator@^6.24.1, babel-generator@^6.26.0:
   version "6.26.0"
@@ -534,15 +588,6 @@ babel-helper-explode-class@^6.24.1:
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
-babel-helper-function-name@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-7.0.0-beta.0.tgz#d1b6779b647e5c5c31ebeb05e13b998e4d352d56"
-  dependencies:
-    babel-helper-get-function-arity "7.0.0-beta.0"
-    babel-template "7.0.0-beta.0"
-    babel-traverse "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-
 babel-helper-function-name@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz#d3475b8c03ed98242a25b48351ab18399d3580a9"
@@ -553,12 +598,6 @@ babel-helper-function-name@^6.24.1:
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
-babel-helper-get-function-arity@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-7.0.0-beta.0.tgz#9d1ab7213bb5efe1ef1638a8ea1489969b5a8b6e"
-  dependencies:
-    babel-types "7.0.0-beta.0"
-
 babel-helper-get-function-arity@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz#8f7782aa93407c41d3aa50908f89b031b1b6853d"
@@ -625,10 +664,6 @@ babel-loader@^6.0.0:
     mkdirp "^0.5.1"
     object-assign "^4.0.1"
 
-babel-messages@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-7.0.0-beta.0.tgz#6df01296e49fc8fbd0637394326a167f36da817b"
-
 babel-messages@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
@@ -1212,15 +1247,6 @@ babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runti
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
-babel-template@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-7.0.0-beta.0.tgz#85083cf9e4395d5e48bf5154d7a8d6991cafecfb"
-  dependencies:
-    babel-traverse "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-    babylon "7.0.0-beta.22"
-    lodash "^4.2.0"
-
 babel-template@^6.24.1, babel-template@^6.26.0, babel-template@^6.9.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
@@ -1231,20 +1257,6 @@ babel-template@^6.24.1, babel-template@^6.26.0, babel-template@^6.9.0:
     babylon "^6.18.0"
     lodash "^4.17.4"
 
-babel-traverse@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-7.0.0-beta.0.tgz#da14be9b762f62a2f060db464eaafdd8cd072a41"
-  dependencies:
-    babel-code-frame "7.0.0-beta.0"
-    babel-helper-function-name "7.0.0-beta.0"
-    babel-messages "7.0.0-beta.0"
-    babel-types "7.0.0-beta.0"
-    babylon "7.0.0-beta.22"
-    debug "^3.0.1"
-    globals "^10.0.0"
-    invariant "^2.2.0"
-    lodash "^4.2.0"
-
 babel-traverse@^6.24.1, babel-traverse@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
@@ -1259,14 +1271,6 @@ babel-traverse@^6.24.1, babel-traverse@^6.26.0:
     invariant "^2.2.2"
     lodash "^4.17.4"
 
-babel-types@7.0.0-beta.0:
-  version "7.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-7.0.0-beta.0.tgz#eb8b6e556470e6dcc4aef982d79ad229469b5169"
-  dependencies:
-    esutils "^2.0.2"
-    lodash "^4.2.0"
-    to-fast-properties "^2.0.0"
-
 babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
@@ -1276,9 +1280,9 @@ babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
-babylon@7.0.0-beta.22:
-  version "7.0.0-beta.22"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.22.tgz#74f0ad82ed7c7c3cfeab74cf684f815104161b65"
+babylon@7.0.0-beta.31:
+  version "7.0.0-beta.31"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.31.tgz#7ec10f81e0e456fd0f855ad60fa30c2ac454283f"
 
 babylon@^6.17.3, babylon@^6.18.0:
   version "6.18.0"
@@ -1385,6 +1389,18 @@ better-assert@~1.0.0:
   dependencies:
     callsite "1.0.0"
 
+better-queue-memory@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/better-queue-memory/-/better-queue-memory-1.0.2.tgz#aa6d169aa1d0cc77409185cb9cb5c7dc251bcd41"
+
+better-queue@^3.8.6:
+  version "3.8.6"
+  resolved "https://registry.yarnpkg.com/better-queue/-/better-queue-3.8.6.tgz#73220bdfab403924cffa7497220dd387abb73a63"
+  dependencies:
+    better-queue-memory "^1.0.1"
+    node-eta "^0.9.0"
+    uuid "^3.0.0"
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -2782,6 +2798,12 @@ doctrine@^2.0.0:
     esutils "^2.0.2"
     isarray "^1.0.0"
 
+doctrine@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.2.tgz#68f96ce8efc56cc42651f1faadb4f175273b0075"
+  dependencies:
+    esutils "^2.0.2"
+
 dom-converter@~0.1:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
@@ -3117,12 +3139,12 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
 eslint-config-fbjs@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-fbjs/-/eslint-config-fbjs-2.0.0.tgz#9f6ed690f500c2d750bf651e0cf1c65cf10b1c14"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-fbjs/-/eslint-config-fbjs-2.0.1.tgz#395896fd740e0e28dc1c2072e3bc982e88247df5"
 
 eslint-config-prettier@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.6.0.tgz#f21db0ebb438ad678fb98946097c4bb198befccc"
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.9.0.tgz#5ecd65174d486c22dff389fe036febf502d468a3"
   dependencies:
     get-stdin "^5.0.1"
 
@@ -3135,14 +3157,14 @@ eslint-plugin-babel@^4.1.2:
   resolved "https://registry.yarnpkg.com/eslint-plugin-babel/-/eslint-plugin-babel-4.1.2.tgz#79202a0e35757dd92780919b2336f1fa2fe53c1e"
 
 eslint-plugin-flowtype@^2.39.1:
-  version "2.39.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.39.1.tgz#b5624622a0388bcd969f4351131232dcb9649cd5"
+  version "2.40.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.40.1.tgz#f78a8e6a4cc6da831dd541eb61e803ff0279b796"
   dependencies:
     lodash "^4.15.0"
 
 eslint-plugin-jsx-a11y@^6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.0.2.tgz#659277a758b036c305a7e4a13057c301cd3be73f"
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.0.3.tgz#54583d1ae442483162e040e13cc31865465100e5"
   dependencies:
     aria-query "^0.7.0"
     array-includes "^3.0.3"
@@ -3150,23 +3172,23 @@ eslint-plugin-jsx-a11y@^6.0.2:
     axobject-query "^0.1.0"
     damerau-levenshtein "^1.0.0"
     emoji-regex "^6.1.0"
-    jsx-ast-utils "^1.4.0"
+    jsx-ast-utils "^2.0.0"
 
 eslint-plugin-prettier@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.3.1.tgz#e7a746c67e716f335274b88295a9ead9f544e44d"
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.4.0.tgz#85cab0775c6d5e3344ef01e78d960f166fb93aae"
   dependencies:
     fast-diff "^1.1.1"
     jest-docblock "^21.0.0"
 
 eslint-plugin-react@^7.4.0:
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.4.0.tgz#300a95861b9729c087d362dd64abcc351a74364a"
+  version "7.5.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.5.1.tgz#52e56e8d80c810de158859ef07b880d2f56ee30b"
   dependencies:
     doctrine "^2.0.0"
     has "^1.0.1"
     jsx-ast-utils "^2.0.0"
-    prop-types "^15.5.10"
+    prop-types "^15.6.0"
 
 eslint-plugin-relay@^0.0.19:
   version "0.0.19"
@@ -3182,31 +3204,31 @@ eslint-scope@^3.7.1:
     estraverse "^4.1.1"
 
 eslint@^4.8.0:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.8.0.tgz#229ef0e354e0e61d837c7a80fdfba825e199815e"
+  version "4.13.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.13.1.tgz#0055e0014464c7eb7878caf549ef2941992b444f"
   dependencies:
-    ajv "^5.2.0"
+    ajv "^5.3.0"
     babel-code-frame "^6.22.0"
     chalk "^2.1.0"
     concat-stream "^1.6.0"
     cross-spawn "^5.1.0"
     debug "^3.0.1"
-    doctrine "^2.0.0"
+    doctrine "^2.0.2"
     eslint-scope "^3.7.1"
-    espree "^3.5.1"
+    espree "^3.5.2"
     esquery "^1.0.0"
     estraverse "^4.2.0"
     esutils "^2.0.2"
     file-entry-cache "^2.0.0"
     functional-red-black-tree "^1.0.1"
     glob "^7.1.2"
-    globals "^9.17.0"
+    globals "^11.0.1"
     ignore "^3.3.3"
     imurmurhash "^0.1.4"
     inquirer "^3.0.6"
     is-resolvable "^1.0.0"
     js-yaml "^3.9.1"
-    json-stable-stringify "^1.0.1"
+    json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.3.0"
     lodash "^4.17.4"
     minimatch "^3.0.2"
@@ -3230,11 +3252,11 @@ esniff@^1.1:
     d "1"
     es5-ext "^0.10.12"
 
-espree@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.1.tgz#0c988b8ab46db53100a1954ae4ba995ddd27d87e"
+espree@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.2.tgz#756ada8b979e9dcfcdb30aad8d1a9304a905e1ca"
   dependencies:
-    acorn "^5.1.1"
+    acorn "^5.2.1"
     acorn-jsx "^3.0.0"
 
 esprima@^2.6.0:
@@ -3900,9 +3922,9 @@ gatsby-1-config-css-modules@^1.0.8:
   dependencies:
     babel-runtime "^6.26.0"
 
-gatsby-cli@^1.1.27:
-  version "1.1.27"
-  resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-1.1.27.tgz#40be97cde1721ee61c25d21a21c84867e7ba3678"
+gatsby-cli@^1.1.28:
+  version "1.1.28"
+  resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-1.1.28.tgz#0d0a397566154a3ce3e4680d545c9cfdc33ad95b"
   dependencies:
     babel-code-frame "^6.26.0"
     babel-runtime "^6.26.0"
@@ -3922,7 +3944,7 @@ gatsby-cli@^1.1.27:
     yargs "^8.0.2"
     yurnalist "^0.2.1"
 
-gatsby-link@^1.6.30:
+gatsby-link@^1.6.30, gatsby-link@^1.6.9:
   version "1.6.32"
   resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.32.tgz#49114e5fc649f274254953e06bfaafebb296ccb8"
   dependencies:
@@ -3930,14 +3952,6 @@ gatsby-link@^1.6.30:
     prop-types "^15.5.8"
     ric "^1.3.0"
 
-gatsby-link@^1.6.9:
-  version "1.6.30"
-  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.30.tgz#d75a7ceaa9e138b5f4f64cc6dbf1e0632876bd09"
-  dependencies:
-    babel-runtime "^6.26.0"
-    prop-types "^15.5.8"
-    ric "^1.3.0"
-
 gatsby-module-loader@^1.0.9:
   version "1.0.9"
   resolved "https://registry.yarnpkg.com/gatsby-module-loader/-/gatsby-module-loader-1.0.9.tgz#a33f3496589577749d2fbb680f7bab9ddcc86172"
@@ -3946,14 +3960,14 @@ gatsby-module-loader@^1.0.9:
     loader-utils "^0.2.16"
 
 gatsby-plugin-catch-links@^1.0.9:
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-catch-links/-/gatsby-plugin-catch-links-1.0.13.tgz#c02d68efe4f8a95475cc6549db75034a6420def8"
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-catch-links/-/gatsby-plugin-catch-links-1.0.14.tgz#e003f51dac46225eccff1ec9daca0ee64e7d4fe5"
   dependencies:
     babel-runtime "^6.26.0"
 
 gatsby-plugin-feed@^1.3.9:
-  version "1.3.14"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-feed/-/gatsby-plugin-feed-1.3.14.tgz#c27bbaccc16d58e5fdbadc73573810032e380b84"
+  version "1.3.15"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-feed/-/gatsby-plugin-feed-1.3.15.tgz#c691f5022a9ed92d7148f1f9594c115901d2de2a"
   dependencies:
     babel-runtime "^6.26.0"
     lodash.merge "^4.6.0"
@@ -3961,28 +3975,28 @@ gatsby-plugin-feed@^1.3.9:
     rss "^1.2.2"
 
 gatsby-plugin-glamor@^1.6.4:
-  version "1.6.9"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-glamor/-/gatsby-plugin-glamor-1.6.9.tgz#10bee3ce76cbcc676466b3c43cb1efe7e7c0ce31"
+  version "1.6.10"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-glamor/-/gatsby-plugin-glamor-1.6.10.tgz#40057d4b9562d2ee94d8b7d643327b6bb601783d"
   dependencies:
     babel-runtime "^6.26.0"
     glamor "^2.20.29"
 
 gatsby-plugin-google-analytics@^1.0.4:
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-google-analytics/-/gatsby-plugin-google-analytics-1.0.13.tgz#ada2af1d797d86e589ef7354bf54c4404157578c"
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-google-analytics/-/gatsby-plugin-google-analytics-1.0.14.tgz#21fed8b4cbb13f5a638d35024e72dd3dd7e74051"
   dependencies:
     babel-runtime "^6.26.0"
 
 gatsby-plugin-manifest@^1.0.4:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-1.0.9.tgz#efdbac6e65ce9d759ce1ed3c8054e492f8f2b30e"
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-1.0.12.tgz#52341f1b1b7bb7b3ac00227e2ccb2659364f0151"
   dependencies:
     babel-runtime "^6.26.0"
     bluebird "^3.5.0"
 
 gatsby-plugin-netlify@^1.0.4:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-netlify/-/gatsby-plugin-netlify-1.0.9.tgz#dabf64a729e86f633290a23ef67d82e506adf6b0"
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-netlify/-/gatsby-plugin-netlify-1.0.12.tgz#bf6e4d5fe1bd60a5e6c3b1a2ed02a9a805be61ef"
   dependencies:
     babel-runtime "^6.26.0"
     fs-extra "^4.0.2"
@@ -3990,8 +4004,8 @@ gatsby-plugin-netlify@^1.0.4:
     webpack-assets-manifest "^1.0.0"
 
 gatsby-plugin-nprogress@^1.0.7:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-nprogress/-/gatsby-plugin-nprogress-1.0.8.tgz#d57aa93ec572641f46bb043f3f8c2052788cee79"
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-nprogress/-/gatsby-plugin-nprogress-1.0.9.tgz#5d93af3e4fd6809c7df5676faf7a478a027e6e8b"
   dependencies:
     babel-runtime "^6.26.0"
     nprogress "^0.2.0"
@@ -4004,17 +4018,17 @@ gatsby-plugin-react-helmet@^1.0.3:
     react-helmet "^5.1.3"
 
 gatsby-plugin-react-next@^1.0.3:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-react-next/-/gatsby-plugin-react-next-1.0.5.tgz#dbc7d2e8424d39dbbfa6b3ff136b555d594de1f1"
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-react-next/-/gatsby-plugin-react-next-1.0.7.tgz#9547d1afaad5bae6c73956099bba29df8921f6f0"
   dependencies:
     babel-runtime "^6.26.0"
     core-js "^2.5.1"
     react "^16.0.0"
     react-dom "^16.0.0"
 
-gatsby-plugin-sharp@^1.6.2, gatsby-plugin-sharp@^1.6.22:
-  version "1.6.22"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-1.6.22.tgz#7d1c71a881e89c4327450b15820d4614eb72e6e3"
+gatsby-plugin-sharp@^1.6.2, gatsby-plugin-sharp@^1.6.24:
+  version "1.6.24"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-1.6.24.tgz#f885a384b222f655534e45788a99863a038bf107"
   dependencies:
     async "^2.1.2"
     babel-runtime "^6.26.0"
@@ -4030,22 +4044,22 @@ gatsby-plugin-sharp@^1.6.2, gatsby-plugin-sharp@^1.6.22:
     svgo "^0.7.2"
 
 gatsby-plugin-twitter@^1.0.10:
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/gatsby-plugin-twitter/-/gatsby-plugin-twitter-1.0.13.tgz#25a7c12c9e044834f22041667c1db782613f8746"
+  version "1.0.14"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-twitter/-/gatsby-plugin-twitter-1.0.14.tgz#3d03a75155380ed6d0aaa3efd18a483e38bd8196"
   dependencies:
     babel-runtime "^6.26.0"
 
-gatsby-react-router-scroll@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.6.tgz#7cf83afec00ed5441522c3db3b84ec4a12df509a"
+gatsby-react-router-scroll@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.7.tgz#50be2d6d3857625eb087c14f2a6789672fd73219"
   dependencies:
     babel-runtime "^6.26.0"
     scroll-behavior "^0.9.1"
     warning "^3.0.0"
 
 gatsby-remark-autolink-headers@^1.4.4:
-  version "1.4.9"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-1.4.9.tgz#2eb6c0497d43a1b2600683913fa3288e7be8ac25"
+  version "1.4.10"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-1.4.10.tgz#68e84e6c4b618a668a4d21cbdc155fc95a57b2f8"
   dependencies:
     babel-runtime "^6.26.0"
     github-slugger "^1.1.1"
@@ -4053,18 +4067,19 @@ gatsby-remark-autolink-headers@^1.4.4:
     unist-util-visit "^1.1.1"
 
 gatsby-remark-code-repls@^1.0.2:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-code-repls/-/gatsby-remark-code-repls-1.0.6.tgz#a1be02f9e7cb7b3d091bae24a9e8a5d065c5dc3a"
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-code-repls/-/gatsby-remark-code-repls-1.0.8.tgz#d498cfae010508ddb26162aa7f8a31d2b1dfed35"
   dependencies:
     babel-runtime "^6.26.0"
     lz-string "^1.4.4"
     normalize-path "^2.1.1"
     recursive-readdir-synchronous "^0.0.3"
     unist-util-map "^1.0.3"
+    urijs "^1.19.0"
 
 gatsby-remark-copy-linked-files@^1.5.2:
-  version "1.5.22"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-copy-linked-files/-/gatsby-remark-copy-linked-files-1.5.22.tgz#00fcc9f9809441dc350201b66905f33a28fc3e8f"
+  version "1.5.25"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-copy-linked-files/-/gatsby-remark-copy-linked-files-1.5.25.tgz#ca2098551de4df929f03b8ab0d3bfa54b9f68deb"
   dependencies:
     babel-runtime "^6.26.0"
     cheerio "^1.0.0-rc.2"
@@ -4075,21 +4090,31 @@ gatsby-remark-copy-linked-files@^1.5.2:
     path-is-inside "^1.0.2"
     unist-util-visit "^1.1.1"
 
+gatsby-remark-embed-snippet@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-embed-snippet/-/gatsby-remark-embed-snippet-1.0.3.tgz#50cfd94d1584cc1c851ba5609dbb8fc6a0dfb4f6"
+  dependencies:
+    babel-runtime "^6.26.0"
+    gatsby-remark-prismjs "^1.2.11"
+    normalize-path "^2.1.1"
+    parse-numeric-range "^0.0.2"
+    unist-util-map "^1.0.3"
+
 gatsby-remark-images@^1.5.11:
-  version "1.5.33"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-1.5.33.tgz#41f3a7eb68d4f59f5868401242ef217c3a7f2189"
+  version "1.5.36"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-1.5.36.tgz#12920b1c1969d519befd4c661201c28e30a896a8"
   dependencies:
     babel-runtime "^6.26.0"
     cheerio "^1.0.0-rc.2"
-    gatsby-plugin-sharp "^1.6.22"
+    gatsby-plugin-sharp "^1.6.24"
     is-relative-url "^2.0.0"
     lodash "^4.17.4"
     slash "^1.0.0"
     unist-util-select "^1.5.0"
 
-gatsby-remark-prismjs@^1.2.1:
-  version "1.2.10"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-prismjs/-/gatsby-remark-prismjs-1.2.10.tgz#0cdc07473acec50ebadcf276a39d19660af0ae60"
+gatsby-remark-prismjs@^1.2.1, gatsby-remark-prismjs@^1.2.11:
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-prismjs/-/gatsby-remark-prismjs-1.2.11.tgz#2e0705c228ef8d282785f0f922ffd629126cbdf2"
   dependencies:
     babel-runtime "^6.26.0"
     parse-numeric-range "^0.0.2"
@@ -4097,8 +4122,8 @@ gatsby-remark-prismjs@^1.2.1:
     unist-util-visit "^1.1.1"
 
 gatsby-remark-responsive-iframe@^1.4.3:
-  version "1.4.15"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-responsive-iframe/-/gatsby-remark-responsive-iframe-1.4.15.tgz#ea27ddc51377f781fd9d607b37c12dd84968eb54"
+  version "1.4.16"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-responsive-iframe/-/gatsby-remark-responsive-iframe-1.4.16.tgz#38efb84a4b6f0f9704afb45970bf8b8a7668c446"
   dependencies:
     babel-runtime "^6.26.0"
     bluebird "^3.5.0"
@@ -4107,8 +4132,8 @@ gatsby-remark-responsive-iframe@^1.4.3:
     unist-util-visit "^1.1.1"
 
 gatsby-remark-smartypants@^1.4.3:
-  version "1.4.9"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-smartypants/-/gatsby-remark-smartypants-1.4.9.tgz#ed48782849bc4fbac44e1365822b436f9766c2ae"
+  version "1.4.10"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-smartypants/-/gatsby-remark-smartypants-1.4.10.tgz#b04c06741529e693dc54fe23e191edb3cf0aea9e"
   dependencies:
     babel-runtime "^6.26.0"
     retext "^4.0.0"
@@ -4116,8 +4141,8 @@ gatsby-remark-smartypants@^1.4.3:
     unist-util-visit "^1.1.1"
 
 gatsby-source-filesystem@^1.4.4:
-  version "1.5.9"
-  resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.9.tgz#f732d9e51be1b622e8416695c8cf1acd9483e822"
+  version "1.5.11"
+  resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.11.tgz#bc2f9bdcc71212df42d45ae0b8adc7e37540b599"
   dependencies:
     babel-cli "^6.26.0"
     babel-runtime "^6.26.0"
@@ -4132,8 +4157,8 @@ gatsby-source-filesystem@^1.4.4:
     valid-url "^1.0.9"
 
 gatsby-transformer-remark@^1.7.2:
-  version "1.7.23"
-  resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-1.7.23.tgz#a0510889334223340f39244348b391be36806f6b"
+  version "1.7.25"
+  resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-1.7.25.tgz#7fb1a0447270f780d933b838c16b0a82aa195d72"
   dependencies:
     babel-runtime "^6.26.0"
     bluebird "^3.5.0"
@@ -4154,8 +4179,8 @@ gatsby-transformer-remark@^1.7.2:
     unist-util-visit "^1.1.1"
 
 gatsby-transformer-sharp@^1.6.1:
-  version "1.6.15"
-  resolved "https://registry.yarnpkg.com/gatsby-transformer-sharp/-/gatsby-transformer-sharp-1.6.15.tgz#da4a4453a6c85c6224e93225b476088b60c90658"
+  version "1.6.16"
+  resolved "https://registry.yarnpkg.com/gatsby-transformer-sharp/-/gatsby-transformer-sharp-1.6.16.tgz#16464dcfbb2099f49805b2e244da0b3fea63b88e"
   dependencies:
     babel-runtime "^6.26.0"
     bluebird "^3.5.0"
@@ -4163,8 +4188,8 @@ gatsby-transformer-sharp@^1.6.1:
     image-size "^0.6.0"
 
 gatsby@^1.9.135:
-  version "1.9.135"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.135.tgz#7ab1c684c8556cb4324b4888d77efd1a919fc4e0"
+  version "1.9.146"
+  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.146.tgz#2fb9a354dbc2f064e425e6e984c6f70947b179b0"
   dependencies:
     async "^2.1.2"
     babel-code-frame "^6.22.0"
@@ -4180,6 +4205,7 @@ gatsby@^1.9.135:
     babel-runtime "^6.26.0"
     babel-traverse "^6.24.1"
     babylon "^6.17.3"
+    better-queue "^3.8.6"
     bluebird "^3.5.0"
     chalk "^1.1.3"
     chokidar "^1.7.0"
@@ -4203,14 +4229,14 @@ gatsby@^1.9.135:
     front-matter "^2.1.0"
     fs-extra "^4.0.1"
     gatsby-1-config-css-modules "^1.0.8"
-    gatsby-cli "^1.1.27"
+    gatsby-cli "^1.1.28"
     gatsby-link "^1.6.30"
     gatsby-module-loader "^1.0.9"
-    gatsby-react-router-scroll "^1.0.6"
+    gatsby-react-router-scroll "^1.0.7"
     glob "^7.1.1"
     graphql "^0.11.7"
     graphql-relay "^0.5.1"
-    graphql-skip-limit "^1.0.8"
+    graphql-skip-limit "^1.0.9"
     history "^4.6.2"
     invariant "^2.2.2"
     is-relative "^0.2.1"
@@ -4222,6 +4248,7 @@ gatsby@^1.9.135:
     lodash "^4.17.4"
     lodash-id "^0.14.0"
     lowdb "^0.16.2"
+    md5 "^2.2.1"
     md5-file "^3.1.1"
     mime "^1.3.6"
     mitt "^1.1.2"
@@ -4469,7 +4496,11 @@ globals@^10.0.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-10.1.0.tgz#4425a1881be0d336b4a823a82a7be725d5dd987c"
 
-globals@^9.17.0, globals@^9.18.0:
+globals@^11.0.1:
+  version "11.1.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.1.0.tgz#632644457f5f0e3ae711807183700ebf2e4633e4"
+
+globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
 
@@ -4573,9 +4604,9 @@ graphql-relay@^0.5.1:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/graphql-relay/-/graphql-relay-0.5.3.tgz#56a78ac07c87d89795a34db6b8e9681b827be5b5"
 
-graphql-skip-limit@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/graphql-skip-limit/-/graphql-skip-limit-1.0.8.tgz#c2a51254070f58cac60ac42868f1a0010c6e2c26"
+graphql-skip-limit@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/graphql-skip-limit/-/graphql-skip-limit-1.0.9.tgz#20d0de6bd6cf3460c4fdcee3d6b379634d0d44b7"
   dependencies:
     babel-runtime "^6.26.0"
     graphql "^0.11.7"
@@ -5657,6 +5688,10 @@ json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
 
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+
 json-stable-stringify@^1.0.0, json-stable-stringify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
@@ -5759,10 +5794,6 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-jsx-ast-utils@^1.4.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
-
 jsx-ast-utils@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f"
@@ -6286,7 +6317,7 @@ md5.js@^1.3.4:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
-md5@^2.0.0:
+md5@^2.0.0, md5@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/md5/-/md5-2.2.1.tgz#53ab38d5fe3c8891ba465329ea23fac0540126f9"
   dependencies:
@@ -6641,6 +6672,10 @@ node-emoji@^1.0.4:
   dependencies:
     lodash.toarray "^4.4.0"
 
+node-eta@^0.9.0:
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/node-eta/-/node-eta-0.9.0.tgz#9fb0b099bcd2a021940e603c64254dc003d9a7a8"
+
 node-fetch@^1.0.1:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
@@ -7913,8 +7948,8 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
 prettier@^1.7.4:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.7.4.tgz#5e8624ae9363c80f95ec644584ecdf55d74f93fa"
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.9.2.tgz#96bc2132f7a32338e6078aeb29727178c6335827"
 
 pretty-bytes@^4.0.2:
   version "4.0.2"
@@ -9234,8 +9269,8 @@ slice-ansi@1.0.0:
     is-fullwidth-code-point "^2.0.0"
 
 slugify@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.2.1.tgz#2118f4b0fbcfd79d7b2c451c22b724e5c1991330"
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.2.7.tgz#49998fa5f26e001ca366298937ad25fb6e9742cf"
 
 snapdragon-node@^2.0.1:
   version "2.1.1"
@@ -10235,7 +10270,7 @@ unist-util-generated@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.1.tgz#99f16c78959ac854dee7c615c291924c8bf4de7f"
 
-unist-util-is@^2.0.0:
+unist-util-is@^2.0.0, unist-util-is@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.1.tgz#0c312629e3f960c66e931e812d3d80e77010947b"
 
@@ -10277,10 +10312,16 @@ unist-util-visit-children@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unist-util-visit-children/-/unist-util-visit-children-1.1.1.tgz#eba63b371116231181068837118b6e6e10ec8844"
 
-unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.1, unist-util-visit@^1.1.3:
+unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.1.3.tgz#ec268e731b9d277a79a5b5aa0643990e405d600b"
 
+unist-util-visit@^1.1.3:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.3.0.tgz#41ca7c82981fd1ce6c762aac397fc24e35711444"
+  dependencies:
+    unist-util-is "^2.1.1"
+
 units-css@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/units-css/-/units-css-0.4.0.tgz#d6228653a51983d7c16ff28f8b9dc3b1ffed3a07"
@@ -10325,6 +10366,10 @@ update-notifier@2.3.0, update-notifier@^2.3.0:
     semver-diff "^2.0.0"
     xdg-basedir "^3.0.0"
 
+urijs@^1.19.0:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.0.tgz#d8aa284d0e7469703a6988ad045c4cbfdf08ada0"
+
 urix@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"

From bb55d1083b9300c13a45db0c76a667b0f680e90f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Thu, 21 Dec 2017 09:22:05 -0800
Subject: [PATCH 08/23] Re-ran Prettier after version bump

---
 gatsby-config.js                                       |  2 +-
 plugins/gatsby-source-react-error-codes/gatsby-node.js |  4 +++-
 src/components/CodeEditor/CodeEditor.js                |  3 ++-
 src/components/MarkdownPage/MarkdownPage.js            |  5 +++--
 src/pages/acknowledgements.html.js                     |  8 ++------
 src/theme.js                                           | 10 ++++++----
 6 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index ebfe67f9..66f84a54 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -2,7 +2,7 @@
  * Copyright (c) 2013-present, Facebook, Inc.
  *
  * @emails react-core
-*/
+ */
 
 'use strict';
 
diff --git a/plugins/gatsby-source-react-error-codes/gatsby-node.js b/plugins/gatsby-source-react-error-codes/gatsby-node.js
index eef00fbe..cde9ef59 100644
--- a/plugins/gatsby-source-react-error-codes/gatsby-node.js
+++ b/plugins/gatsby-source-react-error-codes/gatsby-node.js
@@ -20,7 +20,9 @@ exports.sourceNodes = async ({boundActionCreators}) => {
     });
   } catch (error) {
     console.error(
-      `The gatsby-source-react-error-codes plugin has failed:\n${error.message}`,
+      `The gatsby-source-react-error-codes plugin has failed:\n${
+        error.message
+      }`,
     );
 
     process.exit(1);
diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index f4f187f3..efaab557 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -146,7 +146,8 @@ class CodeEditor extends Component {
                     <input
                       checked={this.state.showJSX}
                       onChange={event =>
-                        this.setState({showJSX: event.target.checked})}
+                        this.setState({showJSX: event.target.checked})
+                      }
                       type="checkbox"
                     />{' '}
                     JSX?
diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js
index 634bed23..b727f825 100644
--- a/src/components/MarkdownPage/MarkdownPage.js
+++ b/src/components/MarkdownPage/MarkdownPage.js
@@ -97,8 +97,9 @@ const MarkdownPage = ({
                   <div css={{marginTop: 80}}>
                     <a
                       css={sharedStyles.articleLayout.editLink}
-                      href={`https://github.com/reactjs/reactjs.org/tree/master/content/${markdownRemark
-                        .fields.path}`}>
+                      href={`https://github.com/reactjs/reactjs.org/tree/master/content/${
+                        markdownRemark.fields.path
+                      }`}>
                       Edit this page
                     </a>
                   </div>
diff --git a/src/pages/acknowledgements.html.js b/src/pages/acknowledgements.html.js
index 5252e13b..948a6bfa 100644
--- a/src/pages/acknowledgements.html.js
+++ b/src/pages/acknowledgements.html.js
@@ -52,9 +52,7 @@ const Acknowlegements = ({data, location}) => (
             </li>
             <li>
               <a href="http://christopheraue.net/">Christopher Aue</a> for
-              letting us use the <a href="http://reactjs.com/">
-                reactjs.com
-              </a>{' '}
+              letting us use the <a href="http://reactjs.com/">reactjs.com</a>{' '}
               domain name and the{' '}
               <a href="https://twitter.com/reactjs">@reactjs</a> username on
               Twitter.
@@ -70,9 +68,7 @@ const Acknowlegements = ({data, location}) => (
               <a href="https://github.com/react">react</a> org on GitHub.
             </li>
             <li>
-              <a href="https://github.com/voronianski">
-                Dmitri Voronianski
-              </a>{' '}
+              <a href="https://github.com/voronianski">Dmitri Voronianski</a>{' '}
               for letting us use the{' '}
               <a href="https://labs.voronianski.com/oceanic-next-color-scheme/">
                 Oceanic Next
diff --git a/src/theme.js b/src/theme.js
index 38ce19f0..9da7e3e4 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -45,14 +45,16 @@ type Size = $Keys<typeof SIZES>;
 const media = {
   between(smallKey: Size, largeKey: Size, excludeLarge: boolean = false) {
     if (excludeLarge) {
-      return `@media (min-width: ${SIZES[smallKey]
-        .min}px) and (max-width: ${SIZES[largeKey].min - 1}px)`;
+      return `@media (min-width: ${
+        SIZES[smallKey].min
+      }px) and (max-width: ${SIZES[largeKey].min - 1}px)`;
     } else {
       if (SIZES[largeKey].max === Infinity) {
         return `@media (min-width: ${SIZES[smallKey].min}px)`;
       } else {
-        return `@media (min-width: ${SIZES[smallKey]
-          .min}px) and (max-width: ${SIZES[largeKey].max}px)`;
+        return `@media (min-width: ${SIZES[smallKey].min}px) and (max-width: ${
+          SIZES[largeKey].max
+        }px)`;
       }
     }
   },

From 76ddd9353b06cba01a2602ef1f78f2223cb66c17 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Thu, 21 Dec 2017 10:36:46 -0800
Subject: [PATCH 09/23] Bumped gatsby & gatsby-remark-embed-snippet

---
 yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 54c9bf22..cdb0df8f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4091,8 +4091,8 @@ gatsby-remark-copy-linked-files@^1.5.2:
     unist-util-visit "^1.1.1"
 
 gatsby-remark-embed-snippet@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-embed-snippet/-/gatsby-remark-embed-snippet-1.0.3.tgz#50cfd94d1584cc1c851ba5609dbb8fc6a0dfb4f6"
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-embed-snippet/-/gatsby-remark-embed-snippet-1.0.5.tgz#ca3d99a642a55412b84605d8f38b9c7d9a21f2ca"
   dependencies:
     babel-runtime "^6.26.0"
     gatsby-remark-prismjs "^1.2.11"
@@ -4188,8 +4188,8 @@ gatsby-transformer-sharp@^1.6.1:
     image-size "^0.6.0"
 
 gatsby@^1.9.135:
-  version "1.9.146"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.146.tgz#2fb9a354dbc2f064e425e6e984c6f70947b179b0"
+  version "1.9.147"
+  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.147.tgz#9b4759c9af9096cdb0aad129f4e6143ff50a5fa7"
   dependencies:
     async "^2.1.2"
     babel-code-frame "^6.22.0"

From 33aa0f6b4b12bdc06370c849aacec07bd4c604c2 Mon Sep 17 00:00:00 2001
From: Vishal Raj <vishalraj1802@gmail.com>
Date: Fri, 22 Dec 2017 12:11:29 +0530
Subject: [PATCH 10/23] gatsby remark embed snippet inclusion

---
 content/docs/forms.md                         | 29 ++-----------------
 .../input-type-file.js                        |  3 +-
 2 files changed, 4 insertions(+), 28 deletions(-)
 rename examples/{components-and-props => forms}/input-type-file.js (90%)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index b3af610a..32731dce 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -199,34 +199,9 @@ In HTML, a `<input type="file">` lets the user choose one or more files from the
 
 In React, a `<input type="file" />` works similarly to a normal `<input/>` with some major differences. The `<input type="file" />` in React is read-only and hence setting the value of a file programmatically is impossible. You can use the various File management API provided by Javascript to handle the files that are uploaded by the user.
 
-```javascript{7-10,17}
-class FileInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleSubmit = this.handleSubmit.bind(this);
-  }
-
-  handleSubmit (event) {
-    event.preventDefault();
-    alert(`Selected file - ${this.fileInput.files[0].name}`);
-  }
-
-  render() {
-    return (
-      <form onSubmit={this.handleSubmit}>
-        <label>
-          Upload file:
-          <input type='file' ref={input => {this.fileInput = input}} />
-        </label>
-        <br/>
-        <button type='submit'>Submit</button>
-      </form>
-    );
-  }
-}
-```
+`embed:forms/input-type-file.js`
 
-[Try it on CodePen](codepen://components-and-props/input-type-file)
+[Try it on CodePen](codepen://forms/input-type-file)
 
 Note how a `ref` to the file input is used to access the file(s) in the submit handler
 
diff --git a/examples/components-and-props/input-type-file.js b/examples/forms/input-type-file.js
similarity index 90%
rename from examples/components-and-props/input-type-file.js
rename to examples/forms/input-type-file.js
index 18f2c6f1..5cc084d9 100644
--- a/examples/components-and-props/input-type-file.js
+++ b/examples/forms/input-type-file.js
@@ -3,7 +3,7 @@ class FileInput extends React.Component {
     super(props);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
-
+// highlight-range{1-4}
   handleSubmit (event) {
     event.preventDefault();
     alert(`Selected file - ${this.fileInput.files[0].name}`);
@@ -14,6 +14,7 @@ class FileInput extends React.Component {
       <form onSubmit={this.handleSubmit}>
         <label>
           Upload file:
+          {/* highlight-next-line */}
           <input type='file' ref={input => {this.fileInput = input}} />
         </label>
         <br/>

From 7fafb9f916ca43904c9a7df9f35c34bbac59ade3 Mon Sep 17 00:00:00 2001
From: Alex <alexkrolick@users.noreply.github.com>
Date: Sat, 23 Dec 2017 06:37:23 -0900
Subject: [PATCH 11/23] Break out Installation into top-level doc section
 (#452)

* Break out Installation into top-level doc section

* Update navigation (prev/next, nav tree)

- Move Installation section to top
- Add next/prev to install pages

* add links to other install options from try react page

* fix markdown link

* Clarify that Quick Start and Install are optional "next steps"

* Add top-level CDN page

This is useful for Codepen and other Unpkg-y setups

* Add link to Tutorial from Try React

* Update CRA link in tutorial

* Make Try React subheader a proper sentence

* Add "minimal"

* Explain local dev setup is more work than Codepen etc

* Fix typos

* Add : between headings

* add note that CRA is not lightweight

* fix typo

* Update add-react-to-a-new-app.md

* Update add-react-to-a-new-app.md

* Remove the Bower note

* Update try-react.md

* Tweak wording

* Use direct link
---
 content/docs/add-react-to-a-new-app.md        | 47 ++++++++++
 ...ion.md => add-react-to-an-existing-app.md} | 91 ++-----------------
 content/docs/cdn-links.md                     | 37 ++++++++
 content/docs/hello-world.md                   |  4 +-
 content/docs/nav.yml                          | 12 ++-
 content/docs/try-react.md                     | 41 +++++++++
 content/tutorial/tutorial.md                  |  2 +-
 src/components/LayoutFooter/Footer.js         |  8 +-
 8 files changed, 146 insertions(+), 96 deletions(-)
 create mode 100644 content/docs/add-react-to-a-new-app.md
 rename content/docs/{installation.md => add-react-to-an-existing-app.md} (51%)
 create mode 100644 content/docs/cdn-links.md
 create mode 100644 content/docs/try-react.md

diff --git a/content/docs/add-react-to-a-new-app.md b/content/docs/add-react-to-a-new-app.md
new file mode 100644
index 00000000..84fa540f
--- /dev/null
+++ b/content/docs/add-react-to-a-new-app.md
@@ -0,0 +1,47 @@
+---
+id: add-react-to-a-new-app
+title: Add React to a New Application
+permalink: docs/add-react-to-a-new-app.html
+prev: try-react.html
+next: add-react-to-an-existing-app.html
+---
+
+The easiest way to get started on a new React project is by using a starter kit.
+
+> Note:
+> 
+> Check out the [Try React](/docs/try-react.html) page if you are looking for lightweight environments to experiment with React.
+> The options on this page are designed to help bootstrap single-page applications with linting, testing, bundling, production optimizations, and more.
+
+## Create React App
+
+[Create React App](http://github.com/facebookincubator/create-react-app) is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 on your machine.
+
+```bash
+npm install -g create-react-app
+create-react-app my-app
+
+cd my-app
+npm start
+```
+
+If you have npm 5.2.0+ installed, you may use [npx](https://www.npmjs.com/package/npx) instead.
+
+```bash
+npx create-react-app my-app
+
+cd my-app
+npm start
+```
+
+Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses build tools like [Babel](http://babeljs.io/) and [webpack](https://webpack.js.org/) under the hood, but works with zero configuration.
+
+When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents).
+
+## Other Starter Kits
+
+See the Community section for a list of [starter kits](/community/starter-kits.html).
+
+## Advanced
+
+If you prefer to configure a project manually, see [Installing React](/docs/add-react-to-an-existing-app.html#installing-react) in the next section.
diff --git a/content/docs/installation.md b/content/docs/add-react-to-an-existing-app.md
similarity index 51%
rename from content/docs/installation.md
rename to content/docs/add-react-to-an-existing-app.md
index 77844cfd..8a6cf3f0 100644
--- a/content/docs/installation.md
+++ b/content/docs/add-react-to-an-existing-app.md
@@ -1,60 +1,11 @@
 ---
-id: installation
-title: Installation
-permalink: docs/installation.html
-redirect_from:
-  - "download.html"
-  - "downloads.html"
-  - "docs/tooling-integration.html"
-  - "docs/package-management.html"
-  - "docs/language-tooling.html"
-  - "docs/environments.html"
-next: hello-world.html
+id: add-react-to-an-existing-app
+title: Add React to an Existing Application
+permalink: docs/add-react-to-an-existing-app.html
+prev: add-react-to-a-new-app.html
+next: cdn-links.html
 ---
 
-React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.
-
-Here are a couple of ways to get started:
-
-* [Try React](#trying-out-react)
-* [Create a New App](#creating-a-new-application)
-* [Add React to an Existing App](#adding-react-to-an-existing-application)
-
-## Trying Out React
-
-If you're just interested in playing around with React, you can use CodePen. Try starting from [this Hello World example code](http://codepen.io/gaearon/pen/rrpgNB?editors=0010). You don't need to install anything; you can just modify the code and see if it works.
-
-If you prefer to use your own text editor, you can also [download this HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don't use it in production.
-
-If you want to use it for a full application, there are two popular ways to get started with React: using Create React App, or adding it to an existing application.
-
-## Creating a New Application
-
-[Create React App](http://github.com/facebookincubator/create-react-app) is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 on your machine.
-
-```bash
-npm install -g create-react-app
-create-react-app my-app
-
-cd my-app
-npm start
-```
-
-If you have npm 5.2.0+ installed, you may use [npx](https://www.npmjs.com/package/npx) instead.
-
-```bash
-npx create-react-app my-app
-
-cd my-app
-npm start
-```
-
-Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses build tools like [Babel](http://babeljs.io/) and [webpack](https://webpack.js.org/) under the hood, but works with zero configuration.
-
-When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents).
-
-## Adding React to an Existing Application
-
 You don't need to rewrite your app to start using React.
 
 We recommend adding React to a small part of your application, such as an individual widget, so you can see if it works well for your use case.
@@ -134,34 +85,4 @@ Learn [how to tell if your website is serving the right version of React](/docs/
 
 ### Using a CDN
 
-If you don't want to use npm to manage client packages, the `react` and `react-dom` npm packages also provide single-file distributions in `umd` folders, which are hosted on a CDN:
-
-```html
-<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
-```
-
-The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
-
-```html
-<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
-```
-
-To load a specific version of `react` and `react-dom`, replace `16` with the version number.
-
-If you use Bower, React is available via the `react` package.
-
-#### Why the `crossorigin` Attribute?
-
-If you serve React from a CDN, we recommend to keep the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute set:
-
-```html
-<script crossorigin src="..."></script>
-```
-
-We also recommend to verify that the CDN you are using sets the `Access-Control-Allow-Origin: *` HTTP header:
-
-![Access-Control-Allow-Origin: *](../images/docs/cdn-cors-header.png)
-
-This enables a better [error handling experience](/blog/2017/07/26/error-handling-in-react-16.html) in React 16 and later.
+If you don't want to use npm to manage client packages, the `react` and `react-dom` npm packages also provide single-file distributions in `umd` folders. See the [CDN](/docs/cdn-links.html) page for links.
diff --git a/content/docs/cdn-links.md b/content/docs/cdn-links.md
new file mode 100644
index 00000000..9205e721
--- /dev/null
+++ b/content/docs/cdn-links.md
@@ -0,0 +1,37 @@
+---
+id: cdn-links
+title: CDN Links
+permalink: docs/cdn-links.html
+prev: add-react-to-an-existing-app.html
+next: hello-world.html
+---
+
+The UMD builds of React and ReactDOM are available over a CDN.
+
+```html
+<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+```
+
+The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
+
+```html
+<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+```
+
+To load a specific version of `react` and `react-dom`, replace `16` with the version number.
+
+### Why the `crossorigin` Attribute?
+
+If you serve React from a CDN, we recommend to keep the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute set:
+
+```html
+<script crossorigin src="..."></script>
+```
+
+We also recommend to verify that the CDN you are using sets the `Access-Control-Allow-Origin: *` HTTP header:
+
+![Access-Control-Allow-Origin: *](../images/docs/cdn-cors-header.png)
+
+This enables a better [error handling experience](/blog/2017/07/26/error-handling-in-react-16.html) in React 16 and later.
diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md
index be30b5b9..5138af59 100644
--- a/content/docs/hello-world.md
+++ b/content/docs/hello-world.md
@@ -2,7 +2,7 @@
 id: hello-world
 title: Hello World
 permalink: docs/hello-world.html
-prev: installation.html
+prev: cdn-links.html
 next: introducing-jsx.html
 redirect_from:
   - "docs/"
@@ -12,7 +12,7 @@ redirect_from:
   - "docs/getting-started-zh-CN.html"
 ---
 
-The easiest way to get started with React is to use [this Hello World example code on CodePen](codepen://hello-world). You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the [Installation](/docs/installation.html) page.
+The easiest way to get started with React is to use [this Hello World example code on CodePen](codepen://hello-world). You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the [Installation](/docs/try-react.html) section.
 
 The smallest React example looks like this:
 
diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index ef204d97..c10bf60d 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -1,7 +1,15 @@
+- title: Installation
+  items:
+    - id: try-react
+      title: Try React
+    - id: add-react-to-a-new-app
+      title: Add React to a New App
+    - id: add-react-to-an-existing-app
+      title: Add React to an Existing App
+    - id: cdn-links
+      title: CDN Links
 - title: Quick Start
   items:
-    - id: installation
-      title: Installation
     - id: hello-world
       title: Hello World
     - id: introducing-jsx
diff --git a/content/docs/try-react.md b/content/docs/try-react.md
new file mode 100644
index 00000000..49ec1046
--- /dev/null
+++ b/content/docs/try-react.md
@@ -0,0 +1,41 @@
+---
+id: try-react
+title: Try React
+permalink: docs/try-react.html
+next: add-react-to-a-new-app.html
+redirect_from:
+  - "docs/installation.html"
+  - "download.html"
+  - "downloads.html"
+  - "docs/tooling-integration.html"
+  - "docs/package-management.html"
+  - "docs/language-tooling.html"
+  - "docs/environments.html"
+---
+
+Try React online or set up your local development environment.
+
+## Online
+
+If you're just interested in playing around with React, you can use an online code playground. Try a Hello World template on [CodePen](codepen://hello-world) or [CodeSandbox](https://codesandbox.io/s/new).
+
+## Minimal HTML Template
+
+If you prefer to use your own text editor, you can also [download this HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don't use it in production.
+
+## Next Steps
+
+### Quick Start
+
+- Head over to the [Quick Start](/docs/hello-world.html) section for a step-by-step introduction to React concepts.
+
+- Try the [Tutorial](/tutorial/tutorial.html) for a hands-on practical example.
+
+### Complete Development Environment
+
+The lightweight solutions above are the best fit if you are new to React or just experimenting.
+
+When you are ready to build your first application with React, check out the install guides below. These setups are designed to get you up and running with a great developer experience and are ready for production. They include linting, testing, and optimizations built-in; however, they require more time and disk space to set up and install.
+
+- [Add React to a New App](/docs/add-react-to-a-new-app.html): Create a new app with a fully-featured starter kit.
+- [Add React to an Existing App](/docs/add-react-to-a-new-app.html): Add React to a build system or a larger app.
diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 66c3562a..afe5e267 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -53,7 +53,7 @@ This is more work, but lets you work from the comfort of your editor.
 If you want to do it, here are the steps to follow:
 
 1. Make sure you have a recent version of [Node.js](https://nodejs.org/en/) installed.
-2. Follow the [installation instructions](/docs/installation.html#creating-a-new-application) to create a new project.
+2. Follow the [installation instructions](/docs/add-react-to-a-new-app.html) to create a new project.
 
 ```bash
 npm install -g create-react-app
diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
index c7e80ccd..ff3accf7 100644
--- a/src/components/LayoutFooter/Footer.js
+++ b/src/components/LayoutFooter/Footer.js
@@ -62,13 +62,9 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
             <MetaTitle onDark={true}>Docs</MetaTitle>
             {sectionListDocs.map(section => {
-              // Skip the Installation page for Quick Start
-              const defaultItem =
-                section.items[0].id === 'installation'
-                  ? section.items[1].id
-                  : section.items[0].id;
+              const defaultItem = section.items[0];
               return (
-                <FooterLink to={`/docs/${defaultItem}.html`}>
+                <FooterLink to={`/docs/${defaultItem.id}.html`}>
                   {section.title}
                 </FooterLink>
               );

From ae7286f14a3c699680d11e4a65732e40e697a37e Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 23 Dec 2017 19:21:41 +0000
Subject: [PATCH 12/23] Clean up "Starter Kits" (#461)

---
 content/community/tools-starter-kits.md | 71 ++-----------------------
 1 file changed, 5 insertions(+), 66 deletions(-)

diff --git a/content/community/tools-starter-kits.md b/content/community/tools-starter-kits.md
index 753974e5..5fdfc579 100644
--- a/content/community/tools-starter-kits.md
+++ b/content/community/tools-starter-kits.md
@@ -14,83 +14,22 @@ permalink: community/starter-kits.html
 * **[razzle](https://github.com/jaredpalmer/razzle)** - Create server-rendered universal JavaScript applications with no configuration
 * **[Neutrino](https://neutrino.js.org/)** - Create and build modern JavaScript applications with zero initial configuration
 
-## Client-side Kits
+## Other Starter Kits
 
 * **[kyt](https://github.com/nytimes/kyt)** - The framework that the New York Times uses to develop and build their web properties. It's somewhat opinionated but configurable, and includes starter kits with options to build full-stack or static/client-side apps with the following tools: Express, React, static assets, latest ES, CSS/Sass Modules, Jest, code-splitting, ESLint/Prettier, StyleLint, PostCSS, and inline SVGs.
-* **[React CDK](https://github.com/kadirahq/react-cdk)** - Component Development Kit for React
-* **[React Static Boilerplate](https://github.com/koistya/react-static-boilerplate):** Static site generator based on React, Gulp/Webpack, React Hot Loader, Babel, postCSS/cssnext. Best suited for deploying React.js site to GitHub Pages or Amazon S3.
-* **[React Redux Boilerplate](https://github.com/iroy2000/react-redux-boilerplate):** React Redux Boilerplate is a workflow boilerplate that make life easier for developers by providing a virtual development environment and production ready build workflow out of the box.  ( React, Redux, Reselect, Redux Actions, ES6, ESLint, Webpack with integrated environment config support )
-* **[Create React App + Redux + React Router](https://github.com/notrab/create-react-app-redux)**: Based on Create React App, this boilerplate comes with Redux, Redux Thunk and React Router all configured ready to go.
-* **[React, TypeScript, JSPM starter-kit](https://github.com/piotrwitek/react-ts-jspm-starter-kit):** Unopinionated starter kit to build modular web apps with React & TypeScript powered by JSPM/SystemJS 0.17.X (ES2016, hot-reload, browser-sync, bundle for prod scripts)
-* **[Subschema](https://subschema.github.io/subschema)** - Subschema is a Dependency Injection Library for React, included is a project starter, with webpack, karma and babel.
+* **[React Redux Boilerplate](https://github.com/iroy2000/react-redux-boilerplate):** React Redux Boilerplate is a workflow boilerplate providing a virtual development environment and production ready build workflow out of the box. (React, Redux, Reselect, Redux Actions, ES6, ESLint, Webpack with integrated environment config support)
 * **[React + Redux + Saga Boilerplate](https://github.com/gilbarbara/react-redux-saga-boilerplate)** -
 Ready to grow boilerplate with react-router, redux, saga, webpack 2, jest w/ coverage and enzyme.
-* **[generator-enigma](https://www.npmjs.com/package/generator-enigma)** a minimalist React application scaffolding tool that sets up a ready-to-deploy web app, complete with testing via Jest and optional `react-router` boilerplate.
-* **[Component-Template](https://github.com/reactstrap/component-template)** - A create-react-app based starter kit for building, documenting, & publishing React Components. Includes React Router v4, Bootstrap 4 and Reactstrap.
+* **[Create React App + Redux + React Router](https://github.com/notrab/create-react-app-redux)**: Based on Create React App, this boilerplate comes with Redux, Redux Thunk and React Router all configured ready to go.
+* **[react-slingshot](https://github.com/coryhouse/react-slingshot):** React + Redux starter kit with Babel, hot reloading, testing, linting and a working example app.
+* **[Este](https://github.com/este/este):** Dev stack and starter kit for functional and universal (browser, server, mobile) React applications. Everything you need to start is included.
 * **[Rekit](https://github.com/supnate/rekit)** - Toolkit and boilerplates for building scalable web applications with React, Redux and React-router.
 * **[webcube](https://github.com/dexteryy/Project-WebCube)** - A JS infrastructure for modern Universal JS web app/sites and static websites. Provides built-in support and simplification for Redux sub-app, reducer bundle, router, immutable, eslint + prettier, docker, monorepo and many other tools.
-
-## Full-stack Kits
-
-* **[kyt](https://github.com/nytimes/kyt)** - The framework that the New York Times uses to develop and build their web properties. It's somewhat opinionated but configurable, and includes starter kits with options to build full-stack or static/client-side apps with the following tools: Express, React, static assets, latest ES, CSS/Sass Modules, Jest, code-splitting, ESLint/Prettier, StyleLint, PostCSS, and inline SVGs.
-* **[react-universally](https://github.com/ctrlplusb/react-universally)** A starter kit for universal react applications with React, Express, React Router (v4), ES2017, Flow, Jest, Service workers, Data-fetching and code-splitting.
- * **[web-service-template](https://github.com/nandai/web-service-template)** Membership single-page application with React and TypeScript.
  * **[starter-react-flux](https://github.com/SokichiFujita/starter-react-flux)** A generator for React and Flux project with Flux-Utils, Jest, Immutable.js, React Addons, Webpack, ESLint, Babel and ES2015.
- * **[react-slingshot](https://github.com/coryhouse/react-slingshot):** React + Redux starter kit with Babel, hot reloading, testing, linting and a working example app.
  * **[react-async-starter](https://github.com/didierfranc/react-async-starter):** React + Redux + Fetch + ES7 Async with Webpack, Babel and hot reloading.
- * **[spa-starter-kit](https://github.com/vutran/spa-starter-kit):** Full stack Docker node.js container with React, webpack, babel, sass, ESLint, React Hot Loader, Redux for a single-page application.
- * **[react-flux-starter-kit](https://github.com/coryhouse/react-flux-starter-kit):** React, Flux, React Router with Browserify, Bootstrap, and ESLint, all wired up via Gulp. Includes link to associated course.
- * **[exnext-quickstart](https://github.com/nkbt/esnext-quickstart):** Compilation, testing, code validation (ESLint) and hot reloading
- * **[react-component-template](https://github.com/nkbt/react-component-template):** Base for npm-publisheable standalone React Components with tests, ES6 coverage
- * **[Base](https://github.com/adeperio/base):** An open-source, security focused, web application starter kit.
-Built with ReactJS, Flux, Express, and Postgres.
- * **[Este](https://github.com/este/este):** Dev stack and starter kit for functional and universal (browser, server, mobile) React applications. Everything you need to start is included.
- * **[essential-react](https://github.com/pheuter/essential-react):** A minimal skeleton for building testable React apps using ES6
- * **[jspm-react](https://github.com/capaj/jspm-react):** Lightweight boilerplate on JSPM/Systemjs with hot-reloading modules for the browser
- * **[react-flux-coffeescript-browserify-gulp-demo](https://github.com/dqdinh/react-flux-coffeescript-browserify-gulp-demo):** React, Flux, Coffeescript, Browserify, Watchify, Gulp
- * **[react-reflux-boilerplate-with-webpack](https://github.com/iroy2000/react-reflux-boilerplate-with-webpack):** React Reflux Workflow Boilerplate -- React, Reflux, Gulp, Webpack, Stylus and CoffeeScript.
- * **[kontraktor-intrinsic-jsx](https://github.com/RuedigerMoeller/InstrinsicReactJSX):** Native Java-implementation of JSX Transpiler + Bundler + Server (no nashorn or node/babel required)
- * **[React-Phonegap App](https://github.com/kjda/ReactJs-Phonegap):** Phonegap App built with react using Flux.
  * **[Kriasoft React Starter Kit](https://github.com/kriasoft/react-starter-kit):** Gulp, Webpack, BrowserSync + [React Starter Kit for Visual Studio](http://visualstudiogallery.msdn.microsoft.com/d65d6b29-6dd7-4100-81b1-609e5afce356)
- * **[react-express-template](https://github.com/khaled/react-express-template):** Web app starter template with React, React Router, ES6 (via Babel), CoffeeScript, Express/Node.js, Semantic-UI, Gulp, LiveReload, and more
- * **[generator-react-webpack](https://github.com/newtriks/generator-react-webpack):** [Yeoman](http://yeoman.io/) generator for React and Webpack.
- * **[generator-react-express](https://github.com/JedWatson/generator-react-express):** [Yeoman](http://yeoman.io/) generator for React and Express with browserify, react-router and bootstrap.
- * **[generator-react-component](https://github.com/JedWatson/generator-react-component):** [Yeoman](http://yeoman.io/) generator React Component projects with Gulp, Browserify, Live Reload and publishing to GitHub Pages.
- * **[Racket](https://github.com/mohebifar/racket):** [Yeoman](http://yeoman.io/) generator for creating a universal React Redux web application.
- * **[Genesis Skeleton](http://genesis-skeleton.com/):** Modern, opinionated, full-stack starter kit for rapid, streamlined application development (supports React).
- * **[react-starter-template](https://github.com/johnthethird/react-starter-template):** Starter template with Gulp, Webpack and Bootstrap.
- * **[react-brunch](https://npmjs.org/package/react-brunch):** [Brunch](http://brunch.io/) plugin.
- * **[react-browserify-template](https://github.com/petehunt/react-browserify-template):** Quick-start with Browserify.
- * **[react-router-bootstrap-seed](https://github.com/okigan/react-router-bootstrap-seed):** Starter template with react-router, react-bootstrap and react-bootstrap-router (build with Gulp).
- * **[React Phonegap Starter](https://github.com/stample/gulp-browserify-react-phonegap-starter)**:
-Gulp, NPM, Browserify, React, Phonegap, Less, Recess, Underscore, JQuery...
- * **[generator-react-gulp-browserify](https://github.com/randylien/generator-react-gulp-browserify)** [Yeoman](http://yeoman.io/) generator for React, Gulp, Browserify and Twitter Bootstrap Sass official.
- * **[generator-react-boilerplate](https://github.com/mitchbox/generator-react-boilerplate)** [Yeoman](http://yeoman.io/) generator for React, Gulp, Browserify, Bootstrap and Fluxxor.
- * **[react-starterify](https://github.com/Granze/react-starterify):** React JS application skeleton using Browserify and other awesome tools
- * **[fluxury](https://github.com/jim-y/fluxury):** A React/Flux starter kit with NPM (build tool), Browserify, ImmutableJS, JSXHint and React-Router completely written in ES6 (Babelify transform).
- * **[react-app-boilerplate](https://github.com/christianalfoni/react-app-boilerplate):** Browserify workflow with automatic JSX transformation, dependency handling for fast builds and jasmine test environment.
- * **[nuts](https://github.com/micahlmartin/nuts):** A fully-featured starter kit that uses webpack, react, flux, backbone, mongo, and kue. Includes server-side and client-side rendering.
- * **[generator-rc](https://github.com/react-component/generator-rc):** A scaffold to develop react component quickly.
- * **[MimosaReactBackbone](https://github.com/dbashford/MimosaReactBackboneTodoList):** A TodoMVC React/Backbone app w/ Mimosa for tooling.
- * **[TodoMVC - NestedReact](https://github.com/gaperton/todomvc-nestedreact):** TodoMVC React app built with [NestedTypes](https://github.com/Volicon/NestedTypes) and [NestedReact](https://github.com/Volicon/NestedReact).
- * **[react-boilerplate](https://github.com/AbeEstrada/react-boilerplate):** It is a basic React project boilerplate, it uses JSX, React Router, Browserify, Reactify (ES6) and SASS.
- * **[koa-react-full-example](https://github.com/dozoisch/koa-react-full-example)** Boilerplate of a Koa React integration. Also shows a way to integrate koa-passport, react-router and react-bootstrap and a few other common modules. Includes an authentication flow.
- * **[generator-simple-react-browserify](https://github.com/luisrudge/generator-simple-react-browserify)** Really simple React + Browserify app generator for yeoman. Start here if you're trying to actually learn something.
- * **[react-starterkit-with-reflux](https://github.com/maisnamraju/react-starterkit)** It's a fork of [react-starterkit](https://github.com/wbkd/react-starterkit) with React, Reflux, ES6 with Babel, Fontawesome, SASS, Bootstrap SASS(not react-bootstrap), and Browserify.
- * **[react-jspm](https://github.com/chenxsan/react-jspm)** Boilerplate for developing React with jspm and SystemJS module loader.
  * **[electron-react-boilerplate](https://github.com/chentsulin/electron-react-boilerplate)** A React + Flux Electron application boilerplate based on React, Flux, React Router, Webpack, React Hot Loader
- * **[Coils](https://github.com/zubairq/coils):** React/SQL full stack realtime framework in Clojure
- * **[isomorphic-flux-react-react-router](https://github.com/jahrlin/isomorphic-flux-react-react-router):** A clean, unbloated starter template without any unnecessary complexity for isomorphic web apps using React, Flux, react-router. Uses gulp and webpack for builds, jest for testing and SASS for CSS preprocessing.
- * **[generator-sui-react](https://github.com/SUI-Components/generator-sui-react):** A [Yeoman](http://yeoman.io/) generator for Schibsted User Interface (sui) ReactJS components. The generator provides a basic structure to start developing a component, including coding standard rules, naming conventions and a unit testing suite.
- * **[Universal-routed-flux-demo](https://github.com/pierreavizou/universal-routed-flux-demo)** Example app to get started building universal flux applications, with Reactjs, React Router and es6.
- * **[react-starter](https://github.com/aliakakis/react-starter/)** React starter project with ES2015, Browserify, Babel, mobservable.
- * **[react-flux-flow-webpack-jest-es6](https://github.com/msalia/react-flux-flow-webpack-jest-es6)** A complete React, Flux, Flow, Webpack, Jest and ES6 starter kit.
  * **[react-boilerplate](https://github.com/mxstbr/react-boilerplate)** Quick setup for performance orientated, offline-first React.js applications featuring Redux, hot-reloading, PostCSS, react-router, ServiceWorker, AppCache, FontFaceObserver and Mocha.
  * **[vortigern](https://github.com/barbar/vortigern)** A universal boilerplate for building web applications w/ TypeScript, React, Redux and more.
- * **[react-redux-starter-kit](https://github.com/davezuko/react-redux-starter-kit):** Terrific universal Redux + React Router starter kit with Babel, SASS, hot reloading, testing, linting. Unopinionated as possible.
- * **[prax](https://github.com/mitranim/prax):** Sane functional programming style architecture for realtime apps, with single immutable state, event system, reactive views, support development through pure functions.
- * **[react-redux-universal-boilerplate](https://github.com/kiki-le-singe/react-redux-universal-boilerplate):**
-An Universal ReactJS/Redux Boilerplate with Babel, Webpack 2, Webpack backend bundling, React Hot Loader 3, sass or cssnext, testing, linting...
- * **[FUJITSU K5 Playground](https://playground.cloud.global.fujitsu.com)** A SPA and BFF generator with React, Flux, Swagger, Node.js, Material-ui, Jest, Webpack, ESLint and Babel.
  * **[CRA Universal CLI](https://github.com/antonybudianto/cra-universal)** CLI to initialize universal create-react-app without ejecting. Supports Server-side rendering with Code-splitting, and Node Stream rendering.
  * **[EDGE Platform](https://github.com/sebastian-software/edge)** Universal React/SSR + Apollo GraphQL + JS/CSS Code Splitting + Fine-Tuned Webpack + Localization/Internationalization. Most things are external dependencies. Boilerplate available.

From 2c4b2b12a80ddef19ded9f5cdccb6eae483ea502 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 23 Dec 2017 19:41:12 +0000
Subject: [PATCH 13/23] Clarify what single-file HTML page is for

---
 static/html/single-file-example.html | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/static/html/single-file-example.html b/static/html/single-file-example.html
index d0fe6b2c..0511d0f9 100644
--- a/static/html/single-file-example.html
+++ b/static/html/single-file-example.html
@@ -17,5 +17,17 @@
       );
 
     </script>
+    <!--
+      Note: this page is a great way to try React but it's not suitable for production.
+      It slowly compiles JSX with Babel in the browser and uses a large development build of React.
+
+      To set up a production-ready React build environment, follow these instructions:
+      * https://reactjs.org/docs/add-react-to-a-new-app.html
+      * https://reactjs.org/docs/add-react-to-an-existing-app.html
+
+      You can also use React without JSX, in which case you can remove Babel:
+      * https://reactjs.org/docs/react-without-jsx.html
+      * https://reactjs.org/docs/cdn-links.html
+    -->
   </body>
 </html>

From 14acda1c92498e6e11aa6b633bab5df1f451b1ca Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 23 Dec 2017 19:42:40 +0000
Subject: [PATCH 14/23] Reword the note

---
 content/docs/add-react-to-a-new-app.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/content/docs/add-react-to-a-new-app.md b/content/docs/add-react-to-a-new-app.md
index 84fa540f..d520dfb8 100644
--- a/content/docs/add-react-to-a-new-app.md
+++ b/content/docs/add-react-to-a-new-app.md
@@ -10,8 +10,9 @@ The easiest way to get started on a new React project is by using a starter kit.
 
 > Note:
 > 
-> Check out the [Try React](/docs/try-react.html) page if you are looking for lightweight environments to experiment with React.
-> The options on this page are designed to help bootstrap single-page applications with linting, testing, bundling, production optimizations, and more.
+> The options on this page are designed to bootstrap single-page applications with linting, testing, bundling, production optimizations, and more. They are fully-featured but require some time and disk space to install.
+>
+> If you are looking for a lightweight environment to experiment with React, check out the [Try React](/docs/try-react.html) page instead. A [single HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html) is enough to get you started!
 
 ## Create React App
 

From fbf52cc9737cab7d027ca0a3f6692e1b3d21ec95 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 23 Dec 2017 20:28:00 +0000
Subject: [PATCH 15/23] Add a note about using React not for SPAs (#462)

* Add a note about using React not for SPAs

* Reword and highlight

* Reword section about starter kits

* Update add-react-to-a-new-app.md
---
 content/docs/add-react-to-a-new-app.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/content/docs/add-react-to-a-new-app.md b/content/docs/add-react-to-a-new-app.md
index d520dfb8..b9a6813a 100644
--- a/content/docs/add-react-to-a-new-app.md
+++ b/content/docs/add-react-to-a-new-app.md
@@ -10,9 +10,11 @@ The easiest way to get started on a new React project is by using a starter kit.
 
 > Note:
 > 
-> The options on this page are designed to bootstrap single-page applications with linting, testing, bundling, production optimizations, and more. They are fully-featured but require some time and disk space to install.
+> This page describes setting up a single-page application with everything you need for a comfortable development workflow, including linting, testing, production optimizations, and more. Full-featured tools like these require some time and disk space to install.
 >
-> If you are looking for a lightweight environment to experiment with React, check out the [Try React](/docs/try-react.html) page instead. A [single HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html) is enough to get you started!
+>If you are looking for a lightweight environment to experiment with React, check out the [Try React](/docs/try-react.html) page instead. **A [single HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html) is enough to get you started!**
+>
+> Finally, if you're not building a single-page application, you can either [add React to your existing build pipeline](/docs/add-react-to-an-existing-app.html) or [use it from CDN](/docs/cdn-links.html) and [without a build step](/docs/react-without-jsx.html).
 
 ## Create React App
 
@@ -41,7 +43,9 @@ When you're ready to deploy to production, running `npm run build` will create a
 
 ## Other Starter Kits
 
-See the Community section for a list of [starter kits](/community/starter-kits.html).
+We have created [a curated list of third-party starter kits that we officially recommend](/community/starter-kits.html#recommended-by-the-react-team). They slightly differ in their focus but are all production-ready, well-maintained, and don't require configuration to get started.
+
+You can also check out a list of [other kits](/community/starter-kits.html#other-starter-kits) contributed by the community.
 
 ## Advanced
 

From 2d85831231821c435958969c893f3abdb9bd6ff4 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 23 Dec 2017 20:34:53 +0000
Subject: [PATCH 16/23] Tweak links

- anchor link scrolls badly, link to the top instead
- add a line break
---
 content/docs/add-react-to-a-new-app.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/content/docs/add-react-to-a-new-app.md b/content/docs/add-react-to-a-new-app.md
index b9a6813a..14e011af 100644
--- a/content/docs/add-react-to-a-new-app.md
+++ b/content/docs/add-react-to-a-new-app.md
@@ -43,7 +43,9 @@ When you're ready to deploy to production, running `npm run build` will create a
 
 ## Other Starter Kits
 
-We have created [a curated list of third-party starter kits that we officially recommend](/community/starter-kits.html#recommended-by-the-react-team). They slightly differ in their focus but are all production-ready, well-maintained, and don't require configuration to get started.
+We have created [a curated list of third-party starter kits that we officially recommend](/community/starter-kits.html).
+
+They slightly differ in their focus but are all production-ready, well-maintained, and don't require configuration to get started.
 
 You can also check out a list of [other kits](/community/starter-kits.html#other-starter-kits) contributed by the community.
 

From 00cb2c1c8598796a57c70a09a564e5edcd27545f Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharth.kshetrapal@gmail.com>
Date: Sun, 24 Dec 2017 05:15:36 -0300
Subject: [PATCH 17/23] Add bae

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

diff --git a/content/community/tools-starter-kits.md b/content/community/tools-starter-kits.md
index 5fdfc579..bd41fd43 100644
--- a/content/community/tools-starter-kits.md
+++ b/content/community/tools-starter-kits.md
@@ -33,3 +33,4 @@ Ready to grow boilerplate with react-router, redux, saga, webpack 2, jest w/ cov
  * **[vortigern](https://github.com/barbar/vortigern)** A universal boilerplate for building web applications w/ TypeScript, React, Redux and more.
  * **[CRA Universal CLI](https://github.com/antonybudianto/cra-universal)** CLI to initialize universal create-react-app without ejecting. Supports Server-side rendering with Code-splitting, and Node Stream rendering.
  * **[EDGE Platform](https://github.com/sebastian-software/edge)** Universal React/SSR + Apollo GraphQL + JS/CSS Code Splitting + Fine-Tuned Webpack + Localization/Internationalization. Most things are external dependencies. Boilerplate available.
+ * **[bae](https://github.com/siddharthkp/bae)** Zero config toolkit. SSR (with data fetching) + routing + streaming + styling (with styled-components) + HMR out of the box.

From 436c43e32e91cfd60f4bb578627d990b7ffdae9e Mon Sep 17 00:00:00 2001
From: Vishal Raj <vishalraj1802@gmail.com>
Date: Sun, 24 Dec 2017 22:11:26 +0530
Subject: [PATCH 18/23] fixing circleCI post prettier reformatting

---
 examples/forms/input-type-file.js | 37 ++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 10 deletions(-)

diff --git a/examples/forms/input-type-file.js b/examples/forms/input-type-file.js
index 5cc084d9..93dd13fc 100644
--- a/examples/forms/input-type-file.js
+++ b/examples/forms/input-type-file.js
@@ -1,27 +1,44 @@
 class FileInput extends React.Component {
   constructor(props) {
     super(props);
-    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(
+      this
+    );
   }
-// highlight-range{1-4}
-  handleSubmit (event) {
+  // highlight-range{5}
+  handleSubmit(event) {
     event.preventDefault();
-    alert(`Selected file - ${this.fileInput.files[0].name}`);
+    alert(
+      `Selected file - ${
+        this.fileInput.files[0].name
+      }`
+    );
   }
 
   render() {
     return (
-      <form onSubmit={this.handleSubmit}>
+      <form
+        onSubmit={this.handleSubmit}>
         <label>
           Upload file:
-          {/* highlight-next-line */}
-          <input type='file' ref={input => {this.fileInput = input}} />
+          {/* highlight-range{1-6} */}
+          <input
+            type="file"
+            ref={input => {
+              this.fileInput = input;
+            }}
+          />
         </label>
-        <br/>
-        <button type='submit'>Submit</button>
+        <br />
+        <button type="submit">
+          Submit
+        </button>
       </form>
     );
   }
 }
 
-ReactDOM.render(<FileInput />, document.getElementById('root'));
+ReactDOM.render(
+  <FileInput />,
+  document.getElementById('root')
+);

From 239fe8c11fa32459e3863df68d161ce1a277fefa Mon Sep 17 00:00:00 2001
From: Satish Yadav <monstersatish@live.com>
Date: Mon, 25 Dec 2017 20:12:21 +0530
Subject: [PATCH 19/23] Link to "Add React to an Existing App" corrected.
 (#465)

Link to "Add React to an Existing App" corrected. It was pointing to "/docs/add-react-to-a-new-app.html".
---
 content/docs/try-react.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/try-react.md b/content/docs/try-react.md
index 49ec1046..c29f1f8f 100644
--- a/content/docs/try-react.md
+++ b/content/docs/try-react.md
@@ -38,4 +38,4 @@ The lightweight solutions above are the best fit if you are new to React or just
 When you are ready to build your first application with React, check out the install guides below. These setups are designed to get you up and running with a great developer experience and are ready for production. They include linting, testing, and optimizations built-in; however, they require more time and disk space to set up and install.
 
 - [Add React to a New App](/docs/add-react-to-a-new-app.html): Create a new app with a fully-featured starter kit.
-- [Add React to an Existing App](/docs/add-react-to-a-new-app.html): Add React to a build system or a larger app.
+- [Add React to an Existing App](/docs/add-react-to-an-existing-app.html): Add React to a build system or a larger app.

From 49e79e3f08dc4cd4c7238b4a3f1add66cf4aa7aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=AA=E6=97=A0=E7=A5=9E?= <651182414@qq.com>
Date: Tue, 26 Dec 2017 20:10:46 +0800
Subject: [PATCH 20/23] fix(#460) 404 link of Relay's createContainer API in
 doc HOC (#468)

---
 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 fca191d9..4f044669 100644
--- a/content/docs/higher-order-components.md
+++ b/content/docs/higher-order-components.md
@@ -14,7 +14,7 @@ const EnhancedComponent = higherOrderComponent(WrappedComponent);
 
 Whereas a component transforms props into UI, a higher-order component transforms a component into another component.
 
-HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createContainer`](https://facebook.github.io/relay/docs/api-reference-relay.html#createcontainer-static-method).
+HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html).
 
 In this document, we'll discuss why higher-order components are useful, and how to write your own.
 

From d6412ae15344eb9e880271b191985f4cfd468ad1 Mon Sep 17 00:00:00 2001
From: Antony Budianto <antonybudianto@gmail.com>
Date: Sun, 31 Dec 2017 22:13:21 +0700
Subject: [PATCH 21/23] Fix 404 relay modern link (#474)

---
 content/community/tools-data-fetching.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/community/tools-data-fetching.md b/content/community/tools-data-fetching.md
index 56235637..85e1b0b0 100644
--- a/content/community/tools-data-fetching.md
+++ b/content/community/tools-data-fetching.md
@@ -7,6 +7,6 @@ permalink: community/data-fetching.html
 
 * **[Apollo](http://dev.apollodata.com/react/):** Easy to set up and use GraphQL client.
 * **[Axios](https://github.com/mzabriskie/axios):** Promise based HTTP client for the browser and node.js.
-* **[Relay Modern](https://facebook.github.io/relay/docs/relay-modern.html)** - A JavaScript framework for building data-driven React applications.
+* **[Relay Modern](https://facebook.github.io/relay/docs/en/new-in-relay-modern.html)** - A JavaScript framework for building data-driven React applications.
 * **[Request](https://github.com/request/request):** Simplified HTTP request client.
 * **[Superagent](https://visionmedia.github.io/superagent/):** A lightweight "isomorphic" library for AJAX requests.

From e80abf73fd1a219ffaaca2575b1f58e584d2310e Mon Sep 17 00:00:00 2001
From: shawn wang <shawnthe1@gmail.com>
Date: Wed, 3 Jan 2018 01:50:19 +0800
Subject: [PATCH 22/23] add second Contributing to React video link (#479)

as suggested by @gearon to help inspire others https://twitter.com/dan_abramov/status/948156772455518208
---
 content/docs/how-to-contribute.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/content/docs/how-to-contribute.md b/content/docs/how-to-contribute.md
index 28daa0e5..5dc7cfc9 100644
--- a/content/docs/how-to-contribute.md
+++ b/content/docs/how-to-contribute.md
@@ -159,6 +159,8 @@ You may be interested in watching [this short video](https://www.youtube.com/wat
 - [14:43](https://youtu.be/wUpPsEcGsg8?t=14m43s) - React npm registry
 - [19:15](https://youtu.be/wUpPsEcGsg8?t=19m15s) - Adding new React features
 
+For a realistic overview of what it _feels_ like to contribute to React for the first time, check out [this entertaining ReactNYC talk](https://www.youtube.com/watch?v=GWCcZ6fnpn4).
+
 ### Meeting Notes
 
 React team meets once a week to discuss the development of React, future plans, and priorities. You can find the meeting notes in a [dedicated repository](https://github.com/reactjs/core-notes/).

From 82cf82486a9ebdbdb69ad41996857326f04de7cc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Tue, 2 Jan 2018 10:27:34 -0800
Subject: [PATCH 23/23] Wordsmithing

Replaced "a <input>" with "an <input>" in a couple of places.

Simplified wording slightly to (hopefully) be easier for non-native speakers to read.
---
 content/docs/forms.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/content/docs/forms.md b/content/docs/forms.md
index 32731dce..b8a3c1bf 100644
--- a/content/docs/forms.md
+++ b/content/docs/forms.md
@@ -191,20 +191,20 @@ Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select
 >```
 ## The file input Tag
 
-In HTML, a `<input type="file">` lets the user choose one or more files from their device's storage, allowing the app to handle them as per the use case.
+In HTML, an `<input type="file">` lets the user choose one or more files from their device storage to be uploaded to a server or manipulated by JavaScript via the [File API](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications).
 
 ```html
 <input type="file" />
 ```
 
-In React, a `<input type="file" />` works similarly to a normal `<input/>` with some major differences. The `<input type="file" />` in React is read-only and hence setting the value of a file programmatically is impossible. You can use the various File management API provided by Javascript to handle the files that are uploaded by the user.
+In React, an `<input type="file" />` works similarly to a normal `<input/>` with one important difference: **it is read-only**. (You can't set the value programmatically.) Instead, you should use the File API to interact with the files.
+
+The following example shows how a `ref` can be used to access file(s) in a submit handler:
 
 `embed:forms/input-type-file.js`
 
 [Try it on CodePen](codepen://forms/input-type-file)
 
-Note how a `ref` to the file input is used to access the file(s) in the submit handler
-
 ## Handling Multiple Inputs
 
 When you need to handle multiple controlled `input` elements, you can add a `name` attribute to each element and let the handler function choose what to do based on the value of `event.target.name`.