Merge branch 'master' into feature/flow-types

.eslintignore

@@ -4,4 +4,7 @@ node_modules/*
 content/*
 
 # Ignore built files
-public/*
+public/*
+
+# Ignore examples
+examples/*

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,5 @@
+Thank you for the PR! Contributors like you keep React awesome!
+
+Please see the Contribution Guide for guidelines:
+
+https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md

CONTRIBUTING.md

@@ -0,0 +1,139 @@
+# Contributing
+
+Thank you for your interest in contributing to the React Docs!
+
+## Code of Conduct
+
+Facebook has adopted a Code of Conduct that we expect project
+participants to adhere to. Please [read the full text](https://code.facebook.com/codeofconduct)
+so that you can understand what actions will and will not be tolerated.
+
+## Guidelines for Text
+
+**Different sections intentionally have different styles.**
+
+The documentation is divided into sections to cater to different learning styles and use cases. When editing an article, try to match the surrounding text in tone and style. When creating a new article, try to match the tone of the other articles in the same section. Learn about the motivation behind each section below.
+
+**[Tutorial](https://reactjs.org/tutorial/tutorial.html)** is relatively informal, and is designed for people who prefer a hands-on approach to learning, and can tolerate skipping theory in favor of practice. Its goal is to give the reader a feel for a typical React workflow rather than to explain fundamentals in detail. Here we focus on *what* to do and spend less time on *how* or *why* we did it. It is extremely important to do a lot of hand-holding and unambiguously describe every single change. It should be possible for a beginner to mechanically follow every instruction, and still get to a working tic-tac-toe game.
+
+**[Quick Start](https://reactjs.org/docs/hello-world.html)** is designed to introduce fundamental concepts in a step-by-step way. Each individual article in Quick Start builds on the knowledge from the previous ones, so make sure not to add any "cyclical dependencies" between them. It is important that the reader can start with the first article and work their way to the last Quick Start article without ever having to "look ahead" for a definition. This explains some ordering choices (e.g. that state is explained before events, or that "thinking in React" doesn't use refs). Quick Start also serves as a reference manual for React concepts, so it is important to be very strict about their definitions and relationships between them. This is, for example, why we introduce elements before components. Resist adding too much detail to Quick Start articles. They intentionally don't cover all corner cases, and focus on establishing firm foundations.
+
+**[Advanced Guides](https://reactjs.org/docs/jsx-in-depth.html)** are deep dives into topics that aren't essential for a beginner developer but that everyone bumps into sooner or later. They don't have a specific order, and target more experienced developers. If you have a set of recipes fitting a particular use case, and those recipes aren't opinionated (most React users would agree on them), this is the place to add them.
+
+**[Reference](https://reactjs.org/docs/react-api.html)** is organized by APIs rather than concepts. It is intended to be exhaustive. Any corner cases or recommendations that were skipped for brevity in Quick Start or Advanced Guides should be mentioned in the reference documentation for the corresponding APIs.
+
+**[Contributing](https://reactjs.org/docs/how-to-contribute.html)** should stay up-to-date and be friendly to relatively experienced developers.
+
+**[FAQ](https://reactjs.org/docs/faq-ajax.html)** has a more conversational tone than the other sections. Here, it's fine to include some content that's not primarily concerned with React, as long as React users are overwhelmingly interested in it (e.g. recommendations on directory structure). It's also okay to show more than a single way to do something in the FAQ, and briefly discuss the tradeoffs. The FAQ prioritizes unblocking people with a working solution over explaining concepts in detail, and can be more opinionated than the rest of the docs, even providing popular library recommendations.
+
+**Try to follow your own instructions.**
+
+When writing step-by-step instructions (e.g. how to install something), try to forget everything you know about the topic, and actually follow the instructions you wrote, a single step at time. Often you will discover that there is implicit knowledge that you forgot to mention, or that there are missing or out-of-order steps in the instructions. Bonus points for getting *somebody else* to follow the steps and watching what they struggle with. Often it would be something very simple that you have not anticipated.
+
+## Guidelines for Code Examples
+
+### Syntax
+
+**Prefer JSX to `createElement`.**
+
+Ignore this if you're specifically describing `createElement`.
+
+**Use `const` where possible, otherwise `let`. Don't use `var`.**
+
+Ignore this if you're specifically writing about ES5.
+
+**Don't use ES6 features when equivalent ES5 features have no downsides.**
+
+Remember that ES6 is still new to a lot of people. While we use it in many places (`const` / `let`, classes, arrow functions), if the equivalent ES5 code is just as straightforward and readable, consider using it.
+
+In particular, you should prefer named `function` declarations over `const myFunction = () => ...` arrows for top-level functions. However, you *should* use arrow functions where they provide a tangible improvement (such as preserving `this` context inside a component). Consider both sides of the tradeoff when deciding whether to use a new feature.
+
+**Don't use features that aren't standardized yet.**
+
+For example, **don't** write this:
+
+```js
+class MyComponent extends React.Component {
+  state = {value: ''};
+  handleChange = (e) => {
+    this.setState({value: e.target.value});
+  };
+}
+```
+
+Instead, **do** write this:
+
+```js
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props)
+    this.handleChange = this.handleChange.bind(this);
+    this.state = {value: ''};
+  }
+  handleChange(e) {
+    this.setState({value: e.target.value});
+  }
+}
+```
+
+Ignore this rule if you're specifically describing an experimental proposal. Make sure to mention its experimental nature in the code and in the surrounding text.
+
+### Style
+
+- Use semicolons.
+- No space between function names and parens (`method() {}` not `method () {}`).
+- When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/).
+
+### Highlighting
+
+Use `js` as the highlighting language in Markdown code blocks:
+
+````
+```js
+// code
+```
+````
+
+Sometimes you'll see blocks with numbers.  
+They tell the website to highlight specific lines.
+
+You can highlight a single line:
+
+````
+```js{2}
+function hello() {
+  // this line will get highlighted
+}
+```
+````
+
+A range of lines:
+
+````
+```js{2-4}
+function hello() {
+  // these lines
+  // will get
+  // highlighted
+}
+```
+````
+
+Or even multiple ranges:
+
+````
+```js{2-4,6}
+function hello() {
+  // these lines
+  // will get
+  // highlighted
+  console.log('hello');
+  // also this one
+  console.log('there');
+}
+```
+````
+
+Be mindful that if you move some code in an example with highlighting, you also need to update the highlighting.
+
+Don't be afraid to often use highlighting! It is very valuable when you need to focus the reader's attention on a particular detail that's easy to miss.

content/blog/2015-07-03-react-v0.14-beta-1.md

@@ -7,7 +7,7 @@ This week, many people in the React community are at [ReactEurope](https://www.r
 
 With React 0.14, we're continuing to let React mature and to make minor changes as the APIs continue to settle down. I'll talk only about the two largest changes in this blog post; when we publish the final release we'll be sure to update all of our documentation and include a full changelog.
 
-You can install the new beta with `npm install react@0.14.0-beta1` and `npm install react-dom@0.14.0-beta1`. As mentioned in [Deprecating react-tools](https://reactjs.org/blog/2015/06/12/deprecating-jstransform-and-react-tools.html), we're no longer updating the react-tools package so this release doesn't include a new version of it. Please try the new version out and let us know what you think, and please do file issues on our GitHub repo if you run into any problems.
+You can install the new beta with `npm install react@0.14.0-beta1` and `npm install react-dom@0.14.0-beta1`. As mentioned in [Deprecating react-tools](/blog/2015/06/12/deprecating-jstransform-and-react-tools.html), we're no longer updating the react-tools package so this release doesn't include a new version of it. Please try the new version out and let us know what you think, and please do file issues on our GitHub repo if you run into any problems.
 
 ## Two Packages
 

content/blog/2017-04-07-react-v15.5.0.md

@@ -63,7 +63,7 @@ jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <path>
 
 The `propTypes`, `contextTypes`, and `childContextTypes` APIs will work exactly as before. The only change is that the built-in validators now live in a separate package.
 
-You may also consider using [Flow](https://flow.org/) to statically type check your JavaScript code, including [React components](https://flow.org/en/docs/frameworks/react/#setup-flow-with-react-a-classtoc-idtoc-setup-flow-with-react-hreftoc-setup-flow-with-reacta).
+You may also consider using [Flow](https://flow.org/) to statically type check your JavaScript code, including [React components](https://flow.org/en/docs/react/components/).
 
 ### Migrating from React.createClass
 

content/blog/2017-09-26-react-v16.0.md

@@ -71,7 +71,7 @@ See the [documentation for `ReactDOMServer`](/docs/react-dom-server.html) for mo
 
 ### Support for custom DOM attributes
 
-Instead of ignoring unrecognized HTML and SVG attributes, React will now [pass them through to the DOM](https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html). This has the added benefit of allowing us to get rid of most of React's attribute whitelist, resulting in reduced file sizes.
+Instead of ignoring unrecognized HTML and SVG attributes, React will now [pass them through to the DOM](/blog/2017/09/08/dom-attributes-in-react-16.html). This has the added benefit of allowing us to get rid of most of React's attribute whitelist, resulting in reduced file sizes.
 
 ### Reduced file size
 
@@ -135,7 +135,7 @@ Refer to the documentation for [detailed installation instructions](/docs/instal
 Although React 16 includes significant internal changes, in terms of upgrading, you can think of this like any other major React release. We've been serving React 16 to Facebook and Messenger.com users since earlier this year, and we released several beta and release candidate versions to flush out additional issues. With minor exceptions, **if your app runs in 15.6 without any warnings, it should work in 16.**
 
 For deprecations listed in [packaging](#packaging) below, codemods are provided to automatically transform your deprecated code.
-See the [15.5.0](https://reactjs.org/blog/2017/04/07/react-v15.5.0.html) blog post for more information, or browse the codemods in the [react-codemod](https://github.com/reactjs/react-codemod) project.
+See the [15.5.0](/blog/2017/04/07/react-v15.5.0.html) blog post for more information, or browse the codemods in the [react-codemod](https://github.com/reactjs/react-codemod) project.
 
 ### New deprecations
 
@@ -171,7 +171,7 @@ React 16 includes a number of small breaking changes. These only affect uncommon
 
 * There is no `react/lib/*` and `react-dom/lib/*` anymore. Even in CommonJS environments, React and ReactDOM are precompiled to single files (“flat bundles”). If you previously relied on undocumented React internals, and they don’t work anymore, let us know about your specific case in a new issue, and we’ll try to figure out a migration strategy for you.
 * There is no `react-with-addons.js` build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them.
-* The deprecations introduced in 15.x have been removed from the core package. `React.createClass` is now available as `create-react-class`, `React.PropTypes` as `prop-types`, `React.DOM` as `react-dom-factories`, `react-addons-test-utils` as `react-dom/test-utils`, and shallow renderer as `react-test-renderer/shallow`. See [15.5.0](https://reactjs.org/blog/2017/04/07/react-v15.5.0.html) and [15.6.0](https://reactjs.org/blog/2017/06/13/react-v15.6.0.html) blog posts for instructions on migrating code and automated codemods.
+* The deprecations introduced in 15.x have been removed from the core package. `React.createClass` is now available as `create-react-class`, `React.PropTypes` as `prop-types`, `React.DOM` as `react-dom-factories`, `react-addons-test-utils` as `react-dom/test-utils`, and shallow renderer as `react-test-renderer/shallow`. See [15.5.0](/blog/2017/04/07/react-v15.5.0.html) and [15.6.0](/blog/2017/06/13/react-v15.6.0.html) blog posts for instructions on migrating code and automated codemods.
 * The names and paths to the single-file browser builds have changed to emphasize the difference between development and production builds. For example:
     * `react/dist/react.js` → `react/umd/react.development.js`
     * `react/dist/react.min.js` → `react/umd/react.production.min.js`
@@ -197,12 +197,11 @@ ReactDOM.render(
 );
 ```
 
-React also depends on `requestAnimationFrame` (even in test environments). A simple shim for test environments would be:
+React also depends on `requestAnimationFrame` (even in test environments).  
+You can use the [raf](https://www.npmjs.com/package/raf) package to shim `requestAnimationFrame`:
 
 ```js
-global.requestAnimationFrame = function(callback) {
-  setTimeout(callback, 0);
-};
+import 'raf/polyfill';
 ```
 
 ## Acknowledgments

content/community/articles.md

@@ -0,0 +1,16 @@
+---
+id: articles
+title: Articles
+layout: community
+sectionid: community
+permalink: community/articles.html
+---
+
+- [React How-to](https://github.com/petehunt/react-howto) - Pete Hunt's guide to the React ecosystem.
+- [9 things every React.js beginner should know](https://camjackson.net/post/9-things-every-reactjs-beginner-should-know) - Cam Jackson's guide for beginners.
+- [React "Aha" Moments](https://tylermcginnis.com/react-aha-moments/) - Tyler McGinnis' article on his collection of "Aha" moments with React.
+- [You're missing the point of React](https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a) - Dan Abramov's article about the best parts of React.
+- [Timeline for Learning React](https://daveceddia.com/timeline-for-learning-react/) - Dave Ceddia's reccommended timeline for learning React and the React ecosystem.
+- [Simple React Development in 2017](https://hackernoon.com/simple-react-development-in-2017-113bd563691f) - Joshua Comeau's guide to showcase how easy it can be to start modern React development.
+- [React FAQ](https://reactfaq.site/) - An external site with articles that try to answer frequently asked questions about React.
+- [Visual Guide to State in React](https://daveceddia.com/visual-guide-to-state-in-react/) - Dave Ceddia's visual guide to React state.

content/community/conferences.md

@@ -7,22 +7,9 @@ permalink: community/conferences.html
 redirect_from: "docs/conferences.html"
 ---
 
-## Upcoming Conferences
-
-### React Summit 2017
-October 21 in Lagos, Nigeria
-
-[Website](https://reactsummit2017.splashthat.com/) - [Twitter](https://twitter.com/DevCircleLagos/) - [Facebook](https://www.facebook.com/groups/DevCLagos/)
-
-### ReactiveConf 2017
-October 25–27, Bratislava, Slovakia
+Do you know of a local React.js conference? Add it here! (Please keep the list chronological)
 
-[Website](https://reactiveconf.com)
-
-### React Seoul 2017
-November 4 in Seoul, South Korea
-
-[Website](http://seoul.reactjs.kr/en)
+## Upcoming Conferences
 
 ### React Day Berlin
 December 2, Berlin, Germany
@@ -44,6 +31,11 @@ May 17-18 in Paris, France
 
 [Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope)
 
+### ReactNext 2018
+September 6 in Tel Aviv, Israel
+
+[Website](https://react-next.com) - [Twitter](https://twitter.com/ReactNext) - [Facebook](https://facebook.com/ReactNext2016)
+
 ### ReactJS Day 2018
 October 5 in Verona, Italy
 
@@ -182,3 +174,19 @@ October 7 in Sao Paulo, Brazil
 October 13 in Stockholm, Sweden
 
 [Website](https://statejs.com/)
+
+### React Summit 2017
+October 21 in Lagos, Nigeria
+
+[Website](https://reactsummit2017.splashthat.com/) - [Twitter](https://twitter.com/DevCircleLagos/) - [Facebook](https://www.facebook.com/groups/DevCLagos/)
+
+### ReactiveConf 2017
+October 25–27, Bratislava, Slovakia
+
+[Website](https://reactiveconf.com)
+
+### React Seoul 2017
+November 4 in Seoul, South Korea
+
+[Website](http://seoul.reactjs.kr/en)
+

content/community/courses.md

@@ -0,0 +1,33 @@
+---
+id: courses
+title: Courses
+layout: community
+sectionid: community
+permalink: community/courses.html
+---
+
+## Free Courses
+
+- [Codecademy: React 101](https://www.codecademy.com/learn/react-101) - Codecademy's introductory course for React.
+
+- [Egghead.io: Start Learning React](https://egghead.io/courses/start-learning-react) - This series will explore the basic fundamentals of React to get you started.
+
+- [React Armory: Learn React by Itself](https://reactarmory.com/guides/learn-react-by-itself) - With React Armory, you can learn React without the buzzwords.
+
+- [The Road to Learn React](https://www.robinwieruch.de/the-road-to-learn-react/) - Build a real world application in plain React without complicated tooling.
+
+## Paid Courses
+
+- [Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics.
+
+- [Frontend Masters](https://frontendmasters.com/courses/) - Video courses on React and other frontend frameworks.
+
+- [Fullstack React](https://www.fullstackreact.com/) - The up-to-date, in-depth, complete guide to React and friends.
+
+- [Pure React](https://daveceddia.com/pure-react/) - A step-by-step guide to mastering React.
+
+- [React for Beginners](https://reactforbeginners.com/) - Learn React in just a couple of afternoons.
+
+- [React Training: Advanced React.js](https://courses.reacttraining.com/p/advanced-react) - Take your React skills to the next level.
+
+- [Tyler McGinnis](https://tylermcginnis.com/courses) - Tyler McGinnis provides access to his courses for a monthly fee. Courses include "React Fundamentals" and "Universal React".

content/community/examples.md

@@ -1,5 +1,22 @@
 ---
-permalink: docs/examples.html
-layout: redirect
-dest_url: https://github.com/facebook/react/wiki/Examples
+id: examples
+title: Example Projects
+layout: community
+sectionid: community
+permalink: community/examples.html
 ---
+
+There are many example projects created by the React community. Feel free to add your own project. If you add a project, please commit to keeping it up to date with the latest versions of React.
+
+
+* **[Calculator](https://github.com/ahfarmer/calculator)** Implementation of the iOS calculator built in React
+* **[Emoji Search](https://github.com/ahfarmer/emoji-search)** Simple React app for searching emoji
+* **[Github Battle App](https://github.com/ReactTraining/react-fundamentals/tree/hosting)** Battle two Github users and see the most popular Github projects for any language.
+* **[Haskell Websockets React Game of Score](https://www.fpcomplete.com/user/dschalk/Websockets%20Game%20of%20Score):** React with a Haskell websockets server.
+* **[K5 Showcase](https://showcase.cloud.global.fujitsu.com):** Sample applications for React.js and Flux.
+* **[React Powered Hacker News Client](https://github.com/insin/react-hn)** A React & react-router-powered implementation of Hacker News using its Firebase API.
+* **[Pokedex](https://github.com/alik0211/pokedex)** The list of Pokémon with live search
+* **[Progressive Web Tetris](https://github.com/skidding/flatris)** Besides a beautiful, mobile-friendly implementation of Tetris, this project is a playground for integrating and experimenting with web technologies.
+* **[Product Comparison Page](https://github.com/Rhymond/product-compare-react)** Simple Product Compare page built in React
+* **[Hacker News Clone React/GraphQL](https://github.com/clintonwoo/hackernews-react-graphql)** Hacker News clone rewritten with universal JavaScript, using React and GraphQL.
+* **[Reddit Mobile](https://github.com/reddit/reddit-mobile)** Reddit's mobile platform.

content/community/external-resources.md

@@ -0,0 +1,19 @@
+---
+id: external-resources
+title: External Resources
+layout: community
+sectionid: community
+permalink: community/external-resources.html
+---
+
+There are many wonderful curated resources the React community has put together.
+
+- [Reactiflux](https://www.reactiflux.com/) - A community of 20,000+ React developers. They keep a well curated [learning section](https://www.reactiflux.com/learning/).
+
+- [React-Redux Links](https://github.com/markerikson/react-redux-links) - Mark Erikson's highly curated list of tutorials and resources for React/Redux/ES6 and more.
+
+- [Awesome React](https://github.com/enaqx/awesome-react) - A collection of awesome things regarding React ecosystem.
+
+- [Awesome React Components](https://github.com/brillout/awesome-react-components) - A curated list of React components.
+
+- [Awesome React Talks](https://github.com/tiaanduplessis/awesome-react-talks) - A curated list of React talks.

content/community/meetups.md

@@ -0,0 +1,117 @@
+---
+id: meetups
+title: Meetups Around the World
+layout: community
+sectionid: community
+permalink: community/meetups.html
+---
+
+Do you have a local React.js meetup? Add it here! (Please keep the list alphabetical)
+
+## Australia
+* [Melbourne](http://www.meetup.com/React-Melbourne/)
+* [Sydney](http://www.meetup.com/React-Sydney/)
+
+## Austria
+* [Vienna](http://www.meetup.com/Vienna-ReactJS-Meetup/)
+
+## Belgium
+* [Belgium](http://www.meetup.com/ReactJS-Belgium/)
+
+## Brazil
+* [Belo Horizonte](http://www.meetup.com/reactbh/)
+* [Rio de Janeiro](https://www.meetup.com/pt-BR/React-Rio-de-Janeiro/)
+* [São Paulo](http://www.meetup.com/pt-BR/ReactJS-SP/)
+
+## Canada
+* [Vancouver, BC](http://www.meetup.com/ReactJS-Vancouver-Meetup/)
+
+## China
+* [Beijing](http://www.meetup.com/Beijing-ReactJS-Meetup/)
+
+## Colombia
+* [Medellin](https://www.meetup.com/React-Medellin/)
+
+## Denmark
+* [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/)
+* [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/)
+
+## England (UK)
+* [Manchester](http://www.meetup.com/Manchester-React-User-Group/)
+
+## France
+* [Paris](http://www.meetup.com/ReactJS-Paris/)
+
+## Germany
+* [Berlin](http://www.meetup.com/React-Berlin/)
+* [Hamburg](http://www.meetup.com/Hamburg-React-js-Meetup/)
+* [Munich](http://www.meetup.com/ReactJS-Meetup-Munich/)
+
+## Greece
+* [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/)
+
+## India
+* [Bangalore](https://www.meetup.com/ReactJS-Bangalore/)
+
+## Ireland
+* [Dublin](http://www.meetup.com/ReactJS-Dublin/)
+
+## Israel
+* [Tel Aviv](http://www.meetup.com/ReactJS-Israel/)
+
+## Netherlands
+* [Amsterdam](http://www.meetup.com/React-Amsterdam/)
+
+## New Zealand
+* [Wellington](http://www.meetup.com/React-Wellington/)
+
+## Norway
+* [Norway](http://reactjsnorway.com/)
+* [Oslo](https://www.meetup.com/ReactJS-Oslo-Meetup/)
+
+## Peru
+* [Lima](http://www.meetup.com/ReactJS-Peru/)
+
+## Philippines
+* [Manila](http://www.meetup.com/reactjs-developers-manila/)
+
+## Poland
+* [Warsaw](http://www.meetup.com/React-js-Warsaw/)
+
+## Spain
+* [Barcelona](http://www.meetup.com/ReactJS-Barcelona/)
+
+## Sweden
+* [Goteborg](http://www.meetup.com/ReactJS-Goteborg/)
+
+## Ukraine
+* [Kyiv](https://www.meetup.com/Kyiv-ReactJS-Meetup)
+
+## US
+* [Atlanta, GA - ReactJS](http://www.meetup.com/React-ATL/)
+* [Austin, TX - ReactJS](http://www.meetup.com/ReactJS-Austin-Meetup/)
+* [Boston, MA - ReactJS](http://www.meetup.com/ReactJS-Boston/)
+* [Boston, MA - React Native](http://www.meetup.com/Boston-React-Native-Meetup/)
+* [Chicago, IL - ReactJS](http://www.meetup.com/React-Chicago/)
+* [Dallas, TX - ReactJS](http://www.meetup.com/ReactDallas/)
+* [Irvine, CA - ReactJS](http://www.meetup.com/ReactJS-OC/)
+* [Las Vegas, NV - ReactJS](http://www.meetup.com/ReactVegas/)
+* [Leesburg, VA - ReactJS](http://www.meetup.com/React-NOVA/)
+* [Los Angeles, CA - ReactJS](http://www.meetup.com/socal-react/)
+* [Los Angeles, CA - React Native](http://www.meetup.com/React-Native-Los-Angeles/)
+* [Nashville, TN - ReactJS](http://www.meetup.com/NashReact-Meetup/)
+* [New York, NY - ReactJS](http://www.meetup.com/NYC-Javascript-React-Group/)
+* [New York, NY - React Native](http://www.meetup.com/React-Native-NYC/)
+* [Palo Alto, CA - React Native](http://www.meetup.com/React-Native-Silicon-Valley/)
+* [Phoenix, AZ - ReactJS](http://www.meetup.com/ReactJS-Phoenix/)
+* [Portland, OR - ReactJS](http://www.meetup.com/Portland-ReactJS/)
+* [Provo, UT - ReactJS](http://www.meetup.com/ReactJS-Utah/)
+* [Sacramento, CA - ReactJS](http://www.meetup.com/Sacramento-ReactJS-Meetup/)
+* [San Francisco - ReactJS](http://www.meetup.com/ReactJS-San-Francisco/)
+* [San Francisco, CA - React Native](http://www.meetup.com/React-Native-San-Francisco/)
+* [Santa Monica, CA - ReactJS](http://www.meetup.com/Los-Angeles-ReactJS-User-Group/)
+* [Seattle, WA - React Native](http://www.meetup.com/Seattle-React-Native-Meetup/)
+* [Seattle, WA - ReactJS](http://www.meetup.com/seattle-react-js/)
+* [Tampa, FL - ReactJS](http://www.meetup.com/ReactJS-Tampa-Bay/)
+* [Tucson, AZ - ReactJS](http://www.meetup.com/Tucson-ReactJS-Meetup/)
+* [Washington, DC - ReactJS](http://www.meetup.com/React-DC/)

content/community/nav.yml

@@ -1,14 +1,42 @@
 - title: Community Resources
   items:
     - id: support
-      title: Where To Get Support
+      title: Support
     - id: conferences
       title: Conferences
+    - id: meetups
+      title: Meetups
+    - id: articles
+      title: Articles
+    - id: podcasts
+      title: Podcasts
     - id: videos
       title: Videos
+    - id: courses
+      title: Courses
     - id: examples
       title: Examples
-      href: https://github.com/facebook/react/wiki/Examples
-    - id: complementary-tools
-      title: Complementary Tools
-      href: https://github.com/facebook/react/wiki/Complementary-Tools
+    - id: external-resources
+      title: External Resources
+- title: Tools
+  items:
+    - id: debugging-tools
+      title: Debugging
+    - id: component-workbenches
+      title: Component Workbenches
+    - id: jsx-integrations
+      title: JSX Integrations
+    - id: starter-kits
+      title: Starter Kits
+    - id: routing
+      title: Routing
+    - id: model-management
+      title: Model Management
+    - id: data-fetching
+      title: Data Fetching
+    - id: testing
+      title: Testing
+    - id: ui-components
+      title: UI Components
+    - id: misc
+      title: Miscellaneous

content/community/podcasts.md

@@ -0,0 +1,24 @@
+---
+id: podcasts
+title: Podcasts
+layout: community
+sectionid: community
+permalink: community/podcasts.html
+---
+
+Podcasts dedicated to React and individual podcast episodes with React discussions.
+
+## Podcasts
+
+- [JavaScript Air](https://javascriptair.com/) - All about JavaScript (currently not producing new episodes).
+
+- [React 30](https://react30.com/) - A weekly 30-minute podcast all about React (currently not producing new episodes).
+
+- [React Podcast](https://itunes.apple.com/us/podcast/react-podcast/id995869265?mt=2) - A podcast covering the ReactJS ecosystem (currently not producing new episodes).
+
+## Episodes
+
+- [CodeWinds Episode 4](http://codewinds.com/podcast/004.html) - Pete Hunt talks with Jeff Barczewski about React.
+
+
+- [JavaScript Jabber 73](https://devchat.tv/js-jabber/073-jsj-react-with-pete-hunt-and-jordan-walke) - Pete Hunt and Jordan Walke talk about React.

content/community/tools-comp-workbenches.md

@@ -0,0 +1,13 @@
+---
+id: component-workbenches
+title: Component Workbenches
+layout: community
+permalink: community/component-workbenches.html
+---
+
+* **[React Storybook](https://github.com/kadirahq/react-storybook):** UI component development environment for React.
+* **[React Styleguidist](https://github.com/styleguidist/react-styleguidist):** Style guide generator & component workbench for React.
+* **[React Showroom](https://github.com/OpusCapita/react-showroom-client):** React based components catalog which provides you with markdown documentation and live examples
+* **[patternplate](https://github.com/sinnerschrader/patternplate)**: A platform for pattern and component library development using React.
+* **[UiZoo.js](https://github.com/myheritage/UiZoo.js)**: Auto-generated component development environment by the JSDoc of React components.
+* **[Neutrino React components preset](https://github.com/eliperelman/neutrino-preset-react-components/)**: Create generic React components and previewing them without the need to embed in an application. Plays nicely with other Neutrino middleware, so you can build, test, preview, and publish multiple React components from a single repository.

content/community/tools-data-fetching.md

@@ -0,0 +1,12 @@
+---
+id: data-fetching
+title: Data Fetching
+layout: community
+permalink: community/data-fetching.html
+---
+
+* **[Apollo](http://dev.apollodata.com/react/):** Easy to set up and use GraphQL client.
+* **[Axios](https://github.com/mzabriskie/axios):** Promise based HTTP client for the browser and node.js.
+* **[Relay Modern](https://facebook.github.io/relay/docs/relay-modern.html)** - A JavaScript framework for building data-driven React applications.
+* **[Request](https://github.com/request/request):** Simplified HTTP request client.
+* **[Superagent](https://visionmedia.github.io/superagent/):** A lightweight "isomorphic" library for AJAX requests.

content/community/tools-debugging.md

@@ -0,0 +1,8 @@
+---
+id: debugging-tools
+title: Debugging
+layout: community
+permalink: community/debugging-tools.html
+---
+
+  * **[React Developer Tools](https://github.com/facebook/react-devtools):** an extension available for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), [Firefox](https://addons.mozilla.org/firefox/addon/react-devtools/), and as a [standalone app](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools) that allows you to inspect the React component hierarchy in the Chrome Developer Tools.

content/community/tools-jsx.md

@@ -0,0 +1,53 @@
+---
+id: jsx-integrations
+title: JSX Integrations
+layout: community
+permalink: community/jsx-integrations.html
+---
+
+## Editor Integrations
+* **[Sublime Text: babel-sublime](https://github.com/babel/babel-sublime):** Snippets, syntax highlighting and optimized color schemes for Sublime Text
+* **[Atom: language-babel](https://atom.io/packages/language-babel)** Support for es2016, JSX and Flow.
+* **[Visual Studio Code](https://code.visualstudio.com/updates/vFebruary#_languages-javascript)** Visual Studio Code supports JSX directly.
+* **[JetBrains WebStorm](http://www.jetbrains.com/webstorm/):** Syntax highlighting, code completion, error detection for JSX
+* **[JetBrains IDE Live Templates](https://github.com/Minwe/jetbrains-react):** React live templates for JetBrains editors (e.g. WebStorm, PHPStorm, etc.)
+* **[javascript-jsx.tmbundle](https://github.com/jjeising/javascript-jsx.tmbundle)** Syntax for TextMate
+* **[web-mode.el](http://web-mode.org):** An autonomous emacs major mode that indents and highlights JSX.  No support for Automatic Semicolon Insertion.
+* **[vim-jsx](https://github.com/mxw/vim-jsx):** Syntax highlighting and indenting for JSX
+
+## Build Tools
+
+* **[Create React App](https://github.com/facebookincubator/create-react-app):** An **officially supported** way to create React apps with no configuration.
+* **[nwb](https://github.com/insin/nwb)**: A toolkit for React, Preact & Inferno apps, React libraries and other npm modules for the web, with no configuration (until you need it)
+* **[Neutrino](https://neutrino.js.org/)**: Create and build modern JavaScript applications with zero initial configuration. Neutrino combines the power of webpack with the simplicity of presets.
+* **[ESLint](http://eslint.org):** A pluggable JavaScript linter that natively supports JSX syntax. Be sure to download [eslint-plugin-react](https://npmjs.com/package/eslint-plugin-react) for React-specific rules.
+* **[Structor](https://www.npmjs.com/package/structor):** This tool is a user interface builder for node.js Web applications with React UI. Structor replaces the now deprecated React UI Builder. Watch [Structor Video Tutorials](https://youtu.be/z96xYa51EWI?list=PLAcaUOtEwjoR_U6eE2HQEXwkefeVESix1)
+* **[react-jsx](https://github.com/bigpipe/react-jsx):** Compile and use JSX as stand-alone templates that can run server-side and client side!
+* **[cjsx-codemod](https://github.com/jsdf/cjsx-codemod):** Write JSX code within Coffeescript!
+* **[ReactScript](https://github.com/1j01/react-script):** Write React code within Coffeescript without JSX!
+* **[jsxhint](https://npmjs.org/package/jsxhint):** [JSHint](http://jshint.com/) (linting) support. (JSX compilation doesn't affect line numbers so lint can also be run directly on the compiled JS.)
+* **[reactify](https://npmjs.org/package/reactify):** [Browserify](http://browserify.org/) transform.
+* **[Babel](https://babeljs.io/):** Standalone & [Browserify](http://browserify.org/) transform (formerly known as **6to5**).
+* **[node-jsx](https://npmjs.org/package/node-jsx):** Native [Node](http://nodejs.org/) support.
+* **[react-hot-loader](http://gaearon.github.io/react-hot-loader/):** Loader for [webpack](http://webpack.github.io/) that lets you edit JSX and have changes appear immediately in the browser without reloading the page.
+* **[jsx-loader](https://npmjs.org/package/jsx-loader):** Loader for [webpack](http://webpack.github.io/).
+* **[express-jsxtransform](https://www.npmjs.org/package/express-jsxtransform):** Middleware for [Express](https://www.npmjs.org/package/express).
+* **[gradle-react-plugin](https://github.com/ehirsch/gradle-react-plugin):** Transform jsx sources during a gradle build.
+* **[grunt-react](https://npmjs.org/package/grunt-react):** [GruntJS](http://gruntjs.com/) task.
+* **[gulp-react](https://npmjs.org/package/gulp-react):** [GulpJS](http://gulpjs.com/) plugin.
+* **[brunch-react](https://www.npmjs.org/package/react-brunch):** [Brunch](http://brunch.io/) plugin.
+* **[jsx-requirejs-plugin](https://github.com/philix/jsx-requirejs-plugin):** [RequireJS](http://requirejs.org/) plugin.
+* **[react-meteor](https://github.com/benjamn/react-meteor):** [Meteor](http://www.meteor.com/) plugin.
+* **[pyReact](https://github.com/facebook/react-python):** [Python](http://www.python.org/) bridge to JSX.
+* **[react-rails](https://github.com/facebook/react-rails):** Ruby gem for using JSX with [Ruby on Rails](http://rubyonrails.org/).
+* **[react-laravel](https://github.com/talyssonoc/react-laravel):** PHP package for using ReactJS with [Laravel](http://laravel.com/).
+* **[ReactJS.NET](http://reactjs.net/):** .NET library for React and JSX.
+* **[sbt-reactjs](https://github.com/ddispaltro/sbt-reactjs)** SBT/Play/Scala JSX compiler plugin
+* **[mimosa-react](https://github.com/dbashford/mimosa-react):** [Mimosa](http://mimosa.io) plugin.
+* **[react-grails-asset-pipeline](https://github.com/peh/react-grails-asset-pipeline):** Assets for react and precompilation of jsx files in [Grails](http://grails.org/).
+* **[gore-gulp](https://github.com/goreutils/gore-gulp):** Wrapper around [webpack](https://webpack.github.io/), [eslint](http://eslint.org/), [mocha](https://mochajs.org/) for ease of use and zero configuration.
+* **[webpack](https://github.com/webpack/webpack):** Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jade, coffee, css, less, ... and your custom stuff.
+* **[webpack-bbq](https://github.com/wenbing/webpack-bbq):** transform your src to lib, supports server rendering and static rendering.
+* **[jsxtransformer](https://github.com/cronn-de/jsxtransformer):** Compile pipeline for jsx files in Java
+* **[babylon-jsx](https://github.com/marionebl/babylon-jsx)**: Transform JSX to ES2015 with babylon sans babel
+* **[CRA Universal CLI](https://github.com/antonybudianto/cra-universal)** - A simple CLI to create and build Express server for your create-react-app projects, featuring Server-side rendering and Code-splitting.

content/community/tools-misc.md

@@ -0,0 +1,19 @@
+---
+id: misc
+title: Miscellaneous
+layout: community
+permalink: community/misc.html
+---
+
+* **[react-localize-redux](https://github.com/ryandrewjohnson/react-localize-redux)** - Localization library for React/Redux.
+
+* **[react-inspector](https://github.com/xyc/react-inspector):** Use DevTools-like object inspectors inside your React app.
+* **[jreact](https://github.com/KnisterPeter/jreact):** Rendering react server-side within a JVM (Java 7 or Java 8)
+* **[react-jss](https://github.com/jsstyles/react-jss):** Inject and mount jss styles in React components.
+* **[django-react](https://github.com/markfinger/django-react):** Server-side rendering of React components for django apps.
+* **[react-engine](https://github.com/paypal/react-engine):** Composite render engine for isomorphic express apps to render both plain react views and react-router views.
+* **[react-render-visualizer](https://github.com/redsunsoft/react-render-visualizer):** A visual way to see what is (re)rendering and why.
+* **[javascript-monads](https://github.com/dschalk/javascript-monads):** As this project matures, the monads are becoming more than mere toys. React is used in unorthodox ways, so if you want to use React the way they do at Facebook, this is not for you. Transpiled code for the three monad classes can be downloaded by entering "npm install reactive-monads".
+* **[ReactCSS](http://reactcss.com/):** Inline Styles in JS with support for React.
+* **[ReactQuestionnaire](https://github.com/kouryuu/react-questionnaire):** Simple react components for building a questionnaire or survey.
+* **[renderjs.io](http://renderjs.io):** SEO for Reactjs. Service for making reactjs application crawlable and shareable.

content/community/tools-model-mgmt.md

@@ -0,0 +1,20 @@
+---
+id: model-management
+title: Model Management
+layout: community
+permalink: community/model-management.html
+---
+
+* **[Alt](http://alt.js.org/):** Pure vanilla flux made isomorphic and without the boilerplate.
+* **[astarisx](http://zuudo.github.io/astarisx/):** Highly Composable MVVM Framework for React with built-in pushState router.
+* **[avers](https://github.com/wereHamster/avers):** A modern client-side model abstraction library.
+* **[backbone-react-component](https://github.com/magalhas/backbone-react-component):** Use multiple Backbone models and collections with React components both on the client and server sides.
+* **[Baobab](https://github.com/Yomguithereal/baobab):** Persistent data tree supporting cursors.
+* **[cortex](https://github.com/mquan/cortex/):** A JavaScript library for centrally managing data with React.
+* **[DeLorean](https://github.com/deloreanjs/delorean):** A completely agnostic JavaScript framework to apply Flux concepts into your interfaces easily.
+* **[Elsa](https://github.com/JonAbrams/elsa):** A Babel plugin that makes your arrays and objects immutable by default… and gives them super powers!
+* **[Immutable](https://github.com/facebook/immutable-js):** Immutable data structures designed to be more JavaScript-y than Mori.
+* **[js-data](http://www.js-data.io/):** A framework-agnostic frontend datastore, that will also fetch your data.
+* **[McFly](https://github.com/kenwheeler/mcfly):** A lightweight Flux library that adds factories for Stores & Actions.
+* **[NuclearJS](https://github.com/optimizely/nuclear-js):** Immutable, reactive Flux architecture. UI Agnostic.
+* **[Reflux](https://github.com/spoike/refluxjs):** An event-based implementation of the Flux architecture that integrates with React components.

content/community/tools-routing.md

@@ -0,0 +1,16 @@
+---
+id: routing
+title: Routing
+layout: community
+permalink: community/routing.html
+---
+
+* **[Aviator](https://github.com/swipely/aviator)** - Aviator is a front-end router built for modular single page applications. ([Example](https://gist.github.com/hojberg/9549330)).
+* **[Backbone](http://backbonejs.org/)** - Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.
+* **[component-router](https://github.com/in-flux/component-router):** Flux-based routing solution for components
+ * **[Director](https://github.com/flatiron/director)** - A tiny and isomorphic URL router for JavaScript.
+ * **[Finch](http://stoodder.github.io/finchjs/)** - A simple, yet powerful, javascript route handling library.
+  * **[mvc-router](https://github.com/rajeev-k/mvc-router)** Use the Model-View-Controller (MVC) pattern to build React applications.
+ * **[react-mini-router](https://github.com/larrymyers/react-mini-router)** A minimal URL router mixin.
+ * **[react-router](https://github.com/rackt/react-router)** - A popular declarative router for React
+ * **[react-router-component](https://github.com/andreypopp/react-router-component)** Declarative routing.

content/community/tools-starter-kits.md

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

content/community/tools-testing.md

@@ -0,0 +1,13 @@
+---
+id: testing
+title: Testing
+layout: community
+permalink: community/testing.html
+---
+
+* **[Enzyme](https://github.com/airbnb/enzyme/):** a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components' output.
+* **[Expect-jsx](https://github.com/algolia/expect-jsx):** toEqualJSX for [expect.js](https://github.com/mjackson/expect)
+* **[Jest](https://facebook.github.io/jest/):** Delightful JavaScript testing used by Facebook to test all JavaScript code including React applications.
+* **[React-unit](https://github.com/pzavolinsky/react-unit):** a lightweight unit test library for ReactJS with very few (js-only) dependencies.
+* **[Skin-deep](https://github.com/glenjamin/skin-deep):** Testing helpers for use with React's shallowRender test utils.
+* **[Unexpected-react](https://github.com/bruderstein/unexpected-react/):** Plugin for the [unexpected](http://unexpected.js.org) assertion library that makes it easy to assert over your React Components and trigger events.

content/community/tools-ui-components.md

@@ -0,0 +1,76 @@
+---
+id: ui-components
+title: UI Componets
+layout: community
+permalink: community/ui-components.html
+---
+
+## Free Components
+* **[Amaze UI React](https://github.com/amazeui/amazeui-react) (in Chinese):** [Amaze UI](https://github.com/allmobilize/amazeui) components built with React.
+* **[Ant Design of React](http://github.com/ant-design/ant-design)** An enterprise-class UI design language and React-based implementation.
+* **[Belle](https://github.com/nikgraf/belle/):** Configurable React Components with great UX.
+* **[chartify](https://github.com/kirillstepkin/chartify)**: Ultra lightweight and customizable React.js chart component.
+* **[Elemental UI](http://elemental-ui.com):** A UI toolkit for React websites and apps, themeable and composed of individually packaged components
+* **[Grommet](http://grommet.io)** The most advanced open source UX framework for enterprise applications.
+* **[Halogen](http://madscript.com/halogen):** A collection of highly customizable loading spinner animations with React.
+* **[Khan Academy's component library](http://khan.github.io/react-components/)**
+* **[markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx)**: compiles markdown into safe React JSX without using dangerous escape hatches.
+* **[material-ui](http://material-ui.com)** A set of React Components that implement Google's Material Design.
+* **[Onsen UI React Components](https://onsen.io/v2/react.html):** UI components for hybrid mobile apps with both Material Design for Android and flat design for iOS.
+* **[React Amazing Grid](https://github.com/Amazing-Space-Invader/react-amazing-grid)** Flex grid with inline styles.
+* **[React Mdl](https://github.com/tleunen/react-mdl)** React Components for Material Design Lite.
+* **[React Web](https://github.com/taobaofed/react-web)** A framework for building web apps with React.
+* **[react-amiga-guru-meditation](https://github.com/gfazioli/react-amiga-guru-meditation):** React JS Class to display a Amiga Guru Meditation Tribute
+* **[react-autosuggest](https://github.com/moroshko/react-autosuggest)** WAI-ARIA compliant React autosuggest component
+* **[react-bootstrap](https://github.com/stevoland/react-bootstrap):** Bootstrap 3 components built with React.
+* **[react-bootstrap-dialog](https://github.com/akiroom/react-bootstrap-dialog):** React Dialog component for react-bootstrap, instead of `window.alert` or `window.confirm`
+* **[react-bootstrap-table](https://github.com/AllenFang/react-bootstrap-table):** It's a react table for Bootstrap.
+* **[react-component](https://github.com/react-component/):** A collection of react components maintained by Alibaba/Alipay employee.
+* **[react-data-menu](https://github.com/dkozar/react-data-menu):** Smart data-driven menu rendered in an overlay. Hints-based aligning with custom renderers and factories. Never clipped by other components or screen edges.
+* **[react-date-picker](https://github.com/Hacker0x01/react-datepicker):** A simple and reusable datepicker component for React.
+* **[react-dates](https://github.com/OpusCapita/react-dates):** Date-inputs + date-picker
+* **[react-dnd](https://github.com/gaearon/react-dnd)** Flexible HTML5 drag-and-drop mixin for React with full DOM control
+* **[react-document-title](https://github.com/gaearon/react-document-title)** Declarative, nested, stateful, isomorphic document.title for React
+* **[react-dropzone](https://github.com/felixrieseberg/React-Dropzone):** React Dropzone for File-Uploads
+* **[react-forms](http://prometheusresearch.github.io/react-forms/):** Form rendering and validation for React
+*
+* **[react-highlight](https://github.com/akiran/react-highlight):** React component for syntax highlighting
+* **[react-image](https://github.com/yuanyan/react-image):** Like `<img />` and Enhanced Image Component for React.
+* **[react-input-autosize](https://github.com/JedWatson/react-input-autosize):** Like `<input />` but resizes automatically to fit all its content.
+* **[react-intense](https://github.com/brycedorn/react-intense):** A component for viewing large images up close
+* **[react-joyride](https://github.com/gilbarbara/react-joyride):** Create walkthroughs and guided tours for your ReactJS apps.
+* **[react-ladda](https://github.com/jsdir/react-ladda):** React wrapper for Ladda buttons.
+* **[react-lorem-component](https://github.com/martinandert/react-lorem-component):** Lorem Ipsum placeholder component.
+* **[react-notification](https://github.com/pburtchaell/react-notification):** Snackbar style notifications
+*
+* **[react-select](https://github.com/JedWatson/react-select):** Native React Select / Multiselect input field, similar to Selectize / Chosen / Select2
+* **[react-selectize](https://furqanzafar.github.io/react-selectize/):** A stateless & flexible Select component, designed as a drop in replacement for React.DOM.Select, inspired by Selectize
+* **[react-sigma](https://www.npmjs.com/package/react-sigma)**: Lightweight but powerful library for drawing network graphs
+* **[react-slick](https://github.com/akiran/react-slick):** Carousel component built with React
+* **[react-sparklines](https://borisyankov.github.io/react-sparklines/):** Beautiful and expressive sparklines component
+* **[react-spreadsheet](https://github.com/felixrieseberg/React-Spreadsheet-Component):** React Spreadsheets / Editable tables with Excel-Style keyboard input and navigation
+* **[react-switch-button](https://github.com/gfazioli/react-switch-button):** Beautiful React Switch button component
+* **[react-tappable](https://github.com/JedWatson/react-tappable)** A Tappable React Component that provides native-feeling onTap events for mobile React apps
+* **[react-textarea-autosize](https://github.com/andreypopp/react-textarea-autosize):** Like `<textarea />` but resizes automatically to fit all its content.
+* **[React-TimeAgo](https://www.npmjs.org/package/react-timeago)** A minimal live updating Time Ago component that smartly converts any time to a 'ago' or 'from now' format and keeps it updated.
+* **[react-translate-component](https://github.com/martinandert/react-translate-component):** React component for i18n.
+* **[react-treeview](https://github.com/chenglou/react-treeview):** Easy, light, flexible tree view.
+* **[react-uwp](https://www.react-uwp.com)** A set of React Components that Implement Microsoft's UWP Design & Fluent Design..
+* **[react-validate-framework](https://github.com/MinJieLiu/react-validate-framework)**: A lightweight and extensible React validation component.
+* **[reactstrap](https://reactstrap.github.io/):** Simple Bootstrap 4 components built with [tether](http://tether.io/)
+* **[recharts](https://github.com/recharts/recharts)**: A composable charting library built on React components.
+* **[Selectivity](https://arendjr.github.io/selectivity/):** Modular and light-weight selection library.
+* **[Semantic-ui](http://react.semantic-ui.com/)**: The official Semantic-UI-React integration, Advanced components and declarative UI.
+* **[storybook-addon-material-ui](https://github.com/sm-react/storybook-addon-material-ui)** A storybook addon for material-ui.
+* **[tcomb-form](https://github.com/gcanti/tcomb-form):** Automatically generate form markup, automatic labels and inline validation from a domain model.
+* **[valuelink](https://github.com/Volicon/valuelink):** Full-featured two-way data binding and forms validation with extended React links.
+* **[video-react](https://github.com/video-react/video-react)**: A web video player built for the HTML5 world using React library.
+* **[Winterfell](https://github.com/andrewhathaway/Winterfell):** Generate complex, validated and extendable JSON-based forms in React
+
+## Fee Based Components
+
+* **[ag-Grid](https://www.ag-grid.com)** Advanced data grid / data table for React.
+* **[ExtReact components](https://www.sencha.com/products/extreact//)**: 115+ Ready-to-Use UI Components.
+* **[Grapecity Wijmo UI Components for React](https://www.grapecity.com/en/react/)**: Expand your React UI options with Wijmo’s complete collection of JavaScript components.
+* **[jQWidgets React components](http://www.jqwidgets.com/react/)**: Enterprise Ready 70+ UI Components.
+* **[Mobiscroll React UI Components](https://mobiscroll.com/react)** Mobile UI Controls for the Productive React Developer.

content/community/videos.md

@@ -7,168 +7,69 @@ permalink: community/videos.html
 redirect_from: "docs/videos.html"
 ---
 
-### Introduction to React
+Videos dedicated to the discussion of React and the React ecosystem.
 
-[Tom Occhino](http://tomocchino.com/) and [Jordan Walke](https://github.com/jordwalke) introduce React at Facebook Seattle.
+### React.js Conf 2017
 
-<iframe title="Tom Occhino and Jordan Walke introduce React at Facebook Seattle" width="650" height="366" src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe>
+A playlist of videos from React.js Conf 2017.
+<iframe title="React.js Conf 2017" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0" frameborder="0" allowfullscreen></iframe>
 
-### Introducing React Native
+### React.js Conf 2016
 
-[Tom Occhino](https://twitter.com/tomocchino) reviews the past and present of React in 2015, and teases where it's going next.
+A playlist of videos from React.js Conf 2016.
+<iframe title="React.js Conf 2016" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY" frameborder="0" allowfullscreen></iframe>
 
-<iframe title="React.js Conf 2015 Keynote - Introducing React Native" width="650" height="366" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
+### React.js Conf 2015
 
-### Rethinking Web App Development at Facebook
-
-Delivering reliable, high-performance web experiences at Facebook's scale has required us to challenge some long-held assumptions about software development. Watch this Facebook F8 2014 talk to learn how we abandoned the traditional MVC paradigm in favor of a more functional application architecture.
-
-<iframe title="Hacker Way: Rethinking Web App Development at Facebook" width="650" height="366" src="https://www.youtube-nocookie.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe>
+A playlist of videos from React.js Conf 2015.
+<iframe title="React.js Conf 2015" width="650" height="366" src="https://www.youtube-nocookie.com/embed/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
 
 ### Secrets of the Virtual DOM
 
-[Pete Hunt](http://www.petehunt.net/) at Mountain West JavaScript 2014 discusses why a virtual DOM was built for React, how it compares to other systems, and its relevance to the future of browser technologies.
-
+Pete Hunt at Mountain West JavaScript 2014 discusses why a virtual DOM was built for React, how it compares to other systems, and its relevance to the future of browser technologies - (2014 - 0h44m).
 <iframe title="Mountain West JavaScript 2014 - Be Predictable, Not Correct. by Pete Hunt" width="650" height="366" src="https://www.youtube-nocookie.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe>
 
-### Rethinking Best Practices
-
-[Pete Hunt](http://www.petehunt.net/)'s talk at JSConf EU 2013 covers three topics: throwing out the notion of templates and building views with JavaScript, “re-rendering” your entire application when your data changes, and a lightweight implementation of the DOM and events.
-
-<iframe title="Pete Hunt: React: Rethinking Best Practices - JSConf EU 2013" width="650" height="366" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe>
-
-
-### High performance functional DOM programming
-
-Tech Talk by [Pete Hunt](http://www.petehunt.net/) at Meteor DevShop 11.
-
-<iframe title="Pete Hunt: High performance functional programming with React and Meteor" width="650" height="366" src="https://www.youtube-nocookie.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe>
-
-
-### Developing User Interfaces With React
+### Flux and Server-side Rendering
 
-[Steven Luscher](https://github.com/steveluscher) at Super VanJS 2013.
+Pete Hunt discusses flux and server-side rendering in React - (2014 - 0h55m).
+<iframe title="YUI Open Roundtable with Pete Hunt" width="650" height="366" src="https://www.youtube-nocookie.com/embed/ZLfe0i2RDtY" frameborder="0" allowfullscreen></iframe>
 
-<iframe title="SuperVanJS 2013: Steven Luscher - Developing User Interfaces with Facebook's React" width="650" height="366" src="https://www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
+### Rethinking Web App Development at Facebook
 
+Facebook F8 2014 talk to learn how we abandoned the traditional MVC paradigm in favor of a more functional application architecture - (2014 - 0h44m).
+<iframe title="Hacker Way: Rethinking Web App Development at Facebook" width="650" height="366" src="https://www.youtube-nocookie.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe>
 
 ### Introduction to React
 
-[Stoyan Stefanov](http://www.phpied.com/) at LAWebSpeed meetup.
-
+Stoyan Stefanov gives an introduction to React at LAWebSpeed meetup - (2014 - 0h51m).
 <iframe title="Joe Dev on Tech - Stoyan Stefanov - Introduction to React" width="650" height="366" src="https://www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe>
 
-### Going big with React
-
-Areeb Malik investigates how React performs in a high stress situation, and how it helped his team build safe code on a massive scale.
-
-[![going big with React](https://i.vimeocdn.com/video/481670116_650.jpg)](https://skillsmatter.com/skillscasts/5429-going-big-with-react#video)
+### React and Flux: Building Applications with a Unidirectional Data Flow
 
-### Backbone + React + Middleman Screencast
+Facebook engineers Bill Fisher and Jing Chen talk about Flux and React at Forward JS 2014, and how using an application architecture with a unidirectional data flow cleans up a lot of their code.
+<iframe title="React and Flux: Building Applications with a Unidirectional Data Flow" width="650" height="366" src="https://www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
 
-This screencast shows how to integrate Backbone with React using [Backbone-React-Component](https://github.com/magalhas/backbone-react-component).
+### Going Big with React
 
-<iframe title="Backbone React Component with Middleman" width="650" height="488" src="https://www.youtube-nocookie.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe>
+Areeb Malik investigates how React performs in a high stress situation, and how it helped his team build safe code on a massive scale - (2014 - 0h31m).
+[![going big with React](https://i.vimeocdn.com/video/481670116_650.jpg)]
 
-### React, or how to make life simpler
 
-Tech talk by [Alexander Solovyov](http://solovyov.net/) at FrontEnd Dev Conf '14 (Russian).
+### Rethinking Best Practices
 
-<iframe title="Tech talk by Alexander Solovyov at FrontEnd Dev Conf ‘14 (Russian)." width="650" height="366" src="https://www.youtube-nocookie.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe>
+Pete Hunt's talk at JSConf EU 2013 covers three topics: throwing out the notion of templates and building views with JavaScript, “re-rendering” your entire application when your data changes, and a lightweight implementation of the DOM and events - (2013 - 0h30m).
+<iframe title="Pete Hunt: React: Rethinking Best Practices - JSConf EU 2013" width="650" height="366" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe>
 
+### High Performance Functional DOM Programming
+Pete Hunt discusses high performance functional programming with React at Meteor DevShop 11 - (2013 - 0h31m).
+<iframe title="Pete Hunt: High performance functional programming with React and Meteor" width="650" height="366" src="https://www.youtube-nocookie.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe>
 
-### React and Flux: Building Applications with a Unidirectional Data Flow
+### Developing User Interfaces With React
 
-Facebook engineers [Bill Fisher](https://twitter.com/fisherwebdev) and [Jing Chen](https://twitter.com/jingc) talk about Flux and React at Forward JS 2014, and how using an application architecture with a unidirectional data flow cleans up a lot of their code.
+Steven Luscher discusses developing user interfaces at Super VanJS 2013 - (2013 - 0h29m).
+<iframe title="SuperVanJS 2013: Steven Luscher - Developing User Interfaces with Facebook's React" width="650" height="366" src="https://www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
 
-<iframe title="React and Flux: Building Applications with a Unidirectional Data Flow" width="650" height="366" src="https://www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
+### Introduction to React
 
-> [Slides and sample code](https://github.com/zertosh/ssr-demo-kit)
-
-### CodeWinds Podcast
-
-[Pete Hunt](http://www.petehunt.net/) talked with [Jeff Barczewski](http://jeff.barczewski.com/) about React in [CodeWinds Episode 4](http://codewinds.com/podcast/004.html).
-<figure><a aria-label="link to play Codewinds Podcast episode 4" href="http://codewinds.com/4"><img src="../images/docs/codewinds-004.png"></a></figure>
-
-<table width="100%">
-<tr>
-<th>02:08</th><td>What is React and why use it?</td>
-<th>27:17</th><td>Rendering HTML on the server with Node.js. Rendering backends</td>
-</tr>
-<tr>
-<th>03:08</th><td>The symbiotic relationship of ClojureScript and React</td>
-<th>29:20</th><td>React evolved through survival of the fittest at Facebook</td>
-</tr>
-<tr>
-<th>04:54</th><td>The history of React and why it was created</td>
-<th>30:15</th><td>Ideas for having state on server and client, using web sockets.</td>
-</tr>
-<tr>
-<th>09:43</th><td>Updating web page with React without using data binding</td>
-<th>32:05</th><td>React-multiuser - distributed shared mutable state using Firebase</td>
-</tr>
-<tr>
-<th>13:11</th><td>Using the virtual DOM to change the browser DOM</td>
-<th>33:03</th><td>Better debugging with React using the state transitions, replaying events</td>
-</tr>
-<tr>
-<th>13:57</th><td>Programming with React, render targets HTML, canvas, other</td>
-<th>34:08</th><td>Differences from Web Components</td>
-</tr>
-<tr>
-<th>16:45</th><td>Working with designers. Contrasted with Ember and AngularJS</td>
-<th>34:25</th><td>Notable companies using React</td>
-</tr>
-<tr>
-<th>21:45</th><td>JSX Compiler bridging HTML and React javascript</td>
-<th>35:16</th><td>Could a React backend plugin be created to target PDF?</td>
-</tr>
-<tr>
-<th>23:50</th><td>Autobuilding JSX and in browser tools for React</td>
-<th>36:30</th><td>Future of React, what's next?</td>
-</tr>
-<tr>
-<th>24:50</th><td>Tips and tricks to working with React, getting started</td>
-<th>39:38</th><td>Contributing and getting help</td>
-</tr>
-</table>
-
-### JavaScript Jabber Podcast
-
-[Pete Hunt](http://www.petehunt.net/) and [Jordan Walke](https://github.com/jordwalke) talked about React in [JavaScript Jabber 73](https://devchat.tv/js-jabber/073-jsj-react-with-pete-hunt-and-jordan-walke).
-<figure><a aria-label="link to play JavaScript Jabber Podcast episode 73" href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/#content"><img src="../images/docs/javascript-jabber.png"></a></figure>
-
-<table width="100%">
-  <tr>
-    <th>01:34</th><td>Pete Hunt Introduction</td>
-    <th>23:06</th><td>Supporting Node.js</td>
-  </tr>
-  <tr>
-    <th>02:45</th><td>Jordan Walke Introduction</td>
-    <th>24:03</th><td>rendr</td>
-  </tr>
-  <tr>
-    <th>04:15</th><td>React</td>
-    <th>26:02</th><td>JSX</td>
-  </tr>
-  <tr>
-    <th>06:38</th><td>60 Frames Per Second</td>
-    <th>30:31</th><td>requestAnimationFrame</td>
-  </tr>
-  <tr>
-    <th>09:34</th><td>Data Binding</td>
-    <th>34:15</th><td>React and Applications</td>
-  </tr>
-  <tr>
-    <th>12:31</th><td>Performance</td>
-    <th>38:12</th><td>React Users Khan Academy</td>
-  </tr>
-  <tr>
-    <th>17:39</th><td>Diffing Algorithm</td>
-    <th>39:53</th><td>Making it work</td>
-  </tr>
-  <tr>
-    <th>19:36</th><td>DOM Manipulation</td>
-    <th></th><td></td>
-  </tr>
-</table>
+Tom Occhino and Jordan Walke introduce React at Facebook Seattle - (2013 - 1h20m).
+<iframe title="Tom Occhino and Jordan Walke introduce React at Facebook Seattle" width="650" height="366" src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe>

content/docs/addons-animation.md

@@ -72,7 +72,7 @@ class TodoList extends React.Component {
 
 > Note:
 >
-> You must provide [the `key` attribute](/docs/multiple-components.html#dynamic-children) for all children of `ReactCSSTransitionGroup`, even when only rendering a single item. This is how React will determine which children have entered, left, or stayed.
+> You must provide [the `key` attribute](/docs/lists-and-keys.html#keys) for all children of `ReactCSSTransitionGroup`, even when only rendering a single item. This is how React will determine which children have entered, left, or stayed.
 
 In this component, when a new item is added to `ReactCSSTransitionGroup` it will get the `example-enter` CSS class and the `example-enter-active` CSS class added in the next tick. This is a convention based on the `transitionName` prop.
 

content/docs/addons-test-utils.md

@@ -66,16 +66,16 @@ Simulate an event dispatch on a DOM node with optional `eventData` event data.
 **Clicking an element**
 
 ```javascript
-// <button ref="button">...</button>
-const node = this.refs.button;
+// <button ref={(node) => this.button = node}>...</button>
+const node = this.button;
 ReactTestUtils.Simulate.click(node);
 ```
 
 **Changing the value of an input field and then pressing ENTER.**
 
 ```javascript
-// <input ref="input" />
-const node = this.refs.input;
+// <input ref={(node) => this.textInput = node} />
+const node = this.textInput;
 node.value = 'giraffe';
 ReactTestUtils.Simulate.change(node);
 ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});

content/docs/codebase-overview.md

@@ -14,45 +14,6 @@ If you want to [contribute to React](/docs/how-to-contribute.html) we hope that
 
 We don't necessarily recommend any of these conventions in React apps. Many of them exist for historical reasons and might change with time.
 
-### Custom Module System
-
-At Facebook, internally we use a custom module system called "Haste". It is similar to [CommonJS](https://nodejs.org/docs/latest/api/modules.html) and also uses `require()` but has a few important differences that often confuse outside contributors.
-
-In CommonJS, when you import a module, you need to specify its relative path:
-
-```js
-// Importing from the same folder:
-var setInnerHTML = require('./setInnerHTML');
-
-// Importing from a different folder:
-var setInnerHTML = require('../utils/setInnerHTML');
-
-// Importing from a deeply nested folder:
-var setInnerHTML = require('../client/utils/setInnerHTML');
-```
-
-However, with Haste **all filenames are globally unique.** In the React codebase, you can import any module from any other module by its name alone:
-
-```js
-var setInnerHTML = require('setInnerHTML');
-```
-
-Haste was originally developed for giant apps like Facebook. It's easy to move files to different folders and import them without worrying about relative paths. The fuzzy file search in any editor always takes you to the correct place thanks to globally unique names.
-
-React itself was extracted from Facebook's codebase and uses Haste for historical reasons. In the future, we will probably [migrate React to use CommonJS or ES Modules](https://github.com/facebook/react/issues/6336) to be more aligned with the community. However, this requires changes in Facebook's internal infrastructure so it is unlikely to happen very soon.
-
-**Haste will make more sense to you if you remember a few rules:**
-
-* All filenames in the React source code are unique. This is why they're sometimes verbose.
-* When you add a new file, make sure you include a [license header](https://github.com/facebook/react/blob/2d7c754f3ba482d69ee3a06dd101ba12cb4592c9/packages/react-dom/src/client/setInnerHTML.js#L1-L8). You can copy it from any existing file. A license header always includes [a line like this](https://github.com/facebook/react/blob/2d7c754f3ba482d69ee3a06dd101ba12cb4592c9/packages/react-dom/src/client/setInnerHTML.js#L7). Change it to match the name of the file you created.
-* Don’t use relative paths when importing. Instead of `require('./setInnerHTML')`, write `require('setInnerHTML')`.
-
-When we compile React for npm, a script copies all the modules into [a single flat directory called `lib`](https://unpkg.com/react@15/lib/) and prepends all `require()` paths with `./`. This way Node, Browserify, webpack, and other tools can understand React build output without being aware of Haste.
-
-**If you're reading React source on GitHub and want to jump to a file, press "t".**
-
-This is a GitHub shortcut for searching the current repo for fuzzy filename matches. Start typing the name of the file you are looking for, and it will show up as the first match.
-
 ### External Dependencies
 
 React has almost no external dependencies. Usually, a `require()` points to a file in React's own codebase. However, there are a few relatively rare exceptions.
@@ -249,7 +210,7 @@ Its main goals are:
 * Ability to return multiple elements from `render()`.
 * Better support for error boundaries.
 
-You can read more about it in [React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture). While it has shipped with React 16, the async features are not enabled by defaut yet.
+You can read more about it in [React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture). While it has shipped with React 16, the async features are not enabled by default yet.
 
 Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler).
 

content/docs/components-and-props.md

@@ -76,7 +76,7 @@ ReactDOM.render(
 );
 ```
 
-[Try it on CodePen.](http://codepen.io/gaearon/pen/YGYmEG?editors=0010)
+[](codepen://components-and-props/rendering-a-component).
 
 Let's recap what happens in this example:
 
@@ -118,14 +118,10 @@ ReactDOM.render(
 );
 ```
 
-[Try it on CodePen.](http://codepen.io/gaearon/pen/KgQKPr?editors=0010)
+[](codepen://components-and-props/composing-components).
 
 Typically, new React apps have a single `App` component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like `Button` and gradually work your way to the top of the view hierarchy.
 
->**Caveat:**
->
->Components must return a single root element. This is why we added a `<div>` to contain all the `<Welcome />` elements.
-
 ## Extracting Components
 
 Don't be afraid to split components into smaller components.
@@ -156,7 +152,7 @@ function Comment(props) {
 }
 ```
 
-[Try it on CodePen.](http://codepen.io/gaearon/pen/VKQwEo?editors=0010)
+[](codepen://components-and-props/extracting-components).
 
 It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
 
@@ -235,7 +231,7 @@ function Comment(props) {
 }
 ```
 
-[Try it on CodePen.](http://codepen.io/gaearon/pen/rrJNJY?editors=0010)
+[](codepen://components-and-props/extracting-components-continued).
 
 Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (`Button`, `Panel`, `Avatar`), or is complex enough on its own (`App`, `FeedStory`, `Comment`), it is a good candidate to be a reusable component.
 

content/docs/cross-origin-errors.md

@@ -8,7 +8,7 @@ permalink: docs/cross-origin-errors.html
 >
 > The following section applies only to the development mode of React. Error handling in production mode is done with regular try/catch statements.
 
-In [development mode](https://reactjs.org/docs/optimizing-performance.html), React uses a global `error` event handler to preserve the "pause on exceptions" behavior of browser DevTools. It also logs errors to the developer console.
+In [development mode](/docs/optimizing-performance.html), React uses a global `error` event handler to preserve the "pause on exceptions" behavior of browser DevTools. It also logs errors to the developer console.
 
 If an error is thrown from a [different origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) the browser will mask its details and React will not be able to log the original error message. This is a security precaution taken by browsers to avoid leaking sensitive information.
 

content/docs/error-boundaries.md

@@ -15,10 +15,12 @@ Error boundaries are React components that **catch JavaScript errors anywhere in
 
 > Note
 > 
-> Error boundaries do **NOT** work in the following scenarios:
-> * Event Handlers (See below ["How About Try / Catch"](#how-about-trycatch) for details about dealing with errors in event handlers)
+> Error boundaries do **not** catch errors for:
+>
+> * Event handlers ([learn more](#how-about-event-handlers))
 > * Asynchronous code (e.g. `setTimeout` or `requestAnimationFrame` callbacks)
-> * Server Side Rendering
+> * Server side rendering
+> * Errors thrown in the error boundary itself (rather than its children)
 
 A class component becomes an error boundary if it defines a new lifecycle method called `componentDidCatch(error, info)`:
 
@@ -115,6 +117,10 @@ You can also see the filenames and line numbers in the component stack trace. Th
 
 If you don’t use Create React App, you can add [this plugin](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source) manually to your Babel configuration. Note that it’s intended only for development and **must be disabled in production**.
 
+> Note
+> 
+> Component names displayed in the stack traces depend on the [`Function.name`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name) property. If you support older browsers and devices which may not yet provide this natively (e.g. IE 11), consider including a `Function.name` polyfill in your bundled application, such as [`function.name-polyfill`](https://github.com/JamesMGreene/Function.name). Alternatively, you may explicitly set the [`displayName`](/docs/react-component.html#displayname) property on all your components.
+
 
 ## How About try/catch?
 
@@ -136,37 +142,42 @@ However, React components are declarative and specify *what* should be rendered:
 
 Error boundaries preserve the declarative nature of React, and behave as you would expect. For example, even if an error occurs in a `componentDidUpdate` hook caused by a `setState` somewhere deep in the tree, it will still correctly propagate to the closest error boundary.
 
-However, an event handler inside of a React component could leverage `try` / `catch` to deal with errors that occur during event handling.
+## How About Event Handlers?
+
+Error boundaries **do not** catch errors inside event handlers.
+
+React doesn't need error boundaries to recover from errors in event handlers. Unlike the render method and lifecycle hooks, the event handlers don't happen during rendering. So if they throw, React still knows what to display on the screen.
+
+If you need to catch an error inside event handler, use the regular JavaScript `try` / `catch` statement:
 
 ```js{8-12,16-19}
 class MyComponent extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { error: null }
+    this.state = { error: null };
   }
   
   handleClick = () => {
     try {
-      // event handling that could possibly produces an error
-    } catch(error) {
-      this.setState({ error })
+      // Do something that could throw
+    } catch (error) {
+      this.setState({ error });
     }
   }
 
   render() {
     if (this.state.error) {
-      // render a fallback UI
-      return <h1>The Click Handler Produces an Error</h1>
+      return <h1>Caught an error.</h1>
     }
-    // ...
     return <div onClick={this.handleClick}>Click Me</div>
   }
 }
 ```
 
+Note that the above example is demonstrating regular JavaScript behavior and doesn't use error boundaries.
 
 ## Naming Changes from React 15
 
 React 15 included a very limited support for error boundaries under a different method name: `unstable_handleError`. This method no longer works, and you will need to change it to `componentDidCatch` in your code starting from the first 16 beta release.
 
-For this change, we’ve provided a [codemod](https://github.com/reactjs/react-codemod#error-boundaries) to automatically migrate your code.
+For this change, we’ve provided a [codemod](https://github.com/reactjs/react-codemod#error-boundaries) to automatically migrate your code.

content/docs/error-decoder.md

@@ -6,8 +6,4 @@ permalink: docs/error-decoder.html
 
 In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.
 
-We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original text of the error.
-
-<script src="/react/js/errorMap.js"></script>
-<div class="error-decoder-container"></div>
-<script src="/react/js/ErrorDecoderComponent.js"></script>
+We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original text of the error.

content/docs/faq-ajax.md

@@ -0,0 +1,88 @@
+---
+id: faq-ajax
+title: AJAX and APIs
+permalink: docs/faq-ajax.html
+layout: docs
+category: FAQ
+---
+
+### How can I make an AJAX call?
+
+You can use any AJAX library you like with React. Some popular ones are [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), and the browser built-in [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
+
+### Where in the component lifecycle should I make an AJAX call?
+
+You should populate data with AJAX calls in the [`componentDidMount`](/docs/react-component.html#mounting) lifecycle method. This is so you can use `setState` to update your component when the data is retrieved.
+
+### Example: Using AJAX results to set local state
+
+The component below demonstrates how to make an AJAX call in `componentDidMount` to populate local component state. 
+
+The example API returns a JSON object like this:
+
+```
+{
+  items: [
+    { id: 1, name: 'Apples', price: '$2' },
+    { id: 2, name: 'Peaches', price: '$5' }
+  ] 
+}
+```
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null,
+      isLoaded: false,
+      items: []
+    };
+  }
+
+  componentDidMount() {
+    fetch("https://api.example.com/items")
+      .then(res => res.json())
+      .then(
+        (result) => {
+          this.setState({
+            isLoaded: true,
+            items: result.items
+          });
+        },
+        // Note: it's important to handle errors here
+        // instead of a catch() block so that we don't swallow
+        // exceptions from actual bugs in components.
+        (error) => {
+          this.setState({
+            isLoaded: true,
+            error
+          });
+        }
+      )
+  }
+
+  render() {
+    const { error, isLoaded, items } = this.state;
+    if (error) {
+      return <div>Error: {error.message}</div>;
+    } else if (!isLoaded) {
+      return <div>Loading...</div>;
+    } else {
+      return (
+        <ul>
+          {items.map(item => (
+            <li key={item.name}>
+              {item.name} {item.price}
+            </li>
+          ))}
+        </ul>
+      );
+    }
+  }
+}
+```
+
+### Cancellation
+
+Note that if the component unmounts before an AJAX call is complete, you may see a warning like `cannot read property 'setState' of undefined`. If this is an issue you may want to keep track of inflight AJAX requests and cancel them in the `componentWillUnmount` lifecycle method.

content/docs/faq-build.md

@@ -0,0 +1,24 @@
+---
+id: faq-build
+title: Babel, JSX, and Build Steps
+permalink: docs/faq-build.html
+layout: docs
+category: FAQ
+---
+
+### Do I need to use JSX with React?
+
+No! Check out ["React Without JSX"](/docs/react-without-jsx.html) to learn more.
+
+### Do I need to use ES6 (+) with React?
+
+No! Check out ["React Without ES6"](/docs/react-without-es6.html) to learn more.
+
+### How can I write comments in JSX?
+
+```jsx
+<div>
+  {/* Comment goes here */}
+  Hello, {name}!
+</div>
+```

content/docs/faq-functions.md

@@ -0,0 +1,297 @@
+---
+id: faq-functions
+title: Passing Functions to Components
+permalink: docs/faq-functions.html
+layout: docs
+category: FAQ
+---
+
+### How do I pass an event handler (like onClick) to a component?
+
+Pass event handlers and other functions as props to child components:
+
+```jsx
+<button onClick={this.handleClick}>
+```
+
+If you need to have access to the parent component in the handler, you also need to bind the function to the component instance (see below).
+
+### How do I bind a function to a component instance?
+
+There are several ways to make sure functions have access to component attributes like `this.props` and `this.state`, depending on which syntax and build steps you are using.
+
+#### Bind in Constructor (ES2015)
+
+```jsx
+class Foo extends Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    console.log('Click happened');
+  }
+  render() {
+    return <button onClick={this.handleClick}>Click Me</button>;
+  }
+}
+```
+
+#### Class Properties (Stage 3 Proposal)
+
+```jsx
+class Foo extends Component {
+  // Note: this syntax is experimental and not standardized yet.
+  handleClick = () => {
+    console.log('Click happened');
+  }
+  render() {
+    return <button onClick={this.handleClick}>Click Me</button>;
+  }
+}
+```
+
+#### Bind in Render
+
+```jsx
+class Foo extends Component {
+  handleClick() {
+    console.log('Click happened');
+  }
+  render() {
+    return <button onClick={this.handleClick.bind(this)}>Click Me</button>;
+  }
+}
+```
+
+>**Note:**
+>
+>Using `Function.prototype.bind` in render creates a new function each time the component renders, which may have performance implications (see below).
+
+#### Arrow Function in Render
+
+```jsx
+class Foo extends Component {
+  handleClick() {
+    console.log('Click happened');
+  }
+  render() {
+    return <button onClick={() => this.handleClick()}>Click Me</button>;
+  }
+}
+```
+
+>**Note:**
+>
+>Using an arrow function in render creates a new function each time the component renders, which may have performance implications (see below).
+
+### Is it OK to use arrow functions in render methods?
+
+Generally speaking, yes, it is OK, and it is often the easiest way to pass parameters to callback functions.
+
+If you do have performance issues, by all means, optimize!
+
+### Why is binding necessary at all?
+
+In JavaScript, these two code snippets are **not** equivalent:
+
+```js
+obj.method();
+```
+
+```js
+var method = obj.method;
+method();
+```
+
+Binding methods helps ensure that the second snippet works the same way as the first one.
+
+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.
+
+### Why is my function being called every time the component renders?
+
+Make sure you aren't _calling the function_ when you pass it to the component:
+
+```jsx
+render() {
+  // Wrong: handleClick is called instead of passed as a reference!
+  return <button onClick={this.handleClick()}>Click Me</button> 
+}
+```
+
+Instead, *pass the function itself* (without parens):
+
+```jsx
+render() {
+  // Correct: handleClick is passed as a reference!
+  return <button onClick={this.handleClick}>Click Me</button> 
+}
+```
+
+### How do I pass a parameter to an event handler or callback?
+
+You can use an arrow function to wrap around an event handler and pass parameters: 
+
+```jsx
+<button onClick={() => this.handleClick(id)} />
+```
+
+This is equivalent to calling `.bind`:
+
+```jsx
+<button onClick={this.handleClick.bind(this, id)} />
+```
+
+#### Example: Passing params using arrow functions
+
+```jsx
+const A = 65 // ASCII character code
+
+class Alphabet extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+    this.state = {
+      justClicked: null,
+      letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i)).
+    };
+  }
+  handleClick(letter) {
+    this.setState({ justClicked: letter });
+  }
+  render() {
+    return (
+      <div>
+        Just clicked: {this.state.justClicked}
+        <ul>
+          {this.state.letters.map(letter => 
+            <li key={letter} onClick={() => this.handleClick(letter)}>
+              {letter}
+            </li>
+          )}
+        </ul>
+      </div>
+   )
+  }
+}
+```
+
+#### Example: Passing params using data-attributes
+
+Alternately, you can use DOM APIs to store data needed for event handlers. Consider this approach if you need to optimize a large number of elements or have a render tree that relies on React.PureComponent equality checks.
+
+```jsx
+const A = 65 // ASCII character code
+
+class Alphabet extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+    this.state = {
+      justClicked: null,
+      letters: Array.from({length: 26}, (_, i) => String.fromCharCode(A + i))
+    };
+  }
+
+  handleClick(e) {
+    this.setState({
+      justClicked: e.target.dataset.letter
+    });
+  }
+  
+  render() {
+    return (
+      <div>
+        Just clicked: {this.state.justClicked}
+        <ul>
+          {this.state.letters.map(letter => 
+            <li key={letter} data-letter={letter} onClick={this.handleClick}>
+              {letter}
+            </li>
+          )}
+        </ul>
+      </div>
+   )
+  }
+}
+```
+
+### How can I prevent a function from being called too quickly or too many times in a row?
+
+If you have an event handler such as `onClick` or `onScroll` and want to prevent the callback from being fired too quickly, you can wrap the handler with a utility such as [`_.debounce`](https://lodash.com/docs#debounce) or [`_.throttle`](https://lodash.com/docs#throttle). See [this visualization](http://demo.nimius.net/debounce_throttle/) for a comparison of the two.
+
+> Note:
+>
+> Both `_.debounce` and `_.throttle` provide a `cancel` method to cancel delayed callbacks. You should either call this method from `componentWillUnmount` _or_ check to ensure that the component is still mounted within the delayed function.
+
+#### Throttle
+
+Throttling prevents a function from being called more than once in a given window of time. The example below throttles a "click" handler to prevent calling it more than once per second.
+
+```jsx
+import throttle from 'lodash.throttle';
+
+class LoadMoreButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+    this.handleClickThrottled = throttle(this.handleClick, 1000);
+  }
+
+  componentWillUnmount() {
+    this.handleClickThrottled.cancel();
+  }
+
+  render() {
+    return <button onClick={this.handleClickThrottled}>Load More</button>;
+  }
+
+  handleClick() {
+    this.props.loadMore();
+  }
+}
+```
+
+#### Debounce
+
+Debouncing ensures that a function will not be executed until after a certain amount of time has passed since it was last called. This can be useful when you have to perform some expensive calculation in response to an event that might dispatch rapidly (eg scroll or keyboard events). The example below debounces text input with a 250ms delay.
+
+```jsx
+import debounce from 'lodash.debounce';
+
+class Searchbox extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.emitChangeDebounced = debounce(this.emitChange, 250);
+  }
+
+  componentWillUnmount() {
+    this.emitChangeDebounced.cancel();
+  }
+
+  render() {
+    return (
+      <input
+        type="text"
+        onChange={this.handleChange}
+        placeholder="Search..."
+        defaultValue={this.props.value}
+      />
+    );
+  }
+
+  handleChange(e) {
+    // React pools events, so we read the value before debounce.
+    // Alternately we could call `event.persist()` and pass the entire event.
+    // For more info see reactjs.org/docs/events.html#event-pooling
+    this.emitChangeDebounced(e.target.value);
+  }
+
+  emitChange(value) {
+    this.props.onChange(value);
+  }
+}
+```

content/docs/faq-internals.md

@@ -0,0 +1,23 @@
+---
+id: faq-internals
+title: Virtual DOM and Internals
+permalink: docs/faq-internals.html
+layout: docs
+category: FAQ
+---
+
+### What is the Virtual DOM?
+
+The virtual DOM (VDOM) is a programming concept where an ideal, or "virtual", representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM. This process is called [reconciliation](/docs/reconciliation.html).
+
+This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.
+
+Since "virtual DOM" is more of a pattern than a specific technology, people sometimes say it to mean different things. In React world, the term "virtual DOM" is usually associated with [React elements](/docs/rendering-elements.html) since they are the objects representing the user interface. React, however, also uses internal objects called "fibers" to hold additional information about the component tree. They may also be considered a part of "virtual DOM" implementation in React.
+
+### Is the Shadow DOM the same as the Virtual DOM?
+
+No, they are different. The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.
+
+### What is "React Fiber"?
+
+Fiber is the new reconciliation engine in React 16. Its main goal is to enable incremental rendering of the virtual DOM. [Read more](https://github.com/acdlite/react-fiber-architecture).

content/docs/faq-state.md

@@ -0,0 +1,62 @@
+---
+id: faq-state
+title: Component State
+permalink: docs/faq-state.html
+layout: docs
+category: FAQ
+---
+
+### What does setState do?
+
+`setState()` schedules an update to a component's `state` object. When state changes, the component responds by re-rendering.
+
+### Why is `setState` is giving me the wrong value?
+
+Calls to `setState` are asynchronous - don't rely on `this.state` to reflect the new value immediately after calling `setState`. Pass an updater function instead of an object if you need compute values based on the current state (see below for details).
+
+Example of code that will not behave as expected:
+
+```jsx
+incrementCount() {
+  // Note: this will *not* work as intended.
+  this.setState({count: this.state.count + 1});
+}
+
+handleSomething() {
+  // this.state.count is 1, then we do this:
+  this.incrementCount();
+  this.incrementCount(); // state wasn't updated yet, so this sets 2 not 3
+}
+```
+
+See below for how to fix this problem.
+
+### How do I update state with values that depend on the current state? 
+
+Pass a function instead of an object to setState to ensure the call always uses the most updated version of state (see below). 
+
+### What is the difference between passing an object or a function in setState?
+
+Passing an update function allows you to access the current state value inside the updater. Since `setState` calls are batched, this lets you chain updates and ensure they build on top of each other instead of conflicting:
+
+```jsx
+incrementCount() {
+  this.setState((prevState) => {
+    return {count: prevState.count + 1}
+  });
+}
+
+handleSomething() {
+  // this.state.count is 1, then we do this:
+  this.incrementCount();
+  this.incrementCount(); // count is now 3
+}
+```
+
+[Learn more about setState](/docs/react-component.html#setstate)
+
+### Should I use a state management library like Redux or MobX?
+
+[Maybe.](http://redux.js.org/docs/faq/General.html#general-when-to-use)
+
+It's a good idea to get to know React first, before adding in additional libraries. You can build quite complex applications using only React.

content/docs/faq-structure.md

@@ -0,0 +1,25 @@
+---
+id: faq-structure
+title: File Structure
+permalink: docs/faq-structure.html
+layout: docs
+category: FAQ
+---
+
+### Is there a recommended way to structure React projects?
+
+One common way to structure projects is locate CSS, JS, and tests together inside folders grouped by feature or route.
+
+```
+FeatureA
+  index.js
+  ComponentA.js
+  ComponentA.css
+  ComponentA.test.js
+  Helper.js
+  Helper.test.js
+FeatureB
+  index.js
+  ComponentB.js
+  ComponentB.test.js
+```

content/docs/faq-styling.md

@@ -0,0 +1,49 @@
+---
+id: faq-styling
+title: Styling and CSS
+permalink: docs/faq-styling.html
+layout: docs
+category: FAQ
+---
+
+### How do I add CSS classes to components?
+
+Pass a string as the `className` prop:
+
+```jsx
+render() {
+  return <span className="menu navigation-menu">Menu</span>
+}
+```
+
+It is common for CSS classes to depend on the component props or state:
+
+```jsx
+render() {
+  let className = 'menu';
+  if (this.props.isActive) {
+    className += ' menu-active';
+  }
+  return <span className={className}>Menu</span>
+}
+```
+
+If you often find yourself writing code like this, [classnames](https://www.npmjs.com/package/classnames) package can simplify it.
+
+### Can I use inline styles?
+
+Yes, see the docs on styling [here](/docs/dom-elements.html#style).
+
+### Are inline styles bad?
+
+CSS classes are generally more efficient than inline styles.
+
+### What is CSS-in-JS?
+
+CSS-in-JS refers to a pattern where CSS is written with Javascript, then extracted into a stylesheet.
+
+[Comparison of CSS-in-JS Libraries](https://github.com/MicheleBertoli/css-in-js)
+
+### Can I do animations in React?
+
+React can be used to power animations. See [React Transition Group](https://reactcommunity.org/react-transition-group/) and [React Motion](https://github.com/chenglou/react-motion), for example.

content/docs/hello-world.md

@@ -12,7 +12,7 @@ redirect_from:
   - "docs/getting-started-zh-CN.html"
 ---
 
-The easiest way to get started with React is to use [this Hello World example code on CodePen](http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010). You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the [Installation](/docs/installation.html) page.
+The easiest way to get started with React is to use [this Hello World example code on CodePen](codepen://hello-world). You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the [Installation](/docs/installation.html) page.
 
 The smallest React example looks like this:
 
@@ -31,4 +31,4 @@ The next few sections will gradually introduce you to using React. We will exami
 
 React is a JavaScript library, and so it assumes you have a basic understanding of the JavaScript language. If you don't feel very confident, we recommend [refreshing your JavaScript knowledge](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) so you can follow along more easily.
 
-We also use some of the ES6 syntax in the examples. We try to use it sparingly because it's still relatively new, but we encourage you to get familiar with [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use <a href="http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact&experimental=false&loose=false&spec=false&code=const%20element%20%3D%20%3Ch1%3EHello%2C%20world!%3C%2Fh1%3E%3B%0Aconst%20container%20%3D%20document.getElementById('root')%3B%0AReactDOM.render(element%2C%20container)%3B%0A">Babel REPL</a> to check what ES6 code compiles to.
+We also use some of the ES6 syntax in the examples. We try to use it sparingly because it's still relatively new, but we encourage you to get familiar with [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to.

content/docs/higher-order-components.md

@@ -163,7 +163,7 @@ function withSubscription(WrappedComponent, selectData) {
 }
 ```
 
