Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Translate Rendering Lists #339

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

Translate Rendering Lists #339

wants to merge 6 commits into from

Conversation

cyntler
Copy link
Contributor

@cyntler cyntler commented May 23, 2022

No description provided.

@cyntler cyntler requested a review from a team May 23, 2022 18:26
@github-actions github-actions bot added the beta label May 23, 2022
@github-actions
Copy link

github-actions bot commented May 23, 2022 •
edited
Loading

Size Changes

📦 Next.js Bundle Analysis

This analysis was generated by the next.js bundle analysis action 🤖

One Page Changed Size

The following page changed size from the code in this PR compared to its base branch:

Page Size (compressed) First Load
/learn/rendering-lists 56.26 KB (🟡 +1.08 KB) 140.92 KB
Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

@cyntler cyntler marked this pull request as draft May 23, 2022 18:36
@cyntler cyntler changed the title [WIP] Rendering Lists Rendering Lists May 23, 2022
@jakubdrozdek jakubdrozdek mentioned this pull request May 23, 2022
Open
@cyntler cyntler changed the title Rendering Lists Translate Rendering Lists May 24, 2022
LukaszGrela
LukaszGrela suggested changes Jul 4, 2023
View reviewed changes
beta/src/pages/learn/rendering-lists.md
---

<Intro>

You will often want to display multiple similar components from a collection of data. You can use the [JavaScript array methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#) to manipulate an array of data. On this page, you'll use [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) and [`map()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) with React to filter and transform your array of data into an array of components.
Często zdarzy się tak, że będziesz chciał/a wyświetlić podobne komponenty na podstawie kolekcji danych. W tym celu, możesz użyć [JavaScript array methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#), aby manipulować tablicą danych. Na tej stronie będziesz używać metod: [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) oraz [`map()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) wspólnie z React, aby filtrować i transformować swoją tablicę danych do tablicy komponentów.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Często zdarzy się tak, że będziesz chciał/a wyświetlić podobne komponenty na podstawie kolekcji danych. W tym celu, możesz użyć [JavaScript array methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#), aby manipulować tablicą danych. Na tej stronie będziesz używać metod: [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) oraz [`map()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) wspólnie z React, aby filtrować i transformować swoją tablicę danych do tablicy komponentów.
Często zdarzy się tak, że będziesz chciał/a wyświetlić podobne komponenty na podstawie kolekcji danych. W tym celu, możesz użyć [metod tablicowych JavaScriptu](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#), aby manipulować tablicą danych. Na tej stronie będziesz używać metod: [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) oraz [`map()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map) wspólnie z React, aby filtrować i transformować swoją tablicę danych do tablicy komponentów.

beta/src/pages/learn/rendering-lists.md
@@ -30,11 +30,11 @@ Say that you have a list of content.
</ul>
```

The only difference among those list items is their contents, their data. You will often need to show several instances of the same component using different data when building interfaces: from lists of comments to galleries of profile images. In these situations, you can store that data in JavaScript objects and arrays and use methods like [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) and [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) to render lists of components from them.
Jedyna różnica wśród tych pozycji na liście to ich treść, ich dane. Często będziesz potrzebował/a, aby pokazać kilka instancji tego samego komponentu, używając innych danych podczas budowania interfejsów: począwszy od list komentarzy, aż do galerii obrazków profili. W tych sytuacjach, możesz przechowywać te dane jako obiekty lub/i tablice JavaScript i używać metod takich jak: [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) oraz [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), aby renderować z nich listy komponentów.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i/lub lepiej pasuje i jest częściej używaną formą.

Suggested change
Jedyna różnica wśród tych pozycji na liście to ich treść, ich dane. Często będziesz potrzebował/a, aby pokazać kilka instancji tego samego komponentu, używając innych danych podczas budowania interfejsów: począwszy od list komentarzy, aż do galerii obrazków profili. W tych sytuacjach, możesz przechowywać te dane jako obiekty lub/i tablice JavaScript i używać metod takich jak: [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) oraz [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), aby renderować z nich listy komponentów.
Jedyna różnica wśród tych pozycji na liście to ich treść, ich dane. Często będziesz potrzebował/a, aby pokazać kilka instancji tego samego komponentu, używając innych danych podczas budowania interfejsów: począwszy od list komentarzy, aż do galerii obrazków profili. W tych sytuacjach, możesz przechowywać te dane jako obiekty i/lub tablice JavaScript i używać metod takich jak: [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) oraz [`filter()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), aby renderować z nich listy komponentów.

beta/src/pages/learn/rendering-lists.md

```js
const listItems = people.map(person => <li>{person}</li>);
```

3. **Return** `listItems` from your component wrapped in a `<ul>`:
3. **Zwróć** `listItems` ze swojego komponentu opakowanego w `<ul>`:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Opakowane jest listItems a nie komponent.

Suggested change
3. **Zwróć** `listItems` ze swojego komponentu opakowanego w `<ul>`:
3. **Zwróć** `listItems` opakowane w `<ul>` ze swojego komponentu:

beta/src/pages/learn/rendering-lists.md
@@ -111,19 +111,19 @@ const people = [{
}];
```

Let's say you want a way to only show people whose profession is `'chemist'`. You can use JavaScript's `filter()` method to return just those people. This method takes an array of items, passes them through a “test” (a function that returns `true` or `false`), and returns a new array of only those items that passed the test (returned `true`).
Powiedzmy, że chcesz pokazać jedynie osoby, których profesja to `'chemist'`. W tym celu możesz użyc metody `filter()`, aby zwrócić tylko te osoby. Ta metoda przyjmuje tablice elementów, przekazuje je przez “test” (funkcję, która zwraca `true` lub `false`) i zwraca nową tablicę tylko tych elementów, które przeszły pozytywnie “test” (zwrócone `true`).
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To jest metoda tablicy, wiec jest wywolana na tablicy a nie przyjmuje tablicy.

Suggested change
Powiedzmy, że chcesz pokazać jedynie osoby, których profesja to `'chemist'`. W tym celu możesz użyc metody `filter()`, aby zwrócić tylko te osoby. Ta metoda przyjmuje tablice elementów, przekazuje je przez “test” (funkcję, która zwraca `true` lub `false`) i zwraca nową tablicę tylko tych elementów, które przeszły pozytywnie “test” (zwrócone `true`).
Powiedzmy, że chcesz pokazać jedynie osoby, których profesja to `'chemist'`. W tym celu możesz użyc metody `filter()`, aby zwrócić tylko pasujące osoby.
Metoda ta, wywołana na tablicy elementów (tu `people`) przyjmuje funkcję filtrującą która ma zwracać `true` gdy element ma zostać zwrócony lub `false` gdy ma być odrzucony. W rezultacie powstaje nowa tablica z elementami które przeszły pozytywnie "test" funkcji filtrującej.

beta/src/pages/learn/rendering-lists.md

You only want the items where `profession` is `'chemist'`. The "test" function for this looks like `(person) => person.profession === 'chemist'`. Here's how to put it together:
Chcesz jedynie elementy, których profesja to `'chemist'`. Funkcja "test" w tym wypadku powinna wyglądać tak: `(person) => person.profession === 'chemist'`. Poniżej zobaczysz, jak to złożyć:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nie ma potrzeby powtarzania tego samego co bylo powiedziane w poprzednim paragrafie.

Suggested change
Chcesz jedynie elementy, których profesja to `'chemist'`. Funkcja "test" w tym wypadku powinna wyglądać tak: `(person) => person.profession === 'chemist'`. Poniżej zobaczysz, jak to złożyć:
Funkcja filtrująca, realizująca powyższe założenie powinna wyglądać tak: `(person) => person.profession === 'chemist'`. Poniżej możesz zobaczyć jak tego użyć:

beta/src/pages/learn/rendering-lists.md

<Hint>

This will require nesting two different `map` calls.
Będzie to wymagało zagnieżdżenia dwóch różnych wywołań `map`.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Będzie to wymagało zagnieżdżenia dwóch różnych wywołań `map`.
Będzie to wymagało zagnieżdżenia dwóch różnych wywołań metody `map`.

beta/src/pages/learn/rendering-lists.md
@@ -960,13 +966,13 @@ export const recipes = [{

</Sandpack>

Each of the `recipes` already includes an `id` field, so that's what the outer loop uses for its `key`. There is no ID you could use to loop over ingredients. However, it's reasonable to assume that the same ingredient won't be listed twice within the same recipe, so its name can serve as a `key`. Alternatively, you could change the data structure to add IDs, or use index as a `key` (with the caveat that you can't safely reorder ingredients).
Każdy element z `recipes` (przepisów) zawiera już pole `id`, więc tego używa zewnętrzna pętla dla swojego klucza `key`. Nie ma identyfikatora, którego można by użyć do zapętlenia składników. Rozsądne jest jednak założenie, że ten sam składnik nie zostanie wymieniony dwa razy w ramach tego samego przepisu, więc jego nazwa może służyć jako `key`. Alternatywnie możesz zmienić strukturę danych, aby dodać identyfikatory, lub użyć indeksu jako `key` (z zastrzeżeniem, że nie możesz bezpiecznie zmienić kolejności składników).
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Każdy element z `recipes` (przepisów) zawiera już pole `id`, więc tego używa zewnętrzna pętla dla swojego klucza `key`. Nie ma identyfikatora, którego można by użyć do zapętlenia składników. Rozsądne jest jednak założenie, że ten sam składnik nie zostanie wymieniony dwa razy w ramach tego samego przepisu, więc jego nazwa może służyć jako `key`. Alternatywnie możesz zmienić strukturę danych, aby dodać identyfikatory, lub użyć indeksu jako `key` (z zastrzeżeniem, że nie możesz bezpiecznie zmienić kolejności składników).
Każdy element z tablicy `recipes` (przepisów) zawiera już pole `id`, więc tego używa zewnętrzna pętla dla swojego atrybutu `key`. Nie ma identyfikatora, którego można by użyć do zapętlenia składników. Rozsądne jest jednak założenie, że ten sam składnik nie zostanie wymieniony dwa razy w ramach tego samego przepisu, więc jego nazwa może służyć jako `key`. Alternatywnie możesz zmienić strukturę danych, aby dodać identyfikatory, lub użyć indeksu jako `key` (z zastrzeżeniem, że nie możesz bezpiecznie zmienić kolejności składników).

beta/src/pages/learn/rendering-lists.md

</Solution>

### Extracting a list item component {/*extracting-a-list-item-component*/}
### Wyodrębnianie elementu listy {/*extracting-a-list-item-component*/}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
### Wyodrębnianie elementu listy {/*extracting-a-list-item-component*/}
### Wyodrębnianie komponentu "element listy" {/*extracting-a-list-item-component*/}

beta/src/pages/learn/rendering-lists.md

This `RecipeList` component contains two nested `map` calls. To simplify it, extract a `Recipe` component from it which will accept `id`, `name`, and `ingredients` props. Where do you place the outer `key` and why?
Ten komponent `RecipeList` zawiera dwa zagnieżdżone wywołania `map`. Aby to uprościć, wyodrębnij z niego komponent `Recipe`, który akceptuje właściwości `id`, `name` i `ingredients`. Gdzie umieścisz zewnętrzny `key` i dlaczego?
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Ten komponent `RecipeList` zawiera dwa zagnieżdżone wywołania `map`. Aby to uprościć, wyodrębnij z niego komponent `Recipe`, który akceptuje właściwości `id`, `name` i `ingredients`. Gdzie umieścisz zewnętrzny `key` i dlaczego?
Komponent `RecipeList` zawiera dwa zagnieżdżone wywołania `map`. Aby to uprościć, wyodrębnij z niego komponent `Recipe`, który akceptuje atrybuty `id`, `name` i `ingredients`. Gdzie umieścisz zewnętrzny atrybut `key` i dlaczego?

beta/src/pages/learn/rendering-lists.md
@@ -1014,7 +1020,7 @@ export const recipes = [{

<Solution>

You can copy-paste the JSX from the outer `map` into a new `Recipe` component and return that JSX. Then you can change `recipe.name` to `name`, `recipe.id` to `id`, and so on, and pass them as props to the `Recipe`:
Możesz skopiować i wkleić JSX z zewnętrznego wykonania `map` do nowego komponentu `Recipe` i zwrócić ten JSX. Następnie możesz zmienić `recipe.name` na `name`, `recipe.id` to `id` itd. i przekazać je jako właściwości (props) do `Recipe`:
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Możesz skopiować i wkleić JSX z zewnętrznego wykonania `map` do nowego komponentu `Recipe` i zwrócić ten JSX. Następnie możesz zmienić `recipe.name` na `name`, `recipe.id` to `id` itd. i przekazać je jako właściwości (props) do `Recipe`:
Możesz skopiować i wkleić JSX z zewnętrznego wykonania `map` do nowego komponentu `Recipe` i zwrócić ten JSX. Następnie możesz zmienić `recipe.name` na `name`, `recipe.id` na `id` itd. i przekazać je jako atrybuty (props) do `Recipe`:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@LukaszGrela LukaszGrela LukaszGrela requested changes

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
beta
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@cyntler @LukaszGrela