diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 6df4c0475..9d93f397c 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, але ў іх вы можаце перадаваць любыя JavaScript значэнні, уключаючы аб’екты, масівы, функцыі і нават JSX! @@ -248,7 +248,7 @@ export default function Profile() { @@ -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).