My First Component
+Мой першы кампанент
-
-
- Components: UI Building Blocks -
- Defining a Component -
- Using a Component +
- Кампаненты: будаўнічыя блокі UI +
- Аб’яўленне кампанента +
- Выкарыстанне кампанента
`, and an (abbreviated) table of contents as an ordered list ``. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web.
+Дадзеная разметка паказвае гэты артыкул ``, яго загаловак `` і (скарочаны) змест як упарадкаваны спіс ``. Такая разметка ў спалучэнні з CSS для стылізаціі і JavaScript для дадавання інтэрактыўнасці хаваецца ў кожнай бакавой панэлі, аватары, мадальным меню, выпадаючым спісе — у кожнай частцы карыстальніцкага інтэрфейсу, якую вы бачыце ў інтэрнэце.
-React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a ``, ``, etc.
+React дазваляе камбінаваць разметку, CSS і JavaScript у карыстальніцкія «кампаненты» — **прыдатныя да паўторнага выкарыстання элементы інтэрфейсу для вашай праграмы.** Код зместу вышэй, можна пераўтварыць у кампанент ``, `` і г.д.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Гэтак жа, як і HTML тэгі, кампаненты можна камбінаваць, упарадкоўваць і ўкладаць адзін у аднаго для стварэння цэлых старонак. Напрыклад, старонка дакументацыі, якую вы зараз чытаеце, складаецца з кампанентаў React:
```js
@@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
@@ -64,7 +64,7 @@ export default function Profile() {
return (
)
}
@@ -76,51 +76,51 @@ img { height: 200px; }
-And here's how to build a component:
+А вось як стварыць кампанент:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Крок 1: Экспартаваць кампанент {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Прэфікс `export default` — гэта [стандартны сінтаксіс JavaScript](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (не з'яўляецца спецыфікай React). Ён дазваляе пазначыць галоўную функцыю ў файле, каб потым яе можна было імпартаваць з іншых файлаў. (Больш падрабязна пра імпартаванне можна пачытаць у раздзеле «[Імпартаванне і экспартаванне кампанентаў](/learn/importing-and-exporting-components)»!)
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Крок 2: Аб’явіць функцыю {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+З дапамогай `function Profile() { }` вы аб’яўляеце JavaScript функцыю з назвай `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+Кампаненты React — гэта звычайныя JavaScript функцыі, але **іх назвы павінны пачынацца з вялікай літары**, інакш яны не будуць працаваць!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Крок 3: Дадаць разметку {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Кампанент вяртае тэг `![]()
` з атрыбутамі `src` і `alt`. Тэг `![]()
` выглядае як HTML, але насамрэч пад капотам гэта JavaScript! Гэты сінтаксіс называецца [JSX](/learn/writing-markup-with-jsx), і ён дазваляе вам устаўляць разметку ў JavaScript.
-Return statements can be written all on one line, as in this component:
+Аператар `return` можа быць запісаны ў адзін радок, як у гэтым кампаненце:
```js
-return 
;
+return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Але калі ўся ваша разметка не знаходзіцца ў тым жа радку, што і ключавое слова `return`, то вы павінны заключыць яе ў дужкі:
```js
return (
-
+
);
```
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Без круглых дужак любы код у радках пасля `return` [будзе ігнаравацца](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi) !
-## Using a component {/*using-a-component*/}
+## Выкарыстанне кампанента {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Цяпер, калі вы аб’явілі свой кампанент `Profile`, вы можаце ўкладаць яго ў іншыя кампаненты. Напрыклад, вы можаце экспартаваць кампанент `Gallery`, які выкарыстоўвае некалькі кампанентаў `Profile`:
@@ -129,7 +129,7 @@ function Profile() {
return (
);
}
@@ -137,7 +137,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Выбітныя навукоўцы
-### What the browser sees {/*what-the-browser-sees*/}
+### Што бачыць браўзер {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Звярніце ўвагу на розніцу ў рэгістры:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` пішацца ў ніжнім рэгістры, таму React ведае, што мы спасылаемся на тэг HTML.
+* Тэг `![]()
`. In the end, this is what the browser sees:
+А `Profile` змяшчае яшчэ нават больш HTML: `![]()
`. У рэшце, вось што бачыць браўзер:
```html
- Amazing scientists
-
-
-
+ Выбітныя вучоныя
+
+
+
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Укладанне і арганізацыя кампанентаў {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Кампаненты — гэта звычайныя JavaScript функцыі, таму вы можаце мець некалькі кампанентаў у адным файле. Гэта зручна, калі кампаненты адносна невялікія або цесна звязаны адзін з адным. Калі файл становіцца перапоўненым, вы заўсёды можаце перанесці `Profile` у асобны файл. Хутка вы даведаецеся, як гэта зрабіць на [старонцы пра імпартаванне.](/learn/importing-and-exporting-components)
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Паколькі кампаненты `Profile` рэндэрыцца ўнутры `Gallery` (нават некалькі разоў!), мы можам сказаць, што `Gallery` з'яўляецца **бацькоўскім кампанентам**, які рэндэрыць кожны кампанент `Profile` як «даччыны». Гэта частка магіі React: вы можаце аб’явіць кампанент адзін раз, а потым выкарыстоўваць яго ў любой колькасці месцаў і колькі хочаце разоў.
-Components can render other components, but **you must never nest their definitions:**
+Кампаненты могуць рэндэрыць іншыя кампаненты, але **вы ніколі не павінны ўкладаць іх аб’яўленні:**
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Ніколі не аб’яўляйце кампанент унутры іншага кампанента!
function Profile() {
// ...
}
@@ -190,47 +190,47 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Код вышэй [вельмі павольны і выклікае памылкі.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Замест гэтага аб’яўляйце кожны кампанент на верхнім узроўні:
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Аб’яўляйце кампаненты на верхнім узроўні
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Калі даччынаму кампаненту патрэбны некаторыя даныя ад бацькоўскага, [перадайце іх праз пропсы](/learn/passing-props-to-a-component) замест укладзеных аб’яўленняў.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Кампаненты паўсюль {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Ваша React праграма пачынаецца з «каранёвага» кампанента. Звычайна ён ствараецца аўтаматычна, пры стварэнні новага праекта. Напрыклад, калі вы выкарыстоўваеце [CodeSandbox](https://codesandbox.io/) або [Create React App](https://create-react-app.dev/), каранёвы кампанент будзе аб’яўлены ў файле `src/App.js`. Калі вы выкарыстоўваеце фрэймворк [Next.js](https://nextjs.org/), каранёвы кампанент аб’яўляецца ў файле `pages/index.js`. У прыкладах вышэй вы экспартавалі каранёвыя кампаненты.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+Большасць React праграм выкарыстоўваюць кампаненты паўсюль. Гэта азначае, што вы будзеце выкарыстоўваць кампаненты не толькі для элементаў, што паўторна выкарыстоўваюцца, такіх як кнопкі, але і для буйнейшых элементаў: бакавых панэляў, спісаў і, у рэшце, цэлых старонак! Кампаненты — гэта зручны спосаб арганізаваць код карыстальніцкага інтэрфейсу і разметку, нават калі некаторыя з іх выкарыстоўваюцца толькі адзін раз.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+[Фрэймворкі на базе React](/learn/start-a-new-react-project) пайшлі яшчэ далей. Замест таго, каб выкарыстоўваць пусты HTML файл і дазволіць React «узяць на сябе» кіраванне старонкай з дапамогай JavaScript, яны *таксама* аўтаматычна ствараюць HTML з вашых кампанентаў React. Гэта дазваляе вашай праграме паказваць частку змесціва да таго, як JavaScript код загрузіцца.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Тым не менш, многія вэб-сайты выкарыстоўваюць React толькі для [дадавання інтэрактыўнасці да існуючых HTML старонак.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Яны маюць шмат каранёвых кампанентаў замест аднаго для ўсёй старонкі. Вы можаце браць ад React столькі, колькі вам трэба.
-You've just gotten your first taste of React! Let's recap some key points.
+Вы толькі што пазнаёміліся з React! Давайце паўторым некаторыя ключавыя моманты.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React дазваляе вам ствараць кампаненты — **прыдатныя да паўторнага выкарыстання элементы карыстальніцкага інтэрфейсу для вашай праграмы.**
+* У React праграме кожны элемент UI з'яўляецца кампанентам.
+* Кампаненты React з'яўляюцца звычайнымі JavaScript функцыямі, за выключэннем таго, што:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Іх назвы заўсёды пачынаюцца з вялікай літары.
+ 2. Яны вяртаюць JSX разметку.
@@ -238,9 +238,9 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Экспартуйце кампанент {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Гэты прыклад не працуе, таму што каранёвы кампанент не экспартуецца:
@@ -249,7 +249,7 @@ function Profile() {
return (
);
}
@@ -261,11 +261,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Паспрабуйце выправіць яго самастойна, перш чым глядзець у рашэнне!
-Add `export default` before the function definition like so:
+Дадайце `export default` перад аб’яўленнем функцыі наступным чынам:
@@ -274,7 +274,7 @@ export default function Profile() {
return (
);
}
@@ -286,17 +286,17 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Вы можаце задацца пытаннем, чаму напісання толькі `export` недастаткова, каб выправіць гэты прыклад. Вы можаце даведацца пра розніцу паміж `export` і `export default` у раздзеле [Імпартаванне і экспартаванне кампанентаў.](/learn/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Выправіце аператар вяртання {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+З гэтым аператарам `return` штосьці не так. Вы можаце яго выправіць?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Пры спробе выправіць аператар, вы можаце атрымаць памылку «Unexpected token». У такім выпадку пераканайцеся, што кропка з коскай з'яўляецца *пасля* закрывальнай дужкі. Пакінуўшы кропку з коскай унутры `return ( )`, вы атрымаеце памылку.
@@ -306,7 +306,7 @@ You may get an "Unexpected token" error while trying to fix this. In that case,
```js
export default function Profile() {
return
- 
;
+ ;
}
```
@@ -318,13 +318,13 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Вы можаце выправіць гэты кампанент, запісаўшы аператар `return` у адзін радок, вось так:
```js
export default function Profile() {
- return ;
+ return ;
}
```
@@ -334,7 +334,7 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Або заключыўшы вернутую разметку JSX у дужкі, якія адкрываюцца адразу пасля аператара `return`:
@@ -343,7 +343,7 @@ export default function Profile() {
return (
);
}
@@ -357,9 +357,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Знайдзіце памылку {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Нешта не так з тым, як дэкларуецца і выкарыстоўваецца кампанент `Profile`. Ці можаце вы знайсці памылку? (Паспрабуйце ўспомніць, як React адрознівае кампаненты ад звычайных HTML тэгаў!)
@@ -368,7 +368,7 @@ function profile() {
return (
);
}
@@ -376,7 +376,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Выбітныя вучоныя
-React component names must start with a capital letter.
+Назвы кампанентаў React павінны пачынацца з вялікай літары.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -404,7 +404,7 @@ function Profile() {
return (
);
}
@@ -412,7 +412,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Выбітныя вучоныя
-#### Your own component {/*your-own-component*/}
+#### Ваш уласны кампанент {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Напішыце кампанент з нуля. Вы можаце даць яму любую дапушчальную назву і вярнуць любую разметку. Калі ў вас скончыліся ідэі, вы можаце напісаць кампанент `Congratulations`, які паказвае `Малайчына!
`. Не забудзьцеся экспартаваць свой кампанент!
```js
-// Write your component below!
+// Напішыце свой кампанент ніжэй!
```
@@ -449,7 +449,7 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
export default function Congratulations() {
return (
- Good job!
+ Малайчына!
);
}
```
` і (скарочаны) змест як упарадкаваны спіс ``. Такая разметка ў спалучэнні з CSS для стылізаціі і JavaScript для дадавання інтэрактыўнасці хаваецца ў кожнай бакавой панэлі, аватары, мадальным меню, выпадаючым спісе — у кожнай частцы карыстальніцкага інтэрфейсу, якую вы бачыце ў інтэрнэце.
-React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a ``, ``, etc.
+React дазваляе камбінаваць разметку, CSS і JavaScript у карыстальніцкія «кампаненты» — **прыдатныя да паўторнага выкарыстання элементы інтэрфейсу для вашай праграмы.** Код зместу вышэй, можна пераўтварыць у кампанент ``, `` і г.д.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Гэтак жа, як і HTML тэгі, кампаненты можна камбінаваць, упарадкоўваць і ўкладаць адзін у аднаго для стварэння цэлых старонак. Напрыклад, старонка дакументацыі, якую вы зараз чытаеце, складаецца з кампанентаў React:
```js
@@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
@@ -64,7 +64,7 @@ export default function Profile() {
return (
)
}
@@ -76,51 +76,51 @@ img { height: 200px; }
-And here's how to build a component:
+А вось як стварыць кампанент:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Крок 1: Экспартаваць кампанент {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Прэфікс `export default` — гэта [стандартны сінтаксіс JavaScript](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (не з'яўляецца спецыфікай React). Ён дазваляе пазначыць галоўную функцыю ў файле, каб потым яе можна было імпартаваць з іншых файлаў. (Больш падрабязна пра імпартаванне можна пачытаць у раздзеле «[Імпартаванне і экспартаванне кампанентаў](/learn/importing-and-exporting-components)»!)
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Крок 2: Аб’явіць функцыю {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+З дапамогай `function Profile() { }` вы аб’яўляеце JavaScript функцыю з назвай `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+Кампаненты React — гэта звычайныя JavaScript функцыі, але **іх назвы павінны пачынацца з вялікай літары**, інакш яны не будуць працаваць!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Крок 3: Дадаць разметку {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Кампанент вяртае тэг `![]()
` з атрыбутамі `src` і `alt`. Тэг `![]()
` выглядае як HTML, але насамрэч пад капотам гэта JavaScript! Гэты сінтаксіс называецца [JSX](/learn/writing-markup-with-jsx), і ён дазваляе вам устаўляць разметку ў JavaScript.
-Return statements can be written all on one line, as in this component:
+Аператар `return` можа быць запісаны ў адзін радок, як у гэтым кампаненце:
```js
-return ;
+return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Але калі ўся ваша разметка не знаходзіцца ў тым жа радку, што і ключавое слова `return`, то вы павінны заключыць яе ў дужкі:
```js
return (
-
+
);
```
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Без круглых дужак любы код у радках пасля `return` [будзе ігнаравацца](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi) !
-## Using a component {/*using-a-component*/}
+## Выкарыстанне кампанента {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Цяпер, калі вы аб’явілі свой кампанент `Profile`, вы можаце ўкладаць яго ў іншыя кампаненты. Напрыклад, вы можаце экспартаваць кампанент `Gallery`, які выкарыстоўвае некалькі кампанентаў `Profile`:
@@ -129,7 +129,7 @@ function Profile() {
return (
);
}
@@ -137,7 +137,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Выбітныя навукоўцы
-### What the browser sees {/*what-the-browser-sees*/}
+### Што бачыць браўзер {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Звярніце ўвагу на розніцу ў рэгістры:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` пішацца ў ніжнім рэгістры, таму React ведае, што мы спасылаемся на тэг HTML.
+* Тэг `![]()
`. In the end, this is what the browser sees:
+А `Profile` змяшчае яшчэ нават больш HTML: `![]()
`. У рэшце, вось што бачыць браўзер:
```html
- Amazing scientists
-
-
-
+ Выбітныя вучоныя
+
+
+
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Укладанне і арганізацыя кампанентаў {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Кампаненты — гэта звычайныя JavaScript функцыі, таму вы можаце мець некалькі кампанентаў у адным файле. Гэта зручна, калі кампаненты адносна невялікія або цесна звязаны адзін з адным. Калі файл становіцца перапоўненым, вы заўсёды можаце перанесці `Profile` у асобны файл. Хутка вы даведаецеся, як гэта зрабіць на [старонцы пра імпартаванне.](/learn/importing-and-exporting-components)
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Паколькі кампаненты `Profile` рэндэрыцца ўнутры `Gallery` (нават некалькі разоў!), мы можам сказаць, што `Gallery` з'яўляецца **бацькоўскім кампанентам**, які рэндэрыць кожны кампанент `Profile` як «даччыны». Гэта частка магіі React: вы можаце аб’явіць кампанент адзін раз, а потым выкарыстоўваць яго ў любой колькасці месцаў і колькі хочаце разоў.
-Components can render other components, but **you must never nest their definitions:**
+Кампаненты могуць рэндэрыць іншыя кампаненты, але **вы ніколі не павінны ўкладаць іх аб’яўленні:**
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Ніколі не аб’яўляйце кампанент унутры іншага кампанента!
function Profile() {
// ...
}
@@ -190,47 +190,47 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Код вышэй [вельмі павольны і выклікае памылкі.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Замест гэтага аб’яўляйце кожны кампанент на верхнім узроўні:
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Аб’яўляйце кампаненты на верхнім узроўні
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Калі даччынаму кампаненту патрэбны некаторыя даныя ад бацькоўскага, [перадайце іх праз пропсы](/learn/passing-props-to-a-component) замест укладзеных аб’яўленняў.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Кампаненты паўсюль {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Ваша React праграма пачынаецца з «каранёвага» кампанента. Звычайна ён ствараецца аўтаматычна, пры стварэнні новага праекта. Напрыклад, калі вы выкарыстоўваеце [CodeSandbox](https://codesandbox.io/) або [Create React App](https://create-react-app.dev/), каранёвы кампанент будзе аб’яўлены ў файле `src/App.js`. Калі вы выкарыстоўваеце фрэймворк [Next.js](https://nextjs.org/), каранёвы кампанент аб’яўляецца ў файле `pages/index.js`. У прыкладах вышэй вы экспартавалі каранёвыя кампаненты.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+Большасць React праграм выкарыстоўваюць кампаненты паўсюль. Гэта азначае, што вы будзеце выкарыстоўваць кампаненты не толькі для элементаў, што паўторна выкарыстоўваюцца, такіх як кнопкі, але і для буйнейшых элементаў: бакавых панэляў, спісаў і, у рэшце, цэлых старонак! Кампаненты — гэта зручны спосаб арганізаваць код карыстальніцкага інтэрфейсу і разметку, нават калі некаторыя з іх выкарыстоўваюцца толькі адзін раз.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+[Фрэймворкі на базе React](/learn/start-a-new-react-project) пайшлі яшчэ далей. Замест таго, каб выкарыстоўваць пусты HTML файл і дазволіць React «узяць на сябе» кіраванне старонкай з дапамогай JavaScript, яны *таксама* аўтаматычна ствараюць HTML з вашых кампанентаў React. Гэта дазваляе вашай праграме паказваць частку змесціва да таго, як JavaScript код загрузіцца.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Тым не менш, многія вэб-сайты выкарыстоўваюць React толькі для [дадавання інтэрактыўнасці да існуючых HTML старонак.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Яны маюць шмат каранёвых кампанентаў замест аднаго для ўсёй старонкі. Вы можаце браць ад React столькі, колькі вам трэба.
-You've just gotten your first taste of React! Let's recap some key points.
+Вы толькі што пазнаёміліся з React! Давайце паўторым некаторыя ключавыя моманты.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React дазваляе вам ствараць кампаненты — **прыдатныя да паўторнага выкарыстання элементы карыстальніцкага інтэрфейсу для вашай праграмы.**
+* У React праграме кожны элемент UI з'яўляецца кампанентам.
+* Кампаненты React з'яўляюцца звычайнымі JavaScript функцыямі, за выключэннем таго, што:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Іх назвы заўсёды пачынаюцца з вялікай літары.
+ 2. Яны вяртаюць JSX разметку.
@@ -238,9 +238,9 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Экспартуйце кампанент {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Гэты прыклад не працуе, таму што каранёвы кампанент не экспартуецца:
@@ -249,7 +249,7 @@ function Profile() {
return (
);
}
@@ -261,11 +261,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Паспрабуйце выправіць яго самастойна, перш чым глядзець у рашэнне!
-Add `export default` before the function definition like so:
+Дадайце `export default` перад аб’яўленнем функцыі наступным чынам:
@@ -274,7 +274,7 @@ export default function Profile() {
return (
);
}
@@ -286,17 +286,17 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Вы можаце задацца пытаннем, чаму напісання толькі `export` недастаткова, каб выправіць гэты прыклад. Вы можаце даведацца пра розніцу паміж `export` і `export default` у раздзеле [Імпартаванне і экспартаванне кампанентаў.](/learn/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Выправіце аператар вяртання {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+З гэтым аператарам `return` штосьці не так. Вы можаце яго выправіць?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Пры спробе выправіць аператар, вы можаце атрымаць памылку «Unexpected token». У такім выпадку пераканайцеся, што кропка з коскай з'яўляецца *пасля* закрывальнай дужкі. Пакінуўшы кропку з коскай унутры `return ( )`, вы атрымаеце памылку.
@@ -306,7 +306,7 @@ You may get an "Unexpected token" error while trying to fix this. In that case,
```js
export default function Profile() {
return
- ;
+ ;
}
```
@@ -318,13 +318,13 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Вы можаце выправіць гэты кампанент, запісаўшы аператар `return` у адзін радок, вось так:
```js
export default function Profile() {
- return ;
+ return ;
}
```
@@ -334,7 +334,7 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Або заключыўшы вернутую разметку JSX у дужкі, якія адкрываюцца адразу пасля аператара `return`:
@@ -343,7 +343,7 @@ export default function Profile() {
return (
);
}
@@ -357,9 +357,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Знайдзіце памылку {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Нешта не так з тым, як дэкларуецца і выкарыстоўваецца кампанент `Profile`. Ці можаце вы знайсці памылку? (Паспрабуйце ўспомніць, як React адрознівае кампаненты ад звычайных HTML тэгаў!)
@@ -368,7 +368,7 @@ function profile() {
return (
);
}
@@ -376,7 +376,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Выбітныя вучоныя
-React component names must start with a capital letter.
+Назвы кампанентаў React павінны пачынацца з вялікай літары.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -404,7 +404,7 @@ function Profile() {
return (
);
}
@@ -412,7 +412,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Выбітныя вучоныя
-#### Your own component {/*your-own-component*/}
+#### Ваш уласны кампанент {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Напішыце кампанент з нуля. Вы можаце даць яму любую дапушчальную назву і вярнуць любую разметку. Калі ў вас скончыліся ідэі, вы можаце напісаць кампанент `Congratulations`, які паказвае `Малайчына!
`. Не забудзьцеся экспартаваць свой кампанент!
```js
-// Write your component below!
+// Напішыце свой кампанент ніжэй!
```
@@ -449,7 +449,7 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
export default function Congratulations() {
return (
- Good job!
+ Малайчына!
);
}
```
`, etc.
+React дазваляе камбінаваць разметку, CSS і JavaScript у карыстальніцкія «кампаненты» — **прыдатныя да паўторнага выкарыстання элементы інтэрфейсу для вашай праграмы.** Код зместу вышэй, можна пераўтварыць у кампанент ``, `` і г.д.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Гэтак жа, як і HTML тэгі, кампаненты можна камбінаваць, упарадкоўваць і ўкладаць адзін у аднаго для стварэння цэлых старонак. Напрыклад, старонка дакументацыі, якую вы зараз чытаеце, складаецца з кампанентаў React:
```js
@@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
@@ -64,7 +64,7 @@ export default function Profile() {
return (
)
}
@@ -76,51 +76,51 @@ img { height: 200px; }
-And here's how to build a component:
+А вось як стварыць кампанент:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Крок 1: Экспартаваць кампанент {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Прэфікс `export default` — гэта [стандартны сінтаксіс JavaScript](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (не з'яўляецца спецыфікай React). Ён дазваляе пазначыць галоўную функцыю ў файле, каб потым яе можна было імпартаваць з іншых файлаў. (Больш падрабязна пра імпартаванне можна пачытаць у раздзеле «[Імпартаванне і экспартаванне кампанентаў](/learn/importing-and-exporting-components)»!)
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Крок 2: Аб’явіць функцыю {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+З дапамогай `function Profile() { }` вы аб’яўляеце JavaScript функцыю з назвай `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+Кампаненты React — гэта звычайныя JavaScript функцыі, але **іх назвы павінны пачынацца з вялікай літары**, інакш яны не будуць працаваць!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Крок 3: Дадаць разметку {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Кампанент вяртае тэг `![]()
` з атрыбутамі `src` і `alt`. Тэг `![]()
` выглядае як HTML, але насамрэч пад капотам гэта JavaScript! Гэты сінтаксіс называецца [JSX](/learn/writing-markup-with-jsx), і ён дазваляе вам устаўляць разметку ў JavaScript.
-Return statements can be written all on one line, as in this component:
+Аператар `return` можа быць запісаны ў адзін радок, як у гэтым кампаненце:
```js
-return ;
+return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Але калі ўся ваша разметка не знаходзіцца ў тым жа радку, што і ключавое слова `return`, то вы павінны заключыць яе ў дужкі:
```js
return (
-
+
);
```
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Без круглых дужак любы код у радках пасля `return` [будзе ігнаравацца](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi) !
-## Using a component {/*using-a-component*/}
+## Выкарыстанне кампанента {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Цяпер, калі вы аб’явілі свой кампанент `Profile`, вы можаце ўкладаць яго ў іншыя кампаненты. Напрыклад, вы можаце экспартаваць кампанент `Gallery`, які выкарыстоўвае некалькі кампанентаў `Profile`:
@@ -129,7 +129,7 @@ function Profile() {
return (
);
}
@@ -137,7 +137,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Выбітныя навукоўцы
-### What the browser sees {/*what-the-browser-sees*/}
+### Што бачыць браўзер {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Звярніце ўвагу на розніцу ў рэгістры:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` пішацца ў ніжнім рэгістры, таму React ведае, што мы спасылаемся на тэг HTML.
+* Тэг `![]()
`. In the end, this is what the browser sees:
+А `Profile` змяшчае яшчэ нават больш HTML: `![]()
`. У рэшце, вось што бачыць браўзер:
```html
- Amazing scientists
-
-
-
+ Выбітныя вучоныя
+
+
+
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Укладанне і арганізацыя кампанентаў {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Кампаненты — гэта звычайныя JavaScript функцыі, таму вы можаце мець некалькі кампанентаў у адным файле. Гэта зручна, калі кампаненты адносна невялікія або цесна звязаны адзін з адным. Калі файл становіцца перапоўненым, вы заўсёды можаце перанесці `Profile` у асобны файл. Хутка вы даведаецеся, як гэта зрабіць на [старонцы пра імпартаванне.](/learn/importing-and-exporting-components)
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Паколькі кампаненты `Profile` рэндэрыцца ўнутры `Gallery` (нават некалькі разоў!), мы можам сказаць, што `Gallery` з'яўляецца **бацькоўскім кампанентам**, які рэндэрыць кожны кампанент `Profile` як «даччыны». Гэта частка магіі React: вы можаце аб’явіць кампанент адзін раз, а потым выкарыстоўваць яго ў любой колькасці месцаў і колькі хочаце разоў.
-Components can render other components, but **you must never nest their definitions:**
+Кампаненты могуць рэндэрыць іншыя кампаненты, але **вы ніколі не павінны ўкладаць іх аб’яўленні:**
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Ніколі не аб’яўляйце кампанент унутры іншага кампанента!
function Profile() {
// ...
}
@@ -190,47 +190,47 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Код вышэй [вельмі павольны і выклікае памылкі.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Замест гэтага аб’яўляйце кожны кампанент на верхнім узроўні:
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Аб’яўляйце кампаненты на верхнім узроўні
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Калі даччынаму кампаненту патрэбны некаторыя даныя ад бацькоўскага, [перадайце іх праз пропсы](/learn/passing-props-to-a-component) замест укладзеных аб’яўленняў.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Кампаненты паўсюль {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Ваша React праграма пачынаецца з «каранёвага» кампанента. Звычайна ён ствараецца аўтаматычна, пры стварэнні новага праекта. Напрыклад, калі вы выкарыстоўваеце [CodeSandbox](https://codesandbox.io/) або [Create React App](https://create-react-app.dev/), каранёвы кампанент будзе аб’яўлены ў файле `src/App.js`. Калі вы выкарыстоўваеце фрэймворк [Next.js](https://nextjs.org/), каранёвы кампанент аб’яўляецца ў файле `pages/index.js`. У прыкладах вышэй вы экспартавалі каранёвыя кампаненты.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+Большасць React праграм выкарыстоўваюць кампаненты паўсюль. Гэта азначае, што вы будзеце выкарыстоўваць кампаненты не толькі для элементаў, што паўторна выкарыстоўваюцца, такіх як кнопкі, але і для буйнейшых элементаў: бакавых панэляў, спісаў і, у рэшце, цэлых старонак! Кампаненты — гэта зручны спосаб арганізаваць код карыстальніцкага інтэрфейсу і разметку, нават калі некаторыя з іх выкарыстоўваюцца толькі адзін раз.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+[Фрэймворкі на базе React](/learn/start-a-new-react-project) пайшлі яшчэ далей. Замест таго, каб выкарыстоўваць пусты HTML файл і дазволіць React «узяць на сябе» кіраванне старонкай з дапамогай JavaScript, яны *таксама* аўтаматычна ствараюць HTML з вашых кампанентаў React. Гэта дазваляе вашай праграме паказваць частку змесціва да таго, як JavaScript код загрузіцца.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Тым не менш, многія вэб-сайты выкарыстоўваюць React толькі для [дадавання інтэрактыўнасці да існуючых HTML старонак.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Яны маюць шмат каранёвых кампанентаў замест аднаго для ўсёй старонкі. Вы можаце браць ад React столькі, колькі вам трэба.
-You've just gotten your first taste of React! Let's recap some key points.
+Вы толькі што пазнаёміліся з React! Давайце паўторым некаторыя ключавыя моманты.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React дазваляе вам ствараць кампаненты — **прыдатныя да паўторнага выкарыстання элементы карыстальніцкага інтэрфейсу для вашай праграмы.**
+* У React праграме кожны элемент UI з'яўляецца кампанентам.
+* Кампаненты React з'яўляюцца звычайнымі JavaScript функцыямі, за выключэннем таго, што:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Іх назвы заўсёды пачынаюцца з вялікай літары.
+ 2. Яны вяртаюць JSX разметку.
@@ -238,9 +238,9 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Экспартуйце кампанент {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Гэты прыклад не працуе, таму што каранёвы кампанент не экспартуецца:
@@ -249,7 +249,7 @@ function Profile() {
return (
);
}
@@ -261,11 +261,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Паспрабуйце выправіць яго самастойна, перш чым глядзець у рашэнне!
-Add `export default` before the function definition like so:
+Дадайце `export default` перад аб’яўленнем функцыі наступным чынам:
@@ -274,7 +274,7 @@ export default function Profile() {
return (
);
}
@@ -286,17 +286,17 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Вы можаце задацца пытаннем, чаму напісання толькі `export` недастаткова, каб выправіць гэты прыклад. Вы можаце даведацца пра розніцу паміж `export` і `export default` у раздзеле [Імпартаванне і экспартаванне кампанентаў.](/learn/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Выправіце аператар вяртання {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+З гэтым аператарам `return` штосьці не так. Вы можаце яго выправіць?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Пры спробе выправіць аператар, вы можаце атрымаць памылку «Unexpected token». У такім выпадку пераканайцеся, што кропка з коскай з'яўляецца *пасля* закрывальнай дужкі. Пакінуўшы кропку з коскай унутры `return ( )`, вы атрымаеце памылку.
@@ -306,7 +306,7 @@ You may get an "Unexpected token" error while trying to fix this. In that case,
```js
export default function Profile() {
return
- ;
+ ;
}
```
@@ -318,13 +318,13 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Вы можаце выправіць гэты кампанент, запісаўшы аператар `return` у адзін радок, вось так:
```js
export default function Profile() {
- return ;
+ return ;
}
```
@@ -334,7 +334,7 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Або заключыўшы вернутую разметку JSX у дужкі, якія адкрываюцца адразу пасля аператара `return`:
@@ -343,7 +343,7 @@ export default function Profile() {
return (
);
}
@@ -357,9 +357,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Знайдзіце памылку {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Нешта не так з тым, як дэкларуецца і выкарыстоўваецца кампанент `Profile`. Ці можаце вы знайсці памылку? (Паспрабуйце ўспомніць, як React адрознівае кампаненты ад звычайных HTML тэгаў!)
@@ -368,7 +368,7 @@ function profile() {
return (
);
}
@@ -376,7 +376,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Выбітныя вучоныя
-React component names must start with a capital letter.
+Назвы кампанентаў React павінны пачынацца з вялікай літары.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -404,7 +404,7 @@ function Profile() {
return (
);
}
@@ -412,7 +412,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Выбітныя вучоныя
-#### Your own component {/*your-own-component*/}
+#### Ваш уласны кампанент {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Напішыце кампанент з нуля. Вы можаце даць яму любую дапушчальную назву і вярнуць любую разметку. Калі ў вас скончыліся ідэі, вы можаце напісаць кампанент `Congratulations`, які паказвае `Малайчына!
`. Не забудзьцеся экспартаваць свой кампанент!
```js
-// Write your component below!
+// Напішыце свой кампанент ніжэй!
```
@@ -449,7 +449,7 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
export default function Congratulations() {
return (
- Good job!
+ Малайчына!
);
}
```
` і г.д.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Гэтак жа, як і HTML тэгі, кампаненты можна камбінаваць, упарадкоўваць і ўкладаць адзін у аднаго для стварэння цэлых старонак. Напрыклад, старонка дакументацыі, якую вы зараз чытаеце, складаецца з кампанентаў React:
```js
@@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
@@ -64,7 +64,7 @@ export default function Profile() {
return (
)
}
@@ -76,51 +76,51 @@ img { height: 200px; }
-And here's how to build a component:
+А вось як стварыць кампанент:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Крок 1: Экспартаваць кампанент {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Прэфікс `export default` — гэта [стандартны сінтаксіс JavaScript](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (не з'яўляецца спецыфікай React). Ён дазваляе пазначыць галоўную функцыю ў файле, каб потым яе можна было імпартаваць з іншых файлаў. (Больш падрабязна пра імпартаванне можна пачытаць у раздзеле «[Імпартаванне і экспартаванне кампанентаў](/learn/importing-and-exporting-components)»!)
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Крок 2: Аб’явіць функцыю {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+З дапамогай `function Profile() { }` вы аб’яўляеце JavaScript функцыю з назвай `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+Кампаненты React — гэта звычайныя JavaScript функцыі, але **іх назвы павінны пачынацца з вялікай літары**, інакш яны не будуць працаваць!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Крок 3: Дадаць разметку {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Кампанент вяртае тэг `![]()
` з атрыбутамі `src` і `alt`. Тэг `![]()
` выглядае як HTML, але насамрэч пад капотам гэта JavaScript! Гэты сінтаксіс называецца [JSX](/learn/writing-markup-with-jsx), і ён дазваляе вам устаўляць разметку ў JavaScript.
-Return statements can be written all on one line, as in this component:
+Аператар `return` можа быць запісаны ў адзін радок, як у гэтым кампаненце:
```js
-return ;
+return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Але калі ўся ваша разметка не знаходзіцца ў тым жа радку, што і ключавое слова `return`, то вы павінны заключыць яе ў дужкі:
```js
return (
-
+
);
```
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Без круглых дужак любы код у радках пасля `return` [будзе ігнаравацца](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi) !
-## Using a component {/*using-a-component*/}
+## Выкарыстанне кампанента {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Цяпер, калі вы аб’явілі свой кампанент `Profile`, вы можаце ўкладаць яго ў іншыя кампаненты. Напрыклад, вы можаце экспартаваць кампанент `Gallery`, які выкарыстоўвае некалькі кампанентаў `Profile`:
@@ -129,7 +129,7 @@ function Profile() {
return (
);
}
@@ -137,7 +137,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Выбітныя навукоўцы
-### What the browser sees {/*what-the-browser-sees*/}
+### Што бачыць браўзер {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Звярніце ўвагу на розніцу ў рэгістры:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` пішацца ў ніжнім рэгістры, таму React ведае, што мы спасылаемся на тэг HTML.
+* Тэг `![]()
`. In the end, this is what the browser sees:
+А `Profile` змяшчае яшчэ нават больш HTML: `![]()
`. У рэшце, вось што бачыць браўзер:
```html
- Amazing scientists
-
-
-
+ Выбітныя вучоныя
+
+
+
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Укладанне і арганізацыя кампанентаў {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Кампаненты — гэта звычайныя JavaScript функцыі, таму вы можаце мець некалькі кампанентаў у адным файле. Гэта зручна, калі кампаненты адносна невялікія або цесна звязаны адзін з адным. Калі файл становіцца перапоўненым, вы заўсёды можаце перанесці `Profile` у асобны файл. Хутка вы даведаецеся, як гэта зрабіць на [старонцы пра імпартаванне.](/learn/importing-and-exporting-components)
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Паколькі кампаненты `Profile` рэндэрыцца ўнутры `Gallery` (нават некалькі разоў!), мы можам сказаць, што `Gallery` з'яўляецца **бацькоўскім кампанентам**, які рэндэрыць кожны кампанент `Profile` як «даччыны». Гэта частка магіі React: вы можаце аб’явіць кампанент адзін раз, а потым выкарыстоўваць яго ў любой колькасці месцаў і колькі хочаце разоў.
-Components can render other components, but **you must never nest their definitions:**
+Кампаненты могуць рэндэрыць іншыя кампаненты, але **вы ніколі не павінны ўкладаць іх аб’яўленні:**
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Ніколі не аб’яўляйце кампанент унутры іншага кампанента!
function Profile() {
// ...
}
@@ -190,47 +190,47 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Код вышэй [вельмі павольны і выклікае памылкі.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Замест гэтага аб’яўляйце кожны кампанент на верхнім узроўні:
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Аб’яўляйце кампаненты на верхнім узроўні
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Калі даччынаму кампаненту патрэбны некаторыя даныя ад бацькоўскага, [перадайце іх праз пропсы](/learn/passing-props-to-a-component) замест укладзеных аб’яўленняў.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Кампаненты паўсюль {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Ваша React праграма пачынаецца з «каранёвага» кампанента. Звычайна ён ствараецца аўтаматычна, пры стварэнні новага праекта. Напрыклад, калі вы выкарыстоўваеце [CodeSandbox](https://codesandbox.io/) або [Create React App](https://create-react-app.dev/), каранёвы кампанент будзе аб’яўлены ў файле `src/App.js`. Калі вы выкарыстоўваеце фрэймворк [Next.js](https://nextjs.org/), каранёвы кампанент аб’яўляецца ў файле `pages/index.js`. У прыкладах вышэй вы экспартавалі каранёвыя кампаненты.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+Большасць React праграм выкарыстоўваюць кампаненты паўсюль. Гэта азначае, што вы будзеце выкарыстоўваць кампаненты не толькі для элементаў, што паўторна выкарыстоўваюцца, такіх як кнопкі, але і для буйнейшых элементаў: бакавых панэляў, спісаў і, у рэшце, цэлых старонак! Кампаненты — гэта зручны спосаб арганізаваць код карыстальніцкага інтэрфейсу і разметку, нават калі некаторыя з іх выкарыстоўваюцца толькі адзін раз.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+[Фрэймворкі на базе React](/learn/start-a-new-react-project) пайшлі яшчэ далей. Замест таго, каб выкарыстоўваць пусты HTML файл і дазволіць React «узяць на сябе» кіраванне старонкай з дапамогай JavaScript, яны *таксама* аўтаматычна ствараюць HTML з вашых кампанентаў React. Гэта дазваляе вашай праграме паказваць частку змесціва да таго, як JavaScript код загрузіцца.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Тым не менш, многія вэб-сайты выкарыстоўваюць React толькі для [дадавання інтэрактыўнасці да існуючых HTML старонак.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Яны маюць шмат каранёвых кампанентаў замест аднаго для ўсёй старонкі. Вы можаце браць ад React столькі, колькі вам трэба.
-You've just gotten your first taste of React! Let's recap some key points.
+Вы толькі што пазнаёміліся з React! Давайце паўторым некаторыя ключавыя моманты.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React дазваляе вам ствараць кампаненты — **прыдатныя да паўторнага выкарыстання элементы карыстальніцкага інтэрфейсу для вашай праграмы.**
+* У React праграме кожны элемент UI з'яўляецца кампанентам.
+* Кампаненты React з'яўляюцца звычайнымі JavaScript функцыямі, за выключэннем таго, што:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Іх назвы заўсёды пачынаюцца з вялікай літары.
+ 2. Яны вяртаюць JSX разметку.
@@ -238,9 +238,9 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Экспартуйце кампанент {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Гэты прыклад не працуе, таму што каранёвы кампанент не экспартуецца:
@@ -249,7 +249,7 @@ function Profile() {
return (
);
}
@@ -261,11 +261,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Паспрабуйце выправіць яго самастойна, перш чым глядзець у рашэнне!
-Add `export default` before the function definition like so:
+Дадайце `export default` перад аб’яўленнем функцыі наступным чынам:
@@ -274,7 +274,7 @@ export default function Profile() {
return (
);
}
@@ -286,17 +286,17 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Вы можаце задацца пытаннем, чаму напісання толькі `export` недастаткова, каб выправіць гэты прыклад. Вы можаце даведацца пра розніцу паміж `export` і `export default` у раздзеле [Імпартаванне і экспартаванне кампанентаў.](/learn/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Выправіце аператар вяртання {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+З гэтым аператарам `return` штосьці не так. Вы можаце яго выправіць?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Пры спробе выправіць аператар, вы можаце атрымаць памылку «Unexpected token». У такім выпадку пераканайцеся, што кропка з коскай з'яўляецца *пасля* закрывальнай дужкі. Пакінуўшы кропку з коскай унутры `return ( )`, вы атрымаеце памылку.
@@ -306,7 +306,7 @@ You may get an "Unexpected token" error while trying to fix this. In that case,
```js
export default function Profile() {
return
- ;
+ ;
}
```
@@ -318,13 +318,13 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Вы можаце выправіць гэты кампанент, запісаўшы аператар `return` у адзін радок, вось так:
```js
export default function Profile() {
- return ;
+ return ;
}
```
@@ -334,7 +334,7 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Або заключыўшы вернутую разметку JSX у дужкі, якія адкрываюцца адразу пасля аператара `return`:
@@ -343,7 +343,7 @@ export default function Profile() {
return (
);
}
@@ -357,9 +357,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Знайдзіце памылку {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Нешта не так з тым, як дэкларуецца і выкарыстоўваецца кампанент `Profile`. Ці можаце вы знайсці памылку? (Паспрабуйце ўспомніць, як React адрознівае кампаненты ад звычайных HTML тэгаў!)
@@ -368,7 +368,7 @@ function profile() {
return (
);
}
@@ -376,7 +376,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Выбітныя вучоныя
-React component names must start with a capital letter.
+Назвы кампанентаў React павінны пачынацца з вялікай літары.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -404,7 +404,7 @@ function Profile() {
return (
);
}
@@ -412,7 +412,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Выбітныя вучоныя
-#### Your own component {/*your-own-component*/}
+#### Ваш уласны кампанент {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Напішыце кампанент з нуля. Вы можаце даць яму любую дапушчальную назву і вярнуць любую разметку. Калі ў вас скончыліся ідэі, вы можаце напісаць кампанент `Congratulations`, які паказвае `Малайчына!
`. Не забудзьцеся экспартаваць свой кампанент!
```js
-// Write your component below!
+// Напішыце свой кампанент ніжэй!
```
@@ -449,7 +449,7 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
export default function Congratulations() {
return (
- Good job!
+ Малайчына!
);
}
```
)
}
@@ -76,51 +76,51 @@ img { height: 200px; }
+
);
}
@@ -137,7 +137,7 @@ function Profile() {
export default function Gallery() {
return (
Amazing scientists
+Выбітныя навукоўцы
Amazing scientists
-
-
-
+ Выбітныя вучоныя
+
+
+
);
}
@@ -261,11 +261,11 @@ img { height: 181px; }
);
}
@@ -286,17 +286,17 @@ img { height: 181px; }
;
+ ;
}
```
@@ -318,13 +318,13 @@ img { height: 180px; }
;
+ return ;
}
```
@@ -334,7 +334,7 @@ img { height: 180px; }
);
}
@@ -357,9 +357,9 @@ img { height: 180px; }
);
}
@@ -376,7 +376,7 @@ function profile() {
export default function Gallery() {
return (
Amazing scientists
+Выбітныя вучоныя
);
}
@@ -412,7 +412,7 @@ function Profile() {
export default function Gallery() {
return (