-
{person.name}'s Todos
+
Спіс спраў {person.name}
```
-JSX is very minimal as a templating language because it lets you organize data and logic using JavaScript.
+JSX вельмі мінімалістычная мова шаблонаў, таму што яна дазваляе арганізоўваць даныя і логіку з дапамогай JavaScript.
-Now you know almost everything about JSX:
+Цяпер вы ведаеце амаль усё пра JSX:
-* JSX attributes inside quotes are passed as strings.
-* Curly braces let you bring JavaScript logic and variables into your markup.
-* They work inside the JSX tag content or immediately after `=` in attributes.
-* `{{` and `}}` is not special syntax: it's a JavaScript object tucked inside JSX curly braces.
+* JSX атрыбуты ў двукоссях перадаюцца як радкі.
+* Фігурныя дужкі дазваляюць выкарыстоўваць JavaScript логіку і пераменныя ў вашай разметцы.
+* Яны працуюць унутры змесціва JSX тэга або непасрэдна пасля `=` у атрыбутах.
+* `{{` і `}}` не з'яўляюцца спецыяльным сінтаксісам: гэта JavaScript аб'ект, схаваны ўнутры фігурных дужак JSX.
-#### Fix the mistake {/*fix-the-mistake*/}
+#### Выправіце памылку {/*fix-the-mistake*/}
-This code crashes with an error saying `Objects are not valid as a React child`:
+Гэты код выдае памылку `Objects are not valid as a React child`:
```js
const person = {
- name: 'Gregorio Y. Zara',
+ name: 'Грэгорыа І. Зара',
theme: {
backgroundColor: 'black',
color: 'pink'
@@ -263,16 +263,16 @@ const person = {
export default function TodoList() {
return (
-
{person}'s Todos
+
Спіс спраў {person}
- - Improve the videophone
- - Prepare aeronautics lectures
- - Work on the alcohol-fuelled engine
+ - Палепшыць відэатэлефон
+ - Падрыхтаваць лекцыі па аэранаўтыцы
+ - Папрацаваць над рухавіком на спірце
);
@@ -287,21 +287,21 @@ body > div > div { padding: 20px; }
-Can you find the problem?
+Вы можаце знайсці праблему?
-Look for what's inside the curly braces. Are we putting the right thing there?
+Шукайце тое, што знаходзіцца ўнутры фігурных дужак. Ці правільна мы туды ўсё змяшчаем?
-This is happening because this example renders *an object itself* into the markup rather than a string: `{person}'s Todos
` is trying to render the entire `person` object! Including raw objects as text content throws an error because React doesn't know how you want to display them.
+Так адбываецца таму, што гэты прыклад рэндэрыць *сам аб'ект* у разметку, а не радок: `Спіс спраў {person}
` спрабуе адрэндэрыць увесь аб'ект `person`! Рэндэр аб'ектаў як тэкставае змесціва выклікае памылку, таму што React не ведае, як іх адлюстроўваць.
-To fix it, replace `{person}'s Todos
` with `{person.name}'s Todos
`:
+Каб выправіць гэта, замяніце `Спіс спраў {person}
` на `Спіс спраў {person.name}
`:
```js
const person = {
- name: 'Gregorio Y. Zara',
+ name: 'Грэгорыа І. Зара',
theme: {
backgroundColor: 'black',
color: 'pink'
@@ -311,16 +311,16 @@ const person = {
export default function TodoList() {
return (
-
{person.name}'s Todos
+
Спіс спраў {person.name}
- - Improve the videophone
- - Prepare aeronautics lectures
- - Work on the alcohol-fuelled engine
+ - Палепшыць відэатэлефон
+ - Падрыхтаваць лекцыі па аэранаўтыцы
+ - Папрацаваць над рухавіком на спірце
);
@@ -337,15 +337,15 @@ body > div > div { padding: 20px; }
-#### Extract information into an object {/*extract-information-into-an-object*/}
+#### Перанясіце інфармацыю ў аб'ект {/*extract-information-into-an-object*/}
-Extract the image URL into the `person` object.
+Перанясіце URL-адрас відарыса ў аб'ект `person`.
```js
const person = {
- name: 'Gregorio Y. Zara',
+ name: 'Грэгорыа І. Зара',
theme: {
backgroundColor: 'black',
color: 'pink'
@@ -355,16 +355,16 @@ const person = {
export default function TodoList() {
return (
-
{person.name}'s Todos
+
Спіс спраў {person.name}
- - Improve the videophone
- - Prepare aeronautics lectures
- - Work on the alcohol-fuelled engine
+ - Палепшыць відэатэлефон
+ - Падрыхтаваць лекцыі па аэранаўтыцы
+ - Папрацаваць над рухавіком на спірце
);
@@ -381,13 +381,13 @@ body > div > div { padding: 20px; }
-Move the image URL into a property called `person.imageUrl` and read it from the `
` tag using the curlies:
+Перамясціце URL-адрас відарыса ва ўласцівасць `person.imageUrl` і прачытайце яго з тэга `
` з дапамогай фігурных дужак:
```js
const person = {
- name: 'Gregorio Y. Zara',
+ name: 'Грэгорыа І. Зара',
imageUrl: "https://i.imgur.com/7vQD0fPs.jpg",
theme: {
backgroundColor: 'black',
@@ -398,16 +398,16 @@ const person = {
export default function TodoList() {
return (
-
{person.name}'s Todos
+
Спіс спраў {person.name}
- - Improve the videophone
- - Prepare aeronautics lectures
- - Work on the alcohol-fuelled engine
+ - Палепшыць відэатэлефон
+ - Падрыхтаваць лекцыі па аэранаўтыцы
+ - Папрацаваць над рухавіком на спірце
);
@@ -424,13 +424,13 @@ body > div > div { padding: 20px; }
-#### Write an expression inside JSX curly braces {/*write-an-expression-inside-jsx-curly-braces*/}
+#### Напішыце выраз унутры фігурных дужак JSX {/*write-an-expression-inside-jsx-curly-braces*/}
-In the object below, the full image URL is split into four parts: base URL, `imageId`, `imageSize`, and file extension.
+У прыведзеным ніжэй аб'екце поўны URL відарыса падзелены на чатыры часткі: базавы URL, `imageId`, `imageSize` і пашырэнне файла.
-We want the image URL to combine these attributes together: base URL (always `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`), and file extension (always `'.jpg'`). However, something is wrong with how the `
` tag specifies its `src`.
+Мы хочам аб'яднаць гэтыя атрыбуты разам у URL-адрас відарыса: базавы URL (заўсёды `'https://i.imgur.com/'`), `imageId` (`'7vQD0fP'`), `imageSize` (`'s'`) і пашырэнне файла (заўсёды `'.jpg'`). Аднак нешта не так з тым, як тэг `
` вызначае свой `src`.
-Can you fix it?
+Вы можаце гэта выправіць?
@@ -438,7 +438,7 @@ Can you fix it?
const baseUrl = 'https://i.imgur.com/';
const person = {
- name: 'Gregorio Y. Zara',
+ name: 'Грэгорыа І. Зара',
imageId: '7vQD0fP',
imageSize: 's',
theme: {
@@ -450,16 +450,16 @@ const person = {
export default function TodoList() {
return (
-
{person.name}'s Todos
+
Спіс спраў {person.name}
- - Improve the videophone
- - Prepare aeronautics lectures
- - Work on the alcohol-fuelled engine
+ - Палепшыць відэатэлефон
+ - Падрыхтаваць лекцыі па аэранаўтыцы
+ - Папрацаваць над рухавіком на спірце
);
@@ -474,22 +474,22 @@ body > div > div { padding: 20px; }
-To check that your fix worked, try changing the value of `imageSize` to `'b'`. The image should resize after your edit.
+Каб пераканацца, што ваша выпраўленне спрацавала, паспрабуйце змяніць значэнне `imageSize` на `'b'`. Пасля вашых змяненняў памер відарыса павінен змяніцца.
-You can write it as `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
+Вы можаце напісаць так: `src={baseUrl + person.imageId + person.imageSize + '.jpg'}`.
-1. `{` opens the JavaScript expression
-2. `baseUrl + person.imageId + person.imageSize + '.jpg'` produces the correct URL string
-3. `}` closes the JavaScript expression
+1. `{` адкрывае JavaScript выраз
+2. `baseUrl + person.imageId + person.imageSize + '.jpg'` стварае правільны радок URL
+3. `}` закрывае JavaScript выраз
```js
const baseUrl = 'https://i.imgur.com/';
const person = {
- name: 'Gregorio Y. Zara',
+ name: 'Грэгорыа І. Зара',
imageId: '7vQD0fP',
imageSize: 's',
theme: {
@@ -501,16 +501,16 @@ const person = {
export default function TodoList() {
return (
-
{person.name}'s Todos
+
Спіс спраў {person.name}
- - Improve the videophone
- - Prepare aeronautics lectures
- - Work on the alcohol-fuelled engine
+ - Палепшыць відэатэлефон
+ - Падрыхтаваць лекцыі па аэранаўтыцы
+ - Папрацаваць над рухавіком на спірце
);
@@ -525,7 +525,7 @@ body > div > div { padding: 20px; }
-You can also move this expression into a separate function like `getImageUrl` below:
+Вы таксама можаце перанесці гэты выраз у асобную функцыю, напрыклад `getImageUrl` ніжэй:
@@ -533,7 +533,7 @@ You can also move this expression into a separate function like `getImageUrl` be
import { getImageUrl } from './utils.js'
const person = {
- name: 'Gregorio Y. Zara',
+ name: 'Грэгорыа І. Зара',
imageId: '7vQD0fP',
imageSize: 's',
theme: {
@@ -545,16 +545,16 @@ const person = {
export default function TodoList() {
return (
-
{person.name}'s Todos
+
Спіс спраў {person.name}
- - Improve the videophone
- - Prepare aeronautics lectures
- - Work on the alcohol-fuelled engine
+ - Палепшыць відэатэлефон
+ - Падрыхтаваць лекцыі па аэранаўтыцы
+ - Папрацаваць над рухавіком на спірце
);
@@ -580,7 +580,7 @@ body > div > div { padding: 20px; }
-Variables and functions can help you keep the markup simple!
+Пераменныя і функцыі могуць дапамагчы вам спрасціць разметку!