diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index 501c9f62..39d5620c 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -1,30 +1,30 @@ --- -title: Adding Interactivity +title: Даданне інтэрактыўнасці --- -Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called *state.* You can add state to any component, and update it as needed. In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time. +Некаторыя рэчы на экране абнаўляюцца ў адказ на ўвод карыстальніка. Напрыклад, націснуўшы любы відарыс у галерэі відарысаў вы пераключаеце актыўны відарыс. У React даныя, якія змяняюцца з часам, называюцца *станам.* Вы можаце дадаць стан любому кампаненту і абнавіць яго калі вам трэба. У гэтай главе вы даведаецеся, як пісаць кампаненты, якія апрацоўваюць узаемадзеянне, абнаўляюць свой стан і змяняюць свой выгляд з цягам часу. -* [How to handle user-initiated events](/learn/responding-to-events) -* [How to make components "remember" information with state](/learn/state-a-components-memory) -* [How React updates the UI in two phases](/learn/render-and-commit) -* [Why state doesn't update right after you change it](/learn/state-as-a-snapshot) -* [How to queue multiple state updates](/learn/queueing-a-series-of-state-updates) -* [How to update an object in state](/learn/updating-objects-in-state) -* [How to update an array in state](/learn/updating-arrays-in-state) +* [Як апрацоўваць падзеі, ініцыяваныя карыстальнікам](/learn/responding-to-events) +* [Як прымусіць кампаненты «запамінаць» інфармацыю з дапамогай стану](/learn/state-a-components-memory) +* [Як React абнаўляе карыстальніцкі інтэрфейс у два этапы](/learn/render-and-commit) +* [Чаму стан не абнаўляецца адразу ж пасля яго змены](/learn/state-as-a-snapshot) +* [Як паставіць у чаргу некалькі абнаўленняў стану](/learn/queueing-a-series-of-state-updates) +* [Як абнавіць аб'ект, які захаваны ў стане](/learn/updating-objects-in-state) +* [Як абнавіць масіў, які захаваны ў стане](/learn/updating-arrays-in-state) -## Responding to events {/*responding-to-events*/} +## Рэагаванне на падзеі {/*responding-to-events*/} -React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on. +React дазваляе дадаваць *апрацоўшчыкі падзей* у ваш JSX. Апрацоўшчыкі падзей — гэта вашыя ўласныя функцыі, якія будуць запускацца ў адказ на ўзаемадзеянне карыстальніка, напрыклад, націсканне кнопак, навядзенне курсора на элементы, атрыманне фокусу на ўводах формы і гэтак далей. -Built-in components like ` ); @@ -68,22 +68,22 @@ button { margin-right: 10px; } -Read **[Responding to Events](/learn/responding-to-events)** to learn how to add event handlers. +Звярніцеся да старонкі «**[Рэагаванне на падзеі](/learn/responding-to-events)**» каб даведацца як дадаваць апрацоўшчыкі падзей. -## State: a component's memory {/*state-a-components-memory*/} +## Стан: памяць кампанента {/*state-a-components-memory*/} -Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state.* +У выніку ўзаемадзеяння кампаненты часта павінны змяніць тое, што знаходзіцца на экране. Увод у форму павінен абнавіць поле ўводу, націсканне кнопкі «далей» на каруселі відарысаў павінна змяніць відарыс, які адлюстроўваецца, націсканне кнопкі «купіць» кладзе прадукт у кошык. Кампанентам трэба «запамінаць» рознае: бягучае ўваходнае значэнне, бягучы відарыс, кошык для пакупак. У React такая спецыфічная для кампанентаў памяць называецца *стан.* -You can add state to a component with a [`useState`](/reference/react/useState) Hook. *Hooks* are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it. +Вы можаце дадаць стан да кампанента з дапамогай хука [`useState`](/reference/react/useState). *Хукі* — гэта такія спецыяльныя функцыі, што дазваляюць вашым кампанентам выкарыстоўваць функцыі React (стан — адна з такіх функцый). Хук `useState` дазваляе аб'явіць пераменную стану. Ён прымае пачатковае значэнне стану і вяртае пару значэнняў: бягучае значэнне стану і функцыю для задавання стану, якая дазваляе абнаўляць яго значэнне. ```js const [index, setIndex] = useState(0); const [showMore, setShowMore] = useState(false); ``` -Here is how an image gallery uses and updates state on click: +Вось як галерэя відарысаў выкарыстоўвае і абнаўляе стан пры націсканні: @@ -112,17 +112,17 @@ export default function Gallery() { return ( <>

- {sculpture.name} - by {sculpture.artist} + «{sculpture.name}» + {sculpture.artist}

- ({index + 1} of {sculptureList.length}) + ({index + 1} з {sculptureList.length})

{showMore &&

{sculpture.description}

} -Read **[State: A Component's Memory](/learn/state-a-components-memory)** to learn how to remember a value and update it on interaction. +Звярніцеся да старонкі «**[Стан: памяць кампанента](/learn/state-a-components-memory)**» каб даведацца як запамінаць значэнне і абнаўляць яго пры ўзаемадзеянні. -## Render and commit {/*render-and-commit*/} +## Рэндэрынг і фіксацыя {/*render-and-commit*/} -Before your components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior. +Перш чым вашыя кампаненты будуць адлюстраваны на экране, React мусіць адрэндэрыць іх. Разуменне этапаў гэтага працэсу дапаможа вам зразумець, як выконваецца ваш код, і растлумачыць яго паводзіны. -Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps: +Уявіце, што вашы кампаненты — гэта кухары на кухні, якія збіраюць смачныя стравы з інгрэдыентаў. У гэтым сцэнарыі React — гэта афіцыянт, які запісвае запыты ад кліентаў і пасля прыносіць ім іх заказы. Гэты працэс запыту і «падачы» карыстальніцкага інтэрфейсу складаецца з трох этапаў: -1. **Triggering** a render (delivering the diner's order to the kitchen) -2. **Rendering** the component (preparing the order in the kitchen) -3. **Committing** to the DOM (placing the order on the table) +1. **Ініцыяванне** рэндэру (дастаўка заказу на кухню) +2. **Рэндэрынг** кампанента (гатаванне заказу на кухні) +3. **Фіксацыя** ў DOM (падаванне заказу на стол) - - - + + + -Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of a UI update. +Звярніцеся да старонкі «**[Адлюстраванне і фіксацыя](/learn/render-and-commit)**» каб даведацца як працуе жыццёвы цыкл абнаўлення карыстальніцкага інтэрфейсу. -## State as a snapshot {/*state-as-a-snapshot*/} +## Стан як хуткі здымак {/*state-as-a-snapshot*/} -Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first! +У адрозненне ад звычайных пераменных у JavaScript, стан у React паводзіць сябе больш як хуткі здымак (snapshot). Заданне новага значэння стану не змяняе саму пераменную стану, якая ў вас ужо ёсць, а запускае паўторны рэндэрынг. Гэта можа здзівіць спачатку! ```js console.log(count); // 0 -setCount(count + 1); // Request a re-render with 1 -console.log(count); // Still 0! +setCount(count + 1); // Запытвае паўторны рэндэрынг са значэннем 1 +console.log(count); // Усё яшчэ 0! ``` -This behavior help you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later? +Такія паводзіны дапамагаюць пазбегнуць няўлоўных памылак. Вось невялікая праграма-чат. Паспрабуйце здагадацца, што адбудзецца, калі вы спачатку націснеце «Адправіць», а *затым* зменіце атрымальніка на Боба. Чыё імя з'явіцца ў акне `alert` праз пяць секунд? @@ -273,33 +273,33 @@ This behavior help you avoid subtle bugs. Here is a little chat app. Try to gues import { useState } from 'react'; export default function Form() { - const [to, setTo] = useState('Alice'); - const [message, setMessage] = useState('Hello'); + const [to, setTo] = useState('Аліса'); + const [message, setMessage] = useState('Вітаю'); function handleSubmit(e) { e.preventDefault(); setTimeout(() => { - alert(`You said ${message} to ${to}`); + alert(`Вы сказалі ${to}: ${message}`); }, 5000); } return (