-Note that an HOC doesn't modify the input component, nor does it use inheritance to copy its behavior. Rather, an HOC *composes* the original component by *wrapping* it in a container component. An HOC is a pure function with zero side-effects.
+Note that a HOC doesn't modify the input component, nor does it use inheritance to copy its behavior. Rather, a HOC *composes* the original component by *wrapping* it in a container component. A HOC is a pure function with zero side-effects.
 
 And that's it! The wrapped component receives all the props of the container, along with a new prop, `data`, which it uses to render its output. The HOC isn't concerned with how or why the data is used, and the wrapped component isn't concerned with where the data came from.
 
@@ -173,7 +173,7 @@ Like components, the contract between `withSubscription` and the wrapped compone
 
 ## Don't Mutate the Original Component. Use Composition.
 
-Resist the temptation to modify a component's prototype (or otherwise mutate it) inside an HOC.
+Resist the temptation to modify a component's prototype (or otherwise mutate it) inside a HOC.
 
 ```js
 function logProps(InputComponent) {
@@ -217,7 +217,7 @@ You may have noticed similarities between HOCs and a pattern called **container
 
 ## Convention: Pass Unrelated Props Through to the Wrapped Component
 
-HOCs add features to a component. They shouldn't drastically alter its contract. It's expected that the component returned from an HOC has a similar interface to the wrapped component.
+HOCs add features to a component. They shouldn't drastically alter its contract. It's expected that the component returned from a HOC has a similar interface to the wrapped component.
 
 HOCs should pass through props that are unrelated to its specific concern. Most HOCs contain a render method that looks something like this:
 
@@ -269,7 +269,7 @@ const ConnectedComment = connect(commentSelector, commentActions)(CommentList);
 ```js
 // connect is a function that returns another function
 const enhance = connect(commentListSelector, commentListActions);
-// The returned function is an HOC, which returns a component that is connected
+// The returned function is a HOC, which returns a component that is connected
 // to the Redux store
 const ConnectedComment = enhance(CommentList);
 ```
@@ -297,7 +297,7 @@ The `compose` utility function is provided by many third-party libraries includi
 
 ## Convention: Wrap the Display Name for Easy Debugging
 
-The container components created by HOCs show up in the [React Developer Tools](https://github.com/facebook/react-devtools) like any other component. To ease debugging, choose a display name that communicates that it's the result of an HOC.
+The container components created by HOCs show up in the [React Developer Tools](https://github.com/facebook/react-devtools) like any other component. To ease debugging, choose a display name that communicates that it's the result of a HOC.
 
 The most common technique is to wrap the display name of the wrapped component. So if your higher-order component is named `withSubscription`, and the wrapped component's display name is `CommentList`, use the display name `WithSubscription(CommentList)`:
 
@@ -322,7 +322,7 @@ Higher-order components come with a few caveats that aren't immediately obvious
 
 React's diffing algorithm (called reconciliation) uses component identity to determine whether it should update the existing subtree or throw it away and mount a new one. If the component returned from `render` is identical (`===`) to the component from the previous render, React recursively updates the subtree by diffing it with the new one. If they're not equal, the previous subtree is unmounted completely.
 
-Normally, you shouldn't need to think about this. But it matters for HOCs because it means you can't apply an HOC to a component within the render method of a component:
+Normally, you shouldn't need to think about this. But it matters for HOCs because it means you can't apply a HOC to a component within the render method of a component:
 
 ```js
 render() {
@@ -338,18 +338,18 @@ The problem here isn't just about performance — remounting a component causes
 
 Instead, apply HOCs outside the component definition so that the resulting component is created only once. Then, its identity will be consistent across renders. This is usually what you want, anyway.
 
-In those rare cases where you need to apply an HOC dynamically, you can also do it inside a component's lifecycle methods or its constructor.
+In those rare cases where you need to apply a HOC dynamically, you can also do it inside a component's lifecycle methods or its constructor.
 
 ### Static Methods Must Be Copied Over
 
 Sometimes it's useful to define a static method on a React component. For example, Relay containers expose a static method `getFragment` to facilitate the composition of GraphQL fragments.
 
-When you apply an HOC to a component, though, the original component is wrapped with a container component. That means the new component does not have any of the static methods of the original component.
+When you apply a HOC to a component, though, the original component is wrapped with a container component. That means the new component does not have any of the static methods of the original component.
 
 ```js
 // Define a static method
 WrappedComponent.staticMethod = function() {/*...*/}
-// Now apply an HOC
+// Now apply a HOC
 const EnhancedComponent = enhance(WrappedComponent);
 
 // The enhanced component has no static method
@@ -394,7 +394,7 @@ import MyComponent, { someFunction } from './MyComponent.js';
 
 ### Refs Aren't Passed Through
 
-While the convention for higher-order components is to pass through all props to the wrapped component, it's not possible to pass through 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 an HOC, the ref refers to an instance of the outermost container component, not the wrapped component.
+While the convention for higher-order components is to pass through all props to the wrapped component, it's not possible to pass through 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.
 
 If you find yourself facing this problem, the ideal solution is to figure out how to avoid using `ref` at all. Occasionally, users who are new to the React paradigm rely on refs in situations where a prop would work better.
 

content/docs/how-to-contribute.md

@@ -66,7 +66,7 @@ Working on your first Pull Request? You can learn how from this free video serie
 
 **[How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)**
 
-To help you get your feet wet and get you familiar with our contribution process, we have a list of **[beginner friendly issues](https://github.com/facebook/react/issues?q=is:open+is:issue+label:"Difficulty:+beginner")** that contain bugs which are fairly easy to fix. This is a great place to get started.
+To help you get your feet wet and get you familiar with our contribution process, we have a list of **[good first issues](https://github.com/facebook/react/issues?q=is:open+is:issue+label:"good+first+issue")** that contain bugs that have a relatively limited scope. This is a great place to get started.
 
 If you decide to fix an issue, please be sure to check the comment thread in case somebody is already working on a fix. If nobody is working on it at the moment, please leave a comment stating that you intend to work on it so other people don't accidentally duplicate your effort.
 
@@ -95,7 +95,7 @@ In order to accept your pull request, we need you to submit a CLA. You only need
 
 ### Contribution Prerequisites
 
-* You have [Node](https://nodejs.org) installed at v6.0.0+ and [Yarn](https://yarnpkg.com/en/) at v1.2.0+.
+* You have [Node](https://nodejs.org) installed at v8.0.0+ and [Yarn](https://yarnpkg.com/en/) at v1.2.0+.
 * You have `gcc` installed or are comfortable installing a compiler if needed. Some of our dependencies may require a compilation step. On OS X, the Xcode Command Line Tools will cover this. On Ubuntu, `apt-get install build-essential` will install the required packages. Similar commands should work on other Linux distros. Windows will require some additional steps, see the [`node-gyp` installation instructions](https://github.com/nodejs/node-gyp#installation) for details.
 * You are familiar with Git.
 
@@ -119,12 +119,15 @@ First, run `yarn build`. This will produce pre-built bundles in `build` folder,
 
 The easiest way to try your changes is to run `yarn build core,dom --type=UMD` and then open `fixtures/packaging/babel-standalone/dev.html`. This file already uses `react.development.js` from the `build` folder so it will pick up your changes.
 
-If you want to try your changes in your existing React project, you may copy `build/dist/react.development.js`, `build/dist/react-dom.development.js`, or any other build products into your app and use them instead of the stable version. If your project uses React from npm, you may delete `react` and `react-dom` in its dependencies and use `npm link` to point them to your local `build` folder:
+If you want to try your changes in your existing React project, you may copy `build/dist/react.development.js`, `build/dist/react-dom.development.js`, or any other build products into your app and use them instead of the stable version. If your project uses React from npm, you may delete `react` and `react-dom` in its dependencies and use `yarn link` to point them to your local `build` folder:
 
 ```sh
-cd your_project
-yarn link ~/path_to_your_react_clone/build/packages/react
-yarn link ~/path_to_your_react_clone/build/packages/react-dom
+cd ~/path_to_your_react_clone/build/packages/react
+yarn link
+cd ~/path_to_your_react_clone/build/packages/react-dom
+yarn link
+cd /path/to/your/project
+yarn link react react-dom
 ```
 
 Every time you run `yarn build` in the React folder, the updated versions will appear in your project's `node_modules`. You can then rebuild your project to try your changes.
@@ -145,6 +148,13 @@ However, there are still some styles that the linter cannot pick up. If you are
 
 You may be interested in watching [this short video](https://www.youtube.com/watch?v=wUpPsEcGsg8) (26 mins) which gives an introduction on how to contribute to React.
 
+#### Video highlights:
+- [4:12](https://youtu.be/wUpPsEcGsg8?t=4m12s) - Building and testing React locally
+- [6:07](https://youtu.be/wUpPsEcGsg8?t=6m7s) - Creating and sending pull requests
+- [8:25](https://youtu.be/wUpPsEcGsg8?t=8m25s) - Organizing code
+- [14:43](https://youtu.be/wUpPsEcGsg8?t=14m43s) - React npm registry
+- [19:15](https://youtu.be/wUpPsEcGsg8?t=19m15s) - Adding new React features
+
 ### Meeting Notes
 
 React team meets once a week to discuss the development of React, future plans, and priorities. You can find the meeting notes in a [dedicated repository](https://github.com/reactjs/core-notes/).

content/docs/implementation-notes.md

@@ -750,7 +750,7 @@ We collect DOM operations on children in a list so we can execute them in batch:
       // If we can't update an existing instance, we have to unmount it
       // and mount a new one instead of it.
       if (!canUpdate) {
-        var prevNode = prevChild.node;
+        var prevNode = prevChild.getHostNode();
         prevChild.unmount();
 
         var nextChild = instantiateComponent(nextChildren[i]);
@@ -770,12 +770,12 @@ We collect DOM operations on children in a list so we can execute them in batch:
 
     // Finally, unmount any children that don't exist:
     for (var j = nextChildren.length; j < prevChildren.length; j++) {
-     var prevChild = prevRenderedChildren[j];
-     var node = prevChild.node;
-     prevChild.unmount();
+      var prevChild = prevRenderedChildren[j];
+      var node = prevChild.getHostNode();
+      prevChild.unmount();
 
-     // Record that we need to remove the node
-     operationQueue.push({type: 'REMOVE', node});
+      // Record that we need to remove the node
+      operationQueue.push({type: 'REMOVE', node});
     }
 
     // Point the list of rendered children to the updated version.

content/docs/installation.md

@@ -24,7 +24,7 @@ Here are a couple of ways to get started:
 
 If you're just interested in playing around with React, you can use CodePen. Try starting from [this Hello World example code](http://codepen.io/gaearon/pen/rrpgNB?editors=0010). You don't need to install anything; you can just modify the code and see if it works.
 
-If you prefer to use your own text editor, you can also <a href="https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html" download="hello.html">download this HTML file</a>, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don't use it in production.
+If you prefer to use your own text editor, you can also [download this HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don't use it in production.
 
 If you want to use it for a full application, there are two popular ways to get started with React: using Create React App, or adding it to an existing application.
 

content/docs/integrating-with-other-libraries.md

@@ -416,7 +416,7 @@ const BackboneNameInput = connectToBackboneModel(NameInput);
 
 function Example(props) {
   function handleChange(e) {
-    model.set('firstName', e.target.value);
+    props.model.set('firstName', e.target.value);
   }
 
   return (

content/docs/introducing-jsx.md

@@ -46,7 +46,7 @@ ReactDOM.render(
 );
 ```
 
-[Try it on CodePen.](http://codepen.io/gaearon/pen/PGEjdG?editors=0010)
+[](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).
 

content/docs/jsx-in-depth.md

@@ -47,7 +47,7 @@ React.createElement(
 )
 ```
 
-If you want to test out how some specific JSX is converted into JavaScript, you can try out [the online Babel compiler](https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-0&code=function%20hello()%20%7B%0A%20%20return%20%3Cdiv%3EHello%20world!%3C%2Fdiv%3E%3B%0A%7D).
+If you want to test out how some specific JSX is converted into JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
 
 ## Specifying The React Element Type
 

content/docs/lifting-state-up.md

@@ -325,4 +325,5 @@ If something can be derived from either props or state, it probably shouldn't be
 
 When you see something wrong in the UI, you can use [React Developer Tools](https://github.com/facebook/react-devtools) to inspect the props and move up the tree until you find the component responsible for updating the state. This lets you trace the bugs to their source:
 
-<img src="../images/docs/react-devtools-state.gif" alt="Monitoring State in React DevTools" width="100%">
+<img src="../images/docs/react-devtools-state.gif" alt="Monitoring State in React DevTools" max-width="100%" height="100%">
+

content/docs/lists-and-keys.md

@@ -130,7 +130,7 @@ const todoItems = todos.map((todo, index) =>
 );
 ```
 
-We don't recommend using indexes for keys if the items can reorder, as that would be slow. You may read an [in-depth explanation about why keys are necessary](/docs/reconciliation.html#recursing-on-children) if you're interested.
+We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. If you choose not to assign a key to your list items then React will use indexes as keys. You may read an [in-depth explanation about why keys are necessary](/docs/reconciliation.html#recursing-on-children) if you're interested in more information.
 
 ### Extracting Components with Keys
 

content/docs/nav.yml

@@ -32,6 +32,8 @@
       title: JSX In Depth
     - id: typechecking-with-proptypes
       title: Typechecking With PropTypes
+    - id: static-type-checking
+      title: Static Type Checking
     - id: refs-and-the-dom
       title: Refs and the DOM
     - id: uncontrolled-components
@@ -92,4 +94,20 @@
   - id: implementation-notes
     title: Implementation Notes
   - id: design-principles
-    title: Design Principles
+    title: Design Principles
+- title: FAQ
+  items:
+    - id: faq-ajax
+      title: AJAX and APIs
+    - id: faq-build
+      title: Babel, JSX, and Build Steps
+    - id: faq-functions
+      title: Passing Functions to Components
+    - id: faq-state
+      title: Component State
+    - id: faq-styling
+      title: Styling and CSS
+    - id: faq-structure
+      title: File Structure
+    - id: faq-internals
+      title: Virtual DOM and Internals

content/docs/optimizing-performance.md

@@ -66,7 +66,7 @@ Then, to create a production build, add the `-p` flag to the `build` command:
 brunch build -p
 ```
 
-Remember that you only need to do this for production builds. You shouldn't pass `-p` flag or apply this plugin in development because it will hide useful React warnings, and make the builds much slower.
+Remember that you only need to do this for production builds. You shouldn't pass the `-p` flag or apply this plugin in development, because it will hide useful React warnings and make the builds much slower.
 
 ### Browserify
 
@@ -147,9 +147,7 @@ For the most efficient webpack production build, make sure to include these plug
 
 ```js
 new webpack.DefinePlugin({
-  'process.env': {
-    NODE_ENV: JSON.stringify('production')
-  }
+  'process.env.NODE_ENV': JSON.stringify('production')
 }),
 new webpack.optimize.UglifyJsPlugin()
 ```

content/docs/portals.md

@@ -65,7 +65,7 @@ This includes event bubbling. An event fired from inside a portal will propagate
 
 A `Parent` component in `#app-root` would be able to catch an uncaught, bubbling event from the sibling node `#modal-root`.
 
-```js{20-23,34-41,45,53-55,62-63,66}
+```js{28-31,42-49,53,61-63,70-71,74}
 // These two containers are siblings in the DOM
 const appRoot = document.getElementById('app-root');
 const modalRoot = document.getElementById('modal-root');
@@ -77,6 +77,14 @@ class Modal extends React.Component {
   }
 
   componentDidMount() {
+    // The portal element is inserted in the DOM tree after
+    // the Modal's children are mounted, meaning that children
+    // will be mounted on a detached DOM node. If a child
+    // component requires to be attached to the DOM tree
+    // immediately when mounted, for example to measure a
+    // DOM node, or uses 'autoFocus' in a descendant, add
+    // state to Modal and only render the children when Modal
+    // is inserted in the DOM tree.
     modalRoot.appendChild(this.el);
   }
 

content/docs/react-without-jsx.md

@@ -38,7 +38,7 @@ ReactDOM.render(
 );
 ```
 
-If you're curious to see more examples of how JSX is converted to JavaScript, you can try out [the online Babel compiler](https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-0&code=function%20hello()%20%7B%0A%20%20return%20%3Cdiv%3EHello%20world!%3C%2Fdiv%3E%3B%0A%7D).
+If you're curious to see more examples of how JSX is converted to JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
 
 The component can either be provided as a string, or as a subclass of `React.Component`, or a plain function for stateless components.
 

content/docs/reconciliation.md

@@ -138,7 +138,11 @@ In practice, finding a key is usually not hard. The element you are going to dis
 
 When that's not the case, you can add a new ID property to your model or hash some parts of the content to generate a key. The key only has to be unique among its siblings, not globally unique.
 
-As a last resort, you can pass item's index in the array as a key. This can work well if the items are never reordered, but reorders will be slow.
+As a last resort, you can pass an item's index in the array as a key. This can work well if the items are never reordered, but reorders will be slow.
+
+Reorders can also cause issues with component state when indexes are used as keys. Component instances are updated and reused based on their key. If the key is an index, moving an item changes it. As a result, component state for things like controlled inputs can get mixed up and updated in unexpected ways.
+
+[Here](codepen://reconciliation/index-used-as-key) is an example of the issues that can be caused by using indexes as keys on CodePen, and [here](codepen://reconciliation/no-index-used-as-key) is a updated version of the same example showing how not using indexes as keys will fix these reordering, sorting, and prepending issues.
 
 ## Tradeoffs
 

content/docs/reference-glossary.md

@@ -161,6 +161,6 @@ Handling events with React elements has some syntactic differences:
 * React event handlers are named using camelCase, rather than lowercase.
 * With JSX you pass a function as the event handler, rather than a string.
 
-## [Reconciliation](/reconciliation.html)
+## [Reconciliation](/docs/reconciliation.html)
 
 When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called "reconciliation".

content/docs/reference-javascript-environment-requirements.md

@@ -23,10 +23,9 @@ ReactDOM.render(
 );
 ```
 
-React also depends on `requestAnimationFrame` (even in test environments). A simple shim for testing environments would be:
+React also depends on `requestAnimationFrame` (even in test environments).  
+You can use the [raf](https://www.npmjs.com/package/raf) package to shim `requestAnimationFrame`:
 
 ```js
-global.requestAnimationFrame = function(callback) {
-  setTimeout(callback, 0);
-};
-```
+import 'raf/polyfill';
+```

content/docs/reference-react-component.md

@@ -291,7 +291,7 @@ For more details, see [*Error Handling in React 16*](/blog/2017/07/26/error-hand
 ### `setState()`
 
 ```javascript
-setState(updater, [callback])
+setState(updater[, callback])
 ```
 
 `setState()` enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.
@@ -323,7 +323,7 @@ The second parameter to `setState()` is an optional callback function that will
 You may optionally pass an object as the first argument to `setState()` instead of a function:
 
 ```javascript
-setState(stateChange, [callback])
+setState(stateChange[, callback])
 ```
 
 This performs a shallow merge of `stateChange` into the new state, e.g., to adjust a shopping cart item quantity:
@@ -347,7 +347,7 @@ Subsequent calls will override values from previous calls in the same cycle, so
 
 ```js
 this.setState((prevState) => {
-  return {counter: prevState.quantity + 1};
+  return {quantity: prevState.quantity + 1};
 });
 ```
 

content/docs/reference-react-dom.md

@@ -33,11 +33,7 @@ React supports all popular browsers, including Internet Explorer 9 and above.
 ### `render()`
 
 ```javascript
-ReactDOM.render(
-  element,
-  container,
-  [callback]
-)
+ReactDOM.render(element, container[, callback])
 ```
 
 Render a React element into the DOM in the supplied `container` and return a [reference](/docs/more-about-refs.html) to the component (or returns `null` for [stateless components](/docs/components-and-props.html#functional-and-class-components)).
@@ -63,11 +59,7 @@ If the optional callback is provided, it will be executed after the component is
 ### `hydrate()`
 
 ```javascript
-ReactDOM.hydrate(
-  element,
-  container,
-  [callback]
-)
+ReactDOM.hydrate(element, container[, callback])
 ```
 
 Same as [`render()`](#render), but is used to hydrate a container whose HTML contents were rendered by [`ReactDOMServer`](/docs/react-dom-server.html). React will attempt to attach event listeners to the existing markup.
@@ -95,7 +87,9 @@ Remove a mounted React component from the DOM and clean up its event handlers an
 ```javascript
 ReactDOM.findDOMNode(component)
 ```
-If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. **In most cases, you can attach a ref to the DOM node and avoid using `findDOMNode` at all.** When `render` returns `null` or `false`, `findDOMNode` returns `null`.
+If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. **In most cases, you can attach a ref to the DOM node and avoid using `findDOMNode` at all.**
+
+When a component renders to `null` or `false`, `findDOMNode` returns `null`. When a component renders to a string, `findDOMNode` returns a text DOM node containing that value. As of React 16, a component may return a fragment with multiple children, in which case `findDOMNode` will return the DOM node corresponding to the first non-empty child.
 
 > Note:
 >

content/docs/reference-react.md

@@ -175,7 +175,7 @@ Returns the total number of components in `children`, equal to the number of tim
 React.Children.only(children)
 ```
 
-Verifies that `children` has only one child (a React element) and returns it. Otherwise this method throws.
+Verifies that `children` has only one child (a React element) and returns it. Otherwise this method throws an error.
 
 > Note:
 >

content/docs/reference-test-renderer.md

@@ -244,7 +244,7 @@ The children test instances of this test instance.
 
 You can pass `createNodeMock` function to `TestRenderer.create` as the option, which allows for custom mock refs.
 `createNodeMock` accepts the current element and should return a mock ref object.
-This is useful when you test a component rely on refs.
+This is useful when you test a component that relies on refs.
 
 ```javascript
 import TestRenderer from 'react-test-renderer';

content/docs/refs-and-the-dom.md

@@ -66,7 +66,7 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-React will call the `ref` callback with the DOM element when the component mounts, and call it with `null` when it unmounts.
+React will call the `ref` callback with the DOM element when the component mounts, and call it with `null` when it unmounts. `ref` callbacks are invoked before `componentDidMount` or `componentDidUpdate` lifecycle hooks.
 
 Using the `ref` callback just to set a property on the class is a common pattern for accessing DOM elements. The preferred way is to set the property in the `ref` callback like in the above example. There is even a shorter way to write it: `ref={input => this.textInput = input}`. 
 

content/docs/static-type-checking.md

@@ -0,0 +1,173 @@
+---
+id: static-type-checking
+title: Static Type Checking
+permalink: docs/static-type-checking.html
+prev: typechecking-with-prototypes.html
+next: refs-and-the-dom.html
+---
+
+Static type checkers like [Flow](https://flowtype.org/) and [TypeScript](https://www.typescriptlang.org/) identify certain types of problems before you even run your code. They can also improve developer workflow by adding features like auto-completion. For this reason, we recommend using Flow or TypeScript instead of `PropTypes` for larger code bases.
+
+## Flow
+
+[Flow](https://flow.org/) is a static type checker for your JavaScript code. It is developed at Facebook and is often used with React. It lets you annotate the variables, functions, and React components with a special type syntax, and catch mistakes early. You can read an [introduction to Flow](https://flow.org/en/docs/getting-started/) to learn its basics.
+
+To use Flow, you need to:
+
+* Add Flow to your project as a dependency.
+* Ensure that Flow syntax is stripped from the compiled code.
+* Add type annotations and run Flow to check them.
+
+We will explain these steps below in detail.
+
+### Adding Flow to a Project
+
+First, navigate to your project directory in the terminal. You will need to run two commands.
+
+If you use [Yarn](https://yarnpkg.com/), run:
+
+```bash
+yarn add --dev flow-bin
+yarn run flow init
+```
+
+If you use [npm](https://www.npmjs.com/), run:
+
+```bash
+npm install --save-dev flow-bin
+npm run flow init
+```
+
+The first command installs the latest version of Flow into your project. The second command creates a Flow configuration file that you will need to commit.
+
+Finally, add `flow` to the `"scripts"` section of your `package.json`:
+
+```js{4}
+{
+  // ...
+  "scripts": {
+    "flow": "flow",
+    // ...
+  },
+  // ...
+}
+```
+
+### Stripping Flow Syntax from the Compiled Code
+
+Flow extends the JavaScript language with a special syntax for type annotations. However, browsers aren't aware of this syntax, so we need to make sure it doesn't end up in the compiled JavaScript bundle that is sent to the browser.
+
+The exact way to do this depends on the tools you use to compile JavaScript.
+
+#### Create React App
+
+If your project was set up using [Create React App](https://github.com/facebookincubator/create-react-app), congratulations! The Flow annotations are already being stripped by default so you don't need to do anything else in this step.
+
+#### Babel
+
+>Note:
+>
+>These instructions are *not* for Create React App users. Even though Create React App uses Babel under the hood, it is already configured to understand Flow. Only follow this step if you *don't* use Create React App.
+
+If you manually configured Babel for your project, you will need to install a special preset for Flow.
+
+If you use Yarn, run:
+
+```bash
+yarn add --dev babel-preset-flow
+```
+
+If you use npm, run:
+
+```bash
+npm install --save-dev babel-preset-flow
+```
+
+Then add the `flow` preset to your [Babel configuration](http://babeljs.io/docs/usage/babelrc/). For example, if you configure Babel through `.babelrc` file, it could look like this:
+
+```js{3}
+{
+  "presets": [
+    "flow",
+    "react"
+  ]
+}
+```
+
+This will let you use the Flow syntax in your code.
+
+>Note:
+>
+>Flow does not require the `react` preset, but they are often used together. Flow itself understands JSX syntax out of the box.
+
+#### Other Build Setups
+
+If you don't use either Create React App or Babel, you can use [flow-remove-types](https://github.com/flowtype/flow-remove-types) to strip the type annotations.
+
+### Running Flow
+
+If you followed the instructions above, you should be able to run Flow for the first time.
+
+```bash
+yarn flow
+```
+
+If you use npm, run:
+
+```bash
+npm run flow
+```
+
+You should see a message like:
+
+```
+No errors!
+✨  Done in 0.17s.
+```
+
+### Adding Flow Type Annotations
+
+By default, Flow only checks the files that include this annotation:
+
+```js
+// @flow
+```
+
+Typically it is placed at the top of a file. Try adding it to some files in your project and run `yarn flow` or `npm run flow` to see if Flow already found any issues.
+
+There is also [an option](https://flow.org/en/docs/config/options/#toc-all-boolean) to force Flow to check *all* files regardless of the annotation. This can be too noisy for existing projects, but is reasonable for a new project if you want to fully type it with Flow.
+
+Now you're all set! We recommend to check out the following resources to learn more about Flow:
+
+* [Flow Documentation: Type Annotations](https://flow.org/en/docs/types/)
+* [Flow Documentation: Editors](https://flow.org/en/docs/editors/)
+* [Flow Documentation: React](https://flow.org/en/docs/react/)
+* [Linting in Flow](https://medium.com/flow-type/linting-in-flow-7709d7a7e969)
+
+## TypeScript
+
+[TypeScript](https://www.typescriptlang.org/) is a programming language developed by Microsoft. It is a typed superset of JavaScript, and includes its own compiler.
+
+You can learn more about using TypeScript with React [here](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter).
+
+### Using TypeScript with Create React App
+
+[react-scripts-ts](https://www.npmjs.com/package/react-scripts-ts) automatically configures a `create-react-app` project to support TypeScript. You can use it like this:
+
+```bash
+create-react-app my-app --scripts-version=react-scripts-ts
+```
+
+Note that it is a **third party** project, and is not a part of Create React App.
+
+You can also try [typescript-react-starter](https://github.com/Microsoft/TypeScript-React-Starter#typescript-react-starter).
+
+## Reason
+
+[Reason](https://reasonml.github.io/) is not a new language; it's a new syntax and toolchain powered by the battle-tested language, [OCaml](http://ocaml.org/). Reason gives OCaml a familiar syntax geared toward JavaScript programmers, and caters to the existing NPM/Yarn workflow folks already know.
+
+Reason is developed at Facebook, and is used in some of its products like Messenger. It is still somewhat experimental but it has [dedicated React bindings](https://reasonml.github.io/reason-react/) maintained by Facebook and a [vibrant community](https://reasonml.github.io/community/).
+
+## 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://fable-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!

content/docs/typechecking-with-proptypes.md

@@ -10,7 +10,7 @@ redirect_from:
 >
 > `React.PropTypes` has moved into a different package since React v15.5. Please use [the `prop-types` library instead](https://www.npmjs.com/package/prop-types).
 >
->We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) to automate the conversion.
+>We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) to automate the conversion.
 
 As your app grows, you can catch a lot of bugs with typechecking. For some applications, you can use JavaScript extensions like [Flow](https://flowtype.org/) or [TypeScript](https://www.typescriptlang.org/) to typecheck your whole application. But even if you don't use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special `propTypes` property:
 
@@ -168,4 +168,20 @@ ReactDOM.render(
 );
 ```
 
+If you are using a Babel transform like [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , you can also declare `defaultProps` as static property within a React component class. This syntax has not yet been finalized though and will require a compilation step to work within a browser. For more information, see the [class fields proposal](https://github.com/tc39/proposal-class-fields).
+
+```javascript
+class Greeting extends React.Component {
+  static defaultProps = {
+    name: 'stranger'
+  }
+
+  render() {
+    return (
+      <div>Hello, {this.props.name}</div>
+    )
+  }
+}
+```
+
 The `defaultProps` will be used to ensure that `this.props.name` will have a value if it was not specified by the parent component. The `propTypes` typechecking happens after `defaultProps` are resolved, so typechecking will also apply to the `defaultProps`.

content/home/examples/a-component-using-external-plugins.js

@@ -0,0 +1,35 @@
+class MarkdownEditor extends React.Component {
+  constructor(props) {
+    super(props);
+    this.handleChange = this.handleChange.bind(this);
+    this.state = { value: 'Type some *markdown* here!' };
+  }
+
+  handleChange(e) {
+    this.setState({ value: e.target.value });
+  }
+
+  getRawMarkup() {
+    const md = new Remarkable();
+    return { __html: md.render(this.state.value) };
+  }
+
+  render() {
+    return (
+      <div className="MarkdownEditor">
+        <h3>Input</h3>
+        <textarea
+          onChange={this.handleChange}
+          defaultValue={this.state.value}
+        />
+        <h3>Output</h3>
+        <div
+          className="content"
+          dangerouslySetInnerHTML={this.getRawMarkup()}
+        />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<MarkdownEditor />, mountNode);

content/home/examples/a-component-using-external-plugins.md

@@ -0,0 +1,6 @@
+---
+title: A Component Using External Plugins
+order: 3
+---
+
+React is flexible and provides hooks that allow you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.

content/home/examples/a-simple-component.js

@@ -0,0 +1,14 @@
+class HelloMessage extends React.Component {
+  render() {
+    return (
+      <div>
+        Hello {this.props.name}
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(
+  <HelloMessage name="Taylor" />,
+  mountNode
+);

content/home/examples/a-simple-component.md

@@ -0,0 +1,8 @@
+---
+title: A Simple Component
+order: 0
+---
+
+React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`.
+
+**JSX is optional and not required to use React.** Try the [Babel REPL](babel://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step.

content/home/examples/a-stateful-component.js

@@ -0,0 +1,30 @@
+class Timer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { seconds: 0 };
+  }
+
+  tick() {
+    this.setState(prevState => ({
+      seconds: prevState.seconds + 1
+    }));
+  }
+
+  componentDidMount() {
+    this.interval = setInterval(() => this.tick(), 1000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  render() {
+    return (
+      <div>
+        Seconds: {this.state.seconds}
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Timer />, mountNode);

content/home/examples/a-stateful-component.md

@@ -0,0 +1,6 @@
+---
+title: A Stateful Component
+order: 1
+---
+
+In addition to taking input data (accessed via `this.props`), a component can maintain internal state data (accessed via `this.state`). When a component's state data changes, the rendered markup will be updated by re-invoking `render()`.

content/home/examples/an-application.js

@@ -0,0 +1,59 @@
+class TodoApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { items: [], text: '' };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  render() {
+    return (
+      <div>
+        <h3>TODO</h3>
+        <TodoList items={this.state.items} />
+        <form onSubmit={this.handleSubmit}>
+          <input
+            onChange={this.handleChange}
+            value={this.state.text}
+          />
+          <button>
+            Add #{this.state.items.length + 1}
+          </button>
+        </form>
+      </div>
+    );
+  }
+
+  handleChange(e) {
+    this.setState({ text: e.target.value });
+  }
+
+  handleSubmit(e) {
+    e.preventDefault();
+    if (!this.state.text.length) {
+      return;
+    }
+    const newItem = {
+      text: this.state.text,
+      id: Date.now()
+    };
+    this.setState(prevState => ({
+      items: prevState.items.concat(newItem),
+      text: ''
+    }));
+  }
+}
+
+class TodoList extends React.Component {
+  render() {
+    return (
+      <ul>
+        {this.props.items.map(item => (
+          <li key={item.id}>{item.text}</li>
+        ))}
+      </ul>
+    );
+  }
+}
+
+ReactDOM.render(<TodoApp />, mountNode);

content/home/examples/an-application.md

@@ -0,0 +1,6 @@
+---
+title: An Application
+order: 2
+---
+
+Using `props` and `state`, we can put together a small Todo application. This example uses `state` to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation.

content/home/marketing/component-based.md

@@ -0,0 +1,8 @@
+---
+title: Component-Based
+order: 1
+---
+
+Build encapsulated components that manage their own state, then compose them to make complex UIs.
+
+Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.

content/home/marketing/declarative.md

@@ -0,0 +1,8 @@
+---
+title: Declarative
+order: 0
+---
+
+React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
+
+Declarative views make your code more predictable and easier to debug.

content/home/marketing/learn-once-write-anywhere.md

@@ -0,0 +1,8 @@
+---
+title: Learn Once, Write Anywhere
+order: 2
+---
+
+We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
+
+React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).

content/index.md

@@ -1,76 +0,0 @@
----
-layout: hero
-title: A JavaScript library for building user interfaces
-id: home
----
-
-<section class="light home-section">
-  <div class="marketing-row">
-    <div class="marketing-col">
-      <h3>Declarative</h3>
-      <p>React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.</p>
-      <p>Declarative views make your code more predictable and easier to debug.</p>
-    </div>
-    <div class="marketing-col">
-      <h3>Component-Based</h3>
-      <p>Build encapsulated components that manage their own state, then compose them to make complex UIs.</p>
-      <p>Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.</p>
-    </div>
-    <div class="marketing-col">
-      <h3>Learn Once, Write Anywhere</h3>
-      <p>We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.</p>
-      <p>React can also render on the server using Node and power mobile apps using <a href="https://facebook.github.io/react-native/">React Native</a>.</p>
-    </div>
-  </div>
-</section>
-<hr class="home-divider" />
-<section class="home-section">
-  <div id="examples">
-    <div class="example">
-      <h3>A Simple Component</h3>
-      <p>
-        React components implement a `render()` method that takes input data and
-        returns what to display. This example uses an XML-like syntax called
-        JSX. Input data that is passed into the component can be accessed by
-        `render()` via `this.props`.
-      </p>
-      <p>
-        <strong>JSX is optional and not required to use React.</strong>
-        Try the
-        <a href="http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&code_lz=MYGwhgzhAEASCmIQHsCy8pgOb2vAHgC7wB2AJjAErxjCEB0AwsgLYAOyJph0A3gFABIAE6ky8YQAoAlHyEj4hAK7CS0ADxkAlgDcAfAiTI-hABZaI9NsORtLJMC3gBfdQHpt-gNxDn_P_zUtIQAIgDyqPSi5BKS6oYo6Jg40A5OALwARCHwOlokmdBuegA00CzISiSEAHLI4tJeQA&debug=false&circleciRepo=&evaluate=false&lineWrap=false&presets=react&prettier=true&targets=&version=6.26.0">Babel REPL</a>
-        to see the raw JavaScript code produced by the JSX compilation step.
-      </p>
-      <div id="helloExample"></div>
-    </div>
-    <div class="example">
-      <h3>A Stateful Component</h3>
-      <p>
-        In addition to taking input data (accessed via `this.props`), a
-        component can maintain internal state data (accessed via `this.state`).
-        When a component's state data changes, the rendered markup will be
-        updated by re-invoking `render()`.
-      </p>
-      <div id="timerExample"></div>
-    </div>
-    <div class="example">
-      <h3>An Application</h3>
-      <p>
-        Using `props` and `state`, we can put together a small Todo application.
-        This example uses `state` to track the current list of items as well as
-        the text that the user has entered. Although event handlers appear to be
-        rendered inline, they will be collected and implemented using event
-        delegation.
-      </p>
-      <div id="todoExample"></div>
-    </div>
-    <div class="example">
-      <h3>A Component Using External Plugins</h3>
-      <p>
-        React is flexible and provides hooks that allow you to interface with
-        other libraries and frameworks. This example uses <strong>remarkable</strong>, an
-        external Markdown library, to convert the textarea's value in real time.
-      </p>
-      <div id="markdownExample"></div>
-    </div>
-  </div>
-</section>

content/tutorial/tutorial.md

@@ -28,7 +28,7 @@ Once you get a little familiar with the game, feel free to close that tab, as we
 
 We'll assume some familiarity with HTML and JavaScript, but you should be able to follow along even if you haven't used them before.
 
-If you need a refresher on JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6, a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use <a href="http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact&experimental=false&loose=false&spec=false&code=const%20element%20%3D%20%3Ch1%3EHello%2C%20world!%3C%2Fh1%3E%3B%0Aconst%20container%20%3D%20document.getElementById('root')%3B%0AReactDOM.render(element%2C%20container)%3B%0A">Babel REPL</a> to check what ES6 code compiles to.
+If you need a refresher on JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6, a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to.
 
 ### How to Follow Along
 
@@ -73,11 +73,11 @@ rm -f src/*
 
 6. Add these three lines to the top of `index.js` in the `src/` folder:
 
-    ```js
-    import React from 'react';
-    import ReactDOM from 'react-dom';
-    import './index.css';
-    ```
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+```
 
 Now if you run `npm start` in the project folder and open `http://localhost:3000` in the browser, you should see an empty tic-tac-toe field.
 
@@ -85,7 +85,7 @@ We recommend following [these instructions](http://babeljs.io/docs/editors) to c
 
 ### Help, I'm Stuck!
 
-If you get stuck, check out the [community support resources](https://reactjs.org/community/support.html). In particular, [Reactiflux chat](/community/support.html#reactiflux-chat) is a great way to get quick help. If you don't get a good answer anywhere, please file an issue, and we'll help you out.
+If you get stuck, check out the [community support resources](/community/support.html). In particular, [Reactiflux chat](/community/support.html#reactiflux-chat) is a great way to get quick help. If you don't get a good answer anywhere, please file an issue, and we'll help you out.
 
 With this out of the way, let's get started!
 
@@ -129,7 +129,7 @@ return React.createElement('div', {className: 'shopping-list'},
 );
 ```
 
-[See full expanded version.](https://babeljs.io/repl/#?babili=false&evaluate=false&lineWrap=false&presets=react&targets=&browsers=&builtIns=false&debug=false&experimental=false&loose=false&spec=false&playground=true&code=%3Cdiv%20className%3D%22shopping-list%22%3E%0A%20%20%3Ch1%3EShopping%20List%20for%20%7Bprops.name%7D%3C%2Fh1%3E%0A%20%20%3Cul%3E%0A%20%20%20%20%3Cli%3EInstagram%3C%2Fli%3E%0A%20%20%20%20%3Cli%3EWhatsApp%3C%2Fli%3E%0A%20%20%20%20%3Cli%3EOculus%3C%2Fli%3E%0A%20%20%3C%2Ful%3E%0A%3C%2Fdiv%3E)
+[See full expanded version.](babel://tutorial-expanded-version)
 
 If you're curious, `createElement()` is described in more detail in the [API reference](/docs/react-api.html#createelement), but we won't be using it directly in this tutorial. Instead, we will keep using JSX.
 
@@ -1104,7 +1104,7 @@ Check out the final result here: [Final Result](https://codepen.io/gaearon/pen/g
 
 If you have extra time or want to practice your new skills, here are some ideas for improvements you could make, listed in order of increasing difficulty:
 
-1. Display the move locations in the format "(1, 3)" in the move list.
+1. Display the location for each move in the format (col, row) in the move history list.
 2. Bold the currently selected item in the move list.
 3. Rewrite Board to use two loops to make the squares instead of hardcoding them.
 4. Add a toggle button that lets you sort the moves in either ascending or descending order.

crowdin.yaml

@@ -5,8 +5,8 @@ preserve_hierarchy: true
 
 files:
   -
-    source: '/docs/*.md'
-    translation: '/docs/i18n/%locale%/%original_file_name%'
+    source: '/content/docs/*.md'
+    translation: '/docs/%locale%/docs/%original_file_name%'
     languages_mapping: &anchor
       locale:
         'af': 'af'
@@ -44,58 +44,43 @@ files:
         'zh-CN': 'zh-Hans'
         'zh-TW': 'zh-Hant'
   -
-    source: '/tutorial/*.md'
-    translation: '/tutorial/%locale%/%original_file_name%'
+    source: '/content/blog/*.md'
+    translation: '/docs/%locale%/blog/%original_file_name%'
     languages_mapping: *anchor
   -
-    source: '/community/*.md'
-    translation: '/community/%locale%/%original_file_name%'
-    ignore:
-      - '/community/complementary-tools.it-IT.md'
-      - '/community/complementary-tools.ko-KR.md'
-      - '/community/complementary-tools.zh-CN.md'
-      - '/community/conferences.it-IT.md'
-      - '/community/conferences.ko-KR.md'
-      - '/community/conferences.zh-CN.md'
-      - '/community/examples.it-IT.md'
-      - '/community/examples.ko-KR.md'
-      - '/community/examples.zh-CN.md'
-      - '/community/videos.it-IT.md'
-      - '/community/videos.ko-KR.md'
-      - '/community/videos.zh-CN.md'
-    languages_mapping: *anchor
-  -
-    source: '/contributing/*.md'
-    translation: '/contributing/%locale%/%original_file_name%'
+    source: '/content/tutorial/*.md'
+    translation: '/docs/%locale%/tutorial/%original_file_name%'
     languages_mapping: *anchor
   -
-    source: '/_data/*.yml'
-    translation: '/_data/%locale%/%original_file_name%'
-    languages_mapping: *anchor
+    source: '/content/community/*.md'
+    translation: '/docs/%locale%/community/%original_file_name%'
     ignore:
-      - '/_data/acknowledgements.yml'
-      - '/_data/authors.md'
-  -
-    source: '/warnings/*.md'
-    translation: '/warnings/%locale%/%original_file_name%'
+      - '/content/community/complementary-tools.it-IT.md'
+      - '/content/community/complementary-tools.ko-KR.md'
+      - '/content/community/complementary-tools.zh-CN.md'
+      - '/content/community/conferences.it-IT.md'
+      - '/content/community/conferences.ko-KR.md'
+      - '/content/community/conferences.zh-CN.md'
+      - '/content/community/examples.it-IT.md'
+      - '/content/community/examples.ko-KR.md'
+      - '/content/community/examples.zh-CN.md'
+      - '/content/community/videos.it-IT.md'
+      - '/content/community/videos.ko-KR.md'
+      - '/content/community/videos.zh-CN.md'
     languages_mapping: *anchor
   -
-    source: '/index.md'
-    translation: '/%locale%/index.md'
+    source: '/content/contributing/*.md'
+    translation: '/docs/%locale%/contributing/%original_file_name%'
     languages_mapping: *anchor
   -
-    source: '/README.md'
-    translation: '/%locale%/README.md'
+    source: '/content/warnings/*.md'
+    translation: '/docs/%locale%/warnings/%original_file_name%'
     languages_mapping: *anchor
   -
-    source: '/acknowledgements.md'
-    translation: '/%locale%/acknowledgements.md'
+    source: '/README.md'
+    translation: '/docs/%locale%/README.md'
     languages_mapping: *anchor
   -
-    source: '/404.md'
-    translation: '/%locale%/404.md'
+    source: '/content/404.md'
+    translation: '/docs/%locale%/404.md'
     languages_mapping: *anchor
-  -
-    source: '/jsx-compiler.md'
-    translation: '/%locale%/jsx-compiler.md'
-    languages_mapping: *anchor

examples/components-and-props/composing-components.js

@@ -0,0 +1,18 @@
+function Welcome(props) {
+  return <h1>Hello, {props.name}</h1>;
+}
+
+function App() {
+  return (
+    <div>
+      <Welcome name="Sara" />
+      <Welcome name="Cahal" />
+      <Welcome name="Edite" />
+    </div>
+  );
+}
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+);

examples/components-and-props/extracting-components-continued.js

@@ -0,0 +1,52 @@
+function formatDate(date) {
+  return date.toLocaleDateString();
+}
+
+function Avatar(props) {
+  return (
+    <img className="Avatar"
+         src={props.user.avatarUrl}
+         alt={props.user.name} />
+  );
+}
+
+function UserInfo(props) {
+  return (
+    <div className="UserInfo">
+      <Avatar user={props.user} />
+      <div className="UserInfo-name">
+        {props.user.name}
+      </div>
+    </div>
+  );
+}
+
+function Comment(props) {
+  return (
+    <div className="Comment">
+      <UserInfo user={props.author} />
+      <div className="Comment-text">
+        {props.text}
+      </div>
+      <div className="Comment-date">
+        {formatDate(props.date)}
+      </div>
+    </div>
+  );
+}
+
+const comment = {
+  date: new Date(),
+  text: 'I hope you enjoy learning React!',
+  author: {
+    name: 'Hello Kitty',
+    avatarUrl: 'http://placekitten.com/g/64/64'
+  }
+};
+ReactDOM.render(
+  <Comment
+    date={comment.date}
+    text={comment.text}
+    author={comment.author} />,
+  document.getElementById('root')
+);

examples/components-and-props/extracting-components.js

@@ -0,0 +1,40 @@
+function formatDate(date) {
+  return date.toLocaleDateString();
+}
+
+function Comment(props) {
+  return (
+    <div className="Comment">
+      <div className="UserInfo">
+        <img className="Avatar"
+             src={props.author.avatarUrl}
+             alt={props.author.name} />
+        <div className="UserInfo-name">
+          {props.author.name}
+        </div>
+      </div>
+      <div className="Comment-text">
+        {props.text}
+      </div>
+      <div className="Comment-date">
+        {formatDate(props.date)}
+      </div>
+    </div>
+  );
+}
+
+const comment = {
+  date: new Date(),
+  text: 'I hope you enjoy learning React!',
+  author: {
+    name: 'Hello Kitty',
+    avatarUrl: 'http://placekitten.com/g/64/64'
+  }
+};
+ReactDOM.render(
+  <Comment
+    date={comment.date}
+    text={comment.text}
+    author={comment.author} />,
+  document.getElementById('root')
+);

examples/components-and-props/rendering-a-component.js

@@ -0,0 +1,9 @@
+function Welcome(props) {
+  return <h1>Hello, {props.name}</h1>;
+}
+
+const element = <Welcome name="Sara" />;
+ReactDOM.render(
+  element,
+  document.getElementById('root')
+);

examples/es5-syntax-example.js

@@ -0,0 +1,3 @@
+const element = <h1>Hello, world!</h1>;
+const container = document.getElementById('root');
+ReactDOM.render(element, container);

examples/hello-world.js

@@ -0,0 +1,4 @@
+ReactDOM.render(
+  <h1>Hello, world!</h1>,
+  document.getElementById('root')
+);

examples/introducing-jsx.js

@@ -0,0 +1,19 @@
+function formatName(user) {
+  return user.firstName + ' ' + user.lastName;
+}
+
+const user = {
+  firstName: 'Harper',
+  lastName: 'Perez',
+};
+
+const element = (
+  <h1>
+    Hello, {formatName(user)}!
+  </h1>
+);
+
+ReactDOM.render(
+  element,
+  document.getElementById('root')
+);

examples/jsx-simple-example.js

@@ -0,0 +1,3 @@
+function hello() {
+  return <div>Hello world!</div>;
+}

examples/reconciliation/index-used-as-key.js

@@ -0,0 +1,103 @@
+const ToDo = (props) => (
+  <tr>
+    <td><label>{props.id}</label></td>
+    <td><input/></td>
+    <td><label>{props.createdAt.toTimeString()}</label></td>
+  </tr>
+);
+
+class ToDoList extends React.Component {
+  constructor() {
+    super();
+    const date = new Date();
+    const todoCounter = 1;
+    this.state = {
+      todoCounter: todoCounter,
+      list: [
+        { id: todoCounter, createdAt: date },
+      ]
+    }
+  }
+
+  sortByEarliest() {
+    const sortedList = this.state.list.sort((a, b) => {
+      return a.createdAt - b.createdAt;
+    });
+    this.setState({
+      list: [...sortedList]
+    })
+  }
+
+  sortByLatest() {
+    const sortedList = this.state.list.sort((a, b) => {
+      return b.createdAt - a.createdAt;
+    });
+    this.setState({
+      list: [...sortedList]
+    })
+  }
+
+  addToEnd() {
+    const date = new Date();
+    const nextId = this.state.todoCounter + 1;
+    const newList = [
+      ...this.state.list,
+      { id: nextId, createdAt: date }
+    ];
+    this.setState({
+      list: newList,
+      todoCounter: nextId
+    });
+  }
+
+  addToStart() {
+    const date = new Date();
+    const nextId = this.state.todoCounter + 1;
+    const newList = [
+      { id: nextId, createdAt: date },
+      ...this.state.list
+    ];
+    this.setState({
+      list: newList,
+      todoCounter: nextId
+    });
+  }
+
+  render() {
+    return(
+      <div>
+        <code>key=index</code><br/>
+        <button onClick={this.addToStart.bind(this)}>
+          Add New to Start
+        </button>
+        <button onClick={this.addToEnd.bind(this)}>
+          Add New to End
+        </button>
+        <button onClick={this.sortByEarliest.bind(this)}>
+          Sort by Earliest
+        </button>
+        <button onClick={this.sortByLatest.bind(this)}>
+          Sort by Latest
+        </button>
+        <table>
+          <tr>
+            <th>ID</th><th></th><th>created at</th>
+          </tr>
+          {
+            this.state.list.map((todo, index) => (
+              <ToDo
+                key={index}
+                {...todo}
+              />
+            ))
+          }
+        </table>
+      </div>
+    )
+  }
+}
+
+ReactDOM.render(
+  <ToDoList />,
+  document.getElementById('root')
+);

examples/reconciliation/no-index-used-as-key.js

@@ -0,0 +1,103 @@
+const ToDo = (props) => (
+  <tr>
+    <td><label>{props.id}</label></td>
+    <td><input/></td>
+    <td><label>{props.createdAt.toTimeString()}</label></td>
+  </tr>
+);
+
+class ToDoList extends React.Component {
+  constructor() {
+    super();
+    const date = new Date();
+    const toDoCounter = 1;
+    this.state = {
+      list: [
+        { id: toDoCounter, createdAt: date },
+      ],
+      toDoCounter: toDoCounter
+    }
+  }
+
+  sortByEarliest() {
+    const sortedList = this.state.list.sort((a, b) => {
+      return a.createdAt - b.createdAt;
+    });
+    this.setState({
+      list: [...sortedList]
+    })
+  }
+
+  sortByLatest() {
+    const sortedList = this.state.list.sort((a, b) => {
+      return b.createdAt - a.createdAt;
+    });
+    this.setState({
+      list: [...sortedList]
+    })
+  }
+
+  addToEnd() {
+    const date = new Date();
+    const nextId = this.state.toDoCounter + 1;
+    const newList = [
+      ...this.state.list,
+      { id: nextId, createdAt: date }
+    ];
+    this.setState({
+      list: newList,
+      toDoCounter: nextId
+    });
+  }
+
+  addToStart() {
+    const date = new Date();
+    const nextId = this.state.toDoCounter + 1;
+    const newList = [
+      { id: nextId, createdAt: date },
+      ...this.state.list
+    ];
+    this.setState({
+      list: newList,
+      toDoCounter: nextId
+    });
+  }
+
+  render() {
+    return(
+      <div>
+        <code>key=id</code><br/>
+        <button onClick={this.addToStart.bind(this)}>
+          Add New to Start
+        </button>
+        <button onClick={this.addToEnd.bind(this)}>
+          Add New to End
+        </button>
+        <button onClick={this.sortByEarliest.bind(this)}>
+          Sort by Earliest
+        </button>
+        <button onClick={this.sortByLatest.bind(this)}>
+          Sort by Latest
+        </button>
+        <table>
+          <tr>
+            <th>ID</th><th></th><th>created at</th>
+          </tr>
+          {
+            this.state.list.map((todo, index) => (
+              <ToDo
+                key={todo.id}
+                {...todo}
+              />
+            ))
+          }
+        </table>
+      </div>
+    )
+  }
+}
+
+ReactDOM.render(
+  <ToDoList />,
+  document.getElementById('root')
+);

examples/tutorial-expanded-version.js

@@ -0,0 +1,8 @@
+<div className="shopping-list">
+  <h1>Shopping List for {props.name}</h1>
+  <ul>
+    <li>Instagram</li>
+    <li>WhatsApp</li>
+    <li>Oculus</li>
+  </ul>
+</div>

gatsby-config.js

@@ -19,6 +19,7 @@ module.exports = {
   plugins: [
     'gatsby-source-react-error-codes',
     'gatsby-transformer-authors-yaml',
+    'gatsby-transformer-home-example-code',
     'gatsby-plugin-netlify',
     'gatsby-plugin-glamor',
     'gatsby-plugin-react-next',
@@ -55,6 +56,19 @@ module.exports = {
             },
           },
           'gatsby-remark-autolink-headers',
+          {
+            resolve: 'gatsby-remark-code-repls',
+            options: {
+              defaultText: 'Try it on CodePen',
+              directory: `${__dirname}/examples/`,
+              externals: [
+                `//unpkg.com/react/umd/react.development.js`,
+                `//unpkg.com/react-dom/umd/react-dom.development.js`,
+              ],
+              redirectTemplate: `${__dirname}/src/templates/codepen-example.js`,
+              target: '_blank',
+            },
+          },
           'gatsby-remark-use-jsx',
           {
             resolve: 'gatsby-remark-prismjs',
@@ -135,5 +149,6 @@ module.exports = {
       },
     },
     'gatsby-plugin-react-helmet',
+    'gatsby-plugin-catch-links',
   ],
 };

gatsby-node.js

@@ -6,254 +6,7 @@
 
 'use strict';
 
-const {resolve} = require('path');
-const webpack = require('webpack');
-
-exports.modifyWebpackConfig = ({config, stage}) => {
-  // See https://github.com/FormidableLabs/react-live/issues/5
-  config.plugin('ignore', () => new webpack.IgnorePlugin(/^(xor|props)$/));
-
-  config.merge({
-    resolve: {
-      root: resolve(__dirname, './src'),
-      extensions: ['', '.js', '.jsx', '.json'],
-    },
-  });
-  return config;
-};
-
-exports.createPages = async ({graphql, boundActionCreators}) => {
-  const {createPage, createRedirect} = boundActionCreators;
-
-  // Used to detect and prevent duplicate redirects
-  const redirectToSlugMap = {};
-
-  const blogTemplate = resolve('./src/templates/blog.js');
-  const communityTemplate = resolve('./src/templates/community.js');
-  const docsTemplate = resolve('./src/templates/docs.js');
-  const tutorialTemplate = resolve('./src/templates/tutorial.js');
-  const homeTemplate = resolve('./src/templates/home.js');
-
-  const allMarkdown = await graphql(
-    `
-      {
-        allMarkdownRemark(limit: 1000) {
-          edges {
-            node {
-              fields {
-                redirect
-                slug
-              }
-            }
-          }
-        }
-      }
-    `,
-  );
-
-  if (allMarkdown.errors) {
-    console.error(allMarkdown.errors);
-
-    throw Error(allMarkdown.errors);
-  }
-
-  allMarkdown.data.allMarkdownRemark.edges.forEach(edge => {
-    const slug = edge.node.fields.slug;
-
-    if (slug === '/index.html') {
-      createPage({
-        path: '/',
-        component: homeTemplate,
-        context: {
-          slug,
-        },
-      });
-    } else if (slug === 'docs/error-decoder.html') {
-      // No-op so far as markdown templates go.
-      // Error codes are managed by a page in src/pages
-      // (which gets created by Gatsby during a separate phase).
-    } else if (
-      slug.includes('blog/') ||
-      slug.includes('community/') ||
-      slug.includes('contributing/') ||
-      slug.includes('docs/') ||
-      slug.includes('tutorial/') ||
-      slug.includes('warnings/')
-    ) {
-      let template;
-      if (slug.includes('blog/')) {
-        template = blogTemplate;
-      } else if (slug.includes('community/')) {
-        template = communityTemplate;
-      } else if (
-        slug.includes('contributing/') ||
-        slug.includes('docs/') ||
-        slug.includes('warnings/')
-      ) {
-        template = docsTemplate;
-      } else if (slug.includes('tutorial/')) {
-        template = tutorialTemplate;
-      }
-
-      const createArticlePage = path =>
-        createPage({
-          path: path,
-          component: template,
-          context: {
-            slug,
-          },
-        });
-
-      // Register primary URL.
-      createArticlePage(slug);
-
-      // Register redirects as well if the markdown specifies them.
-      if (edge.node.fields.redirect) {
-        let redirect = JSON.parse(edge.node.fields.redirect);
-        if (!Array.isArray(redirect)) {
-          redirect = [redirect];
-        }
-
-        redirect.forEach(fromPath => {
-          if (redirectToSlugMap[fromPath] != null) {
-            console.error(
-              `Duplicate redirect detected from "${fromPath}" to:\n` +
-                `* ${redirectToSlugMap[fromPath]}\n` +
-                `* ${slug}\n`,
-            );
-            process.exit(1);
-          }
-
-          // A leading "/" is required for redirects to work,
-          // But multiple leading "/" will break redirects.
-          // For more context see github.com/reactjs/reactjs.org/pull/194
-          const toPath = slug.startsWith('/') ? slug : `/${slug}`;
-
-          redirectToSlugMap[fromPath] = slug;
-          createRedirect({
-            fromPath: `/${fromPath}`,
-            redirectInBrowser: true,
-            toPath,
-          });
-        });
-      }
-    }
-  });
-
-  const newestBlogEntry = await graphql(
-    `
-      {
-        allMarkdownRemark(
-          limit: 1
-          filter: {id: {regex: "/blog/"}}
-          sort: {fields: [fields___date], order: DESC}
-        ) {
-          edges {
-            node {
-              fields {
-                slug
-              }
-            }
-          }
-        }
-      }
-    `,
-  );
-  const newestBlogNode = newestBlogEntry.data.allMarkdownRemark.edges[0].node;
-
-  // Blog landing page should always show the most recent blog entry.
-  createRedirect({
-    fromPath: '/blog/',
-    redirectInBrowser: true,
-    toPath: newestBlogNode.fields.slug,
-  });
-};
-
-// Parse date information out of blog post filename.
-const BLOG_POST_FILENAME_REGEX = /([0-9]+)\-([0-9]+)\-([0-9]+)\-(.+)\.md$/;
-
-// Add custom fields to MarkdownRemark nodes.
-exports.onCreateNode = ({node, boundActionCreators, getNode}) => {
-  const {createNodeField} = boundActionCreators;
-
-  switch (node.internal.type) {
-    case 'MarkdownRemark':
-      const {permalink, redirect_from} = node.frontmatter;
-      const {relativePath} = getNode(node.parent);
-
-      let slug = permalink;
-
-      if (!slug) {
-        if (relativePath.includes('blog')) {
-          // Blog posts don't have embedded permalinks.
-          // Their slugs follow a pattern: /blog/<year>/<month>/<day>/<slug>.html
-          // The date portion comes from the file name: <date>-<title>.md
-          const match = BLOG_POST_FILENAME_REGEX.exec(relativePath);
-          const year = match[1];
-          const month = match[2];
-          const day = match[3];
-          const filename = match[4];
-
-          slug = `/blog/${year}/${month}/${day}/${filename}.html`;
-
-          const date = new Date(year, month - 1, day);
-
-          // Blog posts are sorted by date and display the date in their header.
-          createNodeField({
-            node,
-            name: 'date',
-            value: date.toJSON(),
-          });
-        }
-      }
-
-      if (!slug) {
-        slug = `/${relativePath.replace('.md', '.html')}`;
-
-        // This should (probably) only happen for the index.md,
-        // But let's log it in case it happens for other files also.
-        console.warn(
-          `Warning: No slug found for "${relativePath}". Falling back to default "${slug}".`,
-        );
-      }
-
-      // Used to generate URL to view this content.
-      createNodeField({
-        node,
-        name: 'slug',
-        value: slug,
-      });
-
-      // Used to generate a GitHub edit link.
-      createNodeField({
-        node,
-        name: 'path',
-        value: relativePath,
-      });
-
-      // Used by createPages() above to register redirects.
-      createNodeField({
-        node,
-        name: 'redirect',
-        value: redirect_from ? JSON.stringify(redirect_from) : '',
-      });
-      return;
-  }
-};
-
-exports.onCreatePage = async ({page, boundActionCreators}) => {
-  const {createPage} = boundActionCreators;
-
-  return new Promise(resolvePromise => {
-    // page.matchPath is a special key that's used for matching pages only on the client.
-    // Explicitly wire up all error code wildcard matches to redirect to the error code page.
-    if (page.path.includes('docs/error-decoder.html')) {
-      page.matchPath = 'docs/error-decoder:path?';
-      page.context.slug = 'docs/error-decoder.html';
-
-      createPage(page);
-    }
-
-    resolvePromise();
-  });
-};
+exports.modifyWebpackConfig = require('./gatsby/modifyWebpackConfig');
+exports.createPages = require('./gatsby/createPages');
+exports.onCreateNode = require('./gatsby/onCreateNode');
+exports.onCreatePage = require('./gatsby/onCreatePage');

gatsby/createPages.js

@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const {resolve} = require('path');
+
+module.exports = async ({graphql, boundActionCreators}) => {
+  const {createPage, createRedirect} = boundActionCreators;
+
+  // Used to detect and prevent duplicate redirects
+  const redirectToSlugMap = {};
+
+  const blogTemplate = resolve(__dirname, '../src/templates/blog.js');
+  const communityTemplate = resolve(__dirname, '../src/templates/community.js');
+  const docsTemplate = resolve(__dirname, '../src/templates/docs.js');
+  const tutorialTemplate = resolve(__dirname, '../src/templates/tutorial.js');
+
+  // Redirect /index.html to root.
+  createRedirect({
+    fromPath: '/index.html',
+    redirectInBrowser: true,
+    toPath: '/',
+  });
+
+  const allMarkdown = await graphql(
+    `
+      {
+        allMarkdownRemark(limit: 1000) {
+          edges {
+            node {
+              fields {
+                redirect
+                slug
+              }
+            }
+          }
+        }
+      }
+    `,
+  );
+
+  if (allMarkdown.errors) {
+    console.error(allMarkdown.errors);
+
+    throw Error(allMarkdown.errors);
+  }
+
+  allMarkdown.data.allMarkdownRemark.edges.forEach(edge => {
+    const slug = edge.node.fields.slug;
+
+    if (slug === 'docs/error-decoder.html') {
+      // No-op so far as markdown templates go.
+      // Error codes are managed by a page in src/pages
+      // (which gets created by Gatsby during a separate phase).
+    } else if (
+      slug.includes('blog/') ||
+      slug.includes('community/') ||
+      slug.includes('contributing/') ||
+      slug.includes('docs/') ||
+      slug.includes('tutorial/') ||
+      slug.includes('warnings/')
+    ) {
+      let template;
+      if (slug.includes('blog/')) {
+        template = blogTemplate;
+      } else if (slug.includes('community/')) {
+        template = communityTemplate;
+      } else if (
+        slug.includes('contributing/') ||
+        slug.includes('docs/') ||
+        slug.includes('warnings/')
+      ) {
+        template = docsTemplate;
+      } else if (slug.includes('tutorial/')) {
+        template = tutorialTemplate;
+      }
+
+      const createArticlePage = path =>
+        createPage({
+          path: path,
+          component: template,
+          context: {
+            slug,
+          },
+        });
+
+      // Register primary URL.
+      createArticlePage(slug);
+
+      // Register redirects as well if the markdown specifies them.
+      if (edge.node.fields.redirect) {
+        let redirect = JSON.parse(edge.node.fields.redirect);
+        if (!Array.isArray(redirect)) {
+          redirect = [redirect];
+        }
+
+        redirect.forEach(fromPath => {
+          if (redirectToSlugMap[fromPath] != null) {
+            console.error(
+              `Duplicate redirect detected from "${fromPath}" to:\n` +
+                `* ${redirectToSlugMap[fromPath]}\n` +
+                `* ${slug}\n`,
+            );
+            process.exit(1);
+          }
+
+          // A leading "/" is required for redirects to work,
+          // But multiple leading "/" will break redirects.
+          // For more context see github.com/reactjs/reactjs.org/pull/194
+          const toPath = slug.startsWith('/') ? slug : `/${slug}`;
+
+          redirectToSlugMap[fromPath] = slug;
+          createRedirect({
+            fromPath: `/${fromPath}`,
+            redirectInBrowser: true,
+            toPath,
+          });
+        });
+      }
+    }
+  });
+
+  const newestBlogEntry = await graphql(
+    `
+      {
+        allMarkdownRemark(
+          limit: 1
+          filter: {id: {regex: "/blog/"}}
+          sort: {fields: [fields___date], order: DESC}
+        ) {
+          edges {
+            node {
+              fields {
+                slug
+              }
+            }
+          }
+        }
+      }
+    `,
+  );
+  const newestBlogNode = newestBlogEntry.data.allMarkdownRemark.edges[0].node;
+
+  // Blog landing page should always show the most recent blog entry.
+  createRedirect({
+    fromPath: '/blog/',
+    redirectInBrowser: true,
+    toPath: newestBlogNode.fields.slug,
+  });
+};

gatsby/modifyWebpackConfig.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const {resolve} = require('path');
+const webpack = require('webpack');
+
+module.exports = ({config, stage}) => {
+  // See https://github.com/FormidableLabs/react-live/issues/5
+  config.plugin('ignore', () => new webpack.IgnorePlugin(/^(xor|props)$/));
+
+  config.merge({
+    resolve: {
+      root: resolve(__dirname, '../src'),
+      extensions: ['', '.js', '.jsx', '.json'],
+    },
+  });
+  return config;
+};

gatsby/onCreateNode.js

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+// Parse date information out of blog post filename.
+const BLOG_POST_FILENAME_REGEX = /([0-9]+)\-([0-9]+)\-([0-9]+)\-(.+)\.md$/;
+
+// Add custom fields to MarkdownRemark nodes.
+module.exports = exports.onCreateNode = ({node, boundActionCreators, getNode}) => {
+  const {createNodeField} = boundActionCreators;
+
+  switch (node.internal.type) {
+    case 'MarkdownRemark':
+      const {permalink, redirect_from} = node.frontmatter;
+      const {relativePath} = getNode(node.parent);
+
+      let slug = permalink;
+
+      if (!slug) {
+        if (relativePath.includes('blog')) {
+          // Blog posts don't have embedded permalinks.
+          // Their slugs follow a pattern: /blog/<year>/<month>/<day>/<slug>.html
+          // The date portion comes from the file name: <date>-<title>.md
+          const match = BLOG_POST_FILENAME_REGEX.exec(relativePath);
+          const year = match[1];
+          const month = match[2];
+          const day = match[3];
+          const filename = match[4];
+
+          slug = `/blog/${year}/${month}/${day}/${filename}.html`;
+
+          const date = new Date(year, month - 1, day);
+
+          // Blog posts are sorted by date and display the date in their header.
+          createNodeField({
+            node,
+            name: 'date',
+            value: date.toJSON(),
+          });
+        }
+      }
+
+      if (!slug) {
+        slug = `/${relativePath.replace('.md', '.html')}`;
+
+        // This should only happen for the partials in /content/home,
+        // But let's log it in case it happens for other files also.
+        console.warn(
+          `Warning: No slug found for "${relativePath}". Falling back to default "${slug}".`,
+        );
+      }
+
+      // Used to generate URL to view this content.
+      createNodeField({
+        node,
+        name: 'slug',
+        value: slug,
+      });
+
+      // Used to generate a GitHub edit link.
+      createNodeField({
+        node,
+        name: 'path',
+        value: relativePath,
+      });
+
+      // Used by createPages() above to register redirects.
+      createNodeField({
+        node,
+        name: 'redirect',
+        value: redirect_from ? JSON.stringify(redirect_from) : '',
+      });
+      return;
+  }
+};

gatsby/onCreatePage.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+module.exports = async ({page, boundActionCreators}) => {
+  const {createPage} = boundActionCreators;
+
+  return new Promise(resolvePromise => {
+    // page.matchPath is a special key that's used for matching pages only on the client.
+    // Explicitly wire up all error code wildcard matches to redirect to the error code page.
+    if (page.path.includes('docs/error-decoder.html')) {
+      page.matchPath = 'docs/error-decoder:path?';
+      page.context.slug = 'docs/error-decoder.html';
+
+      createPage(page);
+    }
+
+    resolvePromise();
+  });
+};

package.json

@@ -9,10 +9,10 @@
   "resolutions": {
     "gatsby/graphql": "0.10.5",
     "gatsby/react": "16.0.0",
-    "gatsby/react-dom": "16.0.0"
+    "gatsby/react-dom": "16.0.0",
+    "eslint-plugin-relay/graphql": "0.10.5"
   },
   "dependencies": {
-    "@gaearon/react-live": "1.7.1-with-safari-fix",
     "array-from": "^2.1.1",
     "babel-eslint": "^8.0.1",
     "eslint": "^4.8.0",
@@ -27,6 +27,7 @@
     "flow-bin": "^0.56.0",
     "gatsby": "^1.9.9",
     "gatsby-link": "^1.6.9",
+    "gatsby-plugin-catch-links": "^1.0.9",
     "gatsby-plugin-feed": "^1.3.9",
     "gatsby-plugin-glamor": "^1.6.4",
     "gatsby-plugin-google-analytics": "^1.0.4",
@@ -38,6 +39,7 @@
     "gatsby-plugin-sharp": "^1.6.2",
     "gatsby-plugin-twitter": "^1.0.10",
     "gatsby-remark-autolink-headers": "^1.4.4",
+    "gatsby-remark-code-repls": "^1.0.2",
     "gatsby-remark-copy-linked-files": "^1.5.2",
     "gatsby-remark-images": "^1.5.11",
     "gatsby-remark-prismjs": "^1.2.1",
@@ -49,6 +51,7 @@
     "glamor": "^2.20.40",
     "hex2rgba": "^0.0.1",
     "prettier": "^1.7.4",
+    "react-live": "1.8.0-0",
     "remarkable": "^1.7.1",
     "request-promise": "^4.2.2",
     "rimraf": "^2.6.1",
@@ -72,9 +75,10 @@
   },
   "scripts": {
     "build": "gatsby build",
-    "check-all": "yarn prettier && yarn lint && yarn flow",
-    "ci-check": "yarn prettier:diff && yarn lint && yarn flow",
+    "check-all": "npm-run-all prettier --parallel lint flow",
+    "ci-check": "npm-run-all prettier:diff --parallel lint flow",
     "dev": "gatsby develop -H 0.0.0.0",
+    "flow": "flow",
     "lint": "eslint .",
     "netlify": "yarn install && yarn build",
     "prettier": "prettier --config .prettierrc --write \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"",
@@ -82,6 +86,10 @@
     "reset": "rimraf ./.cache"
   },
   "devDependencies": {
-    "eslint-config-prettier": "^2.6.0"
+    "eslint-config-prettier": "^2.6.0",
+    "lz-string": "^1.4.4",
+    "npm-run-all": "^4.1.2",
+    "recursive-readdir": "^2.2.1",
+    "unist-util-map": "^1.0.3"
   }
 }

plugins/gatsby-source-react-error-codes/gatsby-node.js

@@ -6,15 +6,23 @@ const errorCodesUrl =
 exports.sourceNodes = async ({boundActionCreators}) => {
   const {createNode} = boundActionCreators;
 
-  const jsonString = await request(errorCodesUrl);
+  try {
+    const jsonString = await request(errorCodesUrl);
 
-  createNode({
-    id: 'error-codes',
-    children: [],
-    parent: 'ERRORS',
-    internal: {
-      type: 'ErrorCodesJson',
-      contentDigest: jsonString,
-    },
-  });
+    createNode({
+      id: 'error-codes',
+      children: [],
+      parent: 'ERRORS',
+      internal: {
+        type: 'ErrorCodesJson',
+        contentDigest: jsonString,
+      },
+    });
+  } catch (error) {
+    console.error(
+      `The gatsby-source-react-error-codes plugin has failed:\n${error.message}`,
+    );
+
+    process.exit(1);
+  }
 };

plugins/gatsby-transformer-home-example-code/gatsby-node.js

@@ -0,0 +1,28 @@
+const {readdirSync, readFileSync} = require('fs');
+const {join, resolve} = require('path');
+
+// Store code snippets in GraphQL for the home page examples.
+// Snippets will be matched with markdown templates of the same name.
+exports.sourceNodes = ({graphql, boundActionCreators}) => {
+  const {createNode} = boundActionCreators;
+
+  const path = resolve(__dirname, '../../content/home/examples');
+  const files = readdirSync(path);
+
+  files.forEach(file => {
+    if (file.match(/\.js$/)) {
+      const code = readFileSync(join(path, file), 'utf8');
+      const id = file.replace(/\.js$/, '');
+
+      createNode({
+        id,
+        children: [],
+        parent: 'EXAMPLES',
+        internal: {
+          type: 'ExampleCode',
+          contentDigest: JSON.stringify(code),
+        },
+      });
+    }
+  });
+};

plugins/gatsby-transformer-home-example-code/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "gatsby-transformer-home-example-code",
+  "version": "0.0.1"
+}