Sync with reactjs.org @ fb382ccb

README.md

@@ -36,7 +36,7 @@ The documentation is divided into several sections with a different tone and pur
 
 ### Make the change
 
-1. Follow the "Running locally" instructions
+1. Follow the ["Running locally"](#running-locally) instructions
 1. Save the files and check in the browser
   1. Changes to React components in `src` will hot-reload
   1. Changes to markdown files in `content` will hot-reload

content/blog/2015-12-18-react-components-elements-and-instances.md

@@ -350,7 +350,7 @@ React will ask the `Form` component what element tree it returns, given those `p
 }
 ```
 
-This is a part of the process that React calls [reconciliation](/docs/reconciliation.html) which starts when you call [`ReactDOM.render()`](/docs/top-level-api.html#reactdom.render) or [`setState()`](/docs/component-api.html#setstate). By the end of the reconciliation, React knows the result DOM tree, and a renderer like `react-dom` or `react-native` applies the minimal set of changes necessary to update the DOM nodes (or the platform-specific views in case of React Native).
+This is a part of the process that React calls [reconciliation](/docs/reconciliation.html) which starts when you call [`ReactDOM.render()`](/docs/top-level-api.html#reactdom.render) or [`setState()`](/docs/component-api.html#setstate). By the end of the reconciliation, React knows the resulting DOM tree, and a renderer like `react-dom` or `react-native` applies the minimal set of changes necessary to update the DOM nodes (or the platform-specific views in case of React Native).
 
 This gradual refining process is also the reason React apps are easy to optimize. If some parts of your component tree become too large for React to visit efficiently, you can tell it to [skip this “refining” and diffing certain parts of the tree if the relevant props have not changed](/docs/advanced-performance.html). It is very fast to calculate whether the props have changed if they are immutable, so React and immutability work great together, and can provide great optimizations with the minimal effort.
 

content/blog/2018-11-27-react-16-roadmap.md

@@ -108,7 +108,7 @@ Hooks represent our vision for the future of React. They solve both problems tha
 
 ### React 16.x (~Q2 2019): The One with Concurrent Mode {#react-16x-q2-2019-the-one-with-concurrent-mode}
 
-*Concurrent Mode* lets React apps be more responsive by rendering component trees without blocking the main thread. It is opt-in and allows React to interrupt a long-running render (for example, rendering a new feed story) to handle a high-priority event (for example, text input or hover). Concurrent Mode also improves the user experience of Suspense by skipping unnecessary loading states on fast connections.
+*Concurrent Mode* lets React apps be more responsive by rendering component trees without blocking the main thread. It is opt-in and allows React to interrupt a long-running render (for example, rendering a news feed story) to handle a high-priority event (for example, text input or hover). Concurrent Mode also improves the user experience of Suspense by skipping unnecessary loading states on fast connections.
 
 >Note
 >

content/blog/2019-10-22-react-release-channels.md

@@ -51,7 +51,7 @@ Releases in Next are published with the `next` tag on npm. Versions are generate
 
 The Next channel is designed to support integration testing between React and other projects.
 
-All changes to React go through extensive internal testing before they are released to the public. However, there are a myriad of environments and configurations used throughout the React ecosystem, and it's not possible for us to test against every single one.
+All changes to React go through extensive internal testing before they are released to the public. However, there are myriad environments and configurations used throughout the React ecosystem, and it's not possible for us to test against every single one.
 
 If you're the author of a third party React framework, library, developer tool, or similar infrastructure-type project, you can help us keep React stable for your users and the entire React community by periodically running your test suite against the most recent changes. If you're interested, follow these steps:
 

content/community/conferences.md

@@ -12,16 +12,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {#upcoming-conferences}
 
-### React Barcamp Cologne 2020 {#react-barcamp-cologne-2020}
-February 1-2, 2020 in Cologne, Germany
-
-[Website](https://react-barcamp.de/) - [Twitter](https://twitter.com/ReactBarcamp) - [Facebook](https://www.facebook.com/reactbarcamp)
-
-### ReactConf AU 2020 {#reactconfau}
-February 27 & 28, 2020 in Sydney, Australia
-
-[Website](https://reactconfau.com/) - [Twitter](https://twitter.com/reactconfau) - [Facebook](https://www.facebook.com/reactconfau) - [Instagram](https://www.instagram.com/reactconfau/)
-
 ### ReactConf Japan 2020 {#reactconfjp-2020}
 March 21, 2020 in Tokyo, Japan
 
@@ -511,3 +501,12 @@ December 6, 2019 in Berlin, Germany
 
 [Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://www.youtube.com/reactdayberlin)
 
+### React Barcamp Cologne 2020 {#react-barcamp-cologne-2020}
+February 1-2, 2020 in Cologne, Germany
+
+[Website](https://react-barcamp.de/) - [Twitter](https://twitter.com/ReactBarcamp) - [Facebook](https://www.facebook.com/reactbarcamp)
+
+### ReactConf AU 2020 {#reactconfau}
+February 27 & 28, 2020 in Sydney, Australia
+
+[Website](https://reactconfau.com/) - [Twitter](https://twitter.com/reactconfau) - [Facebook](https://www.facebook.com/reactconfau) - [Instagram](https://www.instagram.com/reactconfau/)

content/community/meetups.md

@@ -84,6 +84,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
 * [Chennai](https://www.meetup.com/React-Chennai/)
 * [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
 * [Jaipur](https://www.meetup.com/JaipurJS-Developer-Meetup/)
+* [Pune](https://www.meetup.com/ReactJS-and-Friends/)
 
 ## Indonesia {#indonesia}
 * [Indonesia](https://www.meetup.com/reactindonesia/)

content/docs/addons-animation.md

@@ -23,8 +23,8 @@ The [`ReactTransitionGroup`](#low-level-api-reacttransitiongroup) add-on compone
 **Importing**
 
 ```javascript
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6
-var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); // ES5 with npm
+import ReactCSSTransitionGroup from 'react-transition-group'; // ES6
+var ReactCSSTransitionGroup = require('react-transition-group'); // ES5 with npm
 ```
 
 ```javascript{31-36}
@@ -199,7 +199,7 @@ render() {
 In the example above, we rendered a list of items into `ReactCSSTransitionGroup`. However, the children of `ReactCSSTransitionGroup` can also be one or zero items. This makes it possible to animate a single element entering or leaving. Similarly, you can animate a new element replacing the current element. For example, we can implement a simple image carousel like this:
 
 ```javascript{10}
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
+import ReactCSSTransitionGroup from 'react-transition-group';
 
 function ImageCarousel(props) {
   return (

content/docs/code-splitting.md

@@ -132,6 +132,8 @@ This will automatically load the bundle containing the `OtherComponent` when thi
 The lazy component should then be rendered inside a `Suspense` component, which allows us to show some fallback content (such as a loading indicator) while we're waiting for the lazy component to load.
 
 ```js
+import React, { Suspense } from 'react';
+
 const OtherComponent = React.lazy(() => import('./OtherComponent'));
 
 function MyComponent() {
@@ -148,6 +150,8 @@ function MyComponent() {
 The `fallback` prop accepts any React elements that you want to render while waiting for the component to load. You can place the `Suspense` component anywhere above the lazy component. You can even wrap multiple lazy components with a single `Suspense` component.
 
 ```js
+import React, { Suspense } from 'react';
+
 const OtherComponent = React.lazy(() => import('./OtherComponent'));
 const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
 
@@ -170,7 +174,9 @@ function MyComponent() {
 If the other module fails to load (for example, due to network failure), it will trigger an error. You can handle these errors to show a nice user experience and manage recovery with [Error Boundaries](/docs/error-boundaries.html). Once you've created your Error Boundary, you can use it anywhere above your lazy components to display an error state when there's a network error.
 
 ```js
+import React, { Suspense } from 'react';
 import MyErrorBoundary from './MyErrorBoundary';
+
 const OtherComponent = React.lazy(() => import('./OtherComponent'));
 const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
 
@@ -203,8 +209,8 @@ Here's an example of how to setup route-based code splitting into your app using
 libraries like [React Router](https://reacttraining.com/react-router/) with `React.lazy`.
 
 ```js
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 import React, { Suspense, lazy } from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
 const Home = lazy(() => import('./routes/Home'));
 const About = lazy(() => import('./routes/About'));

content/docs/components-and-props.md

@@ -44,7 +44,7 @@ class Welcome extends React.Component {
 
 A React szemszögéből a fenti két komponens egymással megegyező.
 
-Az osztályok rendelkeznek pár extra funkcióval, amit a [következő fejezetekben](/docs/state-and-lifecycle.html) beszélünk ki. Addig is a függvény komponenseket használjuk tömörségük miatt.
+Mind a függvény-, és osztálykomponensek rendelkeznek néhány extra funkcióval, amit a [következő fejezetekben](/docs/state-and-lifecycle.html) beszélünk ki.
 
 ## Egy komponens renderelése {#rendering-a-component}
 
@@ -60,7 +60,7 @@ Azonban az elemek képviselhetnek a felhasználó által definiált komponenseke
 const element = <Welcome name="Sára" />;
 ```
 
-Ha a React egy olyan elemet lát ami egy felhasználó által definiált komponenst képvisel, akkor leküldi a JSX attribútumokat a komponensnek egy sima objektumként. Ezt az objektumot hívjuk "props"-nak.
+Ha a React egy olyan elemet lát, ami egy felhasználó által definiált komponenst képvisel, akkor a JSX attribútumokat és a gyermekeket egy sima objektumként küldi le a komponensnek. Ezt az objektumot hívjuk "props"-nak.
 
 Például ez a kód a "Helló, Sára" szöveget rendereli az oldalon:
 
@@ -120,7 +120,7 @@ ReactDOM.render(
 
 [](codepen://components-and-props/composing-components)
 
-Tipikusan az új React alkalmazásoknak van egy `App` komponensük a legfelsőbb szinten. Azonban ha egy meglévő alkalmazásba integrálod a React-et, dolgozhatsz lentről felfelé fokozatosan haladva, kezdve kis komponensekkel, mint egy `Button` amíg el nem éred a nézet hierarchia csúcsát.
+Tipikusan az új React alkalmazásoknak van egy `App` komponensük a legfelsőbb szinten. Azonban ha egy meglévő alkalmazásba integrálod a Reactet, dolgozhatsz lentről felfelé fokozatosan haladva, kezdve kis komponensekkel, mint egy `Button` amíg el nem éred a nézet hierarchia csúcsát.
 
 ## Komponensek kivonása {#extracting-components}
 

content/docs/concurrent-mode-adoption.md

@@ -54,7 +54,7 @@ We're using this code in production (and it works for us) but there are still so
 
 ### Enabling Concurrent Mode {#enabling-concurrent-mode}
 
-Normally, when we add features to React, you can start using them immediately. Fragments, Context, and even Hooks are examples of such features. You can use in new code without making any changes to the existing code.
+Normally, when we add features to React, you can start using them immediately. Fragments, Context, and even Hooks are examples of such features. You can use them in new code without making any changes to the existing code.
 
 Concurrent Mode is different. It introduces semantic changes to how React works. Otherwise, the [new features](/docs/concurrent-mode-patterns.html) enabled by it *wouldn't be possible*. This is why they're grouped into a new "mode" rather than released one by one in isolation.
 

content/docs/concurrent-mode-reference.md

@@ -199,7 +199,7 @@ function App() {
  }
 ```
 
-This allows us to start showing the new text for the `input` immediately, which allows the webpage to feel responsive. Meanwhile, `MySlowList` "lag behind" for up to 2 seconds according to the `timeoutMs` before updating, allowing it to render with the current text in the background.
+This allows us to start showing the new text for the `input` immediately, which allows the webpage to feel responsive. Meanwhile, `MySlowList` "lags behind" for up to 2 seconds according to the `timeoutMs` before updating, allowing it to render with the current text in the background.
 
 **For an in-depth look at deferring values, you can read [Concurrent UI Patterns](/docs/concurrent-mode-patterns.html#deferring-a-value).**
 

content/docs/concurrent-mode-suspense.md

@@ -113,13 +113,13 @@ Suspense is significantly different from existing approaches to these problems,
 
 ### What Suspense Lets You Do {#what-suspense-lets-you-do}
 
-So what's the point of Suspense? There's a few ways we can answer this:
+So what's the point of Suspense? There are a few ways we can answer this:
 
 * **It lets data fetching libraries deeply integrate with React.** If a data fetching library implements Suspense support, using it from React components feels very natural.
 
 * **It lets you orchestrate intentionally designed loading states.** It doesn't say _how_ the data is fetched, but it lets you closely control the visual loading sequence of your app.
 
-* **It helps you avoid race conditions.** Even with `await`, asynchronous code is often error-prone. Suspense feels more like reading data *synchronously* — as if it was already loaded.
+* **It helps you avoid race conditions.** Even with `await`, asynchronous code is often error-prone. Suspense feels more like reading data *synchronously* — as if it were already loaded.
 
 ## Using Suspense in Practice {#using-suspense-in-practice}
 
@@ -231,7 +231,7 @@ If you run this code and watch the console logs, you'll notice the sequence is:
 
 If fetching user details takes three seconds, we'll only *start* fetching the posts after three seconds! That's a "waterfall": an unintentional *sequence* that should have been parallelized.
 
-Waterfalls are common in code that fetches data on render. They're possible to solve, but as the product  grows, many people prefer to use a solution that guards against this problem.
+Waterfalls are common in code that fetches data on render. They're possible to solve, but as the product grows, many people prefer to use a solution that guards against this problem.
 
 ### Approach 2: Fetch-Then-Render (not using Suspense) {#approach-2-fetch-then-render-not-using-suspense}
 
@@ -250,7 +250,7 @@ function fetchProfileData() {
 }
 ```
 
-In this example,  `<ProfilePage>` waits for both requests but starts them in parallel:
+In this example, `<ProfilePage>` waits for both requests but starts them in parallel:
 
 ```js{1,2,8-13}
 // Kick off fetching as early as possible

content/docs/create-a-new-react-app.md

@@ -40,7 +40,7 @@ A React csapat főként ezeket a megoldásokat ajánlja:
 
 A [Create React App](https://github.com/facebookincubator/create-react-app) egy komfortos környezet a **React tanulásához** és a legjobb módja **egy új [single-page](/docs/glossary.html#single-page-application) alkalmazás** készítésére Reactben.
 
-Úgy állítja fel a fejlesztői környezeted, hogy használni tudd a legújabb JavaScript funkciókat, egy kellemes fejlesztői élményt biztosít és optimalizálja az alkalmazásod a végstádiumban. A gépednek rendelkeznie kell Node 8.10 vagy annál újabb, és npm 5.6 vagy annál újabb verzióival. Egy projekt készítéséhez futtasd ezt:
+Úgy állítja fel a fejlesztői környezeted, hogy használni tudd a legújabb JavaScript funkciókat, egy kellemes fejlesztői élményt biztosít és optimalizálja az alkalmazásod a végstádiumban. A gépednek rendelkeznie kell [Node 8.10 vagy annál újabb, és npm 5.6 vagy annál újabb](https://nodejs.org/en/) verzióival. Egy projekt készítéséhez futtasd ezt:
 
 ```bash
 npx create-react-app my-app
@@ -88,6 +88,6 @@ Egy JavaScript eszközlánc tipikusan ezekből áll:
 
 * Egy **fordítóprogram**, mint a [Babel](https://babeljs.io/). Modern JavaScript kód írását teszi lehetővé, ami még így is működni fog régebbi böngészőkben.
 
-Ha inkább szeretnél egy saját JavaScript eszökzláncot összeállítani a semmiből, akkor [nézd meg ezt az útmutatót](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658), ami a Create React App funkcionalitását utánozza.
+Ha inkább szeretnél egy saját JavaScript eszközláncot összeállítani a semmiből, akkor [nézd meg ezt az útmutatót](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658), ami a Create React App funkcionalitását utánozza.
 
 Ne felejts el meggyőződni róla, hogy az egyedi eszközláncod [helyesen van beállítva a végstádiumhoz](/docs/optimizing-performance.html#use-the-production-build).

content/docs/forms.md

@@ -220,7 +220,7 @@ class Reservation extends React.Component {
 
   handleInputChange(event) {
     const target = event.target;
-    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const value = target.name === 'isGoing' ? target.checked : target.value;
     const name = target.name;
 
     this.setState({