Merge pull request #91 from reactjs/sync-66820686

Sync with reactjs.org @ 6682068

content/docs/add-react-to-a-website.md

@@ -54,12 +54,11 @@ A következőben adj hozzá három `<script>` címkét közvetlenül a záró `<
 
   <!-- A React betöltése. -->
   <!-- Megjegyzés: publikáláskor, cseréld le a "development.js"-t "production.min.js"-re. -->
-  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
-  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
+  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
+  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
 
   <!-- A React komponensünk betöltése. -->
   <script src="like_button.js"></script>
-
 </body>
 ```
 
@@ -116,8 +115,8 @@ Mielőtt a weboldalt végstádiumba publikálod, tartsd szem előtt, hogy a nem
 Ha már csökkented az alkalmazásod scriptjeinek a méretét, **az oldalad készen áll a végstádiumra**, amennyiben a publikált HTML oldalad a `production.min.js` végződésű React verziót tölti be:
 
 ```js
-<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
-<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
+<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
+<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
 ```
 
 Ha nincs kódcsökkentő lépésed a scriptekhez, [itt egy módja, hogyan tudod ezt beállítani](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3).
@@ -185,7 +184,7 @@ Gratulálunk! Ezzel **beállítottad a JSX publikálásra kész** használatát
 Készíts egy `src` nevű mappát és futtasd az alábbi parancsot a terminálodban:
 
 ```
-npx babel --watch src --out-dir . --presets react-app/prod 
+npx babel --watch src --out-dir . --presets react-app/prod
 ```
 
 >Megjegyzés

content/docs/cdn-links.md

@@ -9,18 +9,18 @@ next: release-channels.html
 A React és a ReactDOM egyaránt elérhető CDN-en keresztül.
 
 ```html
-<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
 ```
 
 A fenti verziók csak a fejlesztésre értendőek, és nem megfelelőek éles környezetben való használathoz. A React kicsinyített és optimalizált változatai a következő helyen érhetőek el:
 
 ```html
-<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
-<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
 ```
 
-A `react` és a `react-dom` adott verziójának betöltéséhez cseréld ki a `16`-ot a verziószámra.
+A `react` és a `react-dom` egy adott verziójának betöltéséhez cseréld ki a `17`-et a kívánt verziószámra.
 
 ### Miért szükséges a `crossorigin` attribútum? {#why-the-crossorigin-attribute}
 

content/docs/faq-functions.md

@@ -289,9 +289,6 @@ class Searchbox extends React.Component {
   }
 
   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);
   }
 

content/docs/legacy-event-pooling.md

@@ -0,0 +1,37 @@
+---
+id: legacy-event-pooling
+title: Esemény pooling
+permalink: docs/legacy-event-pooling.html
+---
+
+>Megjegyzés
+>
+>Ez az oldal csak a React 16 és korábbi veziókra, valamint React Native-re vonatkozik.
+>
+>A React 17 a weben **nem használ** esemény pooling-ot.
+>
+>Erről a React 17 változásról [többet itt olvashatsz](/blog/2020/08/10/react-v17-rc.html#no-event-pooling).
+
+A [`SyntheticEvent`](/docs/events.html) objektumok egy közös készletben vannak. Ez azt jelenti, hogy a `SyntheticEvent` objektum újrafelhasználható és minden tulajdonság ki lesz nullázva az esemény callbackjének meghívása után. Ez például nem fog működni:
+
+```javascript
+function handleChange(e) {
+  // Ez nem fog műküdni, mert az esemény objektumok újra fel lesznek használva.
+  setTimeout(() => {
+    console.log(e.target.value); // Túl késő!
+  }, 100);
+}
+```
+
+Ha szeretnél egy esemény tulajdonságaihoz azután hozzáférni hogy az eseménykezelő lefutott, meg kell hogy hívd az `e.persist()` metódust:
+
+```javascript
+function handleChange(e) {
+  // Megakadályozza a Reactet a tulajdonságok visszaállításában:
+  e.persist();
+
+  setTimeout(() => {
+    console.log(e.target.value); // Ez működik
+  }, 100);
+}
+```

content/docs/optimizing-performance.md

@@ -43,8 +43,8 @@ Remember that this is only necessary before deploying to production. For normal
 We offer production-ready versions of React and React DOM as single files:
 
 ```html
-<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
-<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
 ```
 
 Remember that only React files ending with `.production.min.js` are suitable for production.
@@ -75,10 +75,10 @@ For the most efficient Browserify production build, install a few plugins:
 
 ```
 # If you use npm
-npm install --save-dev envify terser uglifyify 
+npm install --save-dev envify terser uglifyify
 
 # If you use Yarn
-yarn add --dev envify terser uglifyify 
+yarn add --dev envify terser uglifyify
 ```
 
 To create a production build, make sure that you add these transforms **(the order matters)**:
@@ -379,7 +379,7 @@ function updateColorMap(colormap) {
 }
 ```
 
-This feature was added to JavaScript in ES2018. 
+This feature was added to JavaScript in ES2018.
 
 If you're using Create React App, both `Object.assign` and the object spread syntax are available by default.
 

content/docs/reference-events.md

@@ -34,36 +34,11 @@ string type
 
 > Megjegyzés:
 >
-> A v0.14-től kezdve `false` érték visszaadása egy eseménykezelőben nem állítja meg az esemény terjedését. Ehelyett manuálisan kell, hogy meghívd vagy az `e.stopPropagation()`-t, vagy az `e.preventDefault`-ot, attól függően melyik a helyes a te esetedben.
-
-### Események összegyűjtése {#event-pooling}
-
-A `SyntheticEvent` egy közös készletben van. Ez azt jelenti, hogy a `SyntheticEvent` objektum újrafelhasználható és minden tulajdonság ki lesz nullázva az esemény callbackjének meghívása után.
-Ez a teljesítmény növelése érdekében történik.
-Így az eseményhez nem férhetsz aszinkron módon.
-
-```javascript
-function onClick(event) {
-  console.log(event); // => kinullázott objektum.
-  console.log(event.type); // => "click"
-  const eventType = event.type; // => "click"
-
-  setTimeout(function() {
-    console.log(event.type); // => null
-    console.log(eventType); // => "click"
-  }, 0);
-
-  // Nem fog működni. A this.state.clickEvent csak null értékeket fog tartalmazni.
-  this.setState({clickEvent: event});
-
-  // Az esemény értékeket még így is ki tudod exportálni.
-  this.setState({eventType: event.type});
-}
-```
+> A React 17-től kezdve az `e.persist()` nem csinál semmit, mivel a `SyntheticEvent` többé nincs ["összegyűtjve"](/docs/legacy-event-pooling.html).
 
 > Megjegyzés:
 >
-> Ha szeretnél az események tulajdonságaihoz aszinkron módon hozzáférni, meg kell hogy hívd az `event.persist()` metódust az eseményen, ami eltávolítja a szintetikus eseményt a medencéből és lehetővé teszi az eseményre mutató hivatkozások megtartását felhasználói kóddal.
+> A v0.14-től kezdve `false` érték visszaadása egy eseménykezelőben nem állítja meg az esemény terjedését. Ehelyett manuálisan kell, hogy meghívd vagy az `e.stopPropagation()`-t, vagy az `e.preventDefault`-ot, attól függően melyik a helyes a te esetedben.
 
 ## Támogatott események {#supported-events}
 
@@ -72,13 +47,15 @@ A React normalizálja az eseményeket annak érdekében, hogy a tulajdonságaik
 Az alábbi eseménykezelők egy esemény által lettek elindítva a "bubbling" fázisban. Egy eseménykezelő regisztrálásához a "capture" fázisban add hozzá a `Capture` szót az esemény nevéhez; például az `onClick` helyett használd az `onClickCapture`-t kattintási események kezeléséhez a capture fázisban.
 
 - [Áttekintés {#overview}](#áttekintés-overview)
-  - [Események összegyűjtése {#event-pooling}](#események-összegyűjtése-event-pooling)
 - [Támogatott események {#supported-events}](#támogatott-események-supported-events)
 - [Referencia {#reference}](#referencia-reference)
   - [Vágólapesemények {#clipboard-events}](#vágólapesemények-clipboard-events)
   - [Kompozíció-események {#composition-events}](#kompozíció-események-composition-events)
   - [Billentyűzet-események {#keyboard-events}](#billentyűzet-események-keyboard-events)
   - [Fókuszálás-események {#focus-events}](#fókuszálás-események-focus-events)
+    - [onFocus](#onfocus)
+    - [onBlur](#onblur)
+    - [Fókuszálás és fókuszálás elvesztésének detektálása](#fókuszálás-és-fókuszálás-elvesztésének-detektálása)
   - [Űrlapesemények {#form-events}](#űrlapesemények-form-events)
   - [Általános események {#generic-events}](#általános-események-generic-events)
   - [Egéresemények {#mouse-events}](#egéresemények-mouse-events)
@@ -171,10 +148,85 @@ Ezek a fókuszálás-események minden elemen működnek a React DOM-ban, nem cs
 
 Tulajdonságok:
 
-```javascript
+```js
 DOMEventTarget relatedTarget
 ```
 
+#### onFocus
+
+Az `onFocus` esemény akkor van meghívva, amikor az elem (vagy valamelyik elem azon belül) fókuszálva van. Például amikor a felhasználó egy szöveg beivteli mezőre kattint.
+
+```javascript
+function Example() {
+  return (
+    <input
+      onFocus={(e) => {
+        console.log('Fókuszálva a beviteli mezőre');
+      }}
+      placeholder="Az onFocus meg lesz hívva, ha erre a beviteli mezőre kattintasz."
+    />
+  )
+}
+```
+
+#### onBlur
+
+Az `onBlur` esemény akkor van meghívva, amikor a fókuszálás elhagyta az elemet (vagy valamelyik elemet azon belül). Például akkor, amikor a felhasználó egy fókuszált szöveg beviteli mezőn kívülre kattint.
+
+```javascript
+function Example() {
+  return (
+    <input
+      onBlur={(e) => {
+        console.log('Meghívva, mivel a beviteli mező elvesztette a fókuszt');
+      }}
+      placeholder="Az onBlur meg lesz hívva, ha erre a beviteli mezőre kattintasz, majd utána ezen kívülre."
+    />
+  )
+}
+```
+
+#### Fókuszálás és fókuszálás elvesztésének detektálása
+
+You can use the `currentTarget` and `relatedTarget` to differentiate if the focusing or blurring events originated from _outside_ of the parent element. Here is a demo you can copy and paste that shows how to detect focusing a child, focusing the element itself, and focus entering or leaving the whole subtree.
+Használhatod a `currentTarget` és `releatedTarget`-et, hogy meg tudd különböztetni, hogy a fókuszálás vagy fókuszálás elvesztésének eseménye a szülő komponensen _kívülről_ jön-e. Itt egy demo amit kimásolhatsz és beilleszthetsz, ami megmutatja hogyan detektálj fókuszálást egy gyermek elemre, magára az elemre, és fókuszálást vagy fókuszálás elvesztést a teljes alfára.
+
+```javascript
+function Example() {
+  return (
+    <div
+      tabIndex={1}
+      onFocus={(e) => {
+        if (e.currentTarget === e.target) {
+          console.log('saját magára fókuszált');
+        } else {
+          console.log('gyermekre fókuszált', e.target);
+        }
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          // Nincs meghívva gyermekek közti fókuszálás csere közt
+          console.log('fókusz belépés saját magára');
+        }
+      }}
+      onBlur={(e) => {
+        if (e.currentTarget === e.target) {
+          console.log('saját maga fókuszálásának elvesztése');
+        } else {
+          console.log('gyermek fókuszálásának elvesztése', e.target);
+        }
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+          // Nincs meghívva gyermekek közti fókuszálás csere közt
+          console.log('fókuszálás elvesztése saját magáról');
+        }
+      }}
+    >
+      <input id="1" />
+      <input id="2" />
+    </div>
+  );
+}
+```
+
+
 * * *
 
 ### Űrlapesemények {#form-events}
@@ -310,6 +362,10 @@ Eseménynevek:
 onScroll
 ```
 
+>Megjegyzés
+>
+>A React 17-től kezdve az `onScroll` esemény **nem használ "bubbling"-et**. Ez megegyezik a böngésző viselkedésével és meggátolja hogy egymásba ágyazott görgethető elemek eseményeket generáljanak egy távoli szülő elemen.
+
 Tulajdonságok:
 
 ```javascript

content/docs/testing-recipes.md

@@ -377,7 +377,6 @@ let container = null;
 beforeEach(() => {
   // setup a DOM element as a render target
   container = document.createElement("div");
-  // container *must* be attached to document so events work correctly.
   document.body.appendChild(container);
 });
 
@@ -416,7 +415,7 @@ it("changes value when clicked", () => {
 });
 ```
 
-Different DOM events and their properties are described in [MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent). Note that you need to pass `{ bubbles: true }` in each event you create for it to reach the React listener because React automatically delegates events to the document.
+Different DOM events and their properties are described in [MDN](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent). Note that you need to pass `{ bubbles: true }` in each event you create for it to reach the React listener because React automatically delegates events to the root.
 
 > Note:
 >

content/versions.yml

@@ -1,3 +1,7 @@
+- title: '17.0.1'
+  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1701-october-22-2020
+- title: '17.0.0'
+  changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#1700-october-20-2020
 - title: '16.14.0'
   changelog: https://github.com/facebook/react/blob/master/CHANGELOG.md#16140-october-14-2020
 - title: '16.13.1'

package.json

@@ -47,8 +47,8 @@
     "normalize.css": "^8.0.0",
     "prettier": "^1.7.4",
     "prismjs": "^1.15.0",
-    "react": "^17.0.0-rc.3",
-    "react-dom": "^17.0.0-rc.3",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-helmet": "^5.2.0",
     "react-live": "1.8.0-0",
     "remarkable": "^1.7.1",

src/site-constants.js

@@ -8,7 +8,7 @@
 // NOTE: We can't just use `location.toString()` because when we are rendering
 // the SSR part in node.js we won't have a proper location.
 const urlRoot = 'https://hu.reactjs.org';
-const version = '16.14.0';
+const version = '17.0.1';
 const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js';
 
 export {babelURL, urlRoot, version};

static/_redirects

@@ -12,7 +12,7 @@
 /link/dangerously-set-inner-html    /docs/dom-elements.html#dangerouslysetinnerhtml
 /link/derived-state                 /blog/2018/06/07/you-probably-dont-need-derived-state.html
 /link/error-boundaries              /docs/error-boundaries.html
-/link/event-pooling                 /docs/events.html#event-pooling
+/link/event-pooling                 /docs/legacy-event-pooling.html
 /link/hooks-data-fetching           /docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks
 /link/invalid-aria-props            /warnings/invalid-aria-prop.html
 /link/invalid-hook-call             /warnings/invalid-hook-call-warning.html

static/html/single-file-example.html

@@ -3,8 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <title>Helló világ</title>
-    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
-    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
 
     <!-- Don't use this in production: -->
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

vercel.json

@@ -15,7 +15,7 @@
     { "source": "/link/dangerously-set-inner-html", "destination": "/docs/dom-elements.html#dangerouslysetinnerhtml", "permanent": false },
     { "source": "/link/derived-state", "destination": "/blog/2018/06/07/you-probably-dont-need-derived-state.html", "permanent": false },
     { "source": "/link/error-boundaries", "destination": "/docs/error-boundaries.html", "permanent": false },
-    { "source": "/link/event-pooling", "destination": "/docs/events.html#event-pooling", "permanent": false },
+    { "source": "/link/event-pooling", "destination": "/docs/legacy-event-pooling.html", "permanent": false },
     { "source": "/link/hooks-data-fetching", "destination": "/docs/hooks-faq.html#how-can-i-do-data-fetching-with-hooks", "permanent": false },
     { "source": "/link/invalid-aria-props", "destination": "/warnings/invalid-aria-prop.html", "permanent": false },
     { "source": "/link/invalid-hook-call", "destination": "/warnings/invalid-hook-call-warning.html", "permanent": false },