From ff57fce7aafcc45d54b1b6ca611bc4f950e9817f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Sun, 11 Jun 2023 00:46:25 +0300 Subject: [PATCH 1/6] Translated describing-the-ui.md --- src/content/learn/describing-the-ui.md | 170 ++++++++++++------------- 1 file changed, 85 insertions(+), 85 deletions(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 6df4c0475..4486d65cf 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -1,29 +1,29 @@ --- -title: Describing the UI +title: Апісанне UI --- -React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable *components.* From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you'll learn to create, customize, and conditionally display React components. +React — гэта JavaScript бібліятэка для рэндару інтэрфейсу карыстальнка (UI). UI пабудаваны з маленькіх адзінак, такіх як кнопкі, тэксты, выявы. React дазваляе камбінаваць іх у прыдатныя да перавыкарыстання *кампаненты*, якія можна складаць адно ў адно. Ад вэб-сайтаў да мабільных праграм — усё на экране можа быць разбітае на кампаненты. У гэтай главе вы даведаецеся як ствараць і змяняць кампаненты React ці паказваць іх па-рознаму ў залежнасці ад умоў. -* [How to write your first React component](/learn/your-first-component) -* [When and how to create multi-component files](/learn/importing-and-exporting-components) -* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx) -* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces) -* [How to configure components with props](/learn/passing-props-to-a-component) -* [How to conditionally render components](/learn/conditional-rendering) -* [How to render multiple components at a time](/learn/rendering-lists) -* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure) +* [Як напісаць свой першы кампанент React](/learn/your-first-component) +* [Калі і як змяшчаць некалькі кампанентаў у адзін файл](/learn/importing-and-exporting-components) +* [Як дадаць разметку ў JavaScript з дапамогай JSX](/learn/writing-markup-with-jsx) +* [Як выкарыстоўваць магчымасці JavaScript з дапамогай фігурных дужак у разметцы JSX](/learn/javascript-in-jsx-with-curly-braces) +* [Як змяняць канфігурацыю кампанента з дапамогай пропсаў](/learn/passing-props-to-a-component) +* [Як рэндарыць кампаненты ў залежнасці ад умоў](/learn/conditional-rendering) +* [Як рэндарыць некалькі кампанентаў за раз](/learn/rendering-lists) +* [Як пазбягаць памылак, захоўваючы кампанент чыстымі](/learn/keeping-components-pure) -## Your first component {/*your-first-component*/} +## Ваш першы кампанент {/*your-first-component*/} -React applications are built from isolated pieces of UI called *components*. A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is a `Gallery` component rendering three `Profile` components: +Праграмы React пабудаваныя з ізаляваных кавалкаў UI, якія называюцца *кампанентамі*. Кампанент React — гэта функцыя JavaScript, у якую вы можаце дадаць разметку. Кампанент можа быць маленькім, як кнопка, або вялікім, як цэлая старонка. Вось, напрыклад, кампанент `Gallery`, які рэндарыць тры кампаненты `Profile`: @@ -40,7 +40,7 @@ function Profile() { export default function Gallery() { return (
-

Amazing scientists

+

Выбітныя навукоўцы

@@ -57,13 +57,13 @@ img { margin: 0 10px 10px 0; height: 90px; } -Read **[Your First Component](/learn/your-first-component)** to learn how to declare and use React components. +Звярніцеся да старонкі «**[Ваш першы кампанент](/learn/your-first-component)**» каб даведацца як аб’яўляць і выкарыстоўваць кампаненты React. -## Importing and exporting components {/*importing-and-exporting-components*/} +## Імпарт і экспарт кампанентаў {/*importing-and-exporting-components*/} -You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can *export* a component into its own file, and then *import* that component from another file: +Вы можаце аб’явіць некалькі кампанентаў у адным файле, але ў вялікіх файлах можа быць складана арыентавацца. Каб вырашыць гэтую праблему, вы можаце *экспартаваць* кампанент ва ўласны файл, а потым *імпартаваць* яго з іншага файла: @@ -84,7 +84,7 @@ import Profile from './Profile.js'; export default function Gallery() { return (
-

Amazing scientists

+

Выбітныя навукоўцы

@@ -112,32 +112,32 @@ img { margin: 0 10px 10px 0; } -Read **[Importing and Exporting Components](/learn/importing-and-exporting-components)** to learn how to split components into their own files. +Звярніцеся да старонкі «**[Імпарт і экспарт кампанентаў](/learn/importing-and-exporting-components)**» каб даведацца як падзяляць кампаненты па ўласных файлах. -## Writing markup with JSX {/*writing-markup-with-jsx*/} +## Напісанне разметкі з дапамогай JSX {/*writing-markup-with-jsx*/} -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. +Кожны кампанент React — функцыя JavaScript, якая можа змяшчаць разметку, якую React будзе рэндарыць у браўзеры. Кампаненты React выкарыстоўваюць пашырэння сінтакісу, якое называецца JSX каб апісваць разметку. Разметка JSX вельмі падобная да HTML, але яна больш строгая і можа паказваць даныя дынамічна. -If we paste existing HTML markup into a React component, it won't always work: +Не любая HTML разметка будзе працаваць, калі ўставіць яе ў кампанент React: ```js export default function TodoList() { return ( - // This doesn't quite work! -

Hedy Lamarr's Todos

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

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

Hedy Lamarr
    -
  • Invent new traffic lights -
  • Rehearse a movie scene -
  • Improve spectrum technology +
  • Вынайсі новыя светлафоры +
  • Адрэпітаваць сцэну з фільма +
  • Палепшыць тэхналогію спектра
); } @@ -149,7 +149,7 @@ img { height: 90px; } -If you have existing HTML like this, you can fix it using a [converter](https://transform.tools/html-to-jsx): +Калі ў вас ёсць існуючая разметка ў HTML, вы можаце скарыстацца [канвертарам](https://transform.tools/html-to-jsx): @@ -157,16 +157,16 @@ If you have existing HTML like this, you can fix it using a [converter](https:// export default function TodoList() { return ( <> -

Hedy Lamarr's Todos

+

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

Hedy Lamarr
    -
  • Invent new traffic lights
    • -
  • Rehearse a movie scene
    • -
  • Improve spectrum technology
    • +
  • Вынайсі новыя светлафоры
    • +
  • Адрэпітаваць сцэну з фільма
    • +
  • Палепшыць тэхналогію спектра
); @@ -181,19 +181,19 @@ img { height: 90px; } -Read **[Writing Markup with JSX](/learn/writing-markup-with-jsx)** to learn how to write valid JSX. +Звярніцеся да старонкі «**[Напісанне разметкі з дапамогай JSX](/learn/writing-markup-with-jsx)**» каб даведацца як пісаць правільную JSX-разметку. -## JavaScript in JSX with curly braces {/*javascript-in-jsx-with-curly-braces*/} +## JavaScript у JSX з дапамогай фігурных дужак {/*javascript-in-jsx-with-curly-braces*/} -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: ```js const person = { - name: 'Gregorio Y. Zara', + name: 'Грэгорыа І. Зара', theme: { backgroundColor: 'black', color: 'pink' @@ -203,16 +203,16 @@ const person = { export default function TodoList() { return (
-

