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..4ba066682 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()`: @@ -111,18 +111,18 @@ export default function TodoList() { -### 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}