From e511cb21342fe6679a5b29952e142388a44df89e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Wed, 28 Jun 2023 11:52:41 +0300 Subject: [PATCH 1/5] Writing Markup with JSX --- src/content/learn/writing-markup-with-jsx.md | 146 +++++++++---------- 1 file changed, 73 insertions(+), 73 deletions(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 62670150a..3d22f95cb 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -1,34 +1,34 @@ --- -title: Writing Markup with JSX +title: Напісанне разметкі з JSX --- -*JSX* is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it. +*JSX* — гэта пашырэнне сінтаксісу для JavaScript, якое дазваляе вам пісаць падобную на HTML разметку ўнутры JavaScript файла. Хай ёсць і іншыя спосабы напісання кампанентаў, большасць распрацоўшчыкаў React аддаюць перавагу лаканічнасці JSX, і большасць кодавых баз выкарыстоўваюць яго. -* Why React mixes markup with rendering logic -* How JSX is different from HTML -* How to display information with JSX +* Чаму React сумяшчае разметку з логікай рэндэру +* Чым JSX адрозніваецца ад HTML +* Як паказваць інфармацыю з дапамогай JSX -## JSX: Putting markup into JavaScript {/*jsx-putting-markup-into-javascript*/} +## JSX: дадаванне разметкі ў JavaScript {/*jsx-putting-markup-into-javascript*/} -The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript: +Вэб пабудаваны на HTML, CSS. JavaScript. На працягу многіх гадоў вэб-распрацоўшчыкі захоўвалі змесціва ў HTML, дызайн у CSS, а логіку ў JavaScript. Найчасцей ў розных файлах! Змесціва знаходзілася ўнутры HTML разметкі, у час пакуль логіка змяшчалася асобна ў JavaScript: - + HTML - + JavaScript @@ -36,53 +36,53 @@ JavaScript -But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components.** +Але з павялічэннем інтэрактыўнасці ў Вэб, колькасць логікі стала перавышаць перавышаць колькасць кантэнту. JavaScript кіраваў HTML! Таму **ў React логіка рэндэру і разметка жывуць разам у адным месцы — у кампанентах** - + -`Sidebar.js` React component +React кампанент `Sidebar.js` - + -`Form.js` React component +React кампанент `Form.js` -Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own. +Захоўванне логікі рэндэру кнопкі разам з разметкай гарантуе, што яны застануцца сінхранізаванымі пасля зменаў. І наадварот, дэталі, якія не маюць дачынення адныя да іншых, такія, як разметка кнопкі і разметка бакавой панэлі, ізаляваныя, што дазваляе больш бяспечна змяняць іх незалежна адно ад аднаго. -Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to JSX markup. +Кожны кампанент React — функцыя JavaScript, якая можа змяшчаць разметку, якую React будзе рэндэрыць у браўзеры. Кампаненты React выкарыстоўваюць пашырэнне сінтаксісу, якое называецца JSX каб апісваць разметку. Разметка JSX вельмі падобная да HTML, але яна больш строгая і можа паказваць даныя дынамічна. Найлепшы спосаб зразумець гэта — паспрабаваць перарабіць HTML разметку ў JSX разметку. -JSX and React are two separate things. They're often used together, but you *can* [use them independently](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) of each other. JSX is a syntax extension, while React is a JavaScript library. +JSX і React — дзве аосбныя рэчы. Яны часта выкарыстоўваюцца разам, але вы *можаце* [выкарыстоўваць іх незалежна](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) адно ад іншага. JSX — пашырэнне сінтаксісу, React жа — JavaScript бібліятэка. -## Converting HTML to JSX {/*converting-html-to-jsx*/} +## Канвертаванне HTML у JSX {/*converting-html-to-jsx*/} -Suppose that you have some (perfectly valid) HTML: +Уявім, што ў вас ёсць (цалкам правільны) HTML: ```html -

Hedy Lamarr's Todos

+

Спіс задач Хедзі Ламар

Hedy Lamarr ``` -And you want to put it into your component: +І вы хочаце выкарыстоўваць яго ў сваім кампаненце: ```js export default function TodoList() { @@ -92,7 +92,7 @@ export default function TodoList() { } ``` -If you copy and paste it as is, it will not work: +Калі вы яго проста скапіюеце і ўставіце, ён не спрацуе: @@ -100,17 +100,17 @@ If you copy and paste it as is, it will not work: ```js export default function TodoList() { return ( - // This doesn't quite work! -

Hedy Lamarr's Todos

+ // Гэта не будзе працаваць! +

Спіс задач Хедзі Ламар

Hedy Lamarr ); } @@ -122,25 +122,25 @@ img { height: 90px } -This is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they'll guide you to fix the markup, or you can follow the guide below. +Гэта адбываецца таму што JSX стражэйшы за HTML і мае шэраг дадатковых правілаў! Калі вы паспрабуеце чытаць паведамленні пра памылкі вышэй, яны дапамогуць вам выправіць разметку, таксама вы можаце скарыстацца дапаможнікам ніжэй. -Most of the time, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck! +У большасці выпадкаў React будзе паказваць вам карысныя паведамленні пра памылкі прама на экане. Калі вы захраслі, паспрабуйце з імі азнаёміцца! -## The Rules of JSX {/*the-rules-of-jsx*/} +## Правілы JSX {/*the-rules-of-jsx*/} -### 1. Return a single root element {/*1-return-a-single-root-element*/} +### 1. Заўсёды вяртайце адзін каранёвы элемент {/*1-return-a-single-root-element*/} -To return multiple elements from a component, **wrap them with a single parent tag.** +Каб вяртуць некалькі элементаў у межах аднаго кампанента, **абгарніце іх у адзін агульны тэг**. -For example, you can use a `
`: +Напрыклад, вы можаце выкарыстоўваць `
`: ```js {1,11}
-

Hedy Lamarr's Todos

+

Спіс задач Хедзі Ламар

Hedy Lamarr`: ``` -If you don't want to add an extra `
` to your markup, you can write `<>` and `` instead: +Калі вы не хочаце дадаваць яшчэ адзін `
` у сваю разметку, вы можаце выкарыстоўваць пару тэгаў `<>` і `` замест: ```js {1,11} <> -

Hedy Lamarr's Todos

+

Спіс задач Хедзі Ламар

Hedy Lamarr` to your markup, you can write `<>` and ``` -This empty tag is called a *[Fragment.](/reference/react/Fragment)* Fragments let you group things without leaving any trace in the browser HTML tree. +Гэты пусты тэг называецца *[Фрагмент.](/reference/react/Fragment)* Фрагменты дазваляюць вам групаваць рэчы, не пакідаючы слядоў у дрэвы HTML у браўзеры. -#### Why do multiple JSX tags need to be wrapped? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/} +#### Чаму некалькі JSX тэгаў павінны быць абгорнутыя ў адзін? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/} -JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two JSX tags without wrapping them into another tag or a Fragment. +JSX выглядае як HTML, але «пад капотам» трансфармуецца ў звычайныя JavaScript аб’екты. Як вы не можаце вярнуць з функцыі два аб’екты, не абгарнуўшы іх у масіў, такім жа чынам нельга вярнуць два JSX тэгі, не абгарнуўшы іх у іншы тэг ці Фрагмент. -### 2. Close all the tags {/*2-close-all-the-tags*/} +### 2. Закрывайце ўсе свае тэгі {/*2-close-all-the-tags*/} -JSX requires tags to be explicitly closed: self-closing tags like `` must become ``, and wrapping tags like `
  • oranges` must be written as `
  • oranges
    • `. +JSX падрабуе, каб усе тэгі былі закрытыя: няпарныя тэгі, такія як ``, ператвараюцца ў ``, і абгортачныя тэгі, такія як `
  • апельсіны`, павінны быць абавязкова закрытымі: `
  • апельсіны
    • `. -This is how Hedy Lamarr's image and list items look closed: +Тэгі фота Хедзі Ламар і элементаў спіса павінны закрывацца вось такім чынам: ```js {2-6,8-10} <> @@ -193,18 +193,18 @@ This is how Hedy Lamarr's image and list items look closed: class="photo" />
      -
    • Invent new traffic lights
      • -
    • Rehearse a movie scene
      • -
    • Improve the spectrum technology
      • +
    • Вынайсці новыя святлафоры
      • +
    • Адрэпетаваць сцэну з фільма
      • +
    • Палепшыць тэхналогію спектра
    ``` -### 3. camelCase all most of the things! {/*3-camelcase-salls-most-of-the-things*/} +### 3. camelCase для усяго амаль для! {/*3-camelcase-salls-most-of-the-things*/} -JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`. +JSX ператвараецца ў JavaScript і атрыбуты, напісаныя ў JSX, ператвараюцца ў ключы JavaScript аб’ектаў. Ва ўласных кампанентах у вас часта можа ўзнікаць патрэбнасць у чытанні гэтых атрыбутаў з пераменных. Але JavaScript мае абмежаванні ў назвах пераменных. Напрыклад, назвы не могуць уключаць злучнікі ці зарэзерваваныя словы, такія як `class`. -This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): +Таму ў React шмат якія HTML і SVG атрыбуты напісаныя ў camelCase. Напрыклад, замест `stroke-width` трэба выкарыстошваць `strokeWidth`. Так як `class` — зарэзерваванае слова, у React трэба пісаць `className` замест яго, што суадносіцца з [адпаведнай уласцівасцю DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): ```js {4} ``` -You can [find all these attributes in the list of DOM component props.](/reference/react-dom/components/common) If you get one wrong, don't worry—React will print a message with a possible correction to the [browser console.](https://developer.mozilla.org/docs/Tools/Browser_Console) +Вы можаце [знайсці ўсе гэтыя атрыбуты ў спісе пропсаў DOM кампанентаў](/reference/react-dom/components/common). Калі вы штосьці напісалі не так, не хвалюйцеся, React паведаміць вам пра гэта і прапануе магчыма правільны варыянт у [кансолі вашага браўзера](https://developer.mozilla.org/docs/Tools/Browser_Console). -For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) attributes are written as in HTML with dashes. +Так гістарычна склалася, што атрыбуты [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) і [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) напісаныя праз злучнікі, як і ў HTML. -### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/} +### Падказка: карыстайцеся JSX канвертарам {/*pro-tip-use-a-jsx-converter*/} -Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own. +Перапісваць усе гэтыя атрыбуты ва ўжо існуючай разметцы можа быць стомным! Мы раім карыстацца [канвертарам](https://transform.tools/html-to-jsx) каб перакласці вашыя існуючыя HTML і SVG у JSX. Канвертары вельмі карысныя на практыцы, але ўсё яшчэ варта разумець, што адбываецца, каб пісаць JSX было камфортна. -Here is your final result: +Вось так мае выглядаць канчатковы вынік: @@ -234,16 +234,16 @@ Here is your final result: export default function TodoList() { return ( <> -

    Hedy Lamarr's Todos

    +

    Спіс задач Хедзі Ламар

    Hedy Lamarr
      -
    • Invent new traffic lights
      • -
    • Rehearse a movie scene
      • -
    • Improve the spectrum technology
      • +
    • Вынайсці новыя святлафоры
      • +
    • Адрэпетаваць сцэну з фільма
      • +
    • Палепшыць тэхналогію спектра
    ); @@ -258,11 +258,11 @@ img { height: 90px } -Now you know why JSX exists and how to use it in components: +Цяпер вы ведаеце чаму JSX існуе і як выкарыстошваць яго ў кампанентах: -* React components group rendering logic together with markup because they are related. -* JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to. -* Error messages will often point you in the right direction to fixing your markup. +* Кампаненты React групуюць логіку рэндэру разам з разметкай таму што яны звязаныя паміж сабой. +* JSX падобны да HTML, але мае адрозненні. Вы можаце выкарыстоўваць [канвертар](https://transform.tools/html-to-jsx), калі тое патрэбна. +* Паведамленні пра памылкі часта будуць падказваць вам накірунак хутчэйшага вырашэння праблемы. @@ -270,9 +270,9 @@ Now you know why JSX exists and how to use it in components: -#### Convert some HTML to JSX {/*convert-some-html-to-jsx*/} +#### Канвертуйце HTML у JSX {/*convert-some-html-to-jsx*/} -This HTML was pasted into a component, but it's not valid JSX. Fix it: +Дадзены HTML быў устаўлены ў кампанент, але ён не з’яўляецца правільным JSX. Выпраўце гэта: @@ -280,12 +280,12 @@ This HTML was pasted into a component, but it's not valid JSX. Fix it: export default function Bio() { return (
    -

    Welcome to my website!

    +

    Вітаю на сваім вэб-сайце!

    - You can find my thoughts here. + Тут вы можаце азнаёміцца з маімі думкамі.

    - And pictures of scientists! + Таксама тут ёсць фотаздымкі навукоўцаў!

    ); } @@ -308,7 +308,7 @@ export default function Bio() {     -Whether to do it by hand or using the converter is up to you! +Карыстацца канвертарам ці зрабіць самастойна — ваш асабісты выбар! @@ -319,12 +319,12 @@ export default function Bio() { return (
    -

    Welcome to my website!

    +

    Вітаю на сваім вэб-сайце!

    - You can find my thoughts here. + Тут вы можаце азнаёміцца з маімі думкамі.

    - And pictures of scientists! + Таксама тут ёсць фотаздымкі навукоўцаў!

    ); From 1221d98f0a5e7b5768743fefc432524b8d68628a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Wed, 28 Jun 2023 11:55:43 +0300 Subject: [PATCH 2/5] Fix --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 3d22f95cb..e60eeee2e 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -200,7 +200,7 @@ JSX падрабуе, каб усе тэгі былі закрытыя: няпа ``` -### 3. camelCase для усяго амаль для! {/*3-camelcase-salls-most-of-the-things*/} +### 3. camelCase для усяго амаль для ўсяго! {/*3-camelcase-salls-most-of-the-things*/} JSX ператвараецца ў JavaScript і атрыбуты, напісаныя ў JSX, ператвараюцца ў ключы JavaScript аб’ектаў. Ва ўласных кампанентах у вас часта можа ўзнікаць патрэбнасць у чытанні гэтых атрыбутаў з пераменных. Але JavaScript мае абмежаванні ў назвах пераменных. Напрыклад, назвы не могуць уключаць злучнікі ці зарэзерваваныя словы, такія як `class`. From afcd3db59aacb181462f264474a518d8b3a3c199 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Wed, 28 Jun 2023 11:56:54 +0300 Subject: [PATCH 3/5] Fix --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index e60eeee2e..8f9029cdd 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -200,7 +200,7 @@ JSX падрабуе, каб усе тэгі былі закрытыя: няпа ``` -### 3. camelCase для усяго амаль для ўсяго! {/*3-camelcase-salls-most-of-the-things*/} +### 3. camelCase для ўсяго амаль для ўсяго! {/*3-camelcase-salls-most-of-the-things*/} JSX ператвараецца ў JavaScript і атрыбуты, напісаныя ў JSX, ператвараюцца ў ключы JavaScript аб’ектаў. Ва ўласных кампанентах у вас часта можа ўзнікаць патрэбнасць у чытанні гэтых атрыбутаў з пераменных. Але JavaScript мае абмежаванні ў назвах пераменных. Напрыклад, назвы не могуць уключаць злучнікі ці зарэзерваваныя словы, такія як `class`. From 26139a3e39220199c60b4611735e5e5fdc1c02fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Thu, 29 Jun 2023 22:11:23 +0300 Subject: [PATCH 4/5] Fixes --- src/content/learn/writing-markup-with-jsx.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 8f9029cdd..6b12c8d23 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -4,7 +4,7 @@ title: Напісанне разметкі з JSX -*JSX* — гэта пашырэнне сінтаксісу для JavaScript, якое дазваляе вам пісаць падобную на HTML разметку ўнутры JavaScript файла. Хай ёсць і іншыя спосабы напісання кампанентаў, большасць распрацоўшчыкаў React аддаюць перавагу лаканічнасці JSX, і большасць кодавых баз выкарыстоўваюць яго. +*JSX* — гэта пашырэнне сінтаксісу для JavaScript, якое дазваляе вам пісаць падобную на HTML разметку ўнутры JavaScript файла. Хай ёсць і іншыя спосабы напісання кампанентаў, большасць React распрацоўшчыкаў аддаюць перавагу лаканічнасці JSX, і большасць кодавых баз выкарыстоўваюць яго. @@ -18,7 +18,7 @@ title: Напісанне разметкі з JSX ## JSX: дадаванне разметкі ў JavaScript {/*jsx-putting-markup-into-javascript*/} -Вэб пабудаваны на HTML, CSS. JavaScript. На працягу многіх гадоў вэб-распрацоўшчыкі захоўвалі змесціва ў HTML, дызайн у CSS, а логіку ў JavaScript. Найчасцей ў розных файлах! Змесціва знаходзілася ўнутры HTML разметкі, у час пакуль логіка змяшчалася асобна ў JavaScript: +Вэб пабудаваны на HTML, CSS і JavaScript. На працягу многіх гадоў вэб-распрацоўшчыкі захоўвалі змесціва ў HTML, дызайн у CSS, а логіку ў JavaScript. Найчасцей у розных файлах! Змесціва знаходзілася ўнутры HTML разметкі, у той час, пакуль логіка змяшчалася асобна ў JavaScript: @@ -36,11 +36,11 @@ JavaScript -Але з павялічэннем інтэрактыўнасці ў Вэб, колькасць логікі стала перавышаць перавышаць колькасць кантэнту. JavaScript кіраваў HTML! Таму **ў React логіка рэндэру і разметка жывуць разам у адным месцы — у кампанентах** +Але з павелічэннем інтэрактыўнасці ў Вэб, колькасць логікі стала перавышаць колькасць кантэнту. JavaScript кіраваў HTML! Таму **ў React логіка рэндэру і разметка жывуць разам у адным месцы — у кампанентах** - + React кампанент `Sidebar.js` @@ -200,7 +200,7 @@ JSX падрабуе, каб усе тэгі былі закрытыя: няпа ``` -### 3. camelCase для ўсяго амаль для ўсяго! {/*3-camelcase-salls-most-of-the-things*/} +### 3. camelCase для ўсяго амаль ўсяго! {/*3-camelcase-salls-most-of-the-things*/} JSX ператвараецца ў JavaScript і атрыбуты, напісаныя ў JSX, ператвараюцца ў ключы JavaScript аб’ектаў. Ва ўласных кампанентах у вас часта можа ўзнікаць патрэбнасць у чытанні гэтых атрыбутаў з пераменных. Але JavaScript мае абмежаванні ў назвах пераменных. Напрыклад, назвы не могуць уключаць злучнікі ці зарэзерваваныя словы, такія як `class`. From 54c709b9ae5b81d078dc0f99f4304d04bac4e721 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Thu, 29 Jun 2023 22:17:46 +0300 Subject: [PATCH 5/5] Fixes --- src/content/learn/writing-markup-with-jsx.md | 28 ++++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 6b12c8d23..3bd89bc0f 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -46,7 +46,7 @@ React кампанент `Sidebar.js` - + React кампанент `Form.js` @@ -54,17 +54,17 @@ React кампанент `Form.js` -Захоўванне логікі рэндэру кнопкі разам з разметкай гарантуе, што яны застануцца сінхранізаванымі пасля зменаў. І наадварот, дэталі, якія не маюць дачынення адныя да іншых, такія, як разметка кнопкі і разметка бакавой панэлі, ізаляваныя, што дазваляе больш бяспечна змяняць іх незалежна адно ад аднаго. +Захоўванне логікі рэндэру кнопкі разам з разметкай гарантуе, што яны застануцца сінхранізаванымі пасля змен. І наадварот, дэталі, якія не маюць дачынення адныя да іншых, такія, як разметка кнопкі і разметка бакавой панэлі, ізаляваныя, што дазваляе больш бяспечна змяняць іх незалежна адно ад аднаго. Кожны кампанент React — функцыя JavaScript, якая можа змяшчаць разметку, якую React будзе рэндэрыць у браўзеры. Кампаненты React выкарыстоўваюць пашырэнне сінтаксісу, якое называецца JSX каб апісваць разметку. Разметка JSX вельмі падобная да HTML, але яна больш строгая і можа паказваць даныя дынамічна. Найлепшы спосаб зразумець гэта — паспрабаваць перарабіць HTML разметку ў JSX разметку. -JSX і React — дзве аосбныя рэчы. Яны часта выкарыстоўваюцца разам, але вы *можаце* [выкарыстоўваць іх незалежна](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) адно ад іншага. JSX — пашырэнне сінтаксісу, React жа — JavaScript бібліятэка. +JSX і React — дзве асобныя рэчы. Яны часта выкарыстоўваюцца разам, але вы *можаце* [выкарыстоўваць іх незалежна](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) адно ад іншага. JSX — пашырэнне сінтаксісу, React жа — JavaScript бібліятэка. -## Канвертаванне HTML у JSX {/*converting-html-to-jsx*/} +## Ператварэнне HTML у JSX {/*converting-html-to-jsx*/} Уявім, што ў вас ёсць (цалкам правільны) HTML: @@ -122,11 +122,11 @@ img { height: 90px }     -Гэта адбываецца таму што JSX стражэйшы за HTML і мае шэраг дадатковых правілаў! Калі вы паспрабуеце чытаць паведамленні пра памылкі вышэй, яны дапамогуць вам выправіць разметку, таксама вы можаце скарыстацца дапаможнікам ніжэй. +Гэта адбываецца таму што JSX стражэйшы за HTML і мае шэраг дадатковых правіл! Калі вы паспрабуеце чытаць паведамленні пра памылкі вышэй, яны дапамогуць вам выправіць разметку, таксама вы можаце скарыстацца дапаможнікам ніжэй. -У большасці выпадкаў React будзе паказваць вам карысныя паведамленні пра памылкі прама на экане. Калі вы захраслі, паспрабуйце з імі азнаёміцца! +У большасці выпадкаў React будзе паказваць вам карысныя паведамленні пра памылкі прама на экране. Калі вы захраслі, паспрабуйце з імі азнаёміцца! @@ -134,7 +134,7 @@ img { height: 90px } ### 1. Заўсёды вяртайце адзін каранёвы элемент {/*1-return-a-single-root-element*/} -Каб вяртуць некалькі элементаў у межах аднаго кампанента, **абгарніце іх у адзін агульны тэг**. +Каб вярнуць некалькі элементаў у межах аднаго кампанента, **абгарніце іх у адзін агульны тэг**. Напрыклад, вы можаце выкарыстоўваць `
    `: @@ -169,7 +169,7 @@ img { height: 90px } ``` -Гэты пусты тэг называецца *[Фрагмент.](/reference/react/Fragment)* Фрагменты дазваляюць вам групаваць рэчы, не пакідаючы слядоў у дрэвы HTML у браўзеры. +Гэты пусты тэг называецца *[Фрагмент.](/reference/react/Fragment)* Фрагменты дазваляюць вам групаваць рэчы, не пакідаючы слядоў у HTML дрэвы ў браўзеры. @@ -181,7 +181,7 @@ JSX выглядае як HTML, але «пад капотам» трансфа ### 2. Закрывайце ўсе свае тэгі {/*2-close-all-the-tags*/} -JSX падрабуе, каб усе тэгі былі закрытыя: няпарныя тэгі, такія як ``, ператвараюцца ў ``, і абгортачныя тэгі, такія як `
  • апельсіны`, павінны быць абавязкова закрытымі: `
  • апельсіны
    • `. +JSX патрабуе, каб усе тэгі былі закрытыя: няпарныя тэгі, такія як ``, ператвараюцца ў ``, і абгортачныя тэгі, такія як `
  • апельсіны`, павінны быць абавязкова закрытымі: `
  • апельсіны
    • `. Тэгі фота Хедзі Ламар і элементаў спіса павінны закрывацца вось такім чынам: @@ -204,7 +204,7 @@ JSX падрабуе, каб усе тэгі былі закрытыя: няпа JSX ператвараецца ў JavaScript і атрыбуты, напісаныя ў JSX, ператвараюцца ў ключы JavaScript аб’ектаў. Ва ўласных кампанентах у вас часта можа ўзнікаць патрэбнасць у чытанні гэтых атрыбутаў з пераменных. Але JavaScript мае абмежаванні ў назвах пераменных. Напрыклад, назвы не могуць уключаць злучнікі ці зарэзерваваныя словы, такія як `class`. -Таму ў React шмат якія HTML і SVG атрыбуты напісаныя ў camelCase. Напрыклад, замест `stroke-width` трэба выкарыстошваць `strokeWidth`. Так як `class` — зарэзерваванае слова, у React трэба пісаць `className` замест яго, што суадносіцца з [адпаведнай уласцівасцю DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): +Таму ў React шмат якія HTML і SVG атрыбуты напісаныя ў camelCase. Напрыклад, замест `stroke-width` трэба выкарыстоўваць `strokeWidth`. Так як `class` — зарэзерваванае слова, у React трэба пісаць `className` замест яго, што суадносіцца з [адпаведнай уласцівасцю DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): ```js {4} -Цяпер вы ведаеце чаму JSX існуе і як выкарыстошваць яго ў кампанентах: +Цяпер вы ведаеце чаму JSX існуе і як выкарыстоўваць яго ў кампанентах: * Кампаненты React групуюць логіку рэндэру разам з разметкай таму што яны звязаныя паміж сабой. * JSX падобны да HTML, але мае адрозненні. Вы можаце выкарыстоўваць [канвертар](https://transform.tools/html-to-jsx), калі тое патрэбна. -* Паведамленні пра памылкі часта будуць падказваць вам накірунак хутчэйшага вырашэння праблемы. +* Паведамленні пра памылкі часта будуць падказваць вам кірунак хутчэйшага вырашэння праблемы. @@ -270,9 +270,9 @@ img { height: 90px } -#### Канвертуйце HTML у JSX {/*convert-some-html-to-jsx*/} +#### Ператварыце HTML у JSX {/*convert-some-html-to-jsx*/} -Дадзены HTML быў устаўлены ў кампанент, але ён не з’яўляецца правільным JSX. Выпраўце гэта: +Дадзены HTML быў устаўлены ў кампанент, але ён не з’яўляецца правільным JSX. Выправіце гэта: