From 639834dd3738dfb118ad38dbe11c733f67eb97cb Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 4 Nov 2019 20:14:41 +0100 Subject: [PATCH 1/8] Fragments translation --- content/docs/fragments.md | 58 +++++++++++++++++++-------------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 33619db2f..8f6e8fce6 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -1,10 +1,10 @@ --- id: fragments -title: Fragments +title: Töredékek permalink: docs/fragments.html --- -A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM. +Egy általános minta React-ben, hogy egy komponens több elemet ad vissza. A töredékek segítenek csoportosítani gyerekek listáját anélkül, hogy új csomópontot adnál a DOM-hoz. ```js render() { @@ -18,11 +18,11 @@ render() { } ``` -There is also a new [short syntax](#short-syntax) for declaring them. +Létezik egy új [rövid szintaxis](#short-syntax) is a deklarálásukhoz. -## Motivation {#motivation} +## Motiváció {#motivation} -A common pattern is for a component to return a list of children. Take this example React snippet: +Általános minta, hogy egy komponens visszatér a gyerekek listájával. Vegyük példának ezt a React kódrészletet: ```jsx class Table extends React.Component { @@ -38,91 +38,91 @@ class Table extends React.Component { } ``` -`` would need to return multiple `` elements in order for the rendered HTML to be valid. If a parent div was used inside the `render()` of ``, then the resulting HTML will be invalid. +``-nak több `` elemet kell visszaadnia hogy a megjelenített HTML érvényes legyen. Ha egy szülő div-et használunk a `` komponens `render()` metódusában, akkor az eredményül kapott HTML érvénytelen lesz. ```jsx class Columns extends React.Component { render() { return (
- Hello - World + Helló + Világ
); } } ``` -results in a `` output of: +a következő `
` kimenetet eredményezi: ```jsx
-
- + +
HelloWorldHellóVilág
``` -Fragments solve this problem. +A töredékek megoldják ezt a problémát. -## Usage {#usage} +## Használat {#usage} ```jsx{4,7} class Columns extends React.Component { render() { return ( - Hello - World + Helló + Világ ); } } ``` -which results in a correct `` output of: +ami a következő helyes `
` kimenetet eredményezi: ```jsx
- - + +
HelloWorldHellóVilág
``` -### Short Syntax {#short-syntax} +### Rövid szintaxis {#short-syntax} -There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags: +Van egy új, rövidebb szintaxis, amit a töredékek deklarálásához használhatsz. Úgy néz ki, mint az üres címkék: ```jsx{4,7} class Columns extends React.Component { render() { return ( <> - Hello - World + Helló + Világ ); } } ``` -You can use `<>` the same way you'd use any other element except that it doesn't support keys or attributes. +Ugyanúgy használhatod a `<>`-t, mint ahogy más elemeket is, azzal a különbséggel, hogy nem támogatja a kulcsokat és az attribútumokat. -### Keyed Fragments {#keyed-fragments} +### Kulcsot használó töredékek {#keyed-fragments} -Fragments declared with the explicit `` syntax may have keys. A use case for this is mapping a collection to an array of fragments -- for example, to create a description list: +A töredékek, amik a `` szintaxissal vannak deklarálva tartalmazhatnak kulcsokat. Ennek az egyik felhasználási módja egy kollekció leképezése töredékek tömbre - például egy leíráslista létrehozására: ```jsx function Glossary(props) { return (
{props.items.map(item => ( - // Without the `key`, React will fire a key warning + // 'key' nélkül a React figyelmeztetést fog dobni
{item.term}
{item.description}
@@ -133,8 +133,8 @@ function Glossary(props) { } ``` -`key` is the only attribute that can be passed to `Fragment`. In the future, we may add support for additional attributes, such as event handlers. +A `key` az egyetlen olyan attribútum, amelyet át lehet adni egy `Fragment`-nek. A jövőben további attribútumok, például eseménykezelők is támogatást kaphatnak. -### Live Demo {#live-demo} +### Élő demó {#live-demo} -You can try out the new JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). +Kipróbálhatod az új JSX töredék szintaktikát ebben a [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000)-ben. From 8ff3e4a52e26a5d68f641725f5bd3c25cd715ed3 Mon Sep 17 00:00:00 2001 From: Gergely Nagy Date: Mon, 4 Nov 2019 22:31:59 +0100 Subject: [PATCH 2/8] Update content/docs/fragments.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Balázs Orbán --- content/docs/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 8f6e8fce6..477994cc6 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -137,4 +137,4 @@ A `key` az egyetlen olyan attribútum, amelyet át lehet adni egy `Fragment`-nek ### Élő demó {#live-demo} -Kipróbálhatod az új JSX töredék szintaktikát ebben a [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000)-ben. +Ebben a [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000)-ben kipróbálhatod az új JSX töredék szintaxist. From 758b5dd403b4ac1e2caeeac720e05e2fb7fa840f Mon Sep 17 00:00:00 2001 From: Gergely Nagy Date: Mon, 4 Nov 2019 22:32:22 +0100 Subject: [PATCH 3/8] Update content/docs/fragments.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Balázs Orbán --- content/docs/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 477994cc6..9d44eaab1 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -4,7 +4,7 @@ title: Töredékek permalink: docs/fragments.html --- -Egy általános minta React-ben, hogy egy komponens több elemet ad vissza. A töredékek segítenek csoportosítani gyerekek listáját anélkül, hogy új csomópontot adnál a DOM-hoz. +Egy általános minta a React-ben, hogy egy komponens több elemet ad vissza. A töredékek segítenek gyermekek listáját csoportosítani anélkül, hogy új csomópontot adnál a DOM-hoz. ```js render() { From 626611d92fbc86b515d4672e8ef113db8da331b5 Mon Sep 17 00:00:00 2001 From: Gergely Nagy Date: Mon, 4 Nov 2019 22:32:46 +0100 Subject: [PATCH 4/8] Update content/docs/fragments.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Balázs Orbán --- content/docs/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 9d44eaab1..acd3b6b62 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -22,7 +22,7 @@ Létezik egy új [rövid szintaxis](#short-syntax) is a deklarálásukhoz. ## Motiváció {#motivation} -Általános minta, hogy egy komponens visszatér a gyerekek listájával. Vegyük példának ezt a React kódrészletet: +Komponensek esetében gyakori minta, hogy az gyermekek listájával térjen vissza. Vegyük példának ezt a React kódrészletet: ```jsx class Table extends React.Component { From dd7aa9c9dcd66e6b04be19b9b8a7c6a19f44821e Mon Sep 17 00:00:00 2001 From: Gergely Nagy Date: Mon, 4 Nov 2019 22:32:53 +0100 Subject: [PATCH 5/8] Update content/docs/fragments.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Balázs Orbán --- content/docs/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index acd3b6b62..e306c44e7 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -38,7 +38,7 @@ class Table extends React.Component { } ``` -``-nak több `` elemet kell visszaadnia hogy a megjelenített HTML érvényes legyen. Ha egy szülő div-et használunk a `` komponens `render()` metódusában, akkor az eredményül kapott HTML érvénytelen lesz. +A ``-nak több `` elemet kell visszaadnia hogy a megjelenített HTML érvényes legyen. Ha egy szülő div-et használunk a `` komponens `render()` metódusában, akkor az eredményül kapott HTML érvénytelen lesz. ```jsx class Columns extends React.Component { From 9f180e833ee6f817b4e558ebe25fe0f52b411259 Mon Sep 17 00:00:00 2001 From: Gergely Nagy Date: Mon, 4 Nov 2019 22:33:00 +0100 Subject: [PATCH 6/8] Update content/docs/fragments.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Balázs Orbán --- content/docs/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index e306c44e7..81a3cee6a 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -66,7 +66,7 @@ a következő `` kimenetet eredményezi:
``` -A töredékek megoldják ezt a problémát. +A töredékek ezt a problémát oldják meg. ## Használat {#usage} From 3ff6b91b3dc5c539e9ac44f41a87329b51fa45d0 Mon Sep 17 00:00:00 2001 From: Gergely Nagy Date: Mon, 4 Nov 2019 22:33:07 +0100 Subject: [PATCH 7/8] Update content/docs/fragments.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Balázs Orbán --- content/docs/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 81a3cee6a..afbac2f62 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -111,7 +111,7 @@ class Columns extends React.Component { } ``` -Ugyanúgy használhatod a `<>`-t, mint ahogy más elemeket is, azzal a különbséggel, hogy nem támogatja a kulcsokat és az attribútumokat. +Ugyanúgy használhatod a `<>`-t, mint ahogy más elemeket is, azzal a különbséggel, hogy ez nem támogatja a kulcsokat és az attribútumokat. ### Kulcsot használó töredékek {#keyed-fragments} From f3a4bf7c1b9072462a50e047d4e79d2c111c5105 Mon Sep 17 00:00:00 2001 From: Gergely Nagy Date: Mon, 4 Nov 2019 22:33:19 +0100 Subject: [PATCH 8/8] Update content/docs/fragments.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Balázs Orbán --- content/docs/fragments.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index afbac2f62..227af6ce5 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -115,7 +115,7 @@ Ugyanúgy használhatod a `<>`-t, mint ahogy más elemeket is, azzal a külö ### Kulcsot használó töredékek {#keyed-fragments} -A töredékek, amik a `` szintaxissal vannak deklarálva tartalmazhatnak kulcsokat. Ennek az egyik felhasználási módja egy kollekció leképezése töredékek tömbre - például egy leíráslista létrehozására: +A töredékek, amik a `` szintaxissal vannak deklarálva tartalmazhatnak kulcsokat. Ennek az egyik felhasználási módja egy kollekció leképezése töredékek tömbre -- például egy leíráslista létrehozására: ```jsx function Glossary(props) {