From 9bda00f9b555047aa1d9bcd0105efb65b1362711 Mon Sep 17 00:00:00 2001 From: jakubdrozdek Date: Wed, 12 Jun 2019 09:53:00 +0200 Subject: [PATCH 1/2] Translate 'Fragments' page --- content/docs/fragments.md | 60 +++++++++++++++++++-------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 04de0463b..f7a80c456 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -1,10 +1,10 @@ --- id: fragments -title: Fragments +title: Fragmenty 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. +Często spotykanym wzorcem w Reakcie jest tworzenie komponentów, które zwracają wiele elementów. Fragmenty pozwalają zgrupować listę potomków bez konieczności dodawania zbędnych węzłów do drzewa DOM. ```js render() { @@ -18,11 +18,11 @@ render() { } ``` -There is also a new [short syntax](#short-syntax) for declaring them, but it isn't supported by all popular tools yet. +Istnieje również nowy [skrócony zapis](#short-syntax) do deklarowania fragmentów, jednak nie jest on jeszcze wspierany przez wszystkie popularne narzędzia. -## Motivation {#motivation} +## Motywacja {#motivation} -A common pattern is for a component to return a list of children. Take this example React snippet: +Zdarza się, że potrzebujemy w komponencie zwrócić listę potomków. Rozważmy poniższy przykład: ```jsx class Table extends React.Component { @@ -38,93 +38,93 @@ 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. +Komponent `` może chcieć zwrócić kilka elementów `` w celu zapewnienia poprawności wyrenderowanego kodu HTML. Gdyby komórki tabeli, zwracane przez funkcję `render()` komponentu ``, otoczyć np. elementem `
`, powstały w ten sposób kod HTML byłby nieprawidłowy. ```jsx class Columns extends React.Component { render() { return (
- Hello - World + Witaj + Świecie
); } } ``` -results in a `` output of: +daje w rezultacie następującą strukturę dla komponentu `
`: ```jsx
-
- + +
HelloWorldWitajŚwiecie
``` -Fragments solve this problem. +Fragmenty rozwiązują ten problem. -## Usage {#usage} +## Zasady używania {#usage} ```jsx{4,7} class Columns extends React.Component { render() { return ( - Hello - World + Witaj + Świecie ); } } ``` -which results in a correct `` output of: +daje w rezultacie następującą strukturę dla komponentu `
`: ```jsx
- - + +
HelloWorldWitajŚwiecie
``` -### Short Syntax {#short-syntax} +### Skrócony zapis {#short-syntax} -There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags: +Istnieje nowy, krótszy zapis służący do deklarowania fragmentów. Z wyglądu przypomina puste znaczniki: ```jsx{4,7} class Columns extends React.Component { render() { return ( <> - Hello - World + Witaj + Świecie ); } } ``` -You can use `<>` the same way you'd use any other element except that it doesn't support keys or attributes. +Możesz używać `<>` tak samo, jak innych komponentów. Nie możesz jednak przekazywać do niego klucza (`key`) ani żadnych innych właściwości. -Note that **[many tools don't support it yet](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** so you might want to explicitly write `` until the tooling catches up. +Zwróć uwagę, że **[wiele narzędzi nie posiada jeszcze wsparcia dla tego zapisu](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**. Do czasu jego dodania pisz po prostu ``. -### Keyed Fragments {#keyed-fragments} +### Fragmenty z kluczem {#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: +Fragmenty zadeklarowane jawnie przy użyciu składni `` mogą posiadać klucze. Ma to zastosowanie, gdy zechcesz przemapować kolekcję na tablicę fragmentów -- na przykład do stworzenia listy opisów: ```jsx function Glossary(props) { return (
{props.items.map(item => ( - // Without the `key`, React will fire a key warning + // Bez `key` React wyrzuci błąd
{item.term}
{item.description}
@@ -135,8 +135,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. +`key` jest jedyną właściwością, którą można przekazać do fragmentu. Możliwe, że w przyszłości dodamy wsparcie dla innych właściwości, np. procedur obsługi zdarzeń. -### Live Demo {#live-demo} +### Demo {#live-demo} -You can try out the new JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). +Możesz wypróbować nową składnię JSX dla fragmentów na tym [CodePenie](https://codepen.io/reactjs/pen/VrEbjE?editors=1000). From 7b54eacff711f700af0f0dca883cb80367ddae6e Mon Sep 17 00:00:00 2001 From: jakubdrozdek Date: Thu, 13 Jun 2019 08:44:46 +0200 Subject: [PATCH 2/2] Apply review suggestions --- content/docs/fragments.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index f7a80c456..b30d5266d 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -38,7 +38,7 @@ class Table extends React.Component { } ``` -Komponent `` może chcieć zwrócić kilka elementów `` w celu zapewnienia poprawności wyrenderowanego kodu HTML. Gdyby komórki tabeli, zwracane przez funkcję `render()` komponentu ``, otoczyć np. elementem `
`, powstały w ten sposób kod HTML byłby nieprawidłowy. +Aby zapewnić poprawność wyrenderowanego kodu HTML, komponent `` powinien zwrócić kilka elementów ``. Gdyby komórki tabeli, zwracane przez funkcję `render()` komponentu ``, otoczyć np. elementem `
`, powstały w ten sposób kod HTML byłby nieprawidłowy. ```jsx class Columns extends React.Component { @@ -68,7 +68,7 @@ daje w rezultacie następującą strukturę dla komponentu ``: Fragmenty rozwiązują ten problem. -## Zasady używania {#usage} +## Użycie {#usage} ```jsx{4,7} class Columns extends React.Component {