{person.name}'s Todos

+

Спіс задач {person.name}

Gregorio Y. Zara
    -
  • Improve the videophone
    • -
  • Prepare aeronautics lectures
    • -
  • Work on the alcohol-fuelled engine
    • +
  • Палепшыць відэа-тэлефон
    • +
  • Падрыхтаваць лекцыі па аэранаўтыцы
    • +
  • Папрацаваць над рухавіком на спірце
); @@ -229,13 +229,13 @@ body > div > div { padding: 20px; } -Read **[JavaScript in JSX with Curly Braces](/learn/javascript-in-jsx-with-curly-braces)** to learn how to access JavaScript data from JSX. +Звярніцеся да старонкі «**[JavaScript у JSX з дапамогай фігурных дужак](/learn/javascript-in-jsx-with-curly-braces)**» каб даведацца як выкарыстоўваць даныя з JavaScript у JSX. -## Passing props to a component {/*passing-props-to-a-component*/} +## Перадача пропсаў у кампанент {/*passing-props-to-a-component*/} -React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, functions, and even JSX! +Для камунікацыі між сабой кампаненты React выкарыстоўвацюь *пропсы*. Кожны бацькоўскі кампанент можа перадаваць некаторую інфармацыю даччыным, задаючы ім пропсы. Пропсы падобныя на атрыбуты ў HTML, але ў іх вы можаце перадаваць любыя JavaScrpt значэнні, улічваючы аб’екты, масівы, функцыі ці нават JSX! @@ -310,15 +310,15 @@ export function getImageUrl(person, size = 's') { -Read **[Passing Props to a Component](/learn/passing-props-to-a-component)** to learn how to pass and read props. +Звярніцеся да старонкі «**[Перадача пропсаў у кампанент](/learn/passing-props-to-a-component)**» каб даведацца як перадаваць і чытаць пропсы. -## Conditional rendering {/*conditional-rendering*/} +## Умоўны рэндэрынг {/*conditional-rendering*/} -Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators. +Часта можа ўзнікаць патрэба паказваць у кампанентах розныя рэчы ў залежнасці ад пэўных умоў. У React вы можаце пісаць умовы для рэндэрынгу JSX з дапамогай JavaScript, выкарыстоўваючы ўмоўныя аператары `if`, `&&` ці `? :`. -In this example, the JavaScript `&&` operator is used to conditionally render a checkmark: +У прыкладзе ніжэй JavaScript аператар `&&` выкарыстоўваецца, каб паказваць птушку: @@ -334,19 +334,19 @@ function Item({ name, isPacked }) { export default function PackingList() { return (
-

Sally Ride's Packing List

+

Спіс рэчаў Салі Райд у дарогу

