From 55a073c7eebc2761432ce8a4513a2b88fee6be61 Mon Sep 17 00:00:00 2001 From: Jakub Drozdek Date: Tue, 14 Dec 2021 01:02:48 +0100 Subject: [PATCH] Translate JavaScript in JSX with curly braces --- .../javascript-in-jsx-with-curly-braces.md | 188 +++++++++--------- beta/src/sidebarLearn.json | 2 +- 2 files changed, 95 insertions(+), 95 deletions(-) diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md index 1b970c723..94fe27ae0 100644 --- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md +++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md @@ -1,25 +1,25 @@ --- -title: JavaScript in JSX with Curly Braces +title: JavaScript w JSX a nawiasy klamrowe --- -JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript. +JSX pozwala na pisanie kodu podobnego do HTML-a wewnątrz pliku javascriptowego, umożliwiając trzymanie logiki renderowania i treści jednym miejscu. Czasem jednak zachodzi potrzeba, by w kodzie znaczników dodać nieco logiki javascriptowej lub odnieść się do dynamicznej własności. W takiej sytuacji możemy użyć nawiasów klamrowych, otwierając tym samym okno do świata JavaScriptu. -* How to pass strings with quotes -* How to reference a JavaScript variable inside JSX with curly braces -* How to call a JavaScript function inside JSX with curly braces -* How to use a JavaScript object inside JSX with curly braces +* Jak przekazywać tekst w cudzysłowie +* Jak odwoływać się do zmiennej javascriptowej w JSX za pomocą nawiasów klamrowych +* Jak wywołać funkcję javascriptową w JSX za pomocą nawiasów klamrowych +* Jak używać obiektów javascriptowych w JSX za pomocą nawiasów klamrowych -## Passing strings with quotes {/*passing-strings-with-quotes*/} +## Przekazywanie tekstu w cudzysłowie {/*passing-strings-with-quotes*/} -When you want to pass a string attribute to JSX, you put it in single or double quotes: +Kiedy chcemy przekazać do komponentu atrybut tekstowy, umieszczamy wartość w pojedynczym lub podwójnym cudzysłowie: @@ -41,9 +41,9 @@ export default function Avatar() { -Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings. +W powyższym kodzie wartości `"https://i.imgur.com/7vQD0fPs.jpg"` oraz `"Gregorio Y. Zara"` są przekazywane jako tekst. -But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**: +Lecz co jeśli wartości dla `src` lub `alt` mają być dynamiczne? Możemy w takiej sytuacji **użyć wartości z JavaScriptu, zastępując parę `"` i `"` nawiasami klamrowymi `{` i `}`**: @@ -67,11 +67,11 @@ export default function Avatar() { -Notice the difference between `className="avatar"`, which specifies an `"avatar"` CSS class name that makes the image round, and `src={avatar}` that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup! +Zwróć uwagę na różnicę pomiędzy właściwością `className="avatar"`, która określa użycie klasy CSS-owej o nazwie `"avatar"` służącej do zaokrąglenia obrazka, a `src={avatar}`, która przekazuje wartość zmiennej javascriptowej o nazwie `avatar`. Dzieje się tak, ponieważ nawiasy klamrowe pozwalają korzystać z JavaScriptu w samym kodzie znaczników! -## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/} +## Używanie nawiasów klamrowych: okno na świat JavaScriptu {/*using-curly-braces-a-window-into-the-javascript-world*/} -JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `

`: +Składnia JSX to jedynie inny sposób zapisu kodu javascriptowego. Oznacza to, że możemy z powodzeniem używać w niej samego JavaScriptu, pod warunkiem, że otoczymy go nawiasami klamrowymi `{ }`. W poniższym przykładzie najpierw deklarujemy nazwę naukowca, `name`, a następnie osadzamy ją w nawiasach klamrowych wewnątrz znacznika `

`: @@ -79,16 +79,16 @@ JSX is a special way of writing JavaScript. That means it’s possible to use Ja export default function TodoList() { const name = 'Gregorio Y. Zara'; return ( -

{name}'s To Do List

+

{name} - lista zadań

); } ``` -Try changing `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the To Do List title changes? +Spróbuj zmienić wartość zmiennej `name` z `'Gregorio Y. Zara'` na `'Hedy Lamarr'`. Widzisz, jak zmienia się tytuł listy zadań? -Any JavaScript expression will work between curly braces, including function calls like `formatDate()`: +Pomiędzy nawiasami klamrowymi można umieszczać dowolne wyrażenie z języka JavaScript, nawet wywołania funkcji, jak np. `formatDate()`: @@ -104,25 +104,25 @@ function formatDate(date) { export default function TodoList() { return ( -

To Do List for {formatDate(today)}

+

Lista zadań na dzień {formatDate(today)}

); } ``` -### Where to use curly braces {/*where-to-use-curly-braces*/} +### Gdzie używać nawiasów klamrowych {/*where-to-use-curly-braces*/} -You can only use curly braces in two ways inside JSX: +W składni JSX można używać nawiasów klamrowych na dwa sposoby: -1. **As text** directly inside a JSX tag: `

{name}'s To Do List

` works, but `<{tag}>Gregorio Y. Zara's To Do List` will not. -2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `{avatar}`. +1. **Jako treść** bezpośrednio wewnątrz znacznika JSX-owego: `

{name} - lista zadań

` działa, ale `<{tag}>Gregorio Y. Zara - lista zadań` już nie. +2. **Jako atrybuty**, zaraz po znaku `=`: `src={avatar}` przekaże wartość zmiennej `avatar`, ale `src="{avatar}"` już przekaże tekst `{avatar}`. -## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/} +## Używanie "podwójnych klamerek": CSS i inne obiekty w JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/} -In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`. +Poza tekstem, liczbami i innymi wyrażeniami javascriptowymi, w JSX można przekazywać także obiekty. W JavaScripcie obiekty same w sobie mają zapis używający klamer, np. `{ name: "Hedy Lamarr", inventions: 5 }`. Z tego powodu, aby przekazać obiekt w JSX-ie, musisz otoczyć go kolejną parą nawiasów klamrowych: `person={{ name: "Hedy Lamarr", inventions: 5 }}`. -You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute: +Możesz spotkać się z tym zapisem przy okazji stylów CSS użytych bezpośrednio w kodzie JSX. React nie wymaga pisania styli w kodzie (dla większości przypadków wystarczą zwykłe klasy CSS-owe), ale jeśli potrzebujesz przekazać style w kodzie, przekaż obiekt do atrybutu `style`: @@ -133,9 +133,9 @@ export default function TodoList() { backgroundColor: 'black', color: 'pink' }}> -
  • Improve the videophone
    • -
  • Prepare aeronautics lectures
    • -
  • Work on the alcohol-fuelled engine
    • +
  • Usprawnić wideotelefon
    • +
  • Przygotować wykłady o aeronautyce
    • +
  • Opracować silnik napędzany alkoholem
    • ); } @@ -148,9 +148,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }     -Try changing the values of `backgroundColor` and `color`. +Spróbuj zmienić wartości `backgroundColor` i `color`. -You can really see the JavaScript object inside the curly braces when you write it like this: +Aby obiekt javascriptowy w klamrach stał się jeszcze bardziej widoczny, możesz zapisać to tak: ```js {2-5}