My First Component
--
-
- Components: UI Building Blocks -
- Defining a Component -
- Using a Component -
` and `
`, and an (abbreviated) table of contents as an ordered list ``. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web.
-
-React lets you combine your markup, CSS, and JavaScript into custom "components," **reusable UI elements for your app.** The table of contents code you saw above could be turned into a ``, ``, etc.
-
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
-
-```js
-
-
-
-
-
-
-```
-
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
-
-```js
-export default function Profile() {
- return (
- 
- )
-}
-```
-
-```css
-img { height: 200px; }
-```
-
-
-
-And here's how to build a component:
-
-### Step 1: Export the component {/*step-1-export-the-component*/}
-
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
-
-### Step 2: Define the function {/*step-2-define-the-function*/}
-
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
-
-
-
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
-
-
-
-### Step 3: Add markup {/*step-3-add-markup*/}
-
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
-
-Return statements can be written all on one line, as in this component:
-
-```js
-return 
;
-```
-
-But if your markup isn't all on the same line as the return statement, you must wrap it in a pair of parentheses like this:
-
-```js
-return (
-
-
-
-);
-```
-
-
-
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-
-
-
-## Using a component {/*using-a-component*/}
-
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
-
-
-
-```js
-function Profile() {
- return (
-
- );
-}
-
-export default function Gallery() {
- return (
-
- Amazing scientists
-
- );
-}
-```
-
-```css
-img { margin: 0 10px 10px 0; height: 90px; }
-```
-
-
-
-### What the browser sees {/*what-the-browser-sees*/}
-
-Notice the difference in casing:
-
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `![]()
`. In the end, this is what the browser sees:
-
-```html
-
- Amazing scientists
-
-
-
-
-```
-
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
-
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports](/learn/importing-and-exporting-components).
-
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
-
-
-
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
-
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
-
-Frameworks like Next.js take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
-
-Still, many websites only use React to [add "sprinkles of interactivity"](/learn/add-react-to-a-website). They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
-
-
-
-
-
-You've just gotten your first taste of React! Let's recap some key points.
-
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
-
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
-
-
-
-
-
-
-
-### Export the component {/*export-the-component*/}
-
-This sandbox doesn't work because the root component is not exported:
-
-
-
-```js
-function Profile() {
- return (
- 
- );
-}
-```
-
-```css
-img { height: 181px; }
-```
-
-
-
-Try to fix it yourself before looking at the solution!
-
-
-
-Add `export default` before the function definition like so:
-
-
-
-```js
-export default function Profile() {
- return (
-
- );
-}
-```
-
-```css
-img { height: 181px; }
-```
-
-
-
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components](/learn/importing-and-exporting-components).
-
-
-
-### Fix the return statement {/*fix-the-return-statement*/}
-
-Something isn't right about this `return` statement. Can you fix it?
-
-
-
-You may get an "Unexpected token" error while trying to fix this. In that case, check the that semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
-
-
-
-
-
-
-```js
-export default function Profile() {
- return
- 
;
-}
-```
-
-```css
-img { height: 180px; }
-```
-
-
-
-
-
-You can fix this component by moving the return statement to one line like so:
-
-
-
-```js
-export default function Profile() {
- return ;
-}
-```
-
-```css
-img { height: 180px; }
-```
-
-
-
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
-
-
-
-```js
-export default function Profile() {
- return (
-
- );
-}
-```
-
-```css
-img { height: 180px; }
-```
-
-
-
-
-
-### Spot the mistake {/*spot-the-mistake*/}
-
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
-
-
-
-```js
-function profile() {
- return (
- 
- );
-}
-
-export default function Gallery() {
- return (
-
- Amazing scientists
-
- );
-}
-```
-
-```css
-img { margin: 0 10px 10px 0; height: 90px; }
-```
-
-
-
-
-
-React component names must start with a capital letter.
-
-Change `function profile()` to `function Profile()`, and then change every `
-
-```js
-function Profile() {
- return (
-
- );
-}
-
-export default function Gallery() {
- return (
-
- Amazing scientists
-
- );
-}
-```
-
-```css
-img { margin: 0 10px 10px 0; }
-```
-
-
-
-
-
-### Your own component {/*your-own-component*/}
-
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component thats shows `Good job!
`. Don't forget to export it!
-
-
-
-```js
-// Write your component below!
-
-```
-
-
-
-
-
-
-
-```js
-export default function Congratulations() {
- return (
- Good job!
- );
-}
-```
-
-
-
-
-
-
\ No newline at end of file
+---
+title: Twój pierwszy komponent
+---
+
+
+
+Komponent jest jednym z podstawowych pojęć w świecie Reacta. Jest bazą, na której buduje się interfejsy użytkownika (UI), przez co idealnie nadaje się na pierwszy temat do nauki!
+
+
+
+
+
+- Czym jest komponent?
+- Jaką rolę komponenty odgrywają w aplikacji reactowej?
+- Jak napisać swój pierwszy komponent?
+
+
+
+## Komponenty: cegiełki do budowania UI-a {/_components-ui-building-blocks_/}
+
+W świecie aplikacji internetowych HTML pozwala nam na tworzenie dokumentów o bogatej strukturze przy pomocy wbudowanych znaczników, jak `` czy `
- `:
+
+```html
+
+ Twój pierwszy komponent
+
+ - Komponenty: cegiełki do budowania UI
+ - Definiowanie komponentu
+ - Używanie komponentu
+
+
+```
+
+Powyższy kod odzwierciedla czytany przez ciebie artykuł ``, jego nagłówek `` i (skrócony) spis treści w postaci listy numerowanej ``. Tego typu kod, połączony ze stylami CSS oraz interaktywnością napisaną w JavaScripcie, stoi za każdym paskiem bocznym, awatarem, oknem dialogowym, listą rozwijaną - każdym fragmentem UI-a widocznym w sieci.
+
+React pozwala na połączenie znaczników, CSS-a i JavaScriptu w "komponent", **element wielokrotnego użytku stanowiący część UI-a twojej aplikacji.** Powyższy kod, reprezentujący spis treści, mógłby zostać zastąpiony komponentem ``, `` itd.
+
+Podobnie jak w przypadku znaczników HTML-owych, komponenty można łączyć, zagnieżdżać i zmieniać im kolejność, tworząc w ten sposób całe strony. Dla przykładu, dokumentacja, którą właśnie czytasz, składa się z następujących komponentów:
+
+```js
+
+
+
+
+
+
+```
+
+Wraz ze wzrostem złożoności projektu z pewnością zauważysz, że wiele widoków można poskładać z istniejących już komponentów, co znacznie skróci czas pisania kodu. Nasz spis treści mógłby być dodawany do każdej strony jako `
+
+```js
+export default function Profile() {
+ return (
+
+ )
+}
+```
+
+```css
+img { height: 200px; }
+```
+
+
+
+A oto przepis na stworzenie komponentu:
+
+### Krok 1: Wyeksportuj komponent {/_step-1-export-the-component_/}
+
+Prefiks `export default` należy do [standardowej składni JavaScriptu](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (nie jest specyficzny dla samego Reacta). Pozwala oznaczyć funkcję tak, aby można było ją zaimportować w innych plikach. (Więcej na temat importowania dowiesz się z rozdziału pt. [Importowanie i eksportowanie komponentów](/learn/importing-and-exporting-components)!)
+
+### Krok 2: Zdefiniuj funkcję {/_step-2-define-the-function_/}
+
+Za pomocą `function Profile() { }` definiujemy funkcję javascriptową o nazwie `Profile`.
+
+
+
+Komponenty reactowe są zwykłymi funkcjami javascriptowymi, lecz **ich nazwy muszą naczynać od wiekiej litery**. W przeciwnym razie nie będą działać!
+
+
+
+### Krok 3: Dodaj kod {/_step-3-add-markup_/}
+
+Komponent zwraca znacznik `![]()
` z atrybutami `src` oraz `alt`. `![]()
` jest napisany jak w HTML-u, lecz tak naprawdę pod spodem wykonuje się kod javascriptowy! Ta składnia nosi nazwę [JSX](/learn/writing-markup-with-jsx) i pozwala umieszczać znaczniki w kodzie javascriptowym.
+
+Instrukcje wyjścia (_ang._ return statements) mogą być napisane w jednej linii, jak w poniższym przykładzie:
+
+```js
+return ;
+```
+
+lecz jeśli znaczniki nie znajdują się w tej samej linii co instrukcja wyjścia, musisz otoczyć je parą nawiasów:
+
+```js
+return (
+
+
+
+);
+```
+
+
+
+Jeśli nie dodasz nawiasów, kod zawarty w kolejnych liniach po `return` [zostanie zignorowany](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+
+
+
+## Używanie komponentu {/_using-a-component_/}
+
+Teraz gdy masz już zdefiniowany komponent `Profile`, możesz zagnieździć go w innych komponentach. Na przykład, możesz wyeksportować komponent `Gallery`, który wyświetla kilka komponentów `Profile`:
+
+
+
+```js
+function Profile() {
+ return (
+
+ );
+}
+
+export default function Gallery() {
+ return (
+
+ Niesamowici naukowcy
+
+ );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+
+
+### Co widzi przeglądarka {/_what-the-browser-sees_/}
+
+Zauważ różnicę w wielkości liter:
+
+- `` zaczyna się od małej litery, dzięki czemu React wie, że mamy na myśli znacznik HTML-owy.
+- `![]()
`. Ostatecznie, to, co trafia do przeglądarki, to:
+
+```html
+
+ Niesamowici naukowcy
+
+
+
+
+```
+
+### Zagnieżdżanie i rozmieszczanie komponentów {/_nesting-and-organizing-components_/}
+
+Komponenty są zwykłymi funkcjami javascriptowymi, dzięki czemu możesz mieć kilka komponentów w tym samym pliku. Jest to wygodne, gdy komponenty są małe lub mocno ze sobą powiązane. Jeśli jednak plik zacznie robić się długi i skomplikowany, zawsze możesz przenieść `Profile` do osobnego pliku. Wkrótce dowiesz się, jak to zrobić, na [stronie o importach](/learn/importing-and-exporting-components).
+
+Ponieważ komponenty `Profile` są renderowane wewnątrz `Gallery` — nawet kilka razy! — możemy powiedzieć, że `Gallery` jest **komponentem-rodzicem** (nadrzędnym), a każdy z `Profile` jest "dzieckiem" (potomkiem). Na tym właśnie polega magia Reacta: możesz zdefiniować komponent jeden raz, a używać go wielokrotnie w wielu miejscach.
+
+
+
+Twoja aplikacja reactowa zaczyna się w komponencie głównym (_ang._ root - "korzeń"). Zwykle jest on tworzony automatycznie przy starcie nowego projektu. Na przykład, jeśli używasz [CodeSandbox](https://codesandbox.io/) lub [Create React App](https://create-react-app.dev/), komponent główny jest zdefiniowany w pliku `src/App.js`. Jeśli używasz frameworka [Next.js](https://nextjs.org/), komponent główny jest zdefiniowany w pliku `pages/index.js`. W poprzednich przykładach eksportowaliśmy własne komponenty główne.
+
+Większość aplikacji reactowych używa komponentów "od góry do dołu". Oznacza to, że nie tylko fragmenty wielokrotnego użytku, jak przyciski, stają się komponentami, lecz także większe kawałki interfejsu, jak paski boczne, listy czy nawet całe strony! Komponenty doskonale sprawdzają się w porządkowaniu kodu UI, nawet jeśli niektórych z nich używamy tylko jeden raz.
+
+Frameworki takie jak Next.js idą o krok dalej. Zamiast tworzyć pusty plik HTML i pozwolić Reactowi "przejąć kontrolę" nad stroną poprzez JavaScript, niektóre frameworki _również_ automatycznie generują kod HTML z komponentów. Umożliwia to wyświetlenie choć części treści strony, podczas gdy kod javascriptowy jest ładowany.
+
+Mimo wszystko wiele stron używa Reacta tylko po to, by [dodać do nich "szczyptę interaktywności"](/learn/add-react-to-a-website). Mają one wiele komponentów głównych zamiast jednego na całą stronę. Świadczy to o tym, że Reacta można używać w takim stopniu, jaki jest aktualnie potrzebny.
+
+
+
+
+
+Masz za sobą przedsmak tego, co potrafi React! Zróbmy małe podsumowanie.
+
+- React umożliwia tworzenie komponentów - **elementów wielokrotnego użytku stanowiących fragmenty UI-a twojej aplikacji.**
+- W aplikacji reactowej każdy kawałek interfejsu użytkownika jest komponentem.
+- Komponenty reactowe są zwykłymi funkcjami javascriptowymi, przy czym:
+
+ 1. Ich nazwa musi zaczynać się od wielkiej litery.
+ 2. Zwracają kod JSX.
+
+
+
+
+
+### Wyeksportuj komponent {/_export-the-component_/}
+
+Poniższy sandbox nie działa, ponieważ główny komponent nie jest wyeksportowany:
+
+
+
+```js
+function Profile() {
+ return (
+
+ );
+}
+```
+
+```css
+img { height: 181px; }
+```
+
+
+
+Spróbuj naprawić błąd samodzielnie, zanim zajrzyjsz do rozwiązania!
+
+
+
+Dodaj prefiks `export default` przed definicją funkcji:
+
+
+
+```js
+export default function Profile() {
+ return (
+
+ );
+}
+```
+
+```css
+img { height: 181px; }
+```
+
+
+
+Być może zastanawiasz się, dlaczego nie wystarczyło napisać `export`? Różnice pomiędzy `export` a `export default` opisaliśmy w rozdziale pt. [Importowanie i eksportowanie komponentów](/learn/importing-and-exporting-components).
+
+
+
+### Napraw zwracaną wartość {/_fix-the-return-statement_/}
+
+Coś jest nie tak z tą instrukcją `return`. Potrafisz to naprawić?
+
+
+
+Podczas naprawiania tego błędu możesz natknąć się na błąd "Unexpected token". W takim wypadku upewnij się, że średnik znajduje się _po_ nawiasie zamykającym. Jeśli średnik znajdzie się wewnątrz `return ( )`, otrzymasz błąd.
+
+
+
+
+
+```js
+export default function Profile() {
+ return
+ ;
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+
+
+
+
+Możesz naprawić ten komponent przesuwając całe zwracane wyrażenie do jednej linii:
+
+
+
+```js
+export default function Profile() {
+ return ;
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+
+
+Lub otaczając zwracany kod JSX parą nawiasów, która otwiera się za słowem `return`:
+
+
+
+```js
+export default function Profile() {
+ return (
+
+ );
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+
+
+
+
+### Znajdź pomyłkę {/_spot-the-mistake_/}
+
+Coś jest nie tak z definicją i użyciem komponentu `Profile`. Potrafisz znaleźć pomyłkę? (Spróbuj przypomnieć sobie, jak React odróżnia komponenty od zwykłych znaczników HTML-owych!)
+
+
+
+```js
+function profile() {
+ return (
+
+ );
+}
+
+export default function Gallery() {
+ return (
+
+ Niesamowici naukowcy
+
+ );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+
+
+
+
+Nazwy komponentów reactowych muszą zaczynać się od wielkiej litery.
+
+Zmień `function profile()` na `function Profile()`, a następnie każde `
+
+```js
+function Profile() {
+ return (
+
+ );
+}
+
+export default function Gallery() {
+ return (
+
+ Niesamowici naukowcy
+
+ );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; }
+```
+
+
+
+
+
+### Napisz swój własny komponent {/_your-own-component_/}
+
+Napisz komponent od zera. Możesz nadać mu dowolną poprawną nazwę i zwrócić dowolną strukturę znaczników. Jeśli brakuje ci pomysłów, stwórz komponent `Congratulations`, który wyświetla `Dobra robota!
`. Nie zapomnij go wyeksportować!
+
+
+
+```js
+// Napisz tutaj swój komponent!
+```
+
+
+
+
+
+
+
+```js
+export default function Congratulations() {
+ return (
+ Dobra robota!
+ )
+}
+```
+
+
+
+
+
+
diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json
index 90b39ed77..75e59b45d 100644
--- a/beta/src/sidebarLearn.json
+++ b/beta/src/sidebarLearn.json
@@ -43,11 +43,11 @@
"path": "/learn/describing-the-ui",
"routes": [
{
- "title": "Your First Component",
+ "title": "Twój pierwszy komponent",
"path": "/learn/your-first-component"
},
{
- "title": "Importing and Exporting Components",
+ "title": "Importowanie i eksportowanie komponentów",
"path": "/learn/importing-and-exporting-components"
},
{
`, etc.
-
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
-
-```js
-
-
-
-
-
-
-```
-
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
-
-```js
-export default function Profile() {
- return (
-
- )
-}
-```
-
-```css
-img { height: 200px; }
-```
-
-
-
-And here's how to build a component:
-
-### Step 1: Export the component {/*step-1-export-the-component*/}
-
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
-
-### Step 2: Define the function {/*step-2-define-the-function*/}
-
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
-
-
-
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
-
-
-
-### Step 3: Add markup {/*step-3-add-markup*/}
-
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
-
-Return statements can be written all on one line, as in this component:
-
-```js
-return ;
-```
-
-But if your markup isn't all on the same line as the return statement, you must wrap it in a pair of parentheses like this:
-
-```js
-return (
-
-
-
-);
-```
-
-
-
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-
-
-
-## Using a component {/*using-a-component*/}
-
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
-
-
-
-```js
-function Profile() {
- return (
-
- );
-}
-
-export default function Gallery() {
- return (
-
- Amazing scientists
-
- );
-}
-```
-
-```css
-img { margin: 0 10px 10px 0; height: 90px; }
-```
-
-
-
-### What the browser sees {/*what-the-browser-sees*/}
-
-Notice the difference in casing:
-
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `![]()
`. In the end, this is what the browser sees:
-
-```html
-
- Amazing scientists
-
-
-
-
-```
-
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
-
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports](/learn/importing-and-exporting-components).
-
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
-
-
-
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
-
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
-
-Frameworks like Next.js take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
-
-Still, many websites only use React to [add "sprinkles of interactivity"](/learn/add-react-to-a-website). They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
-
-
-
-
-
-You've just gotten your first taste of React! Let's recap some key points.
-
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
-
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
-
-
-
-
-
-
-
-### Export the component {/*export-the-component*/}
-
-This sandbox doesn't work because the root component is not exported:
-
-
-
-```js
-function Profile() {
- return (
-
- );
-}
-```
-
-```css
-img { height: 181px; }
-```
-
-
-
-Try to fix it yourself before looking at the solution!
-
-
-
-Add `export default` before the function definition like so:
-
-
-
-```js
-export default function Profile() {
- return (
-
- );
-}
-```
-
-```css
-img { height: 181px; }
-```
-
-
-
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components](/learn/importing-and-exporting-components).
-
-
-
-### Fix the return statement {/*fix-the-return-statement*/}
-
-Something isn't right about this `return` statement. Can you fix it?
-
-
-
-You may get an "Unexpected token" error while trying to fix this. In that case, check the that semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
-
-
-
-
-
-
-```js
-export default function Profile() {
- return
- ;
-}
-```
-
-```css
-img { height: 180px; }
-```
-
-
-
-
-
-You can fix this component by moving the return statement to one line like so:
-
-
-
-```js
-export default function Profile() {
- return ;
-}
-```
-
-```css
-img { height: 180px; }
-```
-
-
-
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
-
-
-
-```js
-export default function Profile() {
- return (
-
- );
-}
-```
-
-```css
-img { height: 180px; }
-```
-
-
-
-
-
-### Spot the mistake {/*spot-the-mistake*/}
-
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
-
-
-
-```js
-function profile() {
- return (
-
- );
-}
-
-export default function Gallery() {
- return (
-
- Amazing scientists
-
- );
-}
-```
-
-```css
-img { margin: 0 10px 10px 0; height: 90px; }
-```
-
-
-
-
-
-React component names must start with a capital letter.
-
-Change `function profile()` to `function Profile()`, and then change every `
-
-```js
-function Profile() {
- return (
-
- );
-}
-
-export default function Gallery() {
- return (
-
- Amazing scientists
-
- );
-}
-```
-
-```css
-img { margin: 0 10px 10px 0; }
-```
-
-
-
-
-
-### Your own component {/*your-own-component*/}
-
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component thats shows `Good job!
`. Don't forget to export it!
-
-
-
-```js
-// Write your component below!
-
-```
-
-
-
-
-
-
-
-```js
-export default function Congratulations() {
- return (
- Good job!
- );
-}
-```
-
-
-
-
-
-
\ No newline at end of file
+---
+title: Twój pierwszy komponent
+---
+
+
+
+Komponent jest jednym z podstawowych pojęć w świecie Reacta. Jest bazą, na której buduje się interfejsy użytkownika (UI), przez co idealnie nadaje się na pierwszy temat do nauki!
+
+
+
+
+
+- Czym jest komponent?
+- Jaką rolę komponenty odgrywają w aplikacji reactowej?
+- Jak napisać swój pierwszy komponent?
+
+
+
+## Komponenty: cegiełki do budowania UI-a {/_components-ui-building-blocks_/}
+
+W świecie aplikacji internetowych HTML pozwala nam na tworzenie dokumentów o bogatej strukturze przy pomocy wbudowanych znaczników, jak `` czy `
- `:
+
+```html
+
+ Twój pierwszy komponent
+
+ - Komponenty: cegiełki do budowania UI
+ - Definiowanie komponentu
+ - Używanie komponentu
+
+
+```
+
+Powyższy kod odzwierciedla czytany przez ciebie artykuł ``, jego nagłówek `` i (skrócony) spis treści w postaci listy numerowanej ``. Tego typu kod, połączony ze stylami CSS oraz interaktywnością napisaną w JavaScripcie, stoi za każdym paskiem bocznym, awatarem, oknem dialogowym, listą rozwijaną - każdym fragmentem UI-a widocznym w sieci.
+
+React pozwala na połączenie znaczników, CSS-a i JavaScriptu w "komponent", **element wielokrotnego użytku stanowiący część UI-a twojej aplikacji.** Powyższy kod, reprezentujący spis treści, mógłby zostać zastąpiony komponentem ``, `` itd.
+
+Podobnie jak w przypadku znaczników HTML-owych, komponenty można łączyć, zagnieżdżać i zmieniać im kolejność, tworząc w ten sposób całe strony. Dla przykładu, dokumentacja, którą właśnie czytasz, składa się z następujących komponentów:
+
+```js
+
+
+
+
+
+
+```
+
+Wraz ze wzrostem złożoności projektu z pewnością zauważysz, że wiele widoków można poskładać z istniejących już komponentów, co znacznie skróci czas pisania kodu. Nasz spis treści mógłby być dodawany do każdej strony jako `
+
+```js
+export default function Profile() {
+ return (
+
+ )
+}
+```
+
+```css
+img { height: 200px; }
+```
+
+
+
+A oto przepis na stworzenie komponentu:
+
+### Krok 1: Wyeksportuj komponent {/_step-1-export-the-component_/}
+
+Prefiks `export default` należy do [standardowej składni JavaScriptu](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (nie jest specyficzny dla samego Reacta). Pozwala oznaczyć funkcję tak, aby można było ją zaimportować w innych plikach. (Więcej na temat importowania dowiesz się z rozdziału pt. [Importowanie i eksportowanie komponentów](/learn/importing-and-exporting-components)!)
+
+### Krok 2: Zdefiniuj funkcję {/_step-2-define-the-function_/}
+
+Za pomocą `function Profile() { }` definiujemy funkcję javascriptową o nazwie `Profile`.
+
+
+
+Komponenty reactowe są zwykłymi funkcjami javascriptowymi, lecz **ich nazwy muszą naczynać od wiekiej litery**. W przeciwnym razie nie będą działać!
+
+
+
+### Krok 3: Dodaj kod {/_step-3-add-markup_/}
+
+Komponent zwraca znacznik `![]()
` z atrybutami `src` oraz `alt`. `![]()
` jest napisany jak w HTML-u, lecz tak naprawdę pod spodem wykonuje się kod javascriptowy! Ta składnia nosi nazwę [JSX](/learn/writing-markup-with-jsx) i pozwala umieszczać znaczniki w kodzie javascriptowym.
+
+Instrukcje wyjścia (_ang._ return statements) mogą być napisane w jednej linii, jak w poniższym przykładzie:
+
+```js
+return ;
+```
+
+lecz jeśli znaczniki nie znajdują się w tej samej linii co instrukcja wyjścia, musisz otoczyć je parą nawiasów:
+
+```js
+return (
+
+
+
+);
+```
+
+
+
+Jeśli nie dodasz nawiasów, kod zawarty w kolejnych liniach po `return` [zostanie zignorowany](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+
+
+
+## Używanie komponentu {/_using-a-component_/}
+
+Teraz gdy masz już zdefiniowany komponent `Profile`, możesz zagnieździć go w innych komponentach. Na przykład, możesz wyeksportować komponent `Gallery`, który wyświetla kilka komponentów `Profile`:
+
+
+
+```js
+function Profile() {
+ return (
+
+ );
+}
+
+export default function Gallery() {
+ return (
+
+ Niesamowici naukowcy
+
+ );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+
+
+### Co widzi przeglądarka {/_what-the-browser-sees_/}
+
+Zauważ różnicę w wielkości liter:
+
+- `` zaczyna się od małej litery, dzięki czemu React wie, że mamy na myśli znacznik HTML-owy.
+- `![]()
`. Ostatecznie, to, co trafia do przeglądarki, to:
+
+```html
+
+ Niesamowici naukowcy
+
+
+
+
+```
+
+### Zagnieżdżanie i rozmieszczanie komponentów {/_nesting-and-organizing-components_/}
+
+Komponenty są zwykłymi funkcjami javascriptowymi, dzięki czemu możesz mieć kilka komponentów w tym samym pliku. Jest to wygodne, gdy komponenty są małe lub mocno ze sobą powiązane. Jeśli jednak plik zacznie robić się długi i skomplikowany, zawsze możesz przenieść `Profile` do osobnego pliku. Wkrótce dowiesz się, jak to zrobić, na [stronie o importach](/learn/importing-and-exporting-components).
+
+Ponieważ komponenty `Profile` są renderowane wewnątrz `Gallery` — nawet kilka razy! — możemy powiedzieć, że `Gallery` jest **komponentem-rodzicem** (nadrzędnym), a każdy z `Profile` jest "dzieckiem" (potomkiem). Na tym właśnie polega magia Reacta: możesz zdefiniować komponent jeden raz, a używać go wielokrotnie w wielu miejscach.
+
+
+
+Twoja aplikacja reactowa zaczyna się w komponencie głównym (_ang._ root - "korzeń"). Zwykle jest on tworzony automatycznie przy starcie nowego projektu. Na przykład, jeśli używasz [CodeSandbox](https://codesandbox.io/) lub [Create React App](https://create-react-app.dev/), komponent główny jest zdefiniowany w pliku `src/App.js`. Jeśli używasz frameworka [Next.js](https://nextjs.org/), komponent główny jest zdefiniowany w pliku `pages/index.js`. W poprzednich przykładach eksportowaliśmy własne komponenty główne.
+
+Większość aplikacji reactowych używa komponentów "od góry do dołu". Oznacza to, że nie tylko fragmenty wielokrotnego użytku, jak przyciski, stają się komponentami, lecz także większe kawałki interfejsu, jak paski boczne, listy czy nawet całe strony! Komponenty doskonale sprawdzają się w porządkowaniu kodu UI, nawet jeśli niektórych z nich używamy tylko jeden raz.
+
+Frameworki takie jak Next.js idą o krok dalej. Zamiast tworzyć pusty plik HTML i pozwolić Reactowi "przejąć kontrolę" nad stroną poprzez JavaScript, niektóre frameworki _również_ automatycznie generują kod HTML z komponentów. Umożliwia to wyświetlenie choć części treści strony, podczas gdy kod javascriptowy jest ładowany.
+
+Mimo wszystko wiele stron używa Reacta tylko po to, by [dodać do nich "szczyptę interaktywności"](/learn/add-react-to-a-website). Mają one wiele komponentów głównych zamiast jednego na całą stronę. Świadczy to o tym, że Reacta można używać w takim stopniu, jaki jest aktualnie potrzebny.
+
+
+
+
+
+Masz za sobą przedsmak tego, co potrafi React! Zróbmy małe podsumowanie.
+
+- React umożliwia tworzenie komponentów - **elementów wielokrotnego użytku stanowiących fragmenty UI-a twojej aplikacji.**
+- W aplikacji reactowej każdy kawałek interfejsu użytkownika jest komponentem.
+- Komponenty reactowe są zwykłymi funkcjami javascriptowymi, przy czym:
+
+ 1. Ich nazwa musi zaczynać się od wielkiej litery.
+ 2. Zwracają kod JSX.
+
+
+
+
+
+### Wyeksportuj komponent {/_export-the-component_/}
+
+Poniższy sandbox nie działa, ponieważ główny komponent nie jest wyeksportowany:
+
+
+
+```js
+function Profile() {
+ return (
+
+ );
+}
+```
+
+```css
+img { height: 181px; }
+```
+
+
+
+Spróbuj naprawić błąd samodzielnie, zanim zajrzyjsz do rozwiązania!
+
+
+
+Dodaj prefiks `export default` przed definicją funkcji:
+
+
+
+```js
+export default function Profile() {
+ return (
+
+ );
+}
+```
+
+```css
+img { height: 181px; }
+```
+
+
+
+Być może zastanawiasz się, dlaczego nie wystarczyło napisać `export`? Różnice pomiędzy `export` a `export default` opisaliśmy w rozdziale pt. [Importowanie i eksportowanie komponentów](/learn/importing-and-exporting-components).
+
+
+
+### Napraw zwracaną wartość {/_fix-the-return-statement_/}
+
+Coś jest nie tak z tą instrukcją `return`. Potrafisz to naprawić?
+
+
+
+Podczas naprawiania tego błędu możesz natknąć się na błąd "Unexpected token". W takim wypadku upewnij się, że średnik znajduje się _po_ nawiasie zamykającym. Jeśli średnik znajdzie się wewnątrz `return ( )`, otrzymasz błąd.
+
+
+
+
+
+```js
+export default function Profile() {
+ return
+ ;
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+
+
+
+
+Możesz naprawić ten komponent przesuwając całe zwracane wyrażenie do jednej linii:
+
+
+
+```js
+export default function Profile() {
+ return ;
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+
+
+Lub otaczając zwracany kod JSX parą nawiasów, która otwiera się za słowem `return`:
+
+
+
+```js
+export default function Profile() {
+ return (
+
+ );
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+
+
+
+
+### Znajdź pomyłkę {/_spot-the-mistake_/}
+
+Coś jest nie tak z definicją i użyciem komponentu `Profile`. Potrafisz znaleźć pomyłkę? (Spróbuj przypomnieć sobie, jak React odróżnia komponenty od zwykłych znaczników HTML-owych!)
+
+
+
+```js
+function profile() {
+ return (
+
+ );
+}
+
+export default function Gallery() {
+ return (
+
+ Niesamowici naukowcy
+
+ );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+
+
+
+
+Nazwy komponentów reactowych muszą zaczynać się od wielkiej litery.
+
+Zmień `function profile()` na `function Profile()`, a następnie każde `
+
+```js
+function Profile() {
+ return (
+
+ );
+}
+
+export default function Gallery() {
+ return (
+
+ Niesamowici naukowcy
+
+ );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; }
+```
+
+
+
+
+
+### Napisz swój własny komponent {/_your-own-component_/}
+
+Napisz komponent od zera. Możesz nadać mu dowolną poprawną nazwę i zwrócić dowolną strukturę znaczników. Jeśli brakuje ci pomysłów, stwórz komponent `Congratulations`, który wyświetla `Dobra robota!
`. Nie zapomnij go wyeksportować!
+
+
+
+```js
+// Napisz tutaj swój komponent!
+```
+
+
+
+
+
+
+
+```js
+export default function Congratulations() {
+ return (
+ Dobra robota!
+ )
+}
+```
+
+
+
+
+
+
diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json
index 90b39ed77..75e59b45d 100644
--- a/beta/src/sidebarLearn.json
+++ b/beta/src/sidebarLearn.json
@@ -43,11 +43,11 @@
"path": "/learn/describing-the-ui",
"routes": [
{
- "title": "Your First Component",
+ "title": "Twój pierwszy komponent",
"path": "/learn/your-first-component"
},
{
- "title": "Importing and Exporting Components",
+ "title": "Importowanie i eksportowanie komponentów",
"path": "/learn/importing-and-exporting-components"
},
{
- )
-}
-```
-
-```css
-img { height: 200px; }
-```
-
-
-
- );
-}
-
-export default function Gallery() {
- return (
- Amazing scientists
-Amazing scientists
-
-
-
-
- );
-}
-```
-
-```css
-img { height: 181px; }
-```
-
-
- );
-}
-```
-
-```css
-img { height: 181px; }
-```
-
-;
-}
-```
-
-```css
-img { height: 180px; }
-```
-
-;
-}
-```
-
-```css
-img { height: 180px; }
-```
-
-
- );
-}
-```
-
-```css
-img { height: 180px; }
-```
-
-
- );
-}
-
-export default function Gallery() {
- return (
- Amazing scientists
-
- );
-}
-
-export default function Gallery() {
- return (
- Amazing scientists
-Good job!
`. Don't forget to export it! - -Good job!
- ); -} -``` - -` czy `
Twój pierwszy komponent
+-
+
- Komponenty: cegiełki do budowania UI +
- Definiowanie komponentu +
- Używanie komponentu +
` i (skrócony) spis treści w postaci listy numerowanej ``. Tego typu kod, połączony ze stylami CSS oraz interaktywnością napisaną w JavaScripcie, stoi za każdym paskiem bocznym, awatarem, oknem dialogowym, listą rozwijaną - każdym fragmentem UI-a widocznym w sieci.
+
+React pozwala na połączenie znaczników, CSS-a i JavaScriptu w "komponent", **element wielokrotnego użytku stanowiący część UI-a twojej aplikacji.** Powyższy kod, reprezentujący spis treści, mógłby zostać zastąpiony komponentem ``, `` itd.
+
+Podobnie jak w przypadku znaczników HTML-owych, komponenty można łączyć, zagnieżdżać i zmieniać im kolejność, tworząc w ten sposób całe strony. Dla przykładu, dokumentacja, którą właśnie czytasz, składa się z następujących komponentów:
+
+```js
+
+
+
+
+
+
+```
+
+Wraz ze wzrostem złożoności projektu z pewnością zauważysz, że wiele widoków można poskładać z istniejących już komponentów, co znacznie skróci czas pisania kodu. Nasz spis treści mógłby być dodawany do każdej strony jako `
+
+```js
+export default function Profile() {
+ return (
+
+ )
+}
+```
+
+```css
+img { height: 200px; }
+```
+
+
+
+A oto przepis na stworzenie komponentu:
+
+### Krok 1: Wyeksportuj komponent {/_step-1-export-the-component_/}
+
+Prefiks `export default` należy do [standardowej składni JavaScriptu](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (nie jest specyficzny dla samego Reacta). Pozwala oznaczyć funkcję tak, aby można było ją zaimportować w innych plikach. (Więcej na temat importowania dowiesz się z rozdziału pt. [Importowanie i eksportowanie komponentów](/learn/importing-and-exporting-components)!)
+
+### Krok 2: Zdefiniuj funkcję {/_step-2-define-the-function_/}
+
+Za pomocą `function Profile() { }` definiujemy funkcję javascriptową o nazwie `Profile`.
+
+
+
+Komponenty reactowe są zwykłymi funkcjami javascriptowymi, lecz **ich nazwy muszą naczynać od wiekiej litery**. W przeciwnym razie nie będą działać!
+
+
+
+### Krok 3: Dodaj kod {/_step-3-add-markup_/}
+
+Komponent zwraca znacznik `![]()
` z atrybutami `src` oraz `alt`. `![]()
` jest napisany jak w HTML-u, lecz tak naprawdę pod spodem wykonuje się kod javascriptowy! Ta składnia nosi nazwę [JSX](/learn/writing-markup-with-jsx) i pozwala umieszczać znaczniki w kodzie javascriptowym.
+
+Instrukcje wyjścia (_ang._ return statements) mogą być napisane w jednej linii, jak w poniższym przykładzie:
+
+```js
+return ;
+```
+
+lecz jeśli znaczniki nie znajdują się w tej samej linii co instrukcja wyjścia, musisz otoczyć je parą nawiasów:
+
+```js
+return (
+
+
+
+);
+```
+
+
+
+Jeśli nie dodasz nawiasów, kod zawarty w kolejnych liniach po `return` [zostanie zignorowany](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+
+
+
+## Używanie komponentu {/_using-a-component_/}
+
+Teraz gdy masz już zdefiniowany komponent `Profile`, możesz zagnieździć go w innych komponentach. Na przykład, możesz wyeksportować komponent `Gallery`, który wyświetla kilka komponentów `Profile`:
+
+
+
+```js
+function Profile() {
+ return (
+
+ );
+}
+
+export default function Gallery() {
+ return (
+
+ Niesamowici naukowcy
+
+ );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+
+
+### Co widzi przeglądarka {/_what-the-browser-sees_/}
+
+Zauważ różnicę w wielkości liter:
+
+- `` zaczyna się od małej litery, dzięki czemu React wie, że mamy na myśli znacznik HTML-owy.
+- `![]()
`. Ostatecznie, to, co trafia do przeglądarki, to:
+
+```html
+
+ Niesamowici naukowcy
+
+
+
+
+```
+
+### Zagnieżdżanie i rozmieszczanie komponentów {/_nesting-and-organizing-components_/}
+
+Komponenty są zwykłymi funkcjami javascriptowymi, dzięki czemu możesz mieć kilka komponentów w tym samym pliku. Jest to wygodne, gdy komponenty są małe lub mocno ze sobą powiązane. Jeśli jednak plik zacznie robić się długi i skomplikowany, zawsze możesz przenieść `Profile` do osobnego pliku. Wkrótce dowiesz się, jak to zrobić, na [stronie o importach](/learn/importing-and-exporting-components).
+
+Ponieważ komponenty `Profile` są renderowane wewnątrz `Gallery` — nawet kilka razy! — możemy powiedzieć, że `Gallery` jest **komponentem-rodzicem** (nadrzędnym), a każdy z `Profile` jest "dzieckiem" (potomkiem). Na tym właśnie polega magia Reacta: możesz zdefiniować komponent jeden raz, a używać go wielokrotnie w wielu miejscach.
+
+
+
+Twoja aplikacja reactowa zaczyna się w komponencie głównym (_ang._ root - "korzeń"). Zwykle jest on tworzony automatycznie przy starcie nowego projektu. Na przykład, jeśli używasz [CodeSandbox](https://codesandbox.io/) lub [Create React App](https://create-react-app.dev/), komponent główny jest zdefiniowany w pliku `src/App.js`. Jeśli używasz frameworka [Next.js](https://nextjs.org/), komponent główny jest zdefiniowany w pliku `pages/index.js`. W poprzednich przykładach eksportowaliśmy własne komponenty główne.
+
+Większość aplikacji reactowych używa komponentów "od góry do dołu". Oznacza to, że nie tylko fragmenty wielokrotnego użytku, jak przyciski, stają się komponentami, lecz także większe kawałki interfejsu, jak paski boczne, listy czy nawet całe strony! Komponenty doskonale sprawdzają się w porządkowaniu kodu UI, nawet jeśli niektórych z nich używamy tylko jeden raz.
+
+Frameworki takie jak Next.js idą o krok dalej. Zamiast tworzyć pusty plik HTML i pozwolić Reactowi "przejąć kontrolę" nad stroną poprzez JavaScript, niektóre frameworki _również_ automatycznie generują kod HTML z komponentów. Umożliwia to wyświetlenie choć części treści strony, podczas gdy kod javascriptowy jest ładowany.
+
+Mimo wszystko wiele stron używa Reacta tylko po to, by [dodać do nich "szczyptę interaktywności"](/learn/add-react-to-a-website). Mają one wiele komponentów głównych zamiast jednego na całą stronę. Świadczy to o tym, że Reacta można używać w takim stopniu, jaki jest aktualnie potrzebny.
+
+
+
+
+
+Masz za sobą przedsmak tego, co potrafi React! Zróbmy małe podsumowanie.
+
+- React umożliwia tworzenie komponentów - **elementów wielokrotnego użytku stanowiących fragmenty UI-a twojej aplikacji.**
+- W aplikacji reactowej każdy kawałek interfejsu użytkownika jest komponentem.
+- Komponenty reactowe są zwykłymi funkcjami javascriptowymi, przy czym:
+
+ 1. Ich nazwa musi zaczynać się od wielkiej litery.
+ 2. Zwracają kod JSX.
+
+
+
+
+
+### Wyeksportuj komponent {/_export-the-component_/}
+
+Poniższy sandbox nie działa, ponieważ główny komponent nie jest wyeksportowany:
+
+
+
+```js
+function Profile() {
+ return (
+
+ );
+}
+```
+
+```css
+img { height: 181px; }
+```
+
+
+
+Spróbuj naprawić błąd samodzielnie, zanim zajrzyjsz do rozwiązania!
+
+
+
+Dodaj prefiks `export default` przed definicją funkcji:
+
+
+
+```js
+export default function Profile() {
+ return (
+
+ );
+}
+```
+
+```css
+img { height: 181px; }
+```
+
+
+
+Być może zastanawiasz się, dlaczego nie wystarczyło napisać `export`? Różnice pomiędzy `export` a `export default` opisaliśmy w rozdziale pt. [Importowanie i eksportowanie komponentów](/learn/importing-and-exporting-components).
+
+
+
+### Napraw zwracaną wartość {/_fix-the-return-statement_/}
+
+Coś jest nie tak z tą instrukcją `return`. Potrafisz to naprawić?
+
+
+
+Podczas naprawiania tego błędu możesz natknąć się na błąd "Unexpected token". W takim wypadku upewnij się, że średnik znajduje się _po_ nawiasie zamykającym. Jeśli średnik znajdzie się wewnątrz `return ( )`, otrzymasz błąd.
+
+
+
+
+
+```js
+export default function Profile() {
+ return
+ ;
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+
+
+
+
+Możesz naprawić ten komponent przesuwając całe zwracane wyrażenie do jednej linii:
+
+
+
+```js
+export default function Profile() {
+ return ;
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+
+
+Lub otaczając zwracany kod JSX parą nawiasów, która otwiera się za słowem `return`:
+
+
+
+```js
+export default function Profile() {
+ return (
+
+ );
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+
+
+
+
+### Znajdź pomyłkę {/_spot-the-mistake_/}
+
+Coś jest nie tak z definicją i użyciem komponentu `Profile`. Potrafisz znaleźć pomyłkę? (Spróbuj przypomnieć sobie, jak React odróżnia komponenty od zwykłych znaczników HTML-owych!)
+
+
+
+```js
+function profile() {
+ return (
+
+ );
+}
+
+export default function Gallery() {
+ return (
+
+ Niesamowici naukowcy
+
+ );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+
+
+
+
+Nazwy komponentów reactowych muszą zaczynać się od wielkiej litery.
+
+Zmień `function profile()` na `function Profile()`, a następnie każde `
+
+```js
+function Profile() {
+ return (
+
+ );
+}
+
+export default function Gallery() {
+ return (
+
+ Niesamowici naukowcy
+
+ );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; }
+```
+
+
+
+
+
+### Napisz swój własny komponent {/_your-own-component_/}
+
+Napisz komponent od zera. Możesz nadać mu dowolną poprawną nazwę i zwrócić dowolną strukturę znaczników. Jeśli brakuje ci pomysłów, stwórz komponent `Congratulations`, który wyświetla `Dobra robota!
`. Nie zapomnij go wyeksportować!
+
+
+
+```js
+// Napisz tutaj swój komponent!
+```
+
+
+
+
+
+
+
+```js
+export default function Congratulations() {
+ return (
+ Dobra robota!
+ )
+}
+```
+
+
+
+
+
+
diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json
index 90b39ed77..75e59b45d 100644
--- a/beta/src/sidebarLearn.json
+++ b/beta/src/sidebarLearn.json
@@ -43,11 +43,11 @@
"path": "/learn/describing-the-ui",
"routes": [
{
- "title": "Your First Component",
+ "title": "Twój pierwszy komponent",
"path": "/learn/your-first-component"
},
{
- "title": "Importing and Exporting Components",
+ "title": "Importowanie i eksportowanie komponentów",
"path": "/learn/importing-and-exporting-components"
},
{
` itd.
+
+Podobnie jak w przypadku znaczników HTML-owych, komponenty można łączyć, zagnieżdżać i zmieniać im kolejność, tworząc w ten sposób całe strony. Dla przykładu, dokumentacja, którą właśnie czytasz, składa się z następujących komponentów:
+
+```js
+
+
+
+
+
+
+```
+
+Wraz ze wzrostem złożoności projektu z pewnością zauważysz, że wiele widoków można poskładać z istniejących już komponentów, co znacznie skróci czas pisania kodu. Nasz spis treści mógłby być dodawany do każdej strony jako `
+
+```js
+export default function Profile() {
+ return (
+
+ )
+}
+```
+
+```css
+img { height: 200px; }
+```
+
+
+
+A oto przepis na stworzenie komponentu:
+
+### Krok 1: Wyeksportuj komponent {/_step-1-export-the-component_/}
+
+Prefiks `export default` należy do [standardowej składni JavaScriptu](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (nie jest specyficzny dla samego Reacta). Pozwala oznaczyć funkcję tak, aby można było ją zaimportować w innych plikach. (Więcej na temat importowania dowiesz się z rozdziału pt. [Importowanie i eksportowanie komponentów](/learn/importing-and-exporting-components)!)
+
+### Krok 2: Zdefiniuj funkcję {/_step-2-define-the-function_/}
+
+Za pomocą `function Profile() { }` definiujemy funkcję javascriptową o nazwie `Profile`.
+
+
+
+Komponenty reactowe są zwykłymi funkcjami javascriptowymi, lecz **ich nazwy muszą naczynać od wiekiej litery**. W przeciwnym razie nie będą działać!
+
+
+
+### Krok 3: Dodaj kod {/_step-3-add-markup_/}
+
+Komponent zwraca znacznik `![]()
` z atrybutami `src` oraz `alt`. `![]()
` jest napisany jak w HTML-u, lecz tak naprawdę pod spodem wykonuje się kod javascriptowy! Ta składnia nosi nazwę [JSX](/learn/writing-markup-with-jsx) i pozwala umieszczać znaczniki w kodzie javascriptowym.
+
+Instrukcje wyjścia (_ang._ return statements) mogą być napisane w jednej linii, jak w poniższym przykładzie:
+
+```js
+return ;
+```
+
+lecz jeśli znaczniki nie znajdują się w tej samej linii co instrukcja wyjścia, musisz otoczyć je parą nawiasów:
+
+```js
+return (
+
+
+
+);
+```
+
+
+
+Jeśli nie dodasz nawiasów, kod zawarty w kolejnych liniach po `return` [zostanie zignorowany](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+
+
+
+## Używanie komponentu {/_using-a-component_/}
+
+Teraz gdy masz już zdefiniowany komponent `Profile`, możesz zagnieździć go w innych komponentach. Na przykład, możesz wyeksportować komponent `Gallery`, który wyświetla kilka komponentów `Profile`:
+
+
+
+```js
+function Profile() {
+ return (
+
+ );
+}
+
+export default function Gallery() {
+ return (
+
+ Niesamowici naukowcy
+
+ );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+
+
+### Co widzi przeglądarka {/_what-the-browser-sees_/}
+
+Zauważ różnicę w wielkości liter:
+
+- `` zaczyna się od małej litery, dzięki czemu React wie, że mamy na myśli znacznik HTML-owy.
+- `![]()
`. Ostatecznie, to, co trafia do przeglądarki, to:
+
+```html
+
+ Niesamowici naukowcy
+
+
+
+
+```
+
+### Zagnieżdżanie i rozmieszczanie komponentów {/_nesting-and-organizing-components_/}
+
+Komponenty są zwykłymi funkcjami javascriptowymi, dzięki czemu możesz mieć kilka komponentów w tym samym pliku. Jest to wygodne, gdy komponenty są małe lub mocno ze sobą powiązane. Jeśli jednak plik zacznie robić się długi i skomplikowany, zawsze możesz przenieść `Profile` do osobnego pliku. Wkrótce dowiesz się, jak to zrobić, na [stronie o importach](/learn/importing-and-exporting-components).
+
+Ponieważ komponenty `Profile` są renderowane wewnątrz `Gallery` — nawet kilka razy! — możemy powiedzieć, że `Gallery` jest **komponentem-rodzicem** (nadrzędnym), a każdy z `Profile` jest "dzieckiem" (potomkiem). Na tym właśnie polega magia Reacta: możesz zdefiniować komponent jeden raz, a używać go wielokrotnie w wielu miejscach.
+
+
+
+Twoja aplikacja reactowa zaczyna się w komponencie głównym (_ang._ root - "korzeń"). Zwykle jest on tworzony automatycznie przy starcie nowego projektu. Na przykład, jeśli używasz [CodeSandbox](https://codesandbox.io/) lub [Create React App](https://create-react-app.dev/), komponent główny jest zdefiniowany w pliku `src/App.js`. Jeśli używasz frameworka [Next.js](https://nextjs.org/), komponent główny jest zdefiniowany w pliku `pages/index.js`. W poprzednich przykładach eksportowaliśmy własne komponenty główne.
+
+Większość aplikacji reactowych używa komponentów "od góry do dołu". Oznacza to, że nie tylko fragmenty wielokrotnego użytku, jak przyciski, stają się komponentami, lecz także większe kawałki interfejsu, jak paski boczne, listy czy nawet całe strony! Komponenty doskonale sprawdzają się w porządkowaniu kodu UI, nawet jeśli niektórych z nich używamy tylko jeden raz.
+
+Frameworki takie jak Next.js idą o krok dalej. Zamiast tworzyć pusty plik HTML i pozwolić Reactowi "przejąć kontrolę" nad stroną poprzez JavaScript, niektóre frameworki _również_ automatycznie generują kod HTML z komponentów. Umożliwia to wyświetlenie choć części treści strony, podczas gdy kod javascriptowy jest ładowany.
+
+Mimo wszystko wiele stron używa Reacta tylko po to, by [dodać do nich "szczyptę interaktywności"](/learn/add-react-to-a-website). Mają one wiele komponentów głównych zamiast jednego na całą stronę. Świadczy to o tym, że Reacta można używać w takim stopniu, jaki jest aktualnie potrzebny.
+
+
+
+
+
+Masz za sobą przedsmak tego, co potrafi React! Zróbmy małe podsumowanie.
+
+- React umożliwia tworzenie komponentów - **elementów wielokrotnego użytku stanowiących fragmenty UI-a twojej aplikacji.**
+- W aplikacji reactowej każdy kawałek interfejsu użytkownika jest komponentem.
+- Komponenty reactowe są zwykłymi funkcjami javascriptowymi, przy czym:
+
+ 1. Ich nazwa musi zaczynać się od wielkiej litery.
+ 2. Zwracają kod JSX.
+
+
+
+
+
+### Wyeksportuj komponent {/_export-the-component_/}
+
+Poniższy sandbox nie działa, ponieważ główny komponent nie jest wyeksportowany:
+
+
+
+```js
+function Profile() {
+ return (
+
+ );
+}
+```
+
+```css
+img { height: 181px; }
+```
+
+
+
+Spróbuj naprawić błąd samodzielnie, zanim zajrzyjsz do rozwiązania!
+
+
+
+Dodaj prefiks `export default` przed definicją funkcji:
+
+
+
+```js
+export default function Profile() {
+ return (
+
+ );
+}
+```
+
+```css
+img { height: 181px; }
+```
+
+
+
+Być może zastanawiasz się, dlaczego nie wystarczyło napisać `export`? Różnice pomiędzy `export` a `export default` opisaliśmy w rozdziale pt. [Importowanie i eksportowanie komponentów](/learn/importing-and-exporting-components).
+
+
+
+### Napraw zwracaną wartość {/_fix-the-return-statement_/}
+
+Coś jest nie tak z tą instrukcją `return`. Potrafisz to naprawić?
+
+
+
+Podczas naprawiania tego błędu możesz natknąć się na błąd "Unexpected token". W takim wypadku upewnij się, że średnik znajduje się _po_ nawiasie zamykającym. Jeśli średnik znajdzie się wewnątrz `return ( )`, otrzymasz błąd.
+
+
+
+
+
+```js
+export default function Profile() {
+ return
+ ;
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+
+
+
+
+Możesz naprawić ten komponent przesuwając całe zwracane wyrażenie do jednej linii:
+
+
+
+```js
+export default function Profile() {
+ return ;
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+
+
+Lub otaczając zwracany kod JSX parą nawiasów, która otwiera się za słowem `return`:
+
+
+
+```js
+export default function Profile() {
+ return (
+
+ );
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+
+
+
+
+### Znajdź pomyłkę {/_spot-the-mistake_/}
+
+Coś jest nie tak z definicją i użyciem komponentu `Profile`. Potrafisz znaleźć pomyłkę? (Spróbuj przypomnieć sobie, jak React odróżnia komponenty od zwykłych znaczników HTML-owych!)
+
+
+
+```js
+function profile() {
+ return (
+
+ );
+}
+
+export default function Gallery() {
+ return (
+
+ Niesamowici naukowcy
+
+ );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; height: 90px; }
+```
+
+
+
+
+
+Nazwy komponentów reactowych muszą zaczynać się od wielkiej litery.
+
+Zmień `function profile()` na `function Profile()`, a następnie każde `
+
+```js
+function Profile() {
+ return (
+
+ );
+}
+
+export default function Gallery() {
+ return (
+
+ Niesamowici naukowcy
+
+ );
+}
+```
+
+```css
+img { margin: 0 10px 10px 0; }
+```
+
+
+
+
+
+### Napisz swój własny komponent {/_your-own-component_/}
+
+Napisz komponent od zera. Możesz nadać mu dowolną poprawną nazwę i zwrócić dowolną strukturę znaczników. Jeśli brakuje ci pomysłów, stwórz komponent `Congratulations`, który wyświetla `Dobra robota!
`. Nie zapomnij go wyeksportować!
+
+
+
+```js
+// Napisz tutaj swój komponent!
+```
+
+
+
+
+
+
+
+```js
+export default function Congratulations() {
+ return (
+ Dobra robota!
+ )
+}
+```
+
+
+
+
+
+
diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json
index 90b39ed77..75e59b45d 100644
--- a/beta/src/sidebarLearn.json
+++ b/beta/src/sidebarLearn.json
@@ -43,11 +43,11 @@
"path": "/learn/describing-the-ui",
"routes": [
{
- "title": "Your First Component",
+ "title": "Twój pierwszy komponent",
"path": "/learn/your-first-component"
},
{
- "title": "Importing and Exporting Components",
+ "title": "Importowanie i eksportowanie komponentów",
"path": "/learn/importing-and-exporting-components"
},
{
+ )
+}
+```
+
+```css
+img { height: 200px; }
+```
+
+
+
+ );
+}
+
+export default function Gallery() {
+ return (
+ Niesamowici naukowcy
+Niesamowici naukowcy
+
+
+
+
+ );
+}
+```
+
+```css
+img { height: 181px; }
+```
+
+
+ );
+}
+```
+
+```css
+img { height: 181px; }
+```
+
+;
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+;
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+
+ );
+}
+```
+
+```css
+img { height: 180px; }
+```
+
+
+ );
+}
+
+export default function Gallery() {
+ return (
+ Niesamowici naukowcy
+
+ );
+}
+
+export default function Gallery() {
+ return (
+