From 8141b5d3d7285d69e1554c92e84d32a4278947f0 Mon Sep 17 00:00:00 2001 From: ltlaitoff Date: Tue, 10 Oct 2023 19:05:22 +0300 Subject: [PATCH] Finished translation of "JavaScript in JSX with Curly Braces" page --- .../javascript-in-jsx-with-curly-braces.md | 225 +++++++++--------- 1 file changed, 112 insertions(+), 113 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..96db1eef9 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,24 @@ --- -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*/} - -When you want to pass a string attribute to JSX, you put it in single or double quotes: +## Передача рядків з лапками {/*passing-strings-with-quotes*/} +Коли ви хочете передати рядковий атрибут в JSX, ви поміщаєте його в одинарні або подвійні лапки: @@ -29,7 +28,7 @@ export default function Avatar() { Gregorio Y. Zara ); } @@ -41,16 +40,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"` та `"Грегоріо І. Зара (Gregorio Y. Zara)"` передаються як рядки. -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 = 'Грегоріо І. Зара (Gregorio Y. Zara)'; 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. Це означає, що в ньому можна використовувати JavaScript за допомогою фігурних дужок `{ }`. У наведеному нижче прикладі спочатку оголошується ім'я для вченого, `name`, а потім вбудовується з фігурними дужками всередині тегу `

`: ```js export default function TodoList() { - const name = 'Gregorio Y. Zara'; + const name = 'Грегоріо І. Зара (Gregorio Y. Zara)'; 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` з `'Грегоріо І. Зара (Gregorio Y. Zara)'` на `'Геді Ламар (Hedy Lamarr)'`. Бачите, як змінюється заголовок списку? -Any JavaScript expression will work between curly braces, including function calls like `formatDate()`: +Будь-який вираз JavaScript працюватиме всередині фігурних дужок, включаючи виклики функцій, наприклад `formatDate()`: @@ -97,32 +96,32 @@ const today = new Date(); function formatDate(date) { return new Intl.DateTimeFormat( - 'en-US', + 'uk-UA', { weekday: 'long' } ).format(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}>Список справ Грегоріо І. Зара (Gregorio Y. Zara)` - ні. +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: "Геді Ламар (Hedy Lamarr)", inventions: 5 }`. Отже, щоб передати JS об'єкт в JSX, ви повинні обгорнути його в іншу пару фігурних дужок: `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: +Ви можете побачити це з вбудованими стилями CSS в JSX. React не вимагає вас використовувати вбудовані стилі (CSS-класи працюють добре для більшості випадків). Але коли вам потрібні вбудовані стилі, ви передаєте об'єкт атрибута `style`: @@ -133,9 +132,9 @@ export default function TodoList() { backgroundColor: 'black', color: 'pink' }}> -
  • Improve the videophone
    • -
  • Prepare aeronautics lectures
    • -
  • Work on the alcohol-fuelled engine
    • +
  • Покращити відеотелефон
    • +
  • Підготувати лекції з авіаційних технологій
    • +
  • Працювати над двигуном на спиртовому паливі
    • ); } @@ -148,9 +147,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}