From d0d6107484399bb45f860699a05d2d7884245baa Mon Sep 17 00:00:00 2001 From: Dzmitry Zubialevich Date: Mon, 10 Jul 2023 08:45:51 +0200 Subject: [PATCH 1/3] JavaScript in JSX with Curly Braces --- .../javascript-in-jsx-with-curly-braces.md | 222 +++++++++--------- 1 file changed, 111 insertions(+), 111 deletions(-) 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 502916113..a3e812fb8 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 у JSX з дапамогай фігурных дужак --- -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 дазваляе пісаць HTML-падобную разметку ўнутры JavaScript файла, каб трымаць логіку рэндэрынгу і змесціва ў адным месцы. Іншы раз вы захочаце дадаць трохі логікі JavaScript або звярнуцца да дынамічнай ўласцівасці у гэтай разметцы. У гэтай выпадку вы можаце выкарыстоўваць фігурныя дужкі ў вашым JSX, каб адкрыць доступ да 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 +* Як перадаваць радкі з дапамогай двукоссяў +* Як спасылацца на JavaScript пераменную ўнутры JSX з дапамогай фігурных дужак +* Як выклікаць JavaScript функцыю ў JSX з дапамогай фігурных дужак +* Як выкарыстоўваць JavaScript аб'ект у JSX з дапамогай фігурных дужак -## Passing strings with quotes {/*passing-strings-with-quotes*/} +## Перадача радкоў з дапамогай двукоссяў {/*passing-strings-with-quotes*/} -When you want to pass a string attribute to JSX, you put it in single or double quotes: +Калі вы хочаце перадаць радковы атрыбут у JSX, вам трэба змясціць яго ў адзінарныя або двайныя двукоссі: @@ -29,7 +29,7 @@ export default function Avatar() { Gregorio Y. Zara ); } @@ -41,16 +41,16 @@ export default function Avatar() { -Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings. +Тут, `"https://i.imgur.com/7vQD0fPs.jpg"` і `"Грэгорыа І. Зара"` перадаюцца як радкі. -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 `}`**: +Але што, калі вы хочаце дынамічна задаць значэнне `src` або `alt`? Вы можаце **выкарыстоўваць значэнне з JavaScript, замяніўшы `"` і `"` на `{` і `}`**: ```js export default function Avatar() { const avatar = 'https://i.imgur.com/7vQD0fPs.jpg'; - const description = 'Gregorio Y. Zara'; + const description = 'Грэгорыа І. Зара'; return ( -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! +Звярніце ўвагу на розніцу паміж запісам `className="avatar"`, які вызначае назву CSS класа `"avatar"`, што робіць відарыс круглым, і запісам `src={avatar}`, які счытвае значэнне JavaScript пераменнай пад назвай `avatar`. Гэта адбываецца таму, што фігурныя дужкі дазваляюць працаваць з JavaScript прама ў вашай разметцы! -## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/} +## Выкарыстанне фігурных дужак: акно ў свет JavaScript {/*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 — гэта адмысловы спосаб напісання JavaScript. Гэта азначае, што ўнутры JSX можна выкарыстоўваць JavaScript — з дапамогай фігурных дужак `{ }`. У прыведзеным ніжэй прыкладзе спачатку аб'яўляецца пераменная `name`, у якой захоўваецца імя вучонага, а потым гэтая пераменная убудоўваецца ў `

` з дапамогай фігурных дужак: ```js export default function TodoList() { - const name = 'Gregorio Y. Zara'; + const name = 'Грэгорыа І. Зара'; return ( -

{name}'s To Do List

+

Спіс спраў {name}

); } ``` -Try changing the `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the list title changes? +Паспрабуйце змяніць значэнне пераменнай `name` з `'Грэгорыя І. Зара'` на `'Хедзі Ламар'`. Бачыце, як змяняецца назва спісу? -Any JavaScript expression will work between curly braces, including function calls like `formatDate()`: +Любы JavaScript выраз будзе працаваць паміж фігурнымі дужкамі, у тым ліку выклікі функцый накшталт `formatDate()`: @@ -104,25 +104,25 @@ function formatDate(date) { export default function TodoList() { return ( -

To Do List for {formatDate(today)}

+

Спіс спраў на {formatDate(today)}

); } ``` -### Where to use curly braces {/*where-to-use-curly-braces*/} +### Дзе выкарыстоўваць фігурныя дужкі {/*where-to-use-curly-braces*/} -You can only use curly braces in two ways inside JSX: +Унутры 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. **Як тэкст** непасрэдна ўнутры JSX тэга: `

Спіс спраў {name}

` будзе працаваць, але `<{tag}>Спіс спраў Грэгорыа І. Зара` працаваць не будзе. +2. **У якасці атрыбутаў** адразу пасля знака `=`: `src={avatar}` прачытае пераменную `avatar`, але `src="{avatar}"` перадасць радок `"{avatar}"`. -## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/} +## Выкарыстанне падвойных фігурных дужак: CSS і іншыя аб'екты ў 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 }}`. +У дадатак да радкоў, лічбаў і іншых JavaScript выразаў, у JSX вы можаце перадаваць нават аб'екты. Аб'екты таксама пазначаюцца фігурнымі дужкамі, напрыклад `{ name: "Хедзі Ламар", inventions: 5 }`. Такім чынам, каб перадаць JS аб'ект у JSX, вы павінны абгарнуць аб'ект у яшчэ адну пару фігурных дужак: `person={{ name: "Хедзі Ламар", 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: +Гэта бачна на прыкладзе убудаваных CSS стыляў у JSX. React не патрабуе ад вас выкарыстання ўбудаваных стыляў (CSS класы выдатна працуюць у большасці выпадкаў). Але калі вам патрэбен убудаваны стыль, вы перадаяце аб'ект у атрыбут `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
    • +
  • Палепшыць відэатэлефон
    • +
  • Падрыхтаваць лекцыі па аэранаўтыцы
    • +
  • Папрацаваць над рухавіком на спірце
    • ); } @@ -148,9 +148,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }     -Try changing the values of `backgroundColor` and `color`. +Паспрабуйце змяніць значэнні `backgroundColor` і `color`. -You can really see the JavaScript object inside the curly braces when you write it like this: +Вы можаце ўбачыць JavaScript аб'ект у фігурных дужках, калі напішаце яго так: ```js {2-5}