Skip to content

Commit

Permalink
Update describing-the-ui.md
Browse files Browse the repository at this point in the history
  • Loading branch information
zubialevich authored Oct 23, 2023
1 parent 27e6e8c commit 4a9f0a9
Showing 1 changed file with 11 additions and 27 deletions.
38 changes: 11 additions & 27 deletions src/content/learn/describing-the-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ React — гэта JavaScript бібліятэка для рэндэрынгу

<YouWillLearn isChapter={true}>

<<<<<<< HEAD
* [Як напісаць свой першы кампанент React](/learn/your-first-component)
* [Калі і як змяшчаць некалькі кампанентаў у адзін файл](/learn/importing-and-exporting-components)
* [Як дадаць разметку ў JavaScript з дапамогай JSX](/learn/writing-markup-with-jsx)
Expand All @@ -19,17 +18,7 @@ React — гэта JavaScript бібліятэка для рэндэрынгу
* [Як рэндэрыць кампаненты ў залежнасці ад умоў](/learn/conditional-rendering)
* [Як рэндэрыць некалькі кампанентаў за раз](/learn/rendering-lists)
* [Як пазбягаць памылак, захоўваючы кампанент чыстымі](/learn/keeping-components-pure)
=======
* [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)
* [Why understanding your UI as trees is useful](/learn/understanding-your-ui-as-a-tree)
>>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
* [Чаму карысна ўяўляць ваш карыстальніцкі інтэрфейс у выглядзе дрэў](/learn/understanding-your-ui-as-a-tree)

</YouWillLearn>

Expand Down Expand Up @@ -535,34 +524,29 @@ export default function TeaSet() {

</LearnMore>

<<<<<<< HEAD
## Наступныя крокі {/*whats-next*/}
=======
## Your UI as a tree {/*your-ui-as-a-tree*/}
## Карыстальніцкі інтэрфейс у выглядзе дрэва {/*your-ui-as-a-tree*/}

React uses trees to model the relationships between components and modules.
React выкарыстоўвае дрэвы для мадэліравання адносін паміж кампанентамі і модулямі.

A React render tree is a representation of the parent and child relationship between components.
Дрэва рэндэрынгу React — гэта адлюстраванне бацькоўскіх і даччыных адносін паміж кампанентамі.

<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">An example React render tree.</Diagram>
<Diagram name="generic_render_tree" height={250} width={500} alt="Дрэвападобны графік з пяццю вузламі, кожны з якіх уяўляе кампанент. Каранёвы вузел знаходзіцца ў верхняй частцы дрэвападобнага графіка і пазначаны як «Каранёвы кампанент (Root Component)». Ён мае дзве стрэлкі, якія ідуць уніз да двух вузлоў, пазначаных «Кампанент A (Component A)» і «Кампанент C (Component C)». Кожная са стрэлак пазначана надпісам «рэндэрыць». «Кампанент A» мае адзіную стрэлку «рэндэрыць» да вузла з надпісам «Кампанент B (Component B)». «Кампанент C» мае адну стрэлку «рэндэрыць» да вузла з надпісам «Кампанент D (Component D.">Прыклад дрэва рэндэрынгу React.</Diagram>

Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
Кампаненты, якія знаходзяцца ў верхняй частцы дрэва, каля каранёвага кампанента, лічацца кампанентамі верхняга ўзроўню. Кампаненты без даччыных кампанентаў з'яўляюцца ліставымі кампанентамі. Такая класіфікацыя кампанентаў карысная для разумення патоку даных і прадукцыйнасці рэндэрынгу.

Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree.
Мадэліраванне адносін паміж модулямі JavaScript — гэта яшчэ адзін карысны спосаб зразумець вашу праграму. Мы называем гэта «дрэвам залежнасці модуляў».

<Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">An example module dependency tree.</Diagram>
<Diagram name="generic_dependency_tree" height={250} width={500} alt="Дрэвападобны графік з пяццю вузламі. Кожны вузел уяўляе сабой JavaScript модуль. Самы верхні вузел пазначаны як «RootModule.js». Ён мае тры стрэлкі, якія ідуць да вузлоў: «ModuleA.js», «ModuleB.js» і «ModuleC.js». Кожная стрэлка пазначана надпісам «імпартуе». Вузел «ModuleC.js» мае адну стрэлку з надпісам «імпартуе», якая паказвае на вузел з надпісам «ModuleD.js».">Прыклад дрэва залежнасцей модуля.</Diagram>

A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues.
Дрэва залежнасцей часта выкарыстоўваецца інструментамі зборкі для аб'яднання ўсяго адпаведнага JavaScript кода для спампоўвання і адлюстравання кліентам. Вялікі памер пакета пагаршае карыстальніцкі досвед узаемадзеяння з праграмамі напісанымі з дапамогай React. Разуменне дрэва залежнасцей модуля дапамагае вырашаць такія праблемы.

<LearnMore path="/learn/understanding-your-ui-as-a-tree">

Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
Азнаёмцеся са старонкай «**[Карыстальніцкі інтэрфейс у выглядзе дрэва](/learn/understanding-your-ui-as-a-tree)**» каб даведацца як ствараць дрэвы рэндэрынгу і дрэва залежнасцей модуля для праграмы React і як гэтыя ментальныя мадэлі дапамагаюць палепшыць карыстальніцкі досвед і прадукцыйнасць.

</LearnMore>


## What's next? {/*whats-next*/}
>>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
## Наступныя крокі {/*whats-next*/}

Пачніце са старонкі «[Ваш першы кампанент](/learn/your-first-component)» каб пачаць чытанне главы старонка за старонкай!

Expand Down

0 comments on commit 4a9f0a9

Please sign in to comment.