React api translation #30
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Co-Authored-By: iamarek <arkadiuszchatys@gmail.com>
|
Deploy preview for pl-reactjs ready! Built with commit ccb2b7a |
|
@iamarek Pewnie stworzyłeś brancha jakiś czas temu lub nie zaktualizowałeś swojego przy tworzeniu, dlatego masz stare, nieswoje commity :-) Zrób porządny rebase i powinno być ok. |
jakubdrozdek
added
needs author response
| @@ -1,6 +1,6 @@ | |||
| --- | |||
| id: react-api | |||
| title: React Top-Level API | |||
| title: API Reacta | |||
There was a problem hiding this comment.
Skoro mowa o "Top-Level", to może "Główne API Reacta"?
| @@ -13,67 +13,67 @@ redirect_from: | |||
| - "docs/top-level-api-zh-CN.html" | |||
| --- | |||
|
|
|||
| `React` is the entry point to the React library. If you load React from a `<script>` tag, these top-level APIs are available on the `React` global. If you use ES6 with npm, you can write `import React from 'react'`. If you use ES5 with npm, you can write `var React = require('react')`. | |||
| `React` jest podstawowym elementem biblioteki reaktowej. Jeśli załadujesz go używając tagu `<script>`, główne API `Reacta` będą dostępne globalnie. Jeśli używasz standardu ES6, możesz korzystać ze składni `import React from 'react'`. Jeśli używasz starszego standardu ES5, powinieneś użyć składni `var React = require('react')`. | |||
There was a problem hiding this comment.
Suggested change
| `React` jest podstawowym elementem biblioteki reaktowej. Jeśli załadujesz go używając tagu `<script>`, główne API `Reacta` będą dostępne globalnie. Jeśli używasz standardu ES6, możesz korzystać ze składni `import React from 'react'`. Jeśli używasz starszego standardu ES5, powinieneś użyć składni `var React = require('react')`. | |
| Obiekt `React` jest punktem wejściowym do biblioteki React. Jeśli załadujesz ją używając tagu `<script>`, główny interfejs API będzie dostępny w zmiennej globalnej `React`. Jeśli używasz standardu ES6, możesz skorzystać ze składni `import React from 'react'`. Jeśli używasz starszego standardu ES5, użyj składni `var React = require('react')`. |
|
|
||
| ## Overview {#overview} | ||
| ## Przegląd {#overview} |
There was a problem hiding this comment.
Suggested change
| ## Przegląd {#overview} | |
| ## Ogólne informacje {#overview} |
|
|
||
| React components let you split the UI into independent, reusable pieces, and think about each piece in isolation. React components can be defined by subclassing `React.Component` or `React.PureComponent`. | ||
| Komponenty reaktowe pozwalają podzielić interfejs użytkownika na niezależne, enkapsulowane elementy, z których możesz korzystać w wielu miejscach. Komponenty w Reakcie mogą być definiowane dziedziczeniem po klasie `React.Component` lub `React.PureComponent`. |
There was a problem hiding this comment.
Suggested change
| Komponenty reaktowe pozwalają podzielić interfejs użytkownika na niezależne, enkapsulowane elementy, z których możesz korzystać w wielu miejscach. Komponenty w Reakcie mogą być definiowane dziedziczeniem po klasie `React.Component` lub `React.PureComponent`. | |
| Komponenty reaktowe pozwalają podzielić interfejs użytkownika na niezależne, enkapsulowane elementy, z których możesz korzystać w wielu miejscach. Komponenty w Reakcie mogą być definiowane poprzez dziedziczenie po klasie `React.Component` lub `React.PureComponent`. |
|
|
||
| - [`React.Component`](#reactcomponent) | ||
| - [`React.PureComponent`](#reactpurecomponent) | ||
|
|
||
| If you don't use ES6 classes, you may use the `create-react-class` module instead. See [Using React without ES6](/docs/react-without-es6.html) for more information. | ||
| Jeśli nie korzystasz z klas ES6, możesz skorzystać z modułu `create-react-class`. O korzystaniu z Reacta bez ES6, możesz [przeczytać tutaj](/docs/react-without-es6.html). |
There was a problem hiding this comment.
Suggested change
| Jeśli nie korzystasz z klas ES6, możesz skorzystać z modułu `create-react-class`. O korzystaniu z Reacta bez ES6, możesz [przeczytać tutaj](/docs/react-without-es6.html). | |
| Jeśli nie używasz standardu ES6 do definiowania klas, możesz skorzystać z modułu `create-react-class`. W innym rozdziale opisaliśmy sposób na [korzystanie z Reacta bez ES6](/docs/react-without-es6.html). |
Linki na stronie nie mogą zawierać tekstu "kliknij tutaj" i tym podobnych, tylko muszą być tak jakby tytułem strony, do której się odnoszą. To standard na froncie dot. "accessibility", i tak samo standard w dokumentacji Reacta.
|
|
||
| React components can also be defined as functions which can be wrapped: | ||
| Komponenty reaktowe mogą być też definiowane jako funkcje, które mogą być otaczane: |
There was a problem hiding this comment.
Suggested change
| Komponenty reaktowe mogą być też definiowane jako funkcje, które mogą być otaczane: | |
| Komponenty reactowe można również zdefiniować jako funkcje, a następnie otoczyć: |
|
|
||
| - [`React.memo`](#reactmemo) | ||
|
|
||
| ### Creating React Elements {#creating-react-elements} | ||
| ### Tworzenie elementów reaktowych {#creating-react-elements} |
There was a problem hiding this comment.
Suggested change
| ### Tworzenie elementów reaktowych {#creating-react-elements} | |
| ### Tworzenie elementów reactowych {#creating-react-elements} |
|
|
||
| We recommend [using JSX](/docs/introducing-jsx.html) to describe what your UI should look like. Each JSX element is just syntactic sugar for calling [`React.createElement()`](#createelement). You will not typically invoke the following methods directly if you are using JSX. | ||
| Polecamy [korzystanie z JSX](/docs/introducing-jsx.html), by opisać wygląd elementów interfejsu użytkownika. Każdy element JSX-owy to wygodniejsza reprezentacja wywołania metody [`React.createElement()`](#createelement). Jeśli korzystasz z JSX, prawdopodobnie nie będziesz musiał korzystać z tej metody. |
There was a problem hiding this comment.
Suggested change
| Polecamy [korzystanie z JSX](/docs/introducing-jsx.html), by opisać wygląd elementów interfejsu użytkownika. Każdy element JSX-owy to wygodniejsza reprezentacja wywołania metody [`React.createElement()`](#createelement). Jeśli korzystasz z JSX, prawdopodobnie nie będziesz musiał korzystać z tej metody. | |
| Do opisania wyglądu interfejsu użytkownika polecamy [korzystanie ze składni JSX](/docs/introducing-jsx.html). W JSX elementy są tylko wygodniejszymi odpowiednikami wywołania metody [`React.createElement()`](#createelement). Jeśli korzystasz z JSX, prawdopodobnie nigdy nie przyjdzie ci korzystać z tej metody bezpośrednio. |
|
|
||
| - [`createElement()`](#createelement) | ||
| - [`createFactory()`](#createfactory) | ||
|
|
||
| See [Using React without JSX](/docs/react-without-jsx.html) for more information. | ||
| Po więcej informacji zobacz [React bez JSX](/docs/react-without-jsx.html). |
There was a problem hiding this comment.
Suggested change
| Po więcej informacji zobacz [React bez JSX](/docs/react-without-jsx.html). | |
| Aby dowiedzieć się więcej na ten temat, zajrzyj do rozdziału pt. ["React bez JSX"](/docs/react-without-jsx.html). |
|
|
||
| `React` provides several APIs for manipulating elements: | ||
| `React` udostępnia kilka różnych API do manipulowania elementami: |
There was a problem hiding this comment.
Suggested change
| `React` udostępnia kilka różnych API do manipulowania elementami: | |
| `React` udostępnia kilka API do manipulowania elementami: |
|
|
||
| - [`React.Fragment`](#reactfragment) | ||
|
|
||
| ### Refs {#refs} | ||
| ### Odniesienia *(ang. Refs)* {#refs} |
There was a problem hiding this comment.
Suggested change
| ### Odniesienia *(ang. Refs)* {#refs} | |
| ### Referencje (ang. *refs*) {#refs} |
|
|
||
| `React` also provides a component for rendering multiple elements without a wrapper. | ||
| `React` pozwala także renderować wiele komponentów, bez komponentu otaczającego przy użyciu: |
There was a problem hiding this comment.
Suggested change
| `React` pozwala także renderować wiele komponentów, bez komponentu otaczającego przy użyciu: | |
| `React` pozwala także renderować wiele komponentów bez konieczności używania komponentu opakowującego. |
|
|
||
| This API was introduced as a replacement of the deprecated `React.addons.cloneWithProps()`. | ||
| API to zostało przygotowane w zastępstwie za przestarzałe `React.addons.cloneWithProps()`. |
There was a problem hiding this comment.
Według mnie trochę zbyt dosłownie przetłumaczone. Może:
Suggested change
| API to zostało przygotowane w zastępstwie za przestarzałe `React.addons.cloneWithProps()`. | |
| Powyższy interfejs API zastąpił przestarzałą funkcję `React.addons.cloneWithProps()`. |
| @@ -198,11 +197,11 @@ This API was introduced as a replacement of the deprecated `React.addons.cloneWi | |||
| React.createFactory(type) | |||
| ``` | |||
|
|
|||
| Return a function that produces React elements of a given type. Like [`React.createElement()`](#createElement), the type argument can be either a tag name string (such as `'div'` or `'span'`), a [React component](/docs/components-and-props.html) type (a class or a function), or a [React fragment](#reactfragment) type. | |||
| Zwraca funkcję, która tworzy reaktowy element danego typu. Tak jak [`React.createElement()`](#createElement), argument `type`, może być zarówno nazwą tagu HTML-owego (np. `'div'` lub `'span'`), typem [komponentu reaktowego](/docs/components-and-props.html) (klasa lub funkcja) lub typem [fragmentu reaktowego](#reactfragment). | |||
There was a problem hiding this comment.
Suggested change
| Zwraca funkcję, która tworzy reaktowy element danego typu. Tak jak [`React.createElement()`](#createElement), argument `type`, może być zarówno nazwą tagu HTML-owego (np. `'div'` lub `'span'`), typem [komponentu reaktowego](/docs/components-and-props.html) (klasa lub funkcja) lub typem [fragmentu reaktowego](#reactfragment). | |
| Zwraca funkcję, która tworzy reaktowy element danego typu. Tak jak [`React.createElement()`](#createElement), argument `type`, może być zarówno nazwą znacznika HTML (np. `'div'` lub `'span'`), [komponentem reactowym](/docs/components-and-props.html) (klasa lub funkcja) lub [fragmentem reactowym](#reactfragment). |
|
|
||
| You will not typically invoke `React.createFactory()` directly if you are using JSX. See [React Without JSX](/docs/react-without-jsx.html) to learn more. | ||
| Jeśli korzystasz z JSX, nie ma potrzeby korzystania z `React.createFactory()`. Zobacz [React bez JSX](/docs/react-without-jsx.html), by dowiedzieć się więcej. |
There was a problem hiding this comment.
Suggested change
| Jeśli korzystasz z JSX, nie ma potrzeby korzystania z `React.createFactory()`. Zobacz [React bez JSX](/docs/react-without-jsx.html), by dowiedzieć się więcej. | |
| Jeśli korzystasz z JSX, nie ma potrzeby korzystania z `React.createFactory()`. Przeczytaj rozdział pt. ["React bez JSX"](/docs/react-without-jsx.html), aby dowiedzieć się więcej. |
| @@ -212,136 +211,136 @@ You will not typically invoke `React.createFactory()` directly if you are using | |||
| React.isValidElement(object) | |||
| ``` | |||
|
|
|||
| Verifies the object is a React element. Returns `true` or `false`. | |||
| Weryfikuje czy obiekt jest elementem reaktowym. Zwraca `true` lub `false`. | |||
There was a problem hiding this comment.
Suggested change
| Weryfikuje czy obiekt jest elementem reaktowym. Zwraca `true` lub `false`. | |
| Weryfikuje, czy obiekt jest elementem reactowym. Zwraca `true` lub `false`. |
|
|
||
| * * * | ||
|
|
||
| ### `React.Children` {#reactchildren} | ||
|
|
||
| `React.Children` provides utilities for dealing with the `this.props.children` opaque data structure. | ||
| `React.Children` udostępnia narzędzia do obsługi struktury danych z `this.props.children`. |
There was a problem hiding this comment.
Suggested change
| `React.Children` udostępnia narzędzia do obsługi struktury danych z `this.props.children`. | |
| `React.Children` udostępnia narzędzia do obsługi struktury danych przekazanej w `this.props.children`. |
|
|
||
| #### `React.Children.map` {#reactchildrenmap} | ||
|
|
||
| ```javascript | ||
| React.Children.map(children, function[(thisArg)]) | ||
| ``` | ||
|
|
||
| Invokes a function on every immediate child contained within `children` with `this` set to `thisArg`. If `children` is an array it will be traversed and the function will be called for each child in the array. If children is `null` or `undefined`, this method will return `null` or `undefined` rather than an array. | ||
| Wywołuje funkcję na każdym bezpośrednim dziecku, zawartym w `children` z `this` ustawionym na `thisArg`. Jeśli `children` jest tablicą, funkcja zostanie wywołana na każdym dziecku zawartym w tej tablicy. |
There was a problem hiding this comment.
Suggested change
| Wywołuje funkcję na każdym bezpośrednim dziecku, zawartym w `children` z `this` ustawionym na `thisArg`. Jeśli `children` jest tablicą, funkcja zostanie wywołana na każdym dziecku zawartym w tej tablicy. | |
| Wywołuje funkcję na każdym bezpośrednim komponencie potomnych zawartym w `children`, z `this` ustawionym na `thisArg`. Jeśli `children` jest tablicą, funkcja zostanie wywołana na każdym elemencie tej tablicy. |
| > | ||
| > If `children` is a `Fragment` it will be treated as a single child and not traversed. | ||
| > Jeśli `children` jest `Fragmentem`, zostanie potraktowana jako pojedyncze dziecko, nie jak tablica. |
There was a problem hiding this comment.
Suggested change
| > Jeśli `children` jest `Fragmentem`, zostanie potraktowana jako pojedyncze dziecko, nie jak tablica. | |
| > Jeśli `children` jest typu `Fragment`, zostanie potraktowany jako pojedynczy potomek, nie jak tablica. |
|
|
||
| #### `React.Children.forEach` {#reactchildrenforeach} | ||
|
|
||
| ```javascript | ||
| React.Children.forEach(children, function[(thisArg)]) | ||
| ``` | ||
|
|
||
| Like [`React.Children.map()`](#reactchildrenmap) but does not return an array. | ||
| Działa tak samo jak [`React.Children.map()`](#reactchildrenmap), ale nie zwraca tablicy. |
There was a problem hiding this comment.
Suggested change
| Działa tak samo jak [`React.Children.map()`](#reactchildrenmap), ale nie zwraca tablicy. | |
| Działa tak samo, jak [`React.Children.map()`](#reactchildrenmap), ale nie zwraca tablicy. |
|
|
||
| #### `React.Children.count` {#reactchildrencount} | ||
|
|
||
| ```javascript | ||
| React.Children.count(children) | ||
| ``` | ||
|
|
||
| Returns the total number of components in `children`, equal to the number of times that a callback passed to `map` or `forEach` would be invoked. | ||
| Zwraca liczbę komponentów w `children` równą ilości razy, jakie byłby wywołany callback przekazany do `map` lub `forEach`. |
There was a problem hiding this comment.
Suggested change
| Zwraca liczbę komponentów w `children` równą ilości razy, jakie byłby wywołany callback przekazany do `map` lub `forEach`. | |
| Zwraca liczbę komponentów w `children`, równą liczbie potencjalnych wywołań funkcji zwrotnej (ang. *callback*) przekazanej do `map` lub `forEach`. |
|
|
||
| #### `React.Children.only` {#reactchildrenonly} | ||
|
|
||
| ```javascript | ||
| React.Children.only(children) | ||
| ``` | ||
|
|
||
| Verifies that `children` has only one child (a React element) and returns it. Otherwise this method throws an error. | ||
| Weryfikuje czy `children` ma tylko jedno dziecko (element reaktowy) i zwraca je. W innym przypadku metoda zwróci błąd. |
There was a problem hiding this comment.
Suggested change
| Weryfikuje czy `children` ma tylko jedno dziecko (element reaktowy) i zwraca je. W innym przypadku metoda zwróci błąd. | |
| Weryfikuje, czy `children` ma tylko jednego potomka (element reactowy), i zwraca go. W innym przypadku metoda rzuci wyjątkiem. |
| > | ||
| >`React.Children.only()` does not accept the return value of [`React.Children.map()`](#reactchildrenmap) because it is an array rather than a React element. | ||
| >`React.Children.only()` nie akceptuje wartości zwracanej przez [`React.Children.map()`](#reactchildrenmap), ponieważ jest to tablica, a nie element reaktowy |
There was a problem hiding this comment.
Suggested change
| >`React.Children.only()` nie akceptuje wartości zwracanej przez [`React.Children.map()`](#reactchildrenmap), ponieważ jest to tablica, a nie element reaktowy | |
| >`React.Children.only()` nie akceptuje wartości zwracanej przez [`React.Children.map()`](#reactchildrenmap), ponieważ jest to tablica, a nie element reactowy. |
|
|
||
| #### `React.Children.toArray` {#reactchildrentoarray} | ||
|
|
||
| ```javascript | ||
| React.Children.toArray(children) | ||
| ``` | ||
|
|
||
| Returns the `children` opaque data structure as a flat array with keys assigned to each child. Useful if you want to manipulate collections of children in your render methods, especially if you want to reorder or slice `this.props.children` before passing it down. | ||
| Zwraca strukturę danych z `children` jako płaską tablicę z kluczem przypisanym do każdego z dzieci. Jest to przydatne, jeśli chcemy manipulować grupą dzieci w metodzie renderowania. Szczególnie jeśli chcemy zmienić kolejność lub podzielić `this.props.children`, zanim przekażemy je dalej. |
There was a problem hiding this comment.
Suggested change
| Zwraca strukturę danych z `children` jako płaską tablicę z kluczem przypisanym do każdego z dzieci. Jest to przydatne, jeśli chcemy manipulować grupą dzieci w metodzie renderowania. Szczególnie jeśli chcemy zmienić kolejność lub podzielić `this.props.children`, zanim przekażemy je dalej. | |
| Zwraca strukturę z `children` jako płaską tablicę z kluczem przypisanym do każdego z potomków. Przydatne, jeśli chcemy manipulować grupą potomków w metodzie renderującej, zwłaszcza jeśli chcemy zmienić ich kolejność lub podzielić przed przekazaniem dalej. |
| > | ||
| > `React.Children.toArray()` changes keys to preserve the semantics of nested arrays when flattening lists of children. That is, `toArray` prefixes each key in the returned array so that each element's key is scoped to the input array containing it. | ||
| > `React.Children.toArray()` zmienia klucze, by zachować semantyczną poprawność zagłębionych tablic podczas przygotowywania płaskiej struktury. Oznacza to, że `toArray` rozpocznie nazwę każdego klucza, tak by każdy element należał do odpowiedniego zakresu. |
There was a problem hiding this comment.
Suggested change
| > `React.Children.toArray()` zmienia klucze, by zachować semantyczną poprawność zagłębionych tablic podczas przygotowywania płaskiej struktury. Oznacza to, że `toArray` rozpocznie nazwę każdego klucza, tak by każdy element należał do odpowiedniego zakresu. | |
| > `React.Children.toArray()` zmienia klucze, by zachować semantyczną poprawność zagłębionych tablic podczas przygotowywania płaskiej struktury. Oznacza to, że `toArray` doda prefiks do nazwy każdego klucza, tak by każdy element należał do odpowiedniego zakresu. |
|
|
||
|
|
||
| ### `React.createRef` {#reactcreateref} | ||
|
|
||
| `React.createRef` creates a [ref](/docs/refs-and-the-dom.html) that can be attached to React elements via the ref attribute. | ||
| `React.createRef` tworzy [referencję](/docs/refs-and-the-dom.html), którą możesz przypiąć do dowolnego elementu reaktowego poprzez atrybut ref. |
There was a problem hiding this comment.
Suggested change
| `React.createRef` tworzy [referencję](/docs/refs-and-the-dom.html), którą możesz przypiąć do dowolnego elementu reaktowego poprzez atrybut ref. | |
| `React.createRef` tworzy [referencję](/docs/refs-and-the-dom.html), którą możesz przypiąć do dowolnego elementu reactowego poprzez atrybut `ref`. |
| `embed:16-3-release-blog-post/create-ref-example.js` | ||
|
|
||
| ### `React.forwardRef` {#reactforwardref} | ||
|
|
||
| `React.forwardRef` creates a React component that forwards the [ref](/docs/refs-and-the-dom.html) attribute it receives to another component below in the tree. This technique is not very common but is particularly useful in two scenarios: | ||
| `React.forwardRef` tworzy komponent reaktowy, który przekazuje atrybut [ref](/docs/refs-and-the-dom.html) do kolejnego komponentu w dół drzewa. Ta technika nie jest zbyt popularna, ale przydatna w dwóch konkretnych przypadkach: |
There was a problem hiding this comment.
Suggested change
| `React.forwardRef` tworzy komponent reaktowy, który przekazuje atrybut [ref](/docs/refs-and-the-dom.html) do kolejnego komponentu w dół drzewa. Ta technika nie jest zbyt popularna, ale przydatna w dwóch konkretnych przypadkach: | |
| `React.forwardRef` tworzy komponent reactowy, który przekazuje atrybut [`ref`](/docs/refs-and-the-dom.html) do kolejnego komponentu w dół drzewa. Ta technika nie jest zbyt popularna, ale przydatna w dwóch konkretnych przypadkach: |
|
|
||
| `React.forwardRef` accepts a rendering function as an argument. React will call this function with `props` and `ref` as two arguments. This function should return a React node. | ||
| `React.forwardRef` przyjmuje funkcję renderującą jako argument. React wywoła tę funkcję biorąc `props` oraz `ref` jako dwa argumenty. Funkcja ta powinna zwrócić węzeł reaktowy. |
There was a problem hiding this comment.
Suggested change
| `React.forwardRef` przyjmuje funkcję renderującą jako argument. React wywoła tę funkcję biorąc `props` oraz `ref` jako dwa argumenty. Funkcja ta powinna zwrócić węzeł reaktowy. | |
| `React.forwardRef` przyjmuje funkcję renderującą jako argument. React wywoła tę funkcję, przekazując `props` oraz `ref` jako argumenty. Funkcja ta powinna zwrócić węzeł reactowy (ang. *React node*). |
|
|
||
| `embed:reference-react-forward-ref.js` | ||
|
|
||
| In the above example, React passes a `ref` given to `<FancyButton ref={ref}>` element as a second argument to the rendering function inside the `React.forwardRef` call. This rendering function passes the `ref` to the `<button ref={ref}>` element. | ||
| W powyższym przykładzie, React przekazuje `ref` będąc dla `<FancyButton ref={ref}>` drugim argumentem do funkcji renderującej wewnątrz `React.forwardRef`. Funkcja renderująca przekaże `ref` do elementu `<button ref={ref}>`. |
There was a problem hiding this comment.
Suggested change
| W powyższym przykładzie, React przekazuje `ref` będąc dla `<FancyButton ref={ref}>` drugim argumentem do funkcji renderującej wewnątrz `React.forwardRef`. Funkcja renderująca przekaże `ref` do elementu `<button ref={ref}>`. | |
| W powyższym przykładzie React przekazuje `ref` poprzez `<FancyButton ref={ref}>` jako drugi argument funkcji renderującej wewnątrz `React.forwardRef`. Funkcja renderująca przekaże `ref` do elementu `<button ref={ref}>`. |
|
|
||
| As a result, after React attaches the ref, `ref.current` will point directly to the `<button>` DOM element instance. | ||
| W rezultacie po tym, jak referencja zostanie przypięta przez Reacta, `ref.current` będzie wskazywał bezpośrednio na element `<button>`. |
There was a problem hiding this comment.
Suggested change
| W rezultacie po tym, jak referencja zostanie przypięta przez Reacta, `ref.current` będzie wskazywał bezpośrednio na element `<button>`. | |
| W rezultacie, po tym, jak referencja zostanie przypięta przez Reacta, `ref.current` będzie wskazywał bezpośrednio na element `<button>`. |
|
|
||
| For more information, see [forwarding refs](/docs/forwarding-refs.html). | ||
| Po więcej informacji zobacz [przekazywanie referencji](/docs/forwarding-refs.html). |
There was a problem hiding this comment.
Suggested change
| Po więcej informacji zobacz [przekazywanie referencji](/docs/forwarding-refs.html). | |
| Aby dowiedzieć się więcej, przeczytaj rozdział poświęcony [przekazywaniu referencji](/docs/forwarding-refs.html). |
|
|
||
| ### `React.lazy` {#reactlazy} | ||
|
|
||
| `React.lazy()` lets you define a component that is loaded dynamically. This helps reduce the bundle size to delay loading components that aren't used during the initial render. | ||
| `React.lazy()` pozwala Ci zdefiniować komponenty, które są ładowane dynamicznie. Pozwala to zredukować rozmiar paczki, poprzez wyodrębnienie komponentów, które nie są używane podczas inicjalizacji renderowania. |
There was a problem hiding this comment.
Suggested change
| `React.lazy()` pozwala Ci zdefiniować komponenty, które są ładowane dynamicznie. Pozwala to zredukować rozmiar paczki, poprzez wyodrębnienie komponentów, które nie są używane podczas inicjalizacji renderowania. | |
| `React.lazy()` pozwala definiować komponenty, które są ładowane dynamicznie. Zmniejsza się w ten sposób rozmiar paczki, ponieważ wyodrębnione zostają komponenty, które nie są używane podczas wstępnego renderowania. |
|
|
||
| You can learn how to use it from our [code splitting documentation](/docs/code-splitting.html#reactlazy). You might also want to check out [this article](https://medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d) explaining how to use it in more detail. | ||
| W naszej [dokumentacji poświęconej rozdzielaniu kodu](/docs/code-splitting.html#reactlazy) zamieściliśmy więcej informacji na ten temat. [Ten artykuł](https://medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d) również może okazać się pomocny w wyjaśnieniu szczegółów działania tej metody. |
There was a problem hiding this comment.
Suggested change
| W naszej [dokumentacji poświęconej rozdzielaniu kodu](/docs/code-splitting.html#reactlazy) zamieściliśmy więcej informacji na ten temat. [Ten artykuł](https://medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d) również może okazać się pomocny w wyjaśnieniu szczegółów działania tej metody. | |
| W naszej [dokumentacji poświęconej rozdzielaniu kodu](/docs/code-splitting.html#reactlazy) zamieściliśmy więcej informacji na ten temat. [Ten artykuł](https://medium.com/@pomber/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d) również może okazać się pomocny w wyjaśnieniu zasad działania tej metody. |
| const SomeComponent = React.lazy(() => import('./SomeComponent')); | ||
| ``` | ||
|
|
||
| Note that rendering `lazy` components requires that there's a `<React.Suspense>` component higher in the rendering tree. This is how you specify a loading indicator. | ||
| Pamiętaj, że renderowanie leniwych komponentów (ang. *lazy*) wymaga użycia komponentu `<React.Suspense>` wyżej w drzewie renderowania. W ten sposób definiujesz wskaźnik ładowania. |
There was a problem hiding this comment.
Suggested change
| Pamiętaj, że renderowanie leniwych komponentów (ang. *lazy*) wymaga użycia komponentu `<React.Suspense>` wyżej w drzewie renderowania. W ten sposób definiujesz wskaźnik ładowania. | |
| Pamiętaj, że renderowanie "leniwych komponentów" (ang. *lazy components*) wymaga użycia komponentu `<React.Suspense>` na wyższym poziomie drzewa. W ten sposób definiuje się wskaźnik ładowania. |
Nie do końca pasuje mi tu ostatnie zdanie, ale w angielskiej wersji też jest to dość niejasno napisane...
| > | ||
| > Using `React.lazy`with dynamic import requires Promises to be available in the JS environment. This requires a polyfill on IE11 and below. | ||
| > Używanie `React.lazy` z dynamicznymi importami wymaga, by w środowisku JS dostępne były Promisy. Będzie to wymagało użycia polyfilli dla przeglądarek IE11 i starszych. |
There was a problem hiding this comment.
Suggested change
| > Używanie `React.lazy` z dynamicznymi importami wymaga, by w środowisku JS dostępne były Promisy. Będzie to wymagało użycia polyfilli dla przeglądarek IE11 i starszych. | |
| > Używanie `React.lazy` z dynamicznymi importami wymaga, by w środowisku JS dostępna była klasa `Promise`. Będzie to wymagało użycia tzw. "łatek" (ang. *polyfill*) dla przeglądarki IE11 i starszych. |
|
|
||
| ### `React.Suspense` {#reactsuspense} | ||
|
|
||
| `React.Suspense` let you specify the loading indicator in case some components in the tree below it are not yet ready to render. Today, lazy loading components is the **only** use case supported by `<React.Suspense>`: | ||
| `React.Suspense` pozwala zdefiniować wskaźnik ładowania w razie, gdy któryś z komponentów poniżej nie jest jeszcze gotowy do renderowania. W tej chwili jedynym przypadkiem użycia `<React.Suspense>` jest dynamiczne ładowanie komponentów. |
There was a problem hiding this comment.
Suggested change
| `React.Suspense` pozwala zdefiniować wskaźnik ładowania w razie, gdy któryś z komponentów poniżej nie jest jeszcze gotowy do renderowania. W tej chwili jedynym przypadkiem użycia `<React.Suspense>` jest dynamiczne ładowanie komponentów. | |
| `React.Suspense` pozwala zdefiniować wskaźnik ładowania, w razie gdyby któryś z komponentów poniżej nie b ył jeszcze gotowy do wyrenderowania. Obecnie jedynym przypadkiem użycia `<React.Suspense>` jest dynamiczne ładowanie komponentów. |
| @@ -351,10 +350,10 @@ function MyComponent() { | |||
| } | |||
| ``` | |||
|
|
|||
| It is documented in our [code splitting guide](/docs/code-splitting.html#reactlazy). Note that `lazy` components can be deep inside the `Suspense` tree -- it doesn't have to wrap every one of them. The best practice is to place `<Suspense>` where you want to see a loading indicator, but to use `lazy()` wherever you want to do code splitting. | |||
| W naszej [dokumentacji poświęconej rozdzielaniu kodu](/docs/code-splitting.html#reactlazy) zamieściliśmy więcej informacji na ten temat. Zwróć uwagę na to, że komponenty `lazy` mogą być zawarte głęboko poniżej `Suspense`. Nie musisz otaczać każdego elementu w `<Suspense>`, jednak musisz użyć `lazy()` dla każdego komponentu, którego chcesz użyć. | |||
There was a problem hiding this comment.
Suggested change
| W naszej [dokumentacji poświęconej rozdzielaniu kodu](/docs/code-splitting.html#reactlazy) zamieściliśmy więcej informacji na ten temat. Zwróć uwagę na to, że komponenty `lazy` mogą być zawarte głęboko poniżej `Suspense`. Nie musisz otaczać każdego elementu w `<Suspense>`, jednak musisz użyć `lazy()` dla każdego komponentu, którego chcesz użyć. | |
| W naszej [dokumentacji poświęconej rozdzielaniu kodu](/docs/code-splitting.html#reactlazy) zamieściliśmy więcej informacji na ten temat. Zwróć uwagę na to, że komponenty `lazy` mogą być zawarte w drzewie wiele poziomów poniżej `Suspense`. Dobrą praktyką jest umieszczanie `<Suspense>` w miejscu, w którym powinien pojawić się wskaźnik ładowania, natomiast `lazy()` w miejscu, w którym chcesz rozdzielić kod. |
|
|
||
| While this is not supported today, in the future we plan to let `Suspense` handle more scenarios such as data fetching. You can read about this in [our roadmap](/blog/2018/11/27/react-16-roadmap.html). | ||
| Mimo, że nie jest to obecnie wspierane, w planach jest wykorzystanie `Suspense` przy pobieraniu danych. Więcej możesz się dowiedzieć z [naszej roadmapy](/blog/2018/11/27/react-16-roadmap.html). |
There was a problem hiding this comment.
Suggested change
| Mimo, że nie jest to obecnie wspierane, w planach jest wykorzystanie `Suspense` przy pobieraniu danych. Więcej możesz się dowiedzieć z [naszej roadmapy](/blog/2018/11/27/react-16-roadmap.html). | |
| Mimo że nie jest to obecnie wspierane, w planach jest wykorzystanie `Suspense` przy pobieraniu danych. Więcej możesz dowiedzieć się z [naszego planu działania](/blog/2018/11/27/react-16-roadmap.html). |
cvqprs
added
invalid
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Not entirely sure why it shows differences in getting-started page 🤔