From 90fa54985fd1165bfa5d56b86c27253c96957b9c Mon Sep 17 00:00:00 2001
From: Ediiik <eduard.poracky@gmail.com>
Date: Sat, 20 Jan 2018 23:29:21 +0100
Subject: [PATCH 01/16] Fix typo

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

diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md
index 3436c4c43..910dab5ac 100644
--- a/content/docs/static-type-checking.md
+++ b/content/docs/static-type-checking.md
@@ -2,7 +2,7 @@
 id: static-type-checking
 title: Static Type Checking
 permalink: docs/static-type-checking.html
-prev: typechecking-with-prototypes.html
+prev: typechecking-with-proptypes.html
 next: refs-and-the-dom.html
 ---
 

From 984abd2539119819608590ef68042ee404b56276 Mon Sep 17 00:00:00 2001
From: Edouard Alvard <essential@withedouard.com>
Date: Mon, 9 Jul 2018 16:34:33 +0200
Subject: [PATCH 02/16] Fix typo

---
 content/tutorial/tutorial.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 9a0523248..f09dda71c 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -215,7 +215,7 @@ Congratulations! You've just "passed a prop" from a parent Board component to a
 
 ### Making an Interactive Component
 
-Let's fill the Square component with an "X" when we click it. 
+Let's fill the Square component with an "X" when we click it.
 First, change the button tag that is returned from the Square component's `render()` function to this:
 
 ```javascript{4}
@@ -605,7 +605,7 @@ We have changed `this.props` to `props` both times it appears.
 
 We now need to fix an obvious defect in our tic-tac-toe game: the "O"s cannot be marked on the board.
 
-We'll set the the first move to be "X" by default. We can set this default by modifying the initial state in our Board constructor:
+We'll set the first move to be "X" by default. We can set this default by modifying the initial state in our Board constructor:
 
 ```javascript{6}
 class Board extends React.Component {
@@ -1003,7 +1003,7 @@ In JavaScript, arrays have a [`map()` method](https://developer.mozilla.org/en-U
 ```js
 const numbers = [1, 2, 3];
 const doubled = numbers.map(x => x * 2); // [2, 4, 6]
-``` 
+```
 
 Using the `map` method, we can map our history of moves to React elements representing buttons on the screen, and display a list of buttons to "jump" to past moves.
 

From a531a0f89d7d8f227db17cf4c68276f8a16ef5be Mon Sep 17 00:00:00 2001
From: Tushar Khatiwada <khatiwadatushar@outlook.com>
Date: Fri, 26 Oct 2018 15:31:58 +0545
Subject: [PATCH 03/16] Small typo fix

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

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index c57e200c0..cfd11da01 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -109,7 +109,7 @@ There are a few more heuristics, and they might change over time as we fine-tune
 
 ### How do lifecycle methods correspond to Hooks?
 
-* `constructor`: Function components don't need a constructor. You can initialize the state in the [`useState`](/docs/hooks-reference.html#usestate) call. If computing it is expensive, you can pass a function to `useState`.
+* `constructor`: Function components don't need a constructor. You can initialize the state in the [`useState`](/docs/hooks-reference.html#usestate) call. If computing is expensive, you can pass a function to `useState`.
 
 * `getDerivedStateFromProps`: Schedule an update [while rendering](#how-do-i-implement-getderivedstatefromprops) instead.
 

From b3d150358829e057fb6045aac73c238f883283b9 Mon Sep 17 00:00:00 2001
From: natusaspire <natusaspire@gmail.com>
Date: Sun, 13 Jan 2019 00:30:23 +0200
Subject: [PATCH 04/16] fix typo in blog post

---
 content/blog/2018-06-07-you-probably-dont-need-derived-state.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/blog/2018-06-07-you-probably-dont-need-derived-state.md b/content/blog/2018-06-07-you-probably-dont-need-derived-state.md
index 6e71ef838..9d3337c86 100644
--- a/content/blog/2018-06-07-you-probably-dont-need-derived-state.md
+++ b/content/blog/2018-06-07-you-probably-dont-need-derived-state.md
@@ -213,7 +213,7 @@ To recap, when designing a component, it is important to decide whether its data
 Instead of trying to **"mirror" a prop value in state**, make the component **controlled**, and consolidate the two diverging values in the state of some parent component. For example, rather than a child accepting a "committed" `props.value` and tracking a "draft" `state.value`, have the parent manage both `state.draftValue` and `state.committedValue` and control the child's value directly. This makes the data flow more explicit and predictable.
 
 For **uncontrolled** components, if you're trying to reset state when a particular prop (usually an ID) changes, you have a few options:
-* **Recomendation: To reset _all internal state_, use the `key` attribute.**
+* **Recommendation: To reset _all internal state_, use the `key` attribute.**
 * Alternative 1: To reset _only certain state fields_, watch for changes in a special property (e.g. `props.userID`).
 * Alternative 2: You can also consider fall back to an imperative instance method using refs.
 

From d8a83092174f4d7a4b6e4cf68fdd7bae54a0cb73 Mon Sep 17 00:00:00 2001
From: Prashant Andani <prashant.andani@ymedialabs.com>
Date: Wed, 16 Jan 2019 21:18:03 +0530
Subject: [PATCH 05/16] Typo fix

---
 content/blog/2013-06-27-community-roundup-3.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/blog/2013-06-27-community-roundup-3.md b/content/blog/2013-06-27-community-roundup-3.md
index 69041ea09..2d297f20f 100644
--- a/content/blog/2013-06-27-community-roundup-3.md
+++ b/content/blog/2013-06-27-community-roundup-3.md
@@ -49,7 +49,7 @@ The highlight of this week is that an interaction-heavy app has been ported to R
 
 [Joel Burget](http://joelburget.com/) wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.
 
-> The problem here is that we're trying to maniplate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.
+> The problem here is that we're trying to manipulate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.
 >
 > What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).
 >

From 573da866666f33d43b8617e5fd94d56de4eb0fd1 Mon Sep 17 00:00:00 2001
From: Prashant Andani <prashant.andani@ymedialabs.com>
Date: Wed, 6 Feb 2019 22:46:24 +0530
Subject: [PATCH 06/16] Add https for javascript.info

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

diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md
index 8ad77b1ac..86e15c843 100644
--- a/content/docs/getting-started.md
+++ b/content/docs/getting-started.md
@@ -79,7 +79,7 @@ We recommend going through [this JavaScript overview](https://developer.mozilla.
 
 >Tip
 >
->Whenever you get confused by something in JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [javascript.info](http://javascript.info/) are great websites to check. There are also [community support forums](/community/support.html) where you can ask for help.
+>Whenever you get confused by something in JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [javascript.info](https://javascript.info/) are great websites to check. There are also [community support forums](/community/support.html) where you can ask for help.
 
 ### Practical Tutorial
 

From 7e4ac52af4dc93b1d1b46cb39ead62b450e94b98 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Go=C5=82e=CC=A8biowski-Owczarek?=
 <m.goleb@gmail.com>
Date: Thu, 7 Feb 2019 14:41:33 +0100
Subject: [PATCH 07/16] HTTPS-ify most insecure URLs in content/docs (& one in
 Acknowledgments)

This is a followup to #1157
---
 content/docs/accessibility.md                 | 38 +++++++++----------
 content/docs/add-react-to-a-website.md        |  4 +-
 content/docs/addons-perf.md                   |  4 +-
 content/docs/addons-shallow-renderer.md       |  2 +-
 content/docs/addons-test-utils.md             |  4 +-
 content/docs/addons-update.md                 |  4 +-
 content/docs/code-splitting.md                |  2 +-
 content/docs/codebase-overview.md             |  4 +-
 content/docs/create-a-new-react-app.md        |  6 +--
 content/docs/design-principles.md             |  6 +--
 content/docs/faq-functions.md                 |  2 +-
 content/docs/faq-state.md                     |  2 +-
 content/docs/getting-started.md               |  4 +-
 content/docs/handling-events.md               |  2 +-
 content/docs/higher-order-components.md       |  6 +--
 content/docs/how-to-contribute.md             |  4 +-
 .../docs/integrating-with-other-libraries.md  | 22 +++++------
 content/docs/introducing-jsx.md               |  6 +--
 content/docs/reconciliation.md                |  2 +-
 content/docs/reference-dom-elements.md        |  2 +-
 content/docs/reference-glossary.md            |  2 +-
 content/docs/reference-test-renderer.md       |  4 +-
 content/docs/state-and-lifecycle.md           | 14 +++----
 content/docs/static-type-checking.md          |  2 +-
 content/docs/thinking-in-react.md             |  6 +--
 content/docs/uncontrolled-components.md       |  2 +-
 src/pages/acknowledgements.html.js            |  8 ++--
 27 files changed, 82 insertions(+), 82 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index d387921ca..451ea2cc8 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -19,8 +19,8 @@ The [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) pr
 The following WCAG checklists provide an overview:
 
 - [WCAG checklist from Wuhcag](https://www.wuhcag.com/wcag-checklist/)
-- [WCAG checklist from WebAIM](http://webaim.org/standards/wcag/checklist)
-- [Checklist from The A11Y Project](http://a11yproject.com/checklist.html)
+- [WCAG checklist from WebAIM](https://webaim.org/standards/wcag/checklist)
+- [Checklist from The A11Y Project](https://a11yproject.com/checklist.html)
 
 ### WAI-ARIA
 
@@ -114,7 +114,7 @@ Every HTML form control, such as `<input>` and `<textarea>`, needs to be labeled
 The following resources show us how to do this:
 
 - [The W3C shows us how to label elements](https://www.w3.org/WAI/tutorials/forms/labels/)
-- [WebAIM shows us how to label elements](http://webaim.org/techniques/forms/controls)
+- [WebAIM shows us how to label elements](https://webaim.org/techniques/forms/controls)
 - [The Paciello Group explains accessible names](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
 
 Although these standard HTML practices can be directly used in React, note that the `for` attribute is written as `htmlFor` in JSX:
@@ -129,13 +129,13 @@ Although these standard HTML practices can be directly used in React, note that
 Error situations need to be understood by all users. The following link shows us how to expose error texts to screen readers as well:
 
 - [The W3C demonstrates user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
-- [WebAIM looks at form validation](http://webaim.org/techniques/formvalidation/)
+- [WebAIM looks at form validation](https://webaim.org/techniques/formvalidation/)
 
 ## Focus Control
 
 Ensure that your web application can be fully operated with the keyboard only:
 
-- [WebAIM talks about keyboard accessibility](http://webaim.org/techniques/keyboard/)
+- [WebAIM talks about keyboard accessibility](https://webaim.org/techniques/keyboard/)
 
 ### Keyboard focus and focus outline
 
@@ -152,13 +152,13 @@ Provide a mechanism to allow users to skip past navigation sections in your appl
 Skiplinks or Skip Navigation Links are hidden navigation links that only become visible when keyboard users interact with the page. They are very easy to implement with
 internal page anchors and some styling:
 
-- [WebAIM - Skip Navigation Links](http://webaim.org/techniques/skipnav/)
+- [WebAIM - Skip Navigation Links](https://webaim.org/techniques/skipnav/)
 
 Also use landmark elements and roles, such as `<main>` and `<aside>`, to demarcate page regions as assistive technology allow the user to quickly navigate to these sections.
 
 Read more about the use of these elements to enhance accessibility here:
 
-- [Accessible Landmarks](http://www.scottohara.me/blog/2018/03/03/landmarks.html)
+- [Accessible Landmarks](https://www.scottohara.me/blog/2018/03/03/landmarks.html)
 
 ### Programmatically managing focus
 
@@ -387,7 +387,7 @@ These are toolboxes filled with HTML attributes that are fully supported in JSX
 Each type of widget has a specific design pattern and is expected to function in a certain way by users and user agents alike:
 
 - [WAI-ARIA Authoring Practices - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
-- [Heydon Pickering - ARIA Examples](http://heydonworks.com/practical_aria_examples/)
+- [Heydon Pickering - ARIA Examples](https://heydonworks.com/practical_aria_examples/)
 - [Inclusive Components](https://inclusive-components.design/)
 
 ## Other Points for Consideration
@@ -396,7 +396,7 @@ Each type of widget has a specific design pattern and is expected to function in
 
 Indicate the human language of page texts as screen reader software uses this to select the correct voice settings:
 
-- [WebAIM - Document Language](http://webaim.org/techniques/screenreader/#language)
+- [WebAIM - Document Language](https://webaim.org/techniques/screenreader/#language)
 
 ### Setting the document title
 
@@ -412,15 +412,15 @@ Ensure that all readable text on your website has sufficient color contrast to r
 
 - [WCAG - Understanding the Color Contrast Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 - [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
-- [A11yProject - What is Color Contrast](http://a11yproject.com/posts/what-is-color-contrast/)
+- [A11yProject - What is Color Contrast](https://a11yproject.com/posts/what-is-color-contrast/)
 
-It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](http://jxnblk.com/colorable/).
+It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](https://jxnblk.com/colorable/).
 
 Both the aXe and WAVE tools mentioned below also include color contrast tests and will report on contrast errors.
 
 If you want to extend your contrast testing abilities you can use these tools:
 
-- [WebAIM - Color Contrast Checker](http://webaim.org/resources/contrastchecker/)
+- [WebAIM - Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
 - [The Paciello Group - Color Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/)
 
 ## Development and Testing Tools
@@ -471,7 +471,7 @@ You can also use the [react-axe](https://github.com/dylanb/react-axe) module to
 
 #### WebAIM WAVE
 
-The [Web Accessibility Evaluation Tool](http://wave.webaim.org/extension/) is another accessibility browser extension.
+The [Web Accessibility Evaluation Tool](https://wave.webaim.org/extension/) is another accessibility browser extension.
 
 #### Accessibility inspectors and the Accessibility Tree
 
@@ -498,7 +498,7 @@ Please note that browser / screen reader combinations matter. It is recommended
 
 Refer to the following guides on how to best use NVDA:
 
-- [WebAIM - Using NVDA to Evaluate Web Accessibility](http://webaim.org/articles/nvda/)
+- [WebAIM - Using NVDA to Evaluate Web Accessibility](https://webaim.org/articles/nvda/)
 - [Deque - NVDA Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
 
 #### VoiceOver in Safari
@@ -507,26 +507,26 @@ VoiceOver is an integrated screen reader on Apple devices.
 
 Refer to the following guides on how activate and use VoiceOver:
 
-- [WebAIM - Using VoiceOver to Evaluate Web Accessibility](http://webaim.org/articles/voiceover/)
+- [WebAIM - Using VoiceOver to Evaluate Web Accessibility](https://webaim.org/articles/voiceover/)
 - [Deque - VoiceOver for OS X Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
 - [Deque - VoiceOver for iOS Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)
 
 #### JAWS in Internet Explorer
 
-[Job Access With Speech](http://www.freedomscientific.com/Products/Blindness/JAWS) or JAWS, is a prolifically used screen reader on Windows.
+[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/) or JAWS, is a prolifically used screen reader on Windows.
 
 Refer to the following guides on how to best use JAWS:
 
-- [WebAIM - Using JAWS to Evaluate Web Accessibility](http://webaim.org/articles/jaws/)
+- [WebAIM - Using JAWS to Evaluate Web Accessibility](https://webaim.org/articles/jaws/)
 - [Deque - JAWS Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
 
 ### Other Screen Readers
 
 #### ChromeVox in Google Chrome
 
-[ChromeVox](http://www.chromevox.com/) is an integrated screen reader on Chromebooks and is available [as an extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) for Google Chrome.
+[ChromeVox](https://www.chromevox.com/) is an integrated screen reader on Chromebooks and is available [as an extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) for Google Chrome.
 
 Refer to the following guides on how best to use ChromeVox:
 
 - [Google Chromebook Help - Use the Built-in Screen Reader](https://support.google.com/chromebook/answer/7031755?hl=en)
-- [ChromeVox Classic Keyboard Shortcuts Reference](http://www.chromevox.com/keyboard_shortcuts.html)
+- [ChromeVox Classic Keyboard Shortcuts Reference](https://www.chromevox.com/keyboard_shortcuts.html)
diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md
index 886c77601..ad1953812 100644
--- a/content/docs/add-react-to-a-website.md
+++ b/content/docs/add-react-to-a-website.md
@@ -149,7 +149,7 @@ return (
 
 These two code snippets are equivalent. While **JSX is [completely optional](/docs/react-without-jsx.html)**, many people find it helpful for writing UI code -- both with React and with other libraries.
 
-You can play with JSX using [this online converter](http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=).
+You can play with JSX using [this online converter](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=).
 
 ### Quickly Try JSX
 
@@ -197,6 +197,6 @@ Don't wait for it to finish -- this command starts an automated watcher for JSX.
 
 If you now create a file called `src/like_button.js` with this **[JSX starter code](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**, the watcher will create a preprocessed `like_button.js` with the plain JavaScript code suitable for the browser. When you edit the source file with JSX, the transform will re-run automatically.
 
-As a bonus, this also lets you use modern JavaScript syntax features like classes without worrying about breaking older browsers. The tool we just used is called Babel, and you can learn more about it from [its documentation](http://babeljs.io/docs/en/babel-cli/).
+As a bonus, this also lets you use modern JavaScript syntax features like classes without worrying about breaking older browsers. The tool we just used is called Babel, and you can learn more about it from [its documentation](https://babeljs.io/docs/en/babel-cli/).
 
 If you notice that you're getting comfortable with build tools and want them to do more for you, [the next section](/docs/create-a-new-react-app.html) describes some of the most popular and approachable toolchains. If not -- those script tags will do just fine!
diff --git a/content/docs/addons-perf.md b/content/docs/addons-perf.md
index 5b47c4ccb..7445dc53d 100644
--- a/content/docs/addons-perf.md
+++ b/content/docs/addons-perf.md
@@ -27,8 +27,8 @@ In addition to giving you an overview of your app's overall performance, `Perf`
 See these articles for an introduction to React performance tooling:
 
  - ["How to Benchmark React Components"](https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c)
- - ["Performance Engineering with React"](http://benchling.engineering/performance-engineering-with-react/)
- - ["A Deep Dive into React Perf Debugging"](http://benchling.engineering/deep-dive-react-perf-debugging/) 
+ - ["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react/)
+ - ["A Deep Dive into React Perf Debugging"](https://benchling.engineering/deep-dive-react-perf-debugging/) 
 
 ### Development vs. Production Builds
 
diff --git a/content/docs/addons-shallow-renderer.md b/content/docs/addons-shallow-renderer.md
index 6d3e5dfa0..609595209 100644
--- a/content/docs/addons-shallow-renderer.md
+++ b/content/docs/addons-shallow-renderer.md
@@ -51,7 +51,7 @@ Shallow testing currently has some limitations, namely not supporting refs.
 
 > Note:
 >
-> We also recommend checking out Enzyme's [Shallow Rendering API](http://airbnb.io/enzyme/docs/api/shallow.html). It provides a nicer higher-level API over the same functionality.
+> We also recommend checking out Enzyme's [Shallow Rendering API](https://airbnb.io/enzyme/docs/api/shallow.html). It provides a nicer higher-level API over the same functionality.
 
 ## Reference
 
diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md
index 12606b5a7..6d8d158e6 100644
--- a/content/docs/addons-test-utils.md
+++ b/content/docs/addons-test-utils.md
@@ -15,13 +15,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
 
 ## Overview
 
-`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content).
+`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](https://jestjs.io/docs/tutorial-react).
 
 > Note:
 >
 > We recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to enable and encourage writing tests that use your components as the end users do.
 >
-> Alternatively, Airbnb has released a testing utility called [Enzyme](http://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output.
+> Alternatively, Airbnb has released a testing utility called [Enzyme](https://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output.
 
  - [`act()`](#act)
  - [`mockComponent()`](#mockcomponent)
diff --git a/content/docs/addons-update.md b/content/docs/addons-update.md
index 316dfb2e4..560064734 100644
--- a/content/docs/addons-update.md
+++ b/content/docs/addons-update.md
@@ -21,7 +21,7 @@ var update = require('react-addons-update'); // ES5 with npm
 
 React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) method to significantly speed up your app.
 
-Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](http://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js.
+Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](https://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js.
 
 ### The Main Idea
 
@@ -67,7 +67,7 @@ const newData = update(myData, {
 });
 ```
 
-While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](http://docs.mongodb.org/manual/core/crud-introduction/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.
+While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](https://docs.mongodb.com/manual/crud/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.
 
 The `$`-prefixed keys are called *commands*. The data structure they are "mutating" is called the *target*.
 
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index d779273f5..0d95ca28e 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -108,7 +108,7 @@ out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
 If you're setting up Webpack yourself, you'll probably want to read Webpack's
 [guide on code splitting](https://webpack.js.org/guides/code-splitting/). Your Webpack config should look vaguely [like this](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269).
 
-When using [Babel](http://babeljs.io/), you'll need to make sure that Babel can
+When using [Babel](https://babeljs.io/), you'll need to make sure that Babel can
 parse the dynamic import syntax but is not transforming it. For that you will need [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import).
 
 ## `React.lazy`
diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md
index 07b07aa78..24b1fd810 100644
--- a/content/docs/codebase-overview.md
+++ b/content/docs/codebase-overview.md
@@ -155,7 +155,7 @@ There are multiple injection points in the codebase. In the future, we intend to
 
 ### Multiple Packages
 
-React is a [monorepo](http://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place.
+React is a [monorepo](https://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place.
 
 ### React Core
 
@@ -171,7 +171,7 @@ The code for React core is located in [`packages/react`](https://github.com/face
 
 ### Renderers
 
-React was originally created for the DOM but it was later adapted to also support native platforms with [React Native](http://facebook.github.io/react-native/). This introduced the concept of "renderers" to React internals.
+React was originally created for the DOM but it was later adapted to also support native platforms with [React Native](https://facebook.github.io/react-native/). This introduced the concept of "renderers" to React internals.
 
 **Renderers manage how a React tree turns into the underlying platform calls.**
 
diff --git a/content/docs/create-a-new-react-app.md b/content/docs/create-a-new-react-app.md
index 4d692f76f..b86880d3e 100644
--- a/content/docs/create-a-new-react-app.md
+++ b/content/docs/create-a-new-react-app.md
@@ -37,7 +37,7 @@ The React team primarily recommends these solutions:
 
 ### Create React App
 
-[Create React App](http://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.
+[Create React App](https://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.
 
 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 and npm >= 5.2 on your machine. To create a project, run:
 
@@ -51,7 +51,7 @@ npm start
 >
 >`npx` on the first line is not a typo -- it's a [package runner tool that comes with npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
 
-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. Under the hood, it uses [Babel](http://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them.
+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. Under the hood, it uses [Babel](https://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them.
 
 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).
 
@@ -87,7 +87,7 @@ A JavaScript build toolchain typically consists of:
 
 * A **bundler**, such as [webpack](https://webpack.js.org/) or [Parcel](https://parceljs.org/). It lets you write modular code and bundle it together into small packages to optimize load time.
 
-* A **compiler** such as [Babel](http://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers.
+* A **compiler** such as [Babel](https://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers.
 
 If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality.
 
diff --git a/content/docs/design-principles.md b/content/docs/design-principles.md
index bad88b001..e664001e4 100644
--- a/content/docs/design-principles.md
+++ b/content/docs/design-principles.md
@@ -24,7 +24,7 @@ For example, it should be possible to introduce some local state into a componen
 
 There is nothing "bad" about using state or lifecycle methods in components. Like any powerful feature, they should be used in moderation, but we have no intention to remove them. On the contrary, we think they are integral parts of what makes React useful. We might enable [more functional patterns](https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State) in the future, but both local state and lifecycle methods will be a part of that model.
 
-Components are often described as "just functions" but in our view they need to be more than that to be useful. In React, components describe any composable behavior, and this includes rendering, lifecycle, and state. Some external libraries like [Relay](http://facebook.github.io/relay/) augment components with other responsibilities such as describing data dependencies. It is possible that those ideas might make it back into React too in some form.
+Components are often described as "just functions" but in our view they need to be more than that to be useful. In React, components describe any composable behavior, and this includes rendering, lifecycle, and state. Some external libraries like [Relay](https://facebook.github.io/relay/) augment components with other responsibilities such as describing data dependencies. It is possible that those ideas might make it back into React too in some form.
 
 ### Common Abstraction
 
@@ -126,7 +126,7 @@ We do, however, provide some global configuration on the build level. For exampl
 
 ### Beyond the DOM
 
-We see the value of React in the way it allows us to write components that have fewer bugs and compose together well. DOM is the original rendering target for React but [React Native](http://facebook.github.io/react-native/) is just as important both to Facebook and the community.
+We see the value of React in the way it allows us to write components that have fewer bugs and compose together well. DOM is the original rendering target for React but [React Native](https://facebook.github.io/react-native/) is just as important both to Facebook and the community.
 
 Being renderer-agnostic is an important design constraint of React. It adds some overhead in the internal representations. On the other hand, any improvements to the core translate across platforms.
 
@@ -148,7 +148,7 @@ Optimizing for search is also important because of our reliance on [codemods](ht
 
 [JSX](/docs/introducing-jsx.html) plays a similar role. While it is not required with React, we use it extensively at Facebook both for aesthetic and pragmatic reasons.
 
-In our codebase, JSX provides an unambiguous hint to the tools that they are dealing with a React element tree. This makes it possible to add build-time optimizations such as [hoisting constant elements](http://babeljs.io/docs/plugins/transform-react-constant-elements/), safely lint and codemod internal component usage, and [include JSX source location](https://github.com/facebook/react/pull/6771) into the warnings.
+In our codebase, JSX provides an unambiguous hint to the tools that they are dealing with a React element tree. This makes it possible to add build-time optimizations such as [hoisting constant elements](https://babeljs.io/docs/en/babel-plugin-transform-react-constant-elements/), safely lint and codemod internal component usage, and [include JSX source location](https://github.com/facebook/react/pull/6771) into the warnings.
 
 ### Dogfooding
 
diff --git a/content/docs/faq-functions.md b/content/docs/faq-functions.md
index 337bc1feb..037158533 100644
--- a/content/docs/faq-functions.md
+++ b/content/docs/faq-functions.md
@@ -108,7 +108,7 @@ Binding methods helps ensure that the second snippet works the same way as the f
 
 With React, typically you only need to bind the methods you *pass* to other components. For example, `<button onClick={this.handleClick}>` passes `this.handleClick` so you want to bind it. However, it is unnecessary to bind the `render` method or the lifecycle methods: we don't pass them to other components.
 
-[This post by Yehuda Katz](http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) explains what binding is, and how functions work in JavaScript, in detail.
+[This post by Yehuda Katz](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) explains what binding is, and how functions work in JavaScript, in detail.
 
 ### Why is my function being called every time the component renders?
 
diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md
index 81b677a76..99e8e9fca 100644
--- a/content/docs/faq-state.md
+++ b/content/docs/faq-state.md
@@ -16,7 +16,7 @@ category: FAQ
 
 Here are some good resources for further reading on when to use `props` vs `state`:
 * [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md)
-* [ReactJS: Props vs. State](http://lucybain.com/blog/2016/react-state-vs-pros/)
+* [ReactJS: Props vs. State](https://lucybain.com/blog/2016/react-state-vs-pros/)
 
 ### Why is `setState` giving me the wrong value?
 
diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md
index 8ad77b1ac..fd204bca1 100644
--- a/content/docs/getting-started.md
+++ b/content/docs/getting-started.md
@@ -69,7 +69,7 @@ If you feel that the React documentation goes at a faster pace than you're comfo
 
 ### React for Designers
 
-If you're coming from a design background, [these resources](http://reactfordesigners.com/) are a great place to get started.
+If you're coming from a design background, [these resources](https://reactfordesigners.com/) are a great place to get started.
 
 ### JavaScript Resources
 
@@ -79,7 +79,7 @@ We recommend going through [this JavaScript overview](https://developer.mozilla.
 
 >Tip
 >
->Whenever you get confused by something in JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [javascript.info](http://javascript.info/) are great websites to check. There are also [community support forums](/community/support.html) where you can ask for help.
+>Whenever you get confused by something in JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [javascript.info](https://javascript.info/) are great websites to check. There are also [community support forums](/community/support.html) where you can ask for help.
 
 ### Practical Tutorial
 
diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md
index 1f93772ce..1925380fa 100644
--- a/content/docs/handling-events.md
+++ b/content/docs/handling-events.md
@@ -91,7 +91,7 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/xEmzGg?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)
 
 You have to be careful about the meaning of `this` in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is actually called.
 
diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md
index 451e28850..f6b8b5b63 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 [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html).
+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`](https://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.
 
@@ -293,7 +293,7 @@ const EnhancedComponent = enhance(WrappedComponent)
 
 (This same property also allows `connect` and other enhancer-style HOCs to be used as decorators, an experimental JavaScript proposal.)
 
-The `compose` utility function is provided by many third-party libraries including lodash (as [`lodash.flowRight`](https://lodash.com/docs/#flowRight)), [Redux](http://redux.js.org/docs/api/compose.html), and [Ramda](http://ramdajs.com/docs/#compose).
+The `compose` utility function is provided by many third-party libraries including lodash (as [`lodash.flowRight`](https://lodash.com/docs/#flowRight)), [Redux](https://redux.js.org/api/compose), and [Ramda](https://ramdajs.com/docs/#compose).
 
 ## Convention: Wrap the Display Name for Easy Debugging
 
@@ -396,4 +396,4 @@ import MyComponent, { someFunction } from './MyComponent.js';
 
 While the convention for higher-order components is to pass through all props to the wrapped component, this does not work for refs. That's because `ref` is not really a prop — like `key`, it's handled specially by React. If you add a ref to an element whose component is the result of a HOC, the ref refers to an instance of the outermost container component, not the wrapped component.
 
-The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html).
\ No newline at end of file
+The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html).
diff --git a/content/docs/how-to-contribute.md b/content/docs/how-to-contribute.md
index ff5fd988d..64e4c7edb 100644
--- a/content/docs/how-to-contribute.md
+++ b/content/docs/how-to-contribute.md
@@ -27,7 +27,7 @@ If you send a pull request, please do it against the `master` branch. We maintai
 
 ### Semantic Versioning
 
-React follows [semantic versioning](http://semver.org/). We release patch versions for bugfixes, minor versions for new features, and major versions for any breaking changes. When we make breaking changes, we also introduce deprecation warnings in a minor version so that our users learn about the upcoming changes and migrate their code in advance.
+React follows [semantic versioning](https://semver.org/). We release patch versions for bugfixes, minor versions for new features, and major versions for any breaking changes. When we make breaking changes, we also introduce deprecation warnings in a minor version so that our users learn about the upcoming changes and migrate their code in advance.
 
 We tag every pull request with a label marking whether the change should go in the next [patch](https://github.com/facebook/react/pulls?q=is:open+is:pr+label:semver-patch), [minor](https://github.com/facebook/react/pulls?q=is:open+is:pr+label:semver-minor), or a [major](https://github.com/facebook/react/pulls?q=is:open+is:pr+label:semver-major) version. We release new patch versions every few weeks, minor versions every few months, and major versions one or two times a year.
 
@@ -52,7 +52,7 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
 * IRC: [#reactjs on freenode](https://webchat.freenode.net/?channels=reactjs)
 * Discussion forum: [discuss.reactjs.org](https://discuss.reactjs.org/)
 
-There is also [an active community of React users on the Discord chat platform](http://www.reactiflux.com/) in case you need help with React.
+There is also [an active community of React users on the Discord chat platform](https://www.reactiflux.com/) in case you need help with React.
 
 ### Proposing a Change
 
diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md
index 626a35afe..d0d55f39a 100644
--- a/content/docs/integrating-with-other-libraries.md
+++ b/content/docs/integrating-with-other-libraries.md
@@ -4,7 +4,7 @@ title: Integrating with Other Libraries
 permalink: docs/integrating-with-other-libraries.html
 ---
 
-React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React. This guide will examine some of the more common use cases, focusing on integration with [jQuery](https://jquery.com/) and [Backbone](http://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code.
+React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React. This guide will examine some of the more common use cases, focusing on integration with [jQuery](https://jquery.com/) and [Backbone](https://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code.
 
 ## Integrating with DOM Manipulation Plugins
 
@@ -100,7 +100,7 @@ componentWillUnmount() {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/qmqeQx?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/qmqeQx?editors=0010)
 
 Note that React assigns no special meaning to the `this.el` field. It only works because we have previously assigned this field from a `ref` in the `render()` method:
 
@@ -131,7 +131,7 @@ handleChange(e) {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/bWgbeE?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/bWgbeE?editors=0010)
 
 Finally, there is one more thing left to do. In React, props can change over time. For example, the `<Chosen>` component can get different children if parent component's state changes. This means that at integration points it is important that we manually update the DOM in response to prop updates, since we no longer let React manage the DOM for us.
 
@@ -186,7 +186,7 @@ class Chosen extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/xdgKOz?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/xdgKOz?editors=0010)
 
 ## Integrating with Other View Libraries
 
@@ -247,13 +247,13 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/RVKbvW?editors=1010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/RVKbvW?editors=1010)
 
 You can have as many such isolated components as you like, and use `ReactDOM.render()` to render them to different DOM containers. Gradually, as you convert more of your app to React, you will be able to combine them into larger components, and move some of the `ReactDOM.render()` calls up the hierarchy.
 
 ### Embedding React in a Backbone View
 
-[Backbone](http://backbonejs.org/) views typically use HTML strings, or string-producing template functions, to create the content for their DOM elements. This process, too, can be replaced with rendering a React component.
+[Backbone](https://backbonejs.org/) views typically use HTML strings, or string-producing template functions, to create the content for their DOM elements. This process, too, can be replaced with rendering a React component.
 
 Below, we will create a Backbone view called `ParagraphView`. It will override Backbone's `render()` function to render a React `<Paragraph>` component into the DOM element provided by Backbone (`this.el`). Here, too, we are using [`ReactDOM.render()`](/docs/react-dom.html#render):
 
@@ -275,7 +275,7 @@ const ParagraphView = Backbone.View.extend({
 });
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/gWgOYL?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/gWgOYL?editors=0010)
 
 It is important that we also call `ReactDOM.unmountComponentAtNode()` in the `remove` method so that React unregisters event handlers and other resources associated with the component tree when it is detached.
 
@@ -283,11 +283,11 @@ When a component is removed *from within* a React tree, the cleanup is performed
 
 ## Integrating with Model Layers
 
-While it is generally recommended to use unidirectional data flow such as [React state](/docs/lifting-state-up.html), [Flux](http://facebook.github.io/flux/), or [Redux](http://redux.js.org/), React components can use a model layer from other frameworks and libraries.
+While it is generally recommended to use unidirectional data flow such as [React state](/docs/lifting-state-up.html), [Flux](https://facebook.github.io/flux/), or [Redux](https://redux.js.org/), React components can use a model layer from other frameworks and libraries.
 
 ### Using Backbone Models in React Components
 
-The simplest way to consume [Backbone](http://backbonejs.org/) models and collections from a React component is to listen to the various change events and manually force an update.
+The simplest way to consume [Backbone](https://backbonejs.org/) models and collections from a React component is to listen to the various change events and manually force an update.
 
 Components responsible for rendering models would listen to `'change'` events, while components responsible for rendering collections would listen for `'add'` and `'remove'` events. In both cases, call [`this.forceUpdate()`](/docs/react-component.html#forceupdate) to rerender the component with the new data.
 
@@ -347,7 +347,7 @@ class List extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/GmrREm?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/GmrREm?editors=0010)
 
 ### Extracting Data from Backbone Models
 
@@ -434,6 +434,6 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/PmWwwa?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/PmWwwa?editors=0010)
 
 This technique is not limited to Backbone. You can use React with any model library by subscribing to its changes in the lifecycle methods and, optionally, copying the data into the local React state.
diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index edc5c868c..7cab7c619 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -70,7 +70,7 @@ ReactDOM.render(
 
 [](codepen://introducing-jsx)
 
-We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](http://stackoverflow.com/q/2846283).
+We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](https://stackoverflow.com/q/2846283).
 
 ### JSX is an Expression Too
 
@@ -138,7 +138,7 @@ const title = response.potentiallyMaliciousInput;
 const element = <h1>{title}</h1>;
 ```
 
-By default, React DOM [escapes](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
+By default, React DOM [escapes](https://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
 
 ### JSX Represents Objects
 
@@ -181,4 +181,4 @@ We will explore rendering React elements to the DOM in the next section.
 
 >**Tip:**
 >
->We recommend using the ["Babel" language definition](http://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.
+>We recommend using the ["Babel" language definition](https://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.
diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md
index 4a45aefcc..2b31094c5 100644
--- a/content/docs/reconciliation.md
+++ b/content/docs/reconciliation.md
@@ -10,7 +10,7 @@ React provides a declarative API so that you don't have to worry about exactly w
 
 When you use React, at a single point in time you can think of the `render()` function as creating a tree of React elements. On the next state or props update, that `render()` function will return a different tree of React elements. React then needs to figure out how to efficiently update the UI to match the most recent tree.
 
-There are some generic solutions to this algorithmic problem of generating the minimum number of operations to transform one tree into another. However, the [state of the art algorithms](http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) have a complexity in the order of O(n<sup>3</sup>) where n is the number of elements in the tree.
+There are some generic solutions to this algorithmic problem of generating the minimum number of operations to transform one tree into another. However, the [state of the art algorithms](https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) have a complexity in the order of O(n<sup>3</sup>) where n is the number of elements in the tree.
 
 If we used this in React, displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive. Instead, React implements a heuristic O(n) algorithm based on two assumptions:
 
diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md
index ef1b73555..7bf5b0748 100644
--- a/content/docs/reference-dom-elements.md
+++ b/content/docs/reference-dom-elements.md
@@ -90,7 +90,7 @@ function ComponentWithTransition() {
 }
 ```
 
-Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes [other than `ms`](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W".
+Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes [other than `ms`](https://www.andismith.com/blogs/2012/02/modernizr-prefixed/) should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W".
 
 React will automatically append a "px" suffix to certain numeric inline style properties. If you want to use units other than "px", specify the value as a string with the desired unit. For example:
 
diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md
index f31a43c45..9df77a8c9 100644
--- a/content/docs/reference-glossary.md
+++ b/content/docs/reference-glossary.md
@@ -27,7 +27,7 @@ Bundlers take JavaScript and CSS code written as separate modules (often hundred
 
 ## Package Managers
 
-Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/) and [Yarn](http://yarnpkg.com/) are two package managers commonly used in React applications. Both of them are clients for the same npm package registry.
+Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/) and [Yarn](https://yarnpkg.com/) are two package managers commonly used in React applications. Both of them are clients for the same npm package registry.
 
 ## CDN
 
diff --git a/content/docs/reference-test-renderer.md b/content/docs/reference-test-renderer.md
index 92f5246cb..65e4a70b6 100644
--- a/content/docs/reference-test-renderer.md
+++ b/content/docs/reference-test-renderer.md
@@ -38,7 +38,7 @@ console.log(testRenderer.toJSON());
 //   children: [ 'Facebook' ] }
 ```
 
-You can use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: [Learn more about it](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
+You can use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: [Learn more about it](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
 
 You can also traverse the output to find specific nodes and make assertions about them.
 
@@ -110,7 +110,7 @@ Create a `TestRenderer` instance with the passed React element. It doesn't use t
 testRenderer.toJSON()
 ```
 
-Return an object representing the rendered tree. This tree only contains the platform-specific nodes like `<div>` or `<View>` and their props, but doesn't contain any user-written components. This is handy for [snapshot testing](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
+Return an object representing the rendered tree. This tree only contains the platform-specific nodes like `<div>` or `<View>` and their props, but doesn't contain any user-written components. This is handy for [snapshot testing](https://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
 
 ### `testRenderer.toTree()`
 
diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index c58efae61..c37171fd5 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -29,7 +29,7 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/gwoJZk?editors=0010)
 
 In this section, we will learn how to make the `Clock` component truly reusable and encapsulated. It will set up its own timer and update itself every second.
 
@@ -55,7 +55,7 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
 However, it misses a crucial requirement: the fact that the `Clock` sets up a timer and updates the UI every second should be an implementation detail of the `Clock`.
 
@@ -101,7 +101,7 @@ class Clock extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/zKRGpo?editors=0010)
 
 `Clock` is now defined as a class rather than a function.
 
@@ -193,7 +193,7 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/KgQpJd?editors=0010)
 
 Next, we'll make the `Clock` set up its own timer and update itself every second.
 
@@ -302,7 +302,7 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/amqdNA?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/amqdNA?editors=0010)
 
 Now the clock ticks every second.
 
@@ -437,7 +437,7 @@ function FormattedDate(props) {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/zKRqNB?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/zKRqNB?editors=0010)
 
 This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.
 
@@ -462,7 +462,7 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
+[**Try it on CodePen**](https://codepen.io/gaearon/pen/vXdGmd?editors=0010)
 
 Each `Clock` sets up its own timer and updates independently.
 
diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md
index b05a4b1a9..d1d49006e 100644
--- a/content/docs/static-type-checking.md
+++ b/content/docs/static-type-checking.md
@@ -324,4 +324,4 @@ JetBrains develops and maintains several tools specifically for the React commun
 
 ## Other Languages
 
-Note there are other statically typed languages that compile to JavaScript and are thus React compatible. For example, [F#/Fable](http://fable.io) with [elmish-react](https://elmish.github.io/react). Check out their respective sites for more information, and feel free to add more statically typed languages that work with React to this page!
+Note there are other statically typed languages that compile to JavaScript and are thus React compatible. For example, [F#/Fable](https://fable.io/) with [elmish-react](https://elmish.github.io/react). Check out their respective sites for more information, and feel free to add more statically typed languages that work with React to this page!
diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md
index 53caa2b20..8b4fa091c 100644
--- a/content/docs/thinking-in-react.md
+++ b/content/docs/thinking-in-react.md
@@ -61,7 +61,7 @@ Now that we've identified the components in our mock, let's arrange them into a
 
 ## Step 2: Build A Static Version in React
 
-<p data-height="600" data-theme-id="0" data-slug-hash="BwWzwm" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/BwWzwm">Thinking In React: Step 2</a> on <a href="http://codepen.io">CodePen</a>.</p>
+<p data-height="600" data-theme-id="0" data-slug-hash="BwWzwm" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/BwWzwm">Thinking In React: Step 2</a> on <a href="https://codepen.io">CodePen</a>.</p>
 <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
 
 Now that you have your component hierarchy, it's time to implement your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.
@@ -106,7 +106,7 @@ So finally, our state is:
 
 ## Step 4: Identify Where Your State Should Live
 
-<p data-height="600" data-theme-id="0" data-slug-hash="qPrNQZ" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/qPrNQZ">Thinking In React: Step 4</a> on <a href="http://codepen.io">CodePen</a>.</p>
+<p data-height="600" data-theme-id="0" data-slug-hash="qPrNQZ" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/qPrNQZ">Thinking In React: Step 4</a> on <a href="https://codepen.io">CodePen</a>.</p>
 
 OK, so we've identified what the minimal set of app state is. Next, we need to identify which component mutates, or *owns*, this state.
 
@@ -131,7 +131,7 @@ You can start seeing how your application will behave: set `filterText` to `"bal
 
 ## Step 5: Add Inverse Data Flow
 
-<p data-height="600" data-theme-id="0" data-slug-hash="LzWZvb" data-default-tab="js,result" data-user="rohan10" data-embed-version="2" data-pen-title="Thinking In React: Step 5" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/LzWZvb">Thinking In React: Step 5</a> on <a href="http://codepen.io">CodePen</a>.</p>
+<p data-height="600" data-theme-id="0" data-slug-hash="LzWZvb" data-default-tab="js,result" data-user="rohan10" data-embed-version="2" data-pen-title="Thinking In React: Step 5" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/LzWZvb">Thinking In React: Step 5</a> on <a href="https://codepen.io">CodePen</a>.</p>
 
 So far, we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`.
 
diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md
index fc904417e..be683fb8c 100644
--- a/content/docs/uncontrolled-components.md
+++ b/content/docs/uncontrolled-components.md
@@ -41,7 +41,7 @@ class NameForm extends React.Component {
 
 Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
 
-If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](http://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) to be helpful.
+If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) to be helpful.
 
 ### Default Values
 
diff --git a/src/pages/acknowledgements.html.js b/src/pages/acknowledgements.html.js
index 90103b03b..513aea22f 100644
--- a/src/pages/acknowledgements.html.js
+++ b/src/pages/acknowledgements.html.js
@@ -54,10 +54,10 @@ const Acknowlegements = ({data, location}) => (
               </li>
               <li>
                 <a href="https://christopheraue.net/">Christopher Aue</a> for
-                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.
+                letting us use the{' '}
+                <a href="https://reactjs.com/">reactjs.com</a> domain name and
+                the <a href="https://twitter.com/reactjs">@reactjs</a> username
+                on Twitter.
               </li>
               <li>
                 <a href="https://github.com/ProjectMoon">ProjectMoon</a> for

From 4a7df5686bc378f3536b2b402a2295c922de546e Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 21 Feb 2019 20:05:29 +0000
Subject: [PATCH 08/16] Bump React to 16.8.3 (#1724)

---
 package.json          | 4 ++--
 src/site-constants.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index a18d1d5c8..f1628e72e 100644
--- a/package.json
+++ b/package.json
@@ -46,8 +46,8 @@
     "normalize.css": "^8.0.0",
     "prettier": "^1.7.4",
     "prismjs": "^1.15.0",
-    "react": "16.8.2",
-    "react-dom": "16.8.2",
+    "react": "16.8.3",
+    "react-dom": "16.8.3",
     "react-helmet": "^5.2.0",
     "react-live": "1.8.0-0",
     "remarkable": "^1.7.1",
diff --git a/src/site-constants.js b/src/site-constants.js
index 5f217fa00..5144290f8 100644
--- a/src/site-constants.js
+++ b/src/site-constants.js
@@ -8,7 +8,7 @@
 // NOTE: We can't just use `location.toString()` because when we are rendering
 // the SSR part in node.js we won't have a proper location.
 const urlRoot = 'https://reactjs.org';
-const version = '16.8.2';
+const version = '16.8.3';
 const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js';
 
 export {urlRoot, version, babelURL};

From 927a44a0b43fb5968d58f71891c28970834f2e06 Mon Sep 17 00:00:00 2001
From: Farhad Yasir <farhad.yasir.nb@gmail.com>
Date: Fri, 22 Feb 2019 16:33:27 +1100
Subject: [PATCH 09/16] fix(remove-unused-var): Unused variable ReactDOM
 removed

---
 src/pages/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index f52619ce2..790efd439 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -17,7 +17,6 @@ import {colors, media, sharedStyles} from 'theme';
 import loadScript from 'utils/loadScript';
 import createOgUrl from 'utils/createOgUrl';
 import {babelURL} from 'site-constants';
-import ReactDOM from 'react-dom';
 import logoWhiteSvg from 'icons/logo-white.svg';
 
 class Home extends Component {

From f99cc73499384766407f9f1f191cff6aeb781075 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 23 Feb 2019 11:29:51 +0000
Subject: [PATCH 10/16] Revert "Small typo fix" (#1738)

* Revert "Small typo fix"

* Update hooks-faq.md
---
 content/docs/hooks-faq.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index ea862cbce..b3b99de90 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -192,7 +192,7 @@ There are a few more heuristics, and they might change over time as we fine-tune
 
 ### How do lifecycle methods correspond to Hooks? {#how-do-lifecycle-methods-correspond-to-hooks}
 
-* `constructor`: Function components don't need a constructor. You can initialize the state in the [`useState`](/docs/hooks-reference.html#usestate) call. If computing is expensive, you can pass a function to `useState`.
+* `constructor`: Function components don't need a constructor. You can initialize the state in the [`useState`](/docs/hooks-reference.html#usestate) call. If computing the initial state is expensive, you can pass a function to `useState`.
 
 * `getDerivedStateFromProps`: Schedule an update [while rendering](#how-do-i-implement-getderivedstatefromprops) instead.
 

From aa8adc49a7d50fadbcdedf4415cba3b5c1acccc4 Mon Sep 17 00:00:00 2001
From: santa claus <jenn@dotbiz.info>
Date: Sat, 23 Feb 2019 08:15:32 -0500
Subject: [PATCH 11/16] Update getting-started.md >> "Online Playgrounds"
 (#1733)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

adding a hello world template on glitch.com to the list of online playgrounds 🎏
---
 content/docs/getting-started.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md
index 7f4c25f91..37972e83e 100644
--- a/content/docs/getting-started.md
+++ b/content/docs/getting-started.md
@@ -36,7 +36,7 @@ React has been designed from the start for gradual adoption, and **you can use a
 
 ### Online Playgrounds {#online-playgrounds}
 
-If you're 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).
+If you're interested in playing around with React, you can use an online code playground. Try a Hello World template on [CodePen](codepen://hello-world), [CodeSandbox](https://codesandbox.io/s/new), or [Glitch](https://glitch.com/edit/#!/remix/starter-react-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 we'd only recommend using this for simple demos.
 

From 07253c8209f721bf5600bdac416f670aa598feb2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Sat, 23 Feb 2019 11:42:52 -0800
Subject: [PATCH 12/16] Add "Languages" page (#1691)

* Added language selector page

* PR nits

* Fix typo in variable name

* Added language icon. Show search icon in mobile.

* Tweaked header alignment

* Split languages into 3 categories based on progress:
complete, partially translated, and needs contributors

* Lower-cased pt-* language codes

* Re-added locale sort

* Renamed 'Partially Translated' header to 'In Progress'
---
 content/languages.yml                    | 133 +++++++++++++++++++
 src/components/LayoutHeader/DocSearch.js |  29 ++---
 src/components/LayoutHeader/Header.js    |  77 ++++++++++-
 src/pages/languages.js                   | 159 +++++++++++++++++++++++
 src/site-constants.js                    |   2 +-
 5 files changed, 373 insertions(+), 27 deletions(-)
 create mode 100644 content/languages.yml
 create mode 100644 src/pages/languages.js

diff --git a/content/languages.yml b/content/languages.yml
new file mode 100644
index 000000000..7790945a8
--- /dev/null
+++ b/content/languages.yml
@@ -0,0 +1,133 @@
+# Status enums indicate what percentage of "core" content has been translated:
+# 0: Incomplete (0–49%)
+# 1: Partially complete (50–94%)
+# 2: Complete (95–100%)
+
+- name: English
+  translated_name: English
+  code: en
+  status: 2
+- name: Arabic
+  translated_name: العربية
+  code: ar
+  status: 0
+- name: Azerbaijani
+  translated_name: Azərbaycanca
+  code: az
+  status: 0
+- name: Bulgarian
+  translated_name: Български
+  code: bg
+  status: 0
+- name: Bengali
+  translated_name: বাংলা
+  code: bn
+  status: 0
+- name: German
+  translated_name: Deutsch
+  code: de
+  status: 0
+- name: Spanish
+  translated_name: Español
+  code: es
+  status: 2
+- name: Persian
+  translated_name: فارسی
+  code: fa
+  status: 0
+- name: French
+  translated_name: Français
+  code: fr
+  status: 0
+- name: Hebrew
+  translated_name: עברית
+  code: he
+  status: 0
+- name: Hindi
+  translated_name: हिन्दी
+  code: hi
+  status: 0
+- name: Armenian
+  translated_name: Հայերեն
+  code: hy
+  status: 0
+- name: Indonesian
+  translated_name: Bahasa Indonesia
+  code: id
+  status: 0
+- name: Italian
+  translated_name: Italiano
+  code: it
+  status: 0
+- name: Japanese
+  translated_name: 日本語
+  code: ja
+  status: 1
+- name: Korean
+  translated_name: 한국어
+  code: ko
+  status: 0
+- name: Malayalam
+  translated_name: മലയാളം
+  code: ml
+  status: 0
+- name: Nepali
+  translated_name: नेपाली
+  code: ne
+  status: 0
+- name: Dutch
+  translated_name: Nederlands
+  code: nl
+  status: 0
+- name: Polish
+  translated_name: Polski
+  code: pl
+  status: 0
+- name: Portuguese (Brazil)
+  translated_name: Português do Brasil
+  code: pt-br
+  status: 1
+- name: Portuguese (Portugal)
+  translated_name: Português europeu
+  code: pt-pt
+  status: 0
+- name: Romanian
+  translated_name: Română
+  code: ro
+  status: 0
+- name: Russian
+  translated_name: Русский
+  code: ru
+  status: 0
+- name: Sinhala
+  translated_name: සිංහල
+  code: si
+  status: 0
+- name: Tamil
+  translated_name: தமிழ்
+  code: ta
+  status: 0
+- name: Turkish
+  translated_name: Türkçe
+  code: tr
+  status: 0
+- name: Ukrainian
+  translated_name: Українська
+  code: uk
+  status: 0
+- name: Uzbek
+  translated_name: Oʻzbekcha
+  code: uz
+  status: 0
+- name: Vietnamese
+  translated_name: Tiếng Việt
+  code: vi
+  status: 0
+- name: Simplified Chinese
+  translated_name: 简体中文
+  code: zh-hans
+  status: 0
+- name: Traditional Chinese
+  translated_name: 繁體中文
+  code: zh-hant
+  status: 0
\ No newline at end of file
diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
index b31505917..a920a197a 100644
--- a/src/components/LayoutHeader/DocSearch.js
+++ b/src/components/LayoutHeader/DocSearch.js
@@ -42,27 +42,23 @@ class DocSearch extends Component<{}, State> {
           flex: '0 0 auto',
           flexDirection: 'row',
           alignItems: 'center',
-          paddingLeft: '0.5rem',
-          paddingRight: '0.5rem',
+          paddingLeft: '0.25rem',
+          paddingRight: '0.25rem',
 
-          [media.lessThan('small')]: {
-            justifyContent: 'flex-end',
-          },
           [media.lessThan('large')]: {
+            justifyContent: 'flex-end',
             marginRight: 10,
           },
-          [media.between('small', 'medium')]: {
-            width: 'calc(100% / 3)',
-          },
           [media.between('medium', 'xlarge')]: {
-            width: 'calc(100% / 6)',
+            //width: 'calc(100% / 6)',
           },
-          [media.greaterThan('small')]: {
-            minWidth: 120,
+          [media.greaterThan('large')]: {
+            minWidth: 100,
           },
         }}>
         <input
           css={{
+            width: '100%',
             appearance: 'none',
             background: 'transparent',
             border: 0,
@@ -71,12 +67,12 @@ class DocSearch extends Component<{}, State> {
             fontWeight: 300,
             fontFamily: 'inherit',
             position: 'relative',
-            padding: '5px 5px 5px 29px',
+            padding: '4px 4px 4px 29px',
             backgroundImage: 'url(/search.svg)',
             backgroundSize: '16px 16px',
             backgroundRepeat: 'no-repeat',
             backgroundPositionY: 'center',
-            backgroundPositionX: '5px',
+            backgroundPositionX: '4px',
 
             ':focus': {
               outline: 0,
@@ -86,11 +82,6 @@ class DocSearch extends Component<{}, State> {
 
             [media.lessThan('large')]: {
               fontSize: 16,
-            },
-            [media.greaterThan('small')]: {
-              width: '100%',
-            },
-            [media.lessThan('small')]: {
               width: '16px',
               transition: 'width 0.2s ease, padding 0.2s ease',
               paddingLeft: '16px',
@@ -104,7 +95,7 @@ class DocSearch extends Component<{}, State> {
           }}
           id="algolia-doc-search"
           type="search"
-          placeholder="Search docs"
+          placeholder="Search"
           aria-label="Search docs"
         />
       </form>
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 55743a7c1..ca72e0802 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -92,6 +92,7 @@ const Header = ({location}: {location: Location}) => (
 
         <nav
           css={{
+            flex: '1',
             display: 'flex',
             flexDirection: 'row',
             alignItems: 'stretch',
@@ -99,7 +100,6 @@ const Header = ({location}: {location: Location}) => (
             overflowY: 'hidden',
             WebkitOverflowScrolling: 'touch',
             height: '100%',
-            width: '60%',
 
             [media.size('xsmall')]: {
               flexGrow: '1',
@@ -139,12 +139,17 @@ const Header = ({location}: {location: Location}) => (
 
         <div
           css={{
-            [media.lessThan('medium')]: {
-              display: 'none',
-            },
-            [media.greaterThan('large')]: {
-              width: 'calc(100% / 6)',
-            },
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            width: 'auto',
+
+            //[media.lessThan('medium')]: {
+            //width: 'auto',
+            //},
+            //[media.greaterThan('large')]: {
+            //width: 'calc(100% / 4)',
+            //},
           }}>
           <Link
             css={{
@@ -161,10 +166,45 @@ const Header = ({location}: {location: Location}) => (
                 backgroundColor: colors.lighter,
                 borderRadius: 15,
               },
+
+              [media.lessThan('medium')]: {
+                display: 'none',
+              },
             }}
             to="/versions">
             v{version}
           </Link>
+          <Link
+            css={{
+              display: 'flex',
+              alignItems: 'center',
+              padding: '5px 10px',
+              whiteSpace: 'nowrap',
+              ...fonts.small,
+
+              ':hover': {
+                color: colors.brand,
+              },
+
+              ':focus': {
+                outline: 0,
+                backgroundColor: colors.lighter,
+                borderRadius: 15,
+              },
+            }}
+            to="/languages">
+            <LanguagesIcon />{' '}
+            <span
+              css={{
+                marginLeft: '0.5rem',
+
+                [media.lessThan('medium')]: {
+                  display: 'none',
+                },
+              }}>
+              Languages
+            </span>
+          </Link>
           <a
             css={{
               padding: '5px 10px',
@@ -181,6 +221,10 @@ const Header = ({location}: {location: Location}) => (
                 backgroundColor: colors.lighter,
                 borderRadius: 15,
               },
+
+              [media.lessThan('large')]: {
+                display: 'none',
+              },
             }}
             href="https://github.com/facebook/react/"
             target="_blank"
@@ -200,4 +244,23 @@ const Header = ({location}: {location: Location}) => (
   </header>
 );
 
+const LanguagesIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+      css={{fill: 'currentColor'}}
+      d="
+        M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5
+        7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09
+        5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62
+        7l1.62-4.33L19.12 17h-3.24z
+      "
+    />
+  </svg>
+);
+
 export default Header;
diff --git a/src/pages/languages.js b/src/pages/languages.js
new file mode 100644
index 000000000..61f063125
--- /dev/null
+++ b/src/pages/languages.js
@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ * @flow
+ */
+
+import Layout from 'components/Layout';
+import Container from 'components/Container';
+import Header from 'components/Header';
+import TitleAndMetaTags from 'components/TitleAndMetaTags';
+import React from 'react';
+import {media, sharedStyles} from 'theme';
+
+// $FlowFixMe This is a valid path
+import languages from '../../content/languages.yml';
+
+// Status enums indicate what percentage of "core" content has been translated:
+// 0: Incomplete (0–49%)
+// 1: Partially complete (50–94%)
+// 2: Complete (95–100%)
+const {complete, incomplete, partial} = languages.reduce(
+  (reduced, language) => {
+    switch (language.status) {
+      case 0:
+        reduced.incomplete.push(language);
+        break;
+      case 1:
+        reduced.partial.push(language);
+        break;
+      case 2:
+        reduced.complete.push(language);
+        break;
+    }
+    return reduced;
+  },
+  {complete: [], incomplete: [], partial: []},
+);
+
+type Props = {
+  location: Location,
+};
+
+const Languages = ({location}: Props) => (
+  <Layout location={location}>
+    <Container>
+      <div css={sharedStyles.articleLayout.container}>
+        <div css={sharedStyles.articleLayout.content}>
+          <Header>Languages</Header>
+          <TitleAndMetaTags title="React - Languages" />
+
+          <div css={sharedStyles.markdown}>
+            <p>
+              The React documentation is available in the following languages:
+            </p>
+
+            <LanguagesGrid languages={complete} />
+
+            <h2>In Progress</h2>
+            <LanguagesGrid languages={partial} />
+
+            <h2>Needs Contributors</h2>
+            <LanguagesGrid languages={incomplete} />
+
+            <p>
+              Don't see your language above?{' '}
+              <a
+                href="https://github.com/reactjs/reactjs.org-translation#reactjsorg-translation"
+                target="_blank"
+                rel="noopener">
+                Let us know
+              </a>
+              .
+            </p>
+          </div>
+        </div>
+      </div>
+    </Container>
+  </Layout>
+);
+
+const LanguagesGrid = ({languages}) => (
+  <ul
+    css={{
+      display: 'flex',
+      flexWrap: 'wrap',
+      marginLeft: -20,
+    }}>
+    {languages
+      .sort((a, b) => a.code.localeCompare(b.code))
+      .map(({code, name, status, translated_name}) => (
+        <Language
+          key={code}
+          code={code}
+          name={name}
+          status={status}
+          translatedName={translated_name}
+        />
+      ))}
+  </ul>
+);
+
+const Language = ({code, name, status, translatedName}) => {
+  const prefix = code === 'en' ? '' : `${code}.`;
+
+  return (
+    <li
+      css={{
+        paddingLeft: 20,
+        paddingTop: 20,
+        borderTop: '1px dotted #ececec',
+        paddingBottom: 20,
+        width: '100%',
+        listStyle: 'none',
+
+        [media.size('small')]: {
+          width: '50%',
+        },
+
+        [media.size('medium')]: {
+          width: '33.33%',
+        },
+
+        [media.greaterThan('large')]: {
+          width: '25%',
+        },
+      }}
+      key={code}>
+      <div css={{}}>{name}</div>
+      <div
+        css={{
+          fontSize: 22,
+          fontWeight: 'bold',
+          marginBottom: 8,
+          marginTop: 8,
+        }}>
+        {status === 0 && translatedName}
+        {status > 0 && (
+          <a href={`https://${prefix}reactjs.org/`} rel="nofollow">
+            {translatedName}
+          </a>
+        )}
+      </div>
+      <div css={{marginTop: 10}}>
+        <a
+          css={{
+            fontSize: 12,
+          }}
+          href={`https://github.com/reactjs/${prefix}reactjs.org/`}
+          target="_blank"
+          rel="noopener">
+          Contribute
+        </a>
+      </div>
+    </li>
+  );
+};
+
+export default Languages;
diff --git a/src/site-constants.js b/src/site-constants.js
index 5144290f8..2dc51fadc 100644
--- a/src/site-constants.js
+++ b/src/site-constants.js
@@ -11,4 +11,4 @@ const urlRoot = 'https://reactjs.org';
 const version = '16.8.3';
 const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js';
 
-export {urlRoot, version, babelURL};
+export {babelURL, urlRoot, version};

From d156beb83d5b8a99bcddf56d91bfe8a899bc711d Mon Sep 17 00:00:00 2001
From: Nat Alison <tesseralis@gmail.com>
Date: Sat, 23 Feb 2019 11:53:11 -0800
Subject: [PATCH 13/16] New blog post for translations (#1721)

* Translation blog post

* look ma Im an author

* sophie updates

* exclamation police

* Final tweaks

* Don't single out Spanish translation since it's already mentioned at the top
* Rename the post

* Last tweaks

* Last tweaks v2

* Last tweaks v3
---
 content/authors.yml                           |  3 +
 .../2019-02-23-is-react-translated-yet.md     | 76 +++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 content/blog/2019-02-23-is-react-translated-yet.md

diff --git a/content/authors.yml b/content/authors.yml
index da8efd3a7..5848c65e8 100644
--- a/content/authors.yml
+++ b/content/authors.yml
@@ -73,6 +73,9 @@ sophiebits:
 steveluscher:
   name: Steven Luscher
   url: https://twitter.com/steveluscher
+tesseralis:
+  name: Nat Alison
+  url: https://twitter.com/tesseralis
 timer:
   name: Joe Haddad
   url: https://twitter.com/timer150
diff --git a/content/blog/2019-02-23-is-react-translated-yet.md b/content/blog/2019-02-23-is-react-translated-yet.md
new file mode 100644
index 000000000..caed243f3
--- /dev/null
+++ b/content/blog/2019-02-23-is-react-translated-yet.md
@@ -0,0 +1,76 @@
+---
+title: "Is React Translated Yet? ¡Sí! Sim! はい！"
+author: [tesseralis]
+---
+
+We’re excited to announce an ongoing effort to maintain official translations of the React documentation website into different languages. Thanks to the dedicated efforts of React community members from around the world, React is now being translated into *over 30* languages! You can find them on the new [Languages](/languages) page.
+
+In addition, the following three languages have completed translating most of the React Docs! 🎉
+
+* **Spanish: [es.reactjs.org](https://es.reactjs.org)**
+* **Japanese: [ja.reactjs.org](https://ja.reactjs.org)**
+* **Brazilian Portuguese: [pt-br.reactjs.org](https://pt-br.reactjs.org)**
+
+Special congratulations to [Alejandro Ñáñez Ortiz](https://github.com/alejandronanez), [Rainer Martínez Fraga](https://github.com/carburo), [David Morales](https://github.com/dmorales), [Miguel Alejandro Bolivar Portilla](https://github.com/Darking360), and all the contributors to the Spanish translation for being the first to *completely* translate the core pages of the docs!
+
+## Why Localization Matters
+
+React already has many meetups and conferences around the world, but many programmers don't use English as their primary language. We’d love to support local communities who use React by making our documentation available in most popular languages.
+
+In the past, React community members have created unofficial translations for [Chinese](https://github.com/discountry/react), [Arabic](https://wiki.hsoub.com/React), and [Korean](https://github.com/reactjs/ko.reactjs.org/issues/4); by making an official channel for these translated docs we're hoping to make them easier to find and help make sure that non-English-speaking users of React aren't left behind.
+
+## Contributing
+
+If you would like to help out on a current translation, check out the [Languages](/languages) page and click on the "Contribute" link for your language.
+
+Can't find your language? If you'd like to maintain your langauge's translation fork, follow the instructions in the [translation repo](https://github.com/reactjs/reactjs.org-translation#starting-a-new-translation)!
+
+## Backstory
+
+Hi everyone! I'm [Nat](https://twitter.com/tesseralis)! You may know me as the [polyhedra lady](https://www.youtube.com/watch?v=Ew-UzGC8RqQ). For the past few weeks, I've been helping the React team coordinate their translation effort. Here's how I did it.
+
+Our original approach for translations was to use a SaaS platform that allows users to submit translations. There was already a [pull request](https://github.com/reactjs/reactjs.org/pull/873) to integrate it and my original responsibility was to finish that integration. However, we had concerns about the feasibility of that integration and the current quality of translations on the platform. Our primary concern was ensuring that translations kept up to date with the main repo and didn't become "stale".
+
+[Dan](https://twitter.com/gaearon) encouraged me to look for alternate solutions, and we stumbled across how [Vue](https://vuejs.org) maintained its translations -- through different forks of the main repo on GitHub. In particular, the [Japanese translation](https://jp.vuejs.org) used a bot to periodically check for changes in the English repo and submits pull requests whenever there is a change.
+
+This approach appealed to us for several reasons:
+
+* It was less code integration to get off the ground.
+* It encouraged active maintainers for each repo to ensure quality.
+* Contributors already understand GitHub as a platform and are motivated to contribute directly to the React organization.
+
+We started of with an initial trial period of three languages: Spanish, Japanese, and Simplified Chinese. This allowed us to work out any kinks in our process and make sure future translations are set up for success. I wanted to give the translation teams freedom to choose whatever tools they felt comfortable with. The only requirement is a [checklist](https://github.com/reactjs/reactjs.org-translation/blob/master/PROGRESS.template.md) that outlines the order of importance for translating pages. 
+
+After the trial period, we were ready to accept more languages. I created [a script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/create.js) to automate the creation of the new language repo, and a site, [Is React Translated Yet?](https://isreacttranslatedyet.com), to track progress on the different translations. We started *10* new translations on our first day alone!
+
+Because of the automation, the rest of the maintance went mostly smoothly. We eventually created a [Slack channel](https://rt-slack-invite.herokuapp.com) to make it easier for translators to share information, and I released a guide solidifying the [responsibilities of maintainers](https://github.com/reactjs/reactjs.org-translation/blob/master/maintainer-guide.md). Allowing translators to talk with each other was a great boon -- for example, the Arabic, Persian, and Hebrew translations were able to talk to each other in order to get [right-to-left text](https://en.wikipedia.org/wiki/Right-to-left) working!
+
+## The Bot
+
+The most challenging part was getting the bot to sync changes from the English version of the site. Initially we were using the [che-tsumi](https://github.com/vuejs-jp/che-tsumi) bot created by the Japanese Vue translation team, but we soon decided to build our own bot to suit our needs. In particular, the che-tsumi bot works by [cherry picking](https://git-scm.com/docs/git-cherry-pick) new commits. This ended up causing a cavalade of new issues that were interconnected, especially when [Hooks were released](/blog/2019/02/06/react-v16.8.0.html).
+
+In the end, we decided that instead of cherry picking each commit, it made more sense to merge all new commits and create a pull request around once a day. Conflicts are merged as-is and listed in the [pull request](https://github.com/reactjs/pt-BR.reactjs.org/pull/114), leaving a checklist for maintainers to fix.
+
+Creating the [sync script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/sync.js) was easy enough: it downloads the translated repo, adds the original as a remote, pulls from it, merges the conflicts, and creates a pull request.
+
+The problem was finding a place for the bot to run. I'm a frontend developer for a reason -- Heroku and its ilk are alien to me and *endlessly* frustrating. In fact, until this past Tuesday, I was running the script by hand on my local machine!
+
+The biggest challenge was space. Each fork of the repo is around 100MB -- which takes minutes to clone on my local machine. We have *32* forks, and the free tiers or most deployment platforms I checked limited you to 512MB of storage. 
+
+After lots of notepad calculations, I found a solution: delete each repo once we've finished the script and limit the concurrency of `sync` scripts that run at once to be within the storage requirements. Luckily, Heroku dynos have a much faster Internet connection and are able to clone even the React repo quickly.
+
+There were other smaller issues that I ran into. I tried using the [Heroku Scheduler](https://elements.heroku.com/addons/scheduler) add-on so I didn't have to write any actual `watch` code, but it end up running too inconsistently, and I [had an existential meltdown on Twitter](https://twitter.com/tesseralis/status/1097387938088796160) when I couldn't figure out how to send commits from the Heroku dyno. But in the end, this frontend engineer was able to get the bot working!
+
+There are, as always, improvements I want to make to the bot. Right now it doesn't check whether there is an outstanding pull request before pushing another one. It's still hard to tell the exact change that happened in the original source, and it's possible to miss out on a needed translation change. But I trust the maintainers we've chosen to work through these issues, and the bot is [open source](https://github.com/reactjs/reactjs.org-translation) if anyone wants to help me make these improvements!
+
+## Thanks
+
+Finally, I would like to extend my gratitude to the following people and groups:
+
+ * All the translation maintainers and contributors who are helping translate React to more than thirty languages.
+ * The [Vue.js Japan User Group](https://github.com/vuejs-jp) for initiating the idea of having bot-managed translations, and especially [Hanatani Takuma](https://github.com/potato4d) for helping us understand their approach and helping maintain the Japanese translation.
+ * [Soichiro Miki](https://github.com/smikitki) for many [contributions](https://github.com/reactjs/reactjs.org/pull/1636) and thoughtful comments on the overall translation process, as well as for maintaining the Japanese translation.
+ * [Eric Nakagawa](https://github.com/ericnakagawa) for managing our previous translation process.
+ * [Brian Vaughn](https://github.com/bvaughn) for setting up the [languages page](/languages) and managing all the subdomains.
+
+ And finally, thank you to [Dan Abramov](https://twitter.com/dan_abramov) for giving me this opportunity and being a great mentor along the way.
\ No newline at end of file

From ef81426b069ece68c0202ce465e9b731c9a2004c Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sat, 23 Feb 2019 22:17:16 +0000
Subject: [PATCH 14/16] Put Blog in top bar before Community (#1741)

---
 src/components/LayoutHeader/Header.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index ca72e0802..4e8b6a789 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -123,16 +123,16 @@ const Header = ({location}: {location: Location}) => (
             title="Tutorial"
             to="/tutorial/tutorial.html"
           />
-          <HeaderLink
-            isActive={location.pathname.includes('/community/')}
-            title="Community"
-            to="/community/support.html"
-          />
           <HeaderLink
             isActive={location.pathname.includes('/blog')}
             title="Blog"
             to="/blog/"
           />
+          <HeaderLink
+            isActive={location.pathname.includes('/community/')}
+            title="Community"
+            to="/community/support.html"
+          />
         </nav>
 
         <DocSearch />

From 85d83e8a8ffd298ad02c818a65bd643437406a57 Mon Sep 17 00:00:00 2001
From: Marks Polakovs <marks@markspolakovs.me>
Date: Sun, 24 Feb 2019 03:27:26 +0100
Subject: [PATCH 15/16] [Is React Translated Yet?] Use Dan's correct twitter
 handle (#1742)

---
 content/blog/2019-02-23-is-react-translated-yet.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/blog/2019-02-23-is-react-translated-yet.md b/content/blog/2019-02-23-is-react-translated-yet.md
index caed243f3..2b3d4c7f1 100644
--- a/content/blog/2019-02-23-is-react-translated-yet.md
+++ b/content/blog/2019-02-23-is-react-translated-yet.md
@@ -31,7 +31,7 @@ Hi everyone! I'm [Nat](https://twitter.com/tesseralis)! You may know me as the [
 
 Our original approach for translations was to use a SaaS platform that allows users to submit translations. There was already a [pull request](https://github.com/reactjs/reactjs.org/pull/873) to integrate it and my original responsibility was to finish that integration. However, we had concerns about the feasibility of that integration and the current quality of translations on the platform. Our primary concern was ensuring that translations kept up to date with the main repo and didn't become "stale".
 
-[Dan](https://twitter.com/gaearon) encouraged me to look for alternate solutions, and we stumbled across how [Vue](https://vuejs.org) maintained its translations -- through different forks of the main repo on GitHub. In particular, the [Japanese translation](https://jp.vuejs.org) used a bot to periodically check for changes in the English repo and submits pull requests whenever there is a change.
+[Dan](https://twitter.com/dan_abramov) encouraged me to look for alternate solutions, and we stumbled across how [Vue](https://vuejs.org) maintained its translations -- through different forks of the main repo on GitHub. In particular, the [Japanese translation](https://jp.vuejs.org) used a bot to periodically check for changes in the English repo and submits pull requests whenever there is a change.
 
 This approach appealed to us for several reasons:
 
@@ -73,4 +73,4 @@ Finally, I would like to extend my gratitude to the following people and groups:
  * [Eric Nakagawa](https://github.com/ericnakagawa) for managing our previous translation process.
  * [Brian Vaughn](https://github.com/bvaughn) for setting up the [languages page](/languages) and managing all the subdomains.
 
- And finally, thank you to [Dan Abramov](https://twitter.com/dan_abramov) for giving me this opportunity and being a great mentor along the way.
\ No newline at end of file
+ And finally, thank you to [Dan Abramov](https://twitter.com/dan_abramov) for giving me this opportunity and being a great mentor along the way.

From bab2a3491a18e7074799272d60c8a159473bb7f5 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sun, 24 Feb 2019 14:27:31 +0000
Subject: [PATCH 16/16] Hide horizontal scrollbar in header and tweak
 breakpoitns (#1749)

* Hide horizontal scrollbar in header

* Tweak topbar breakpoints

* Simplify breakpoints to fix animation
---
 src/components/LayoutHeader/DocSearch.js | 14 ++++++++------
 src/components/LayoutHeader/Header.js    |  7 +++++++
 src/theme.js                             |  3 +++
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
index a920a197a..f9827fc51 100644
--- a/src/components/LayoutHeader/DocSearch.js
+++ b/src/components/LayoutHeader/DocSearch.js
@@ -45,14 +45,16 @@ class DocSearch extends Component<{}, State> {
           paddingLeft: '0.25rem',
           paddingRight: '0.25rem',
 
-          [media.lessThan('large')]: {
+          [media.lessThan('expandedSearch')]: {
             justifyContent: 'flex-end',
             marginRight: 10,
           },
-          [media.between('medium', 'xlarge')]: {
-            //width: 'calc(100% / 6)',
-          },
-          [media.greaterThan('large')]: {
+          // TODO: Something like this could show the full search box in more cases
+          // but it currently breaks its expanding animation.
+          // [media.between('mediumSearch', 'largerSearch')]: {
+          //   width: 'calc(100% / 8)',
+          // },
+          [media.greaterThan('expandedSearch')]: {
             minWidth: 100,
           },
         }}>
@@ -80,7 +82,7 @@ class DocSearch extends Component<{}, State> {
               borderRadius: '0.25rem',
             },
 
-            [media.lessThan('large')]: {
+            [media.lessThan('expandedSearch')]: {
               fontSize: 16,
               width: '16px',
               transition: 'width 0.2s ease, padding 0.2s ease',
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 4e8b6a789..e0a285e84 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -101,6 +101,13 @@ const Header = ({location}: {location: Location}) => (
             WebkitOverflowScrolling: 'touch',
             height: '100%',
 
+            // Hide horizontal scrollbar
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
+            '::-webkit-scrollbar': {
+              display: 'none',
+            },
+
             [media.size('xsmall')]: {
               flexGrow: '1',
               width: 'auto',
diff --git a/src/theme.js b/src/theme.js
index 2e1ad7405..9f440d56d 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -38,6 +38,9 @@ const SIZES = {
   // Sidebar/nav related tweakpoints
   largerSidebar: {min: 1100, max: 1339},
   sidebarFixed: {min: 2000, max: Infinity},
+
+  // Topbar related tweakpoints
+  expandedSearch: {min: 1180, max: Infinity},
 };
 
 type Size = $Keys<typeof SIZES>;