@@ -358,15 +358,15 @@ export default function PackingList() { -Read **[Conditional Rendering](/learn/conditional-rendering)** to learn the different ways to render content conditionally. +Звярніцеся да старонкі «**[Умоўны рэндэрынг](/learn/conditional-rendering)**» каб даведацца розніцу між рознымі спосабамі ўмоўнага рэндарынгу. -## Rendering lists {/*rendering-lists*/} +## Рэндэрынг спісаў {/*rendering-lists*/} -You will often want to display multiple similar components from a collection of data. You can use JavaScript's `filter()` and `map()` with React to filter and transform your array of data into an array of components. +Вам можа спатрэбіцца паказваць некалькі аднолькавых кампанентаў, базуючыся на пэўных даных. Вы можаце выкарыстоўваць `filter()` і `map()` з JavaScript у React каб фільтраваць і ператвараць вашыя даныя з масіваў у кампаненты. -For each array item, you will need to specify a `key`. Usually, you will want to use an ID from the database as a `key`. Keys let React keep track of each item's place in the list even if the list changes. +Кожны элемент масіва абавязкова мае мець унікальны `key` (ключ). Найчасцей вы можаце выкарыстоўваць ID з базы даных у якасці `key`. Ключы дазваляюць React адсочваць месцазнаходжання кожнага элемента, нават калі спіс змяняецца. @@ -384,13 +384,13 @@ export default function List() {

{person.name}: {' ' + person.profession + ' '} - known for {person.accomplishment} + вядомы(-ая) {person.accomplishment}

); return (
-

Scientists

+

Навукоўцы

    {listItems}
); @@ -400,33 +400,33 @@ export default function List() { ```js data.js export const people = [{ id: 0, - name: 'Creola Katherine Johnson', - profession: 'mathematician', - accomplishment: 'spaceflight calculations', + name: 'Кэтрын Джонсан', + profession: 'матэматык', + accomplishment: 'касмічнымі разлікамі', imageId: 'MK3eW3A' }, { id: 1, - name: 'Mario José Molina-Pasquel Henríquez', - profession: 'chemist', - accomplishment: 'discovery of Arctic ozone hole', + name: 'Марыа Маліна', + profession: 'хімік', + accomplishment: 'адкрыццём арктычнай азонавай дзіркі', imageId: 'mynHUSa' }, { id: 2, - name: 'Mohammad Abdus Salam', - profession: 'physicist', - accomplishment: 'electromagnetism theory', + name: 'Абдус Салам', + profession: 'фізік', + accomplishment: 'тэорыяй электрамагнетызму', imageId: 'bE7W1ji' }, { id: 3, - name: 'Percy Lavon Julian', - profession: 'chemist', - accomplishment: 'pioneering cortisone drugs, steroids and birth control pills', + name: 'Пэрсі Джуліан', + profession: 'хімік', + accomplishment: 'унёскамі ў распрацоўку картызону, стэроідаў і супрацьзачаткавых лекаў', imageId: 'IOjWm71' }, { id: 4, - name: 'Subrahmanyan Chandrasekhar', - profession: 'astrophysicist', - accomplishment: 'white dwarf star mass calculations', + name: 'Субрахманьян Чандрасекар', + profession: 'астрафізік', + accomplishment: 'разлікамі масы зоркі белага карліка', imageId: 'lrWQx8l' }]; ``` @@ -458,18 +458,18 @@ h2 { font-size: 20px; } -Read **[Rendering Lists](/learn/rendering-lists)** to learn how to render a list of components, and how to choose a key. +Звярніцеся да старонкі «**[Рэндэрынг спісаў](/learn/rendering-lists)**» каб даведацце як рэндэрыць спісы кампанентаў і як выбіраць ключ. -## Keeping components pure {/*keeping-components-pure*/} +## Захоўванне кампанентаў чыстымі {/*keeping-components-pure*/} -Some JavaScript functions are *pure.* A pure function: +Некаторыя JavaScript функцыі называюцца *чыстымі*. Чыстыя функцыі: -* **Minds its own business.** It does not change any objects or variables that existed before it was called. -* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result. +* **Займаюцца сваёй справай.** Яны не змяняюць аб’екты ці пераменныя, якія існавалі да выкліку функцыі. +* **Вяртаюць прадказальны вынік.** Пры аднолькавых дадзеных фукнцыя заўсёды вяртае аднолькавы вынік. -By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. Here is an example of an impure component: +Калі вы будзеце строга адпавядаць дадзеным прынцыпам, вы зможаце пазбегнуць шэрагу незразумелых хіб і непрадказальных паводзінаў па меры росту вашай кодавай базы. Вось прыклад кампанента, які не з’яўляецца чыстым: @@ -477,9 +477,9 @@ By strictly only writing your components as pure functions, you can avoid an ent let guest = 0; function Cup() { - // Bad: changing a preexisting variable! + // ДРЭННА: код змяняе пераменную, якая існуе па-за функцыяй! guest = guest + 1; - return

Tea cup for guest #{guest}

; + return

Кубачак чаю для госця №{guest}

; } export default function TeaSet() { @@ -495,13 +495,13 @@ export default function TeaSet() { -You can make this component pure by passing a prop instead of modifying a preexisting variable: +Вы можаце зрабіць гэты кампаненты чыстым, перадаўшы проп замест змянення знешняй пераменнай: ```js function Cup({ guest }) { - return

Tea cup for guest #{guest}

; + return

Кубачак чаю для госця №{guest}

; } export default function TeaSet() { @@ -519,12 +519,12 @@ export default function TeaSet() { -Read **[Keeping Components Pure](/learn/keeping-components-pure)** to learn how to write components as pure, predictable functions. +Азнаёмцеся са старонкай «**[Захоўванне кампанентаў чыстымі](/learn/keeping-components-pure)**» каб даведацца як пісаць кампаненты ў выглядзе чыстых прадказальных функцый. -## What's next? {/*whats-next*/} +## Наступныя крокі {/*whats-next*/} -Head over to [Your First Component](/learn/your-first-component) to start reading this chapter page by page! +Пачніце са старонкі «[Ваш першы кампанент](/learn/your-first-component)» каб пачаць чытанне главы старонка за старонкай! -Or, if you're already familiar with these topics, why not read about [Adding Interactivity](/learn/adding-interactivity)? +Калі дадзеная тэма вам ужо знаёмая, прапануем прачытаць пра [Дадаванне інтэрактыўнасці](/learn/adding-interactivity). From e6a77424a58c04807b4cf6b9f9c71bf4485979cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Sun, 11 Jun 2023 01:08:15 +0300 Subject: [PATCH 2/6] Spell check --- src/content/learn/describing-the-ui.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 4486d65cf..08807a2fd 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -4,7 +4,7 @@ title: Апісанне UI -React — гэта JavaScript бібліятэка для рэндару інтэрфейсу карыстальнка (UI). UI пабудаваны з маленькіх адзінак, такіх як кнопкі, тэксты, выявы. React дазваляе камбінаваць іх у прыдатныя да перавыкарыстання *кампаненты*, якія можна складаць адно ў адно. Ад вэб-сайтаў да мабільных праграм — усё на экране можа быць разбітае на кампаненты. У гэтай главе вы даведаецеся як ствараць і змяняць кампаненты React ці паказваць іх па-рознаму ў залежнасці ад умоў. +React — гэта JavaScript бібліятэка для рэндару інтэрфейсу карыстальніка (UI). UI пабудаваны з маленькіх адзінак, такіх як кнопкі, тэксты, выявы. React дазваляе камбінаваць іх у прыдатныя да перавыкарыстання *кампаненты*, якія можна складаць адно ў адно. Ад вэб-сайтаў да мабільных праграм — усё на экране можа быць разбітае на кампаненты. У гэтай главе вы даведаецеся як ствараць і змяняць кампаненты React ці паказваць іх па-рознаму ў залежнасці ад умоў. @@ -118,7 +118,7 @@ img { margin: 0 10px 10px 0; } ## Напісанне разметкі з дапамогай JSX {/*writing-markup-with-jsx*/} -Кожны кампанент React — функцыя JavaScript, якая можа змяшчаць разметку, якую React будзе рэндарыць у браўзеры. Кампаненты React выкарыстоўваюць пашырэння сінтакісу, якое называецца JSX каб апісваць разметку. Разметка JSX вельмі падобная да HTML, але яна больш строгая і можа паказваць даныя дынамічна. +Кожны кампанент React — функцыя JavaScript, якая можа змяшчаць разметку, якую React будзе рэндарыць у браўзеры. Кампаненты React выкарыстоўваюць пашырэння сінтаксісу, якое называецца JSX каб апісваць разметку. Разметка JSX вельмі падобная да HTML, але яна больш строгая і можа паказваць даныя дынамічна. Не любая HTML разметка будзе працаваць, калі ўставіць яе ў кампанент React: @@ -235,7 +235,7 @@ body > div > div { padding: 20px; } ## Перадача пропсаў у кампанент {/*passing-props-to-a-component*/} -Для камунікацыі між сабой кампаненты React выкарыстоўвацюь *пропсы*. Кожны бацькоўскі кампанент можа перадаваць некаторую інфармацыю даччыным, задаючы ім пропсы. Пропсы падобныя на атрыбуты ў HTML, але ў іх вы можаце перадаваць любыя JavaScrpt значэнні, улічваючы аб’екты, масівы, функцыі ці нават JSX! +Для камунікацыі між сабой кампаненты React выкарыстоўваць *пропсы*. Кожны бацькоўскі кампанент можа перадаваць некаторую інфармацыю даччыным, задаючы ім пропсы. Пропсы падобныя на атрыбуты ў HTML, але ў іх вы можаце перадаваць любыя JavaScrpt значэнні, улічваючы аб’екты, масівы, функцыі ці нават JSX! @@ -366,7 +366,7 @@ export default function PackingList() { Вам можа спатрэбіцца паказваць некалькі аднолькавых кампанентаў, базуючыся на пэўных даных. Вы можаце выкарыстоўваць `filter()` і `map()` з JavaScript у React каб фільтраваць і ператвараць вашыя даныя з масіваў у кампаненты. -Кожны элемент масіва абавязкова мае мець унікальны `key` (ключ). Найчасцей вы можаце выкарыстоўваць ID з базы даных у якасці `key`. Ключы дазваляюць React адсочваць месцазнаходжання кожнага элемента, нават калі спіс змяняецца. +Кожны элемент масіву абавязкова мае мець унікальны `key` (ключ). Найчасцей вы можаце выкарыстоўваць ID з базы даных у якасці `key`. Ключы дазваляюць React адсочваць месцазнаходжання кожнага элемента, нават калі спіс змяняецца. @@ -458,7 +458,7 @@ h2 { font-size: 20px; } -Звярніцеся да старонкі «**[Рэндэрынг спісаў](/learn/rendering-lists)**» каб даведацце як рэндэрыць спісы кампанентаў і як выбіраць ключ. +Звярніцеся да старонкі «**[Рэндэрынг спісаў](/learn/rendering-lists)**» каб даведацца як рэндэрыць спісы кампанентаў і як выбіраць ключ. @@ -467,9 +467,9 @@ h2 { font-size: 20px; } Некаторыя JavaScript функцыі называюцца *чыстымі*. Чыстыя функцыі: * **Займаюцца сваёй справай.** Яны не змяняюць аб’екты ці пераменныя, якія існавалі да выкліку функцыі. -* **Вяртаюць прадказальны вынік.** Пры аднолькавых дадзеных фукнцыя заўсёды вяртае аднолькавы вынік. +* **Вяртаюць прадказальны вынік.** Пры аднолькавых дадзеных функцыя заўсёды вяртае аднолькавы вынік. -Калі вы будзеце строга адпавядаць дадзеным прынцыпам, вы зможаце пазбегнуць шэрагу незразумелых хіб і непрадказальных паводзінаў па меры росту вашай кодавай базы. Вось прыклад кампанента, які не з’яўляецца чыстым: +Калі вы будзеце строга адпавядаць дадзеным прынцыпам, вы зможаце пазбегнуць шэрагу незразумелых хіб і непрадказальных паводзін па меры росту вашай кодавай базы. Вось прыклад кампанента, які не з’яўляецца чыстым: From 9f147d6edca27fc0e990481bfa9ea67b18beaab6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Sun, 11 Jun 2023 01:11:09 +0300 Subject: [PATCH 3/6] reusable --- src/content/learn/describing-the-ui.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 08807a2fd..08c1604fa 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -4,7 +4,7 @@ title: Апісанне UI -React — гэта JavaScript бібліятэка для рэндару інтэрфейсу карыстальніка (UI). UI пабудаваны з маленькіх адзінак, такіх як кнопкі, тэксты, выявы. React дазваляе камбінаваць іх у прыдатныя да перавыкарыстання *кампаненты*, якія можна складаць адно ў адно. Ад вэб-сайтаў да мабільных праграм — усё на экране можа быць разбітае на кампаненты. У гэтай главе вы даведаецеся як ствараць і змяняць кампаненты React ці паказваць іх па-рознаму ў залежнасці ад умоў. +React — гэта JavaScript бібліятэка для рэндару інтэрфейсу карыстальніка (UI). UI пабудаваны з маленькіх адзінак, такіх як кнопкі, тэксты, выявы. React дазваляе камбінаваць іх у прыдатныя да паўторнага выкарыстання *кампаненты*, якія можна складаць адно ў адно. Ад вэб-сайтаў да мабільных праграм — усё на экране можа быць разбітае на кампаненты. У гэтай главе вы даведаецеся як ствараць і змяняць кампаненты React ці паказваць іх па-рознаму ў залежнасці ад умоў. From 0fb30fe282b484c5c04833682ae50774c2660836 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Sun, 11 Jun 2023 10:36:27 +0300 Subject: [PATCH 4/6] Fixes --- src/content/learn/describing-the-ui.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 08c1604fa..da34e8058 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -4,7 +4,7 @@ title: Апісанне UI -React — гэта JavaScript бібліятэка для рэндару інтэрфейсу карыстальніка (UI). UI пабудаваны з маленькіх адзінак, такіх як кнопкі, тэксты, выявы. React дазваляе камбінаваць іх у прыдатныя да паўторнага выкарыстання *кампаненты*, якія можна складаць адно ў адно. Ад вэб-сайтаў да мабільных праграм — усё на экране можа быць разбітае на кампаненты. У гэтай главе вы даведаецеся як ствараць і змяняць кампаненты React ці паказваць іх па-рознаму ў залежнасці ад умоў. +React — гэта JavaScript бібліятэка для рэндэрынгу інтэрфейсу карыстальніка (UI). UI пабудаваны з маленькіх адзінак, такіх як кнопкі, тэксты, відарысы. React дазваляе камбінаваць іх у прыдатныя да паўторнага выкарыстання *кампаненты*, якія можна складаць адзін ў аднаго. Ад вэб-сайтаў да мабільных праграм — усё на экране можа быць разбітае на кампаненты. У гэтай главе вы даведаецеся як ствараць і змяняць кампаненты React ці паказваць іх па-рознаму ў залежнасці ад умоў. @@ -118,7 +118,7 @@ img { margin: 0 10px 10px 0; } ## Напісанне разметкі з дапамогай JSX {/*writing-markup-with-jsx*/} -Кожны кампанент React — функцыя JavaScript, якая можа змяшчаць разметку, якую React будзе рэндарыць у браўзеры. Кампаненты React выкарыстоўваюць пашырэння сінтаксісу, якое называецца JSX каб апісваць разметку. Разметка JSX вельмі падобная да HTML, але яна больш строгая і можа паказваць даныя дынамічна. +Кожны кампанент React — функцыя JavaScript, якая можа змяшчаць разметку, якую React будзе рэндарыць у браўзеры. Кампаненты React выкарыстоўваюць пашырэнне сінтаксісу, якое называецца JSX каб апісваць разметку. Разметка JSX вельмі падобная да HTML, але яна больш строгая і можа паказваць даныя дынамічна. Не любая HTML разметка будзе працаваць, калі ўставіць яе ў кампанент React: @@ -135,8 +135,8 @@ export default function TodoList() { class="photo" >
    -
  • Вынайсі новыя светлафоры -
  • Адрэпітаваць сцэну з фільма +
  • Вынайсці новыя светлафоры +
  • Адрэпетаваць сцэну з фільма
  • Палепшыць тэхналогію спектра
); @@ -235,7 +235,7 @@ body > div > div { padding: 20px; } ## Перадача пропсаў у кампанент {/*passing-props-to-a-component*/} -Для камунікацыі між сабой кампаненты React выкарыстоўваць *пропсы*. Кожны бацькоўскі кампанент можа перадаваць некаторую інфармацыю даччыным, задаючы ім пропсы. Пропсы падобныя на атрыбуты ў HTML, але ў іх вы можаце перадаваць любыя JavaScrpt значэнні, улічваючы аб’екты, масівы, функцыі ці нават JSX! +Для камунікацыі між сабой кампаненты React выкарыстоўваць *пропсы*. Кожны бацькоўскі кампанент можа перадаваць некаторую інфармацыю даччыным, задаючы ім пропсы. Пропсы падобныя на атрыбуты ў HTML, але ў іх вы можаце перадаваць любыя JavaScript значэнні, улічваючы аб’екты, масівы, функцыі ці нават JSX! @@ -316,9 +316,9 @@ export function getImageUrl(person, size = 's') { ## Умоўны рэндэрынг {/*conditional-rendering*/} -Часта можа ўзнікаць патрэба паказваць у кампанентах розныя рэчы ў залежнасці ад пэўных умоў. У React вы можаце пісаць умовы для рэндэрынгу JSX з дапамогай JavaScript, выкарыстоўваючы ўмоўныя аператары `if`, `&&` ці `? :`. +Часта можа ўзнікаць патрэба паказваць у кампанентах розныя рэчы ў залежнасці ад пэўных умоў. У React вы можаце пісаць умовы для рэндэрынгу JSX з дапамогай JavaScript, выкарыстоўваючы ўмоўныя аператары `if`, `&&` або `? :`. -У прыкладзе ніжэй JavaScript аператар `&&` выкарыстоўваецца, каб паказваць птушку: +У прыкладзе ніжэй JavaScript аператар `&&` выкарыстоўваецца, каб паказваць птушку ў залежнасці ад умовы: @@ -358,7 +358,7 @@ export default function PackingList() { -Звярніцеся да старонкі «**[Умоўны рэндэрынг](/learn/conditional-rendering)**» каб даведацца розніцу між рознымі спосабамі ўмоўнага рэндарынгу. +Звярніцеся да старонкі «**[Умоўны рэндэрынг](/learn/conditional-rendering)**» каб даведацца розніцу паміж рознымі спосабамі ўмоўнага рэндарынгу. @@ -366,7 +366,7 @@ export default function PackingList() { Вам можа спатрэбіцца паказваць некалькі аднолькавых кампанентаў, базуючыся на пэўных даных. Вы можаце выкарыстоўваць `filter()` і `map()` з JavaScript у React каб фільтраваць і ператвараць вашыя даныя з масіваў у кампаненты. -Кожны элемент масіву абавязкова мае мець унікальны `key` (ключ). Найчасцей вы можаце выкарыстоўваць ID з базы даных у якасці `key`. Ключы дазваляюць React адсочваць месцазнаходжання кожнага элемента, нават калі спіс змяняецца. +Кожны элемент масіву абавязкова мае мець унікальны `key` (ключ). Найчасцей вы можаце выкарыстоўваць ID з базы даных у якасці `key`. Ключы дазваляюць React адсочваць месцазнаходжанне кожнага элемента, нават калі спіс змяняецца. @@ -426,7 +426,7 @@ export const people = [{ id: 4, name: 'Субрахманьян Чандрасекар', profession: 'астрафізік', - accomplishment: 'разлікамі масы зоркі белага карліка', + accomplishment: 'разлікамі масы белых карлікаў', imageId: 'lrWQx8l' }]; ``` @@ -495,7 +495,7 @@ export default function TeaSet() { -Вы можаце зрабіць гэты кампаненты чыстым, перадаўшы проп замест змянення знешняй пераменнай: +Вы можаце зрабіць гэты кампаненты чыстым, перадаўшы пропс замест змянення знешняй пераменнай: From f487a3a427f2e0f05a11983147419a3aa759ff76 Mon Sep 17 00:00:00 2001 From: Dzmitry Zubialevich Date: Sun, 11 Jun 2023 13:28:04 +0200 Subject: [PATCH 5/6] Update text style and some error fixes --- src/content/learn/describing-the-ui.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index da34e8058..5fca7e832 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -4,7 +4,7 @@ title: Апісанне UI -React — гэта JavaScript бібліятэка для рэндэрынгу інтэрфейсу карыстальніка (UI). UI пабудаваны з маленькіх адзінак, такіх як кнопкі, тэксты, відарысы. React дазваляе камбінаваць іх у прыдатныя да паўторнага выкарыстання *кампаненты*, якія можна складаць адзін ў аднаго. Ад вэб-сайтаў да мабільных праграм — усё на экране можа быць разбітае на кампаненты. У гэтай главе вы даведаецеся як ствараць і змяняць кампаненты React ці паказваць іх па-рознаму ў залежнасці ад умоў. +React — гэта JavaScript бібліятэка для рэндэрынгу інтэрфейсу карыстальніка (UI). UI пабудаваны з маленькіх адзінак, такіх як кнопкі, тэксты, відарысы. React дазваляе камбінаваць іх у прыдатныя да паўторнага выкарыстання *кампаненты*, якія можна ўкладаць адзін у аднаго. Ад вэб-сайтаў да мабільных праграм — усё на экране можа быць разбітае на кампаненты. У гэтай главе вы даведаецеся як ствараць і змяняць кампаненты React, а таксама як паказваць іх па-рознаму ў залежнасці ад умоў. @@ -23,7 +23,7 @@ React — гэта JavaScript бібліятэка для рэндэрынгу ## Ваш першы кампанент {/*your-first-component*/} -Праграмы React пабудаваныя з ізаляваных кавалкаў UI, якія называюцца *кампанентамі*. Кампанент React — гэта функцыя JavaScript, у якую вы можаце дадаць разметку. Кампанент можа быць маленькім, як кнопка, або вялікім, як цэлая старонка. Вось, напрыклад, кампанент `Gallery`, які рэндарыць тры кампаненты `Profile`: +Праграмы React пабудаваны з ізаляваных кавалкаў UI, якія называюцца *кампанентамі*. Кампанент React — гэта функцыя JavaScript, у якую вы можаце дадаць разметку. Кампанент можа быць маленькім, як кнопка, або вялікім, як цэлая старонка. Вось, напрыклад, кампанент `Gallery`, які рэндарыць тры кампаненты `Profile`: @@ -135,9 +135,9 @@ export default function TodoList() { class="photo" >
    -
  • Вынайсці новыя светлафоры -
  • Адрэпетаваць сцэну з фільма -
  • Палепшыць тэхналогію спектра +
  • Вынайсці новыя святлафоры
    • +
  • Адрэпетаваць сцэну з фільма
    • +
  • Палепшыць тэхналогію спектра
); } @@ -164,8 +164,8 @@ export default function TodoList() { className="photo" />
    -
  • Вынайсі новыя светлафоры
    • -
  • Адрэпітаваць сцэну з фільма
    • +
  • Вынайсці новыя святлафоры
    • +
  • Адрэпетаваць сцэну з фільма
  • Палепшыць тэхналогію спектра
@@ -187,7 +187,7 @@ img { height: 90px; } ## JavaScript у JSX з дапамогай фігурных дужак {/*javascript-in-jsx-with-curly-braces*/} -JSX дазваляе пісаць разметку, падобную да HTML унутры файлаў JavaScript, тым самым захоўваючы логіку і змесціва побач. Часам можа спатрэбіцца дадаць крыху логікі JavaScript ці звярнуцца да дынамічных даных знутры разметкі. У падобнай сітуацыі можна выкарыстоўваць фігурныя дужкі ўнутры JSX каб «адчыніць акенца» ў JavaScript: +JSX дазваляе пісаць разметку, падобную да HTML унутры файлаў JavaScript, тым самым захоўваючы логіку і змесціва побач. Часам можа спатрэбіцца дадаць крыху логікі JavaScript або звярнуцца да дынамічных даных знутры разметкі. У падобнай сітуацыі можна выкарыстоўваць фігурныя дужкі ўнутры JSX каб «адчыніць акенца» ў JavaScript: @@ -210,7 +210,7 @@ export default function TodoList() { alt="Gregorio Y. Zara" />
    -
  • Палепшыць відэа-тэлефон
    • +
  • Палепшыць відэатэлефон
  • Падрыхтаваць лекцыі па аэранаўтыцы
  • Папрацаваць над рухавіком на спірце
@@ -235,7 +235,7 @@ body > div > div { padding: 20px; } ## Перадача пропсаў у кампанент {/*passing-props-to-a-component*/} -Для камунікацыі між сабой кампаненты React выкарыстоўваць *пропсы*. Кожны бацькоўскі кампанент можа перадаваць некаторую інфармацыю даччыным, задаючы ім пропсы. Пропсы падобныя на атрыбуты ў HTML, але ў іх вы можаце перадаваць любыя JavaScript значэнні, улічваючы аб’екты, масівы, функцыі ці нават JSX! +Для камунікацыі між сабой кампаненты React выкарыстоўваць *пропсы*. Кожны бацькоўскі кампанент можа перадаваць некаторую інфармацыю даччыным, задаючы ім пропсы. Пропсы падобныя на атрыбуты ў HTML, але ў іх вы можаце перадаваць любыя JavaScript значэнні, уключаючы аб’екты, масівы, функцыі і нават JSX! @@ -248,7 +248,7 @@ export default function Profile() { @@ -466,8 +466,8 @@ h2 { font-size: 20px; } Некаторыя JavaScript функцыі называюцца *чыстымі*. Чыстыя функцыі: -* **Займаюцца сваёй справай.** Яны не змяняюць аб’екты ці пераменныя, якія існавалі да выкліку функцыі. -* **Вяртаюць прадказальны вынік.** Пры аднолькавых дадзеных функцыя заўсёды вяртае аднолькавы вынік. +* **Займаюцца сваёй справай.** Яны не змяняюць аб’екты або пераменныя, якія існавалі да выкліку функцыі. +* **Вяртаюць прадказальны вынік.** Пры аднолькавых уваходных даных чыстая функцыя заўсёды вяртае аднолькавы вынік. Калі вы будзеце строга адпавядаць дадзеным прынцыпам, вы зможаце пазбегнуць шэрагу незразумелых хіб і непрадказальных паводзін па меры росту вашай кодавай базы. Вось прыклад кампанента, які не з’яўляецца чыстым: From ddb1661647dd4f299f36bbd0d9b9d6be21980302 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliaksiej=20Razuma=C5=AD?= Date: Sun, 11 Jun 2023 17:37:07 +0300 Subject: [PATCH 6/6] =?UTF-8?q?Reverted=20adding=20``=20and=20fixed?= =?UTF-8?q?=20=C2=AB=D1=80=D1=8D=D0=BD=D0=B4=D0=B0=D1=80=C2=BB/=C2=AB?= =?UTF-8?q?=D1=80=D1=8D=D0=BD=D0=B4=D1=8D=D1=80=C2=BB=20issue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/learn/describing-the-ui.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 5fca7e832..9d93f397c 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -15,15 +15,15 @@ React — гэта JavaScript бібліятэка для рэндэрынгу * [Як дадаць разметку ў JavaScript з дапамогай JSX](/learn/writing-markup-with-jsx) * [Як выкарыстоўваць магчымасці JavaScript з дапамогай фігурных дужак у разметцы JSX](/learn/javascript-in-jsx-with-curly-braces) * [Як змяняць канфігурацыю кампанента з дапамогай пропсаў](/learn/passing-props-to-a-component) -* [Як рэндарыць кампаненты ў залежнасці ад умоў](/learn/conditional-rendering) -* [Як рэндарыць некалькі кампанентаў за раз](/learn/rendering-lists) +* [Як рэндэрыць кампаненты ў залежнасці ад умоў](/learn/conditional-rendering) +* [Як рэндэрыць некалькі кампанентаў за раз](/learn/rendering-lists) * [Як пазбягаць памылак, захоўваючы кампанент чыстымі](/learn/keeping-components-pure) ## Ваш першы кампанент {/*your-first-component*/} -Праграмы React пабудаваны з ізаляваных кавалкаў UI, якія называюцца *кампанентамі*. Кампанент React — гэта функцыя JavaScript, у якую вы можаце дадаць разметку. Кампанент можа быць маленькім, як кнопка, або вялікім, як цэлая старонка. Вось, напрыклад, кампанент `Gallery`, які рэндарыць тры кампаненты `Profile`: +Праграмы React пабудаваны з ізаляваных кавалкаў UI, якія называюцца *кампанентамі*. Кампанент React — гэта функцыя JavaScript, у якую вы можаце дадаць разметку. Кампанент можа быць маленькім, як кнопка, або вялікім, як цэлая старонка. Вось, напрыклад, кампанент `Gallery`, які рэндэрыць тры кампаненты `Profile`: @@ -118,7 +118,7 @@ img { margin: 0 10px 10px 0; } ## Напісанне разметкі з дапамогай JSX {/*writing-markup-with-jsx*/} -Кожны кампанент React — функцыя JavaScript, якая можа змяшчаць разметку, якую React будзе рэндарыць у браўзеры. Кампаненты React выкарыстоўваюць пашырэнне сінтаксісу, якое называецца JSX каб апісваць разметку. Разметка JSX вельмі падобная да HTML, але яна больш строгая і можа паказваць даныя дынамічна. +Кожны кампанент React — функцыя JavaScript, якая можа змяшчаць разметку, якую React будзе рэндэрыць у браўзеры. Кампаненты React выкарыстоўваюць пашырэнне сінтаксісу, якое называецца JSX каб апісваць разметку. Разметка JSX вельмі падобная да HTML, але яна больш строгая і можа паказваць даныя дынамічна. Не любая HTML разметка будзе працаваць, калі ўставіць яе ў кампанент React: @@ -135,9 +135,9 @@ export default function TodoList() { class="photo" >
    -
  • Вынайсці новыя святлафоры
    • -
  • Адрэпетаваць сцэну з фільма
    • -
  • Палепшыць тэхналогію спектра
    • +
  • Вынайсці новыя святлафоры +
  • Адрэпетаваць сцэну з фільма +
  • Палепшыць тэхналогію спектра
); } @@ -358,7 +358,7 @@ export default function PackingList() { -Звярніцеся да старонкі «**[Умоўны рэндэрынг](/learn/conditional-rendering)**» каб даведацца розніцу паміж рознымі спосабамі ўмоўнага рэндарынгу. +Звярніцеся да старонкі «**[Умоўны рэндэрынг](/learn/conditional-rendering)**» каб даведацца розніцу паміж рознымі спосабамі ўмоўнага рэндэрынгу.