Translated in <Diagram alt:>

Author: L1ghT0

src/content/learn/understanding-your-ui-as-a-tree.md

@@ -22,7 +22,7 @@ React, как и многие другие библиотеки, моделир
 
 Дерево — это модель отношений между элементами, и UI часто использует эту структуру. Например, браузеры используют тот же подход для построения HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) и CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Мобильные платформы так же используют структуру дерева для своей иерархии.
 
-<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagram with three sections arranged horizontally. In the first section, there are three rectangles stacked vertically, with labels 'Component A', 'Component B', and 'Component C'. Transitioning to the next pane is an arrow with the React logo on top labeled 'React'. The middle section contains a tree of components, with the root labeled 'A' and two children labeled 'B' and 'C'. The next section is again transitioned using an arrow with the React logo on top labeled 'React'. The third and final section is a wireframe of a browser, containing a tree of 8 nodes, which has only a subset highlighted (indicating the subtree from the middle section).">
+<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Схема с тремя горизонтально расположенными секциями. В первом разделе вертикально расположены три прямоугольника: 'Component A', 'Component B', и 'Component C'. Переход к следующей панели — это стрелка с логотипом React сверху и надписью «React». Средний раздел содержит дерево компонентов с корнем, обозначенным «A», и двумя дочерними элементами, обозначенными «B» и «C». Переход к следующему разделу снова осуществляется с помощью стрелки с логотипом React сверху и надписью «React». Последний, третий раздел, представляет собой каркас браузера, содержащий дерево из 8 узлов, в котором выделено только подмножество (с указанием поддерева из среднего раздела).">
 
 React создаёт UI-дерево из ваших компонентов. В этом случае дерево UI используется для последующего рендеринга в DOM.
 </Diagram>
@@ -118,7 +118,7 @@ export default [
 
 </Sandpack>
 
-<Diagram name="render_tree" height={250} width={500} alt="Tree graph with five nodes. Each node represents a component. The root of the tree is App, with two arrows extending from it to 'InspirationGenerator' and 'FancyText'. The arrows are labelled with the word 'renders'. 'InspirationGenerator' node also has two arrows pointing to nodes 'FancyText' and 'Copyright'.">
+<Diagram name="render_tree" height={250} width={500} alt="График дерева с пятью узлами где каждый узел представляет компонент. Корнем дерева является App, от которого идут две стрелки к 'InspirationGenerator' и 'FancyText'. Стрелки помечены словом 'renders'. Узел 'InspirationGenerator' также имеет две стрелки, указывающие на 'FancyText' и 'Copyright'.">
 
 React создает *дерево рендеринга* и UI-дерево, состоящее из компонентов, прошедших рендеринг.
 
@@ -245,7 +245,7 @@ export default [
 ```
 </Sandpack>
 
-<Diagram name="conditional_render_tree" height={250} width={561} alt="Tree graph with six nodes. The top node of the tree is labelled 'App' with two arrows extending to nodes labelled 'InspirationGenerator' and 'FancyText'. The arrows are solid lines and are labelled with the word 'renders'. 'InspirationGenerator' node also has three arrows. The arrows to nodes 'FancyText' and 'Color' are dashed and labelled with 'renders?'. The last arrow points to the node labelled 'Copyright' and is solid and labelled with 'renders'.">
+<Diagram name="conditional_render_tree" height={250} width={561} alt="График дерева с шестью узлами. Верхний узел дерева помечен как 'App'. От него ведутся две стрелки к узлам с метками 'InspirationGenerator' и 'FancyText'. Стрелки представляют собой сплошные линии и помечены словом 'renders'. Узел InspirationGenerator имеет три стрелки, две из которых пунктирны и помечены надписью 'renders?'. Они ведут к узлам 'FancyText' и 'Color'. Последняя стрелка указывает на узел с надписью 'Copyright', она сплошная и отмечена надписью 'renders'.">
 
 При условном рендеринге, в разных случаях, дерево рендеринга может строить разные компоненты.
 
@@ -265,7 +265,7 @@ export default [
 
 Если мы возьмем предыдущее приложение с вдохновляющими цитатами, мы сможем построить дерево зависимостей модулей.
 
-<Diagram name="module_dependency_tree" height={250} width={658} alt="A tree graph with seven nodes. Each node is labelled with a module name. The top level node of the tree is labelled 'App.js'. There are three arrows pointing to the modules 'InspirationGenerator.js', 'FancyText.js' and 'Copyright.js' and the arrows are labelled with 'imports'. From the 'InspirationGenerator.js' node, there are three arrows that extend to three modules: 'FancyText.js', 'Color.js', and 'inspirations.js'. The arrows are labelled with 'imports'.">
+<Diagram name="module_dependency_tree" height={250} width={658} alt="График дерева с семью узлами. Каждый узел помечен именем модуля. Верхний узел дерева помечен как 'App.js' и от него идут три стрелки, указывающие на модули 'InspirationGenerator.js', 'FancyText.js' и 'Copyright.js'. Стрелки представляют собой сплошные линии и помечены словом 'import'. Из узла "InspirationGenerator.js" ведутся ещё три стрелки, которые указывают на три модуля: 'FancyText.js', 'Color.js' и 'Inspirations.js'. Стрелки сплошные и также помечены словом 'import'.">
 
 Дерево зависимостей модулей для приложения с вдохновляющими цитатами.