diff --git a/src/content/learn/javascript-in-jsx-with-curly-braces.md b/src/content/learn/javascript-in-jsx-with-curly-braces.md index 50291611..6cf62315 100644 --- a/src/content/learn/javascript-in-jsx-with-curly-braces.md +++ b/src/content/learn/javascript-in-jsx-with-curly-braces.md @@ -1,25 +1,25 @@ --- -title: JavaScript in JSX with Curly Braces +title: JavaScript v JSX se složenými závorkami --- -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 vám umožňuje psát strukturu podobnou jako je HTML přímo uvnitř JavaScriptového souboru. Díky tomu je logika a obsah na jednom místě. Může se stát, že budete potřebovat přidat JavaScriptovou logiku nebo odkázat na nějakou proměnnou uvnitř struktury. V tom případě, můžete využít složené závorky v JSX a dát tak prostor pro JavaScript. -* 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 předat řetězec pomocí uvozovek +* Jak odkázat na JavaScriptovou proměnnou uvnitř JSX pomocí složených závorek +* Jak zavolat JavaScriptovou funkci uvnitř JSX pomocí složených závorek +* Jak použít JavaScriptový objekt uvnitř JSX pomocí složených závorek -## Passing strings with quotes {/*passing-strings-with-quotes*/} +## Předávání řetězců pomocí uvozovek {/*passing-strings-with-quotes*/} -When you want to pass a string attribute to JSX, you put it in single or double quotes: +Když chcete předat řetězec jako argument v JSX, stačí jej dát do jednoduchých nebo dvojitých uvozovek: @@ -41,9 +41,9 @@ export default function Avatar() { -Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings. +Zde jsou `"https://i.imgur.com/7vQD0fPs.jpg"` a `"Gregorio Y. Zara"` předávány jako řetězce. -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 `}`**: +Co když chcete dynamicky měnit `src` nebo `alt`? Můžete **použít hodnotu z JavaScriptu zaměněním `"` a `"` za `{` a `}`**: @@ -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! +Všimněte si rozdílu mezi `className="avatar"`, který specifikuje `"avatar"` CSS třídu, která dělá kulatý obrázek a `src={avatar}` která načítá hodnotu z JavaScriptové proměnné `avatar`. To se děje díky tomu, že složené závorky dovolují pracovat s JavaScriptem přímo ve struktuře! -## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/} +## Používání složených závorek: Okno do světa 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 `

`: +JSX je speciální způsob jak psát JavaScript. To znamená, že je možné použít JavaScript uvnitř složených závorek `{ }`. V příkladu níže nejprve deklarujeme promenou pro jméno vědce `name` a poté vložíme tuto proměnou uvnitř složených závorek do `

`: @@ -86,9 +86,9 @@ export default function TodoList() { -Try changing the `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the list title changes? +Zkuste změnit hodnotu `name` z `'Gregorio Y. Zara'` na `'Hedy Lamarr'`. Všimli jste si jak se nadpis seznamu změnil? -Any JavaScript expression will work between curly braces, including function calls like `formatDate()`: +Jakákoliv JavaScriptová syntaxe bude fungovat ve složených závorkách, to zahrnuje i volání funkcí jako je `formatDate()`: @@ -111,18 +111,18 @@ export default function TodoList() { -### Where to use curly braces {/*where-to-use-curly-braces*/} +### Kde použít složené závorky {/*where-to-use-curly-braces*/} -You can only use curly braces in two ways inside JSX: +Jsou dva způsoby, jak použít složené závorky v JSX: -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 text** přímo v JSX tagu: `

{name}'s To Do List

` funguje, ale `<{tag}>Gregorio Y. Zara's To Do List` nebude fungovat. +2. **Jako atribut** ihned po `=` znaku: `src={avatar}` přečte `avatar` proměnnou, ale `src="{avatar}"` bude předáno jako řetězec `"{avatar}"`. -## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/} +## Používání "dvojitých složených závorek": CSS a ostatní objekty v 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 }}`. +Krome řetězců, čísel a dalších JavaScriptových výrazů, můžete v JSX předávat i objekty. Objekty jsou také označené složenými závorkami, například `{ name: "Hedy Lamarr", inventions: 5 }`. Proto je v JSX třeba obalit objekt dalším párem složených závorek: `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: +Můžete se s tím setkat v případě inline CSS stylů v JSX. React nevyžaduje použití inline stylů (CSS třídy fungují pro většinu případů dobře). V případě, že potřebujete inline styl, je třeba předat objekt `style` atributu: @@ -148,9 +148,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; } -Try changing the values of `backgroundColor` and `color`. +Zkuste změnit hodnoty `backgroundColor` a `color`. -You can really see the JavaScript object inside the curly braces when you write it like this: +Můžete vidět JavaScriptový objekt uvnitř složených závorek v případě, že to napíšete takto: ```js {2-5}