From 9e5128ea2dab6d3386f0d3706ddaef9346fb9dae Mon Sep 17 00:00:00 2001 From: Pavel Date: Mon, 27 Nov 2023 12:53:21 -0500 Subject: [PATCH 1/6] Translation for Understanding Your UI as a Tree --- .../learn/understanding-your-ui-as-a-tree.md | 94 +++++++++---------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 2a5a24b85..9abee284d 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -1,41 +1,41 @@ --- -title: Understanding Your UI as a Tree +title: Представление UI в виде дерева --- -Your React app is taking shape with many components being nested within each other. How does React keep track of your app's component structure? +Ваше приложение React формируется с множеством вложенных друг в друга компонентов. Как же React отслеживает структуру компонентов вашего приложения? -React, and many other UI libraries, model UI as a tree. Thinking of your app as a tree is useful for understanding the relationship between components. This understanding will help you debug future concepts like performance and state management. +React, как и многие другие библиотеки, моделируют UI в виде дерева. Представив ваше приложении в виде дерева, вы сможете лучше понять взаимосвязь между компонентами, а так же это поможет вам в отладке будущих концепций, таких как: производительность и управление состоянием. -* How React "sees" component structures -* What a render tree is and what it is useful for -* What a module dependency tree is and what it is useful for +* Как React «видит» структуру компонентов +* Что такое дерево рендеринга и в чем его польза +* Что такое дерево зависимостей модулей и в чем его польза -## Your UI as a tree {/*your-ui-as-a-tree*/} +## UI в виде дерева {/*your-ui-as-a-tree*/} -Trees are a relationship model between items and UI is often represented using tree structures. For example, browsers use tree structures to model HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) and CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)). Mobile platforms also use trees to represent their view hierarchy. +Дерево — это модель отношений между элементами и 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)). Мобильные платформы так же используют структуру дерева для своей иерархии. -React creates a UI tree from your components. In this example, the UI tree is then used to render to the DOM. +React создает UI дерево из ваших компонентов. В этом случае дерево UI используется для последующего рендеринга в DOM. -Like browsers and mobile platforms, React also uses tree structures to manage and model the relationship between components in a React app. These trees are useful tools to understand how data flows through a React app and how to optimize rendering and app size. +React, так же как браузеры и мобильные платформы, использует структуру дерева для управления и построения связи между компонентами. Эти деревья являются полезным инструментом и помогут вам понять как данные проходят через приложение React и как оптимизировать рендеринг и размер приложения. -## The Render Tree {/*the-render-tree*/} +## Дерево рендеринга {/*the-render-tree*/} -A major feature of components is the ability to compose components of other components. As we [nest components](/learn/your-first-component#nesting-and-organizing-components), we have the concept of parent and child components, where each parent component may itself be a child of another component. +Основной особенностью компонентов считается возможность составлять одни компоненты из других. Когда мы [вкладываем компоненты](/learn/your-first-component#nesting-and-organizing-components), у нас есть концепция родительских и дочерних компонентов, где каждый родительский компонент сам может быть дочерним по отношению к другому. -When we render a React app, we can model this relationship in a tree, known as the render tree. +Когда мы рендерим React приложение, мы можем смоделировать эти связи в виде дерева, известного как дерево рендеринга. -Here is a React app that renders inspirational quotes. +Вот пример приложения React, которое отображает вдохновляющие цитаты. @@ -120,32 +120,32 @@ export default [ -React creates a *render tree*, a UI tree, composed of the rendered components. +React создает *дерево рендеринга* и UI дерево состоящих из компонентов прошедших рендеринг. -From the example app, we can construct the above render tree. +Из примера приложения мы можем построить приведенное выше дерево рендеринга. -The tree is composed of nodes, each of which represents a component. `App`, `FancyText`, `Copyright`, to name a few, are all nodes in our tree. +Дерево состоит из узлов, каждый из них представляет компонент. `App`, `FancyText`, `Copyright` и многие другие — это узлы нашего дерева. -The root node in a React render tree is the [root component](/learn/importing-and-exporting-components#the-root-component-file) of the app. In this case, the root component is `App` and it is the first component React renders. Each arrow in the tree points from a parent component to a child component. +Корневой узел в дереве рендеринга React является [корневым компонентом](/learn/importing-and-exporting-components#the-root-component-file) приложения. В нашем случае корневой компонент предстовляет `App` и React рендерит его первым. Каждое ответление в дереве идет от родительского компонента к дочернему. -#### Where are the HTML tags in the render tree? {/*where-are-the-html-elements-in-the-render-tree*/} +#### Где же находятся HTML-теги в дереве рендеринга? {/*where-are-the-html-elements-in-the-render-tree*/} -You'll notice in the above render tree, there is no mention of the HTML tags that each component renders. This is because the render tree is only composed of React [components](learn/your-first-component#components-ui-building-blocks). +Возможно, вы уже заметили, что в приведенном выше дереве рендеринга нет упоминания о HTML-тегах, которые отображает каждый компонент. Это происходит потому, что дерево рендеринга состоит только из [компонентов](learn/your-first-component#components-ui-building-blocks) React. -React, as a UI framework, is platform agnostic. On react.dev, we showcase examples that render to the web, which uses HTML markup as its UI primitives. But a React app could just as likely render to a mobile or desktop platform, which may use different UI primitives like [UIView](https://developer.apple.com/documentation/uikit/uiview) or [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0). +Как фреймворк UI, React является платформо-независимым. Здесь же мы демонстрируем примеры рендеринга в web, где в качестве примитивов UI используется разметка HTML. Но приложение React так же может запускаться на мобильных или десктоп платформах, которые используют другие UI примитивы, такие как: [UIView](https://developer.apple.com/documentation/uikit/uiview) или [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0). -These platform UI primitives are not a part of React. React render trees can provide insight to our React app regardless of what platform your app renders to. +Но примитивы на этих платформах не являются частью React и его дерево так же может давать представление о нашем приложении независимо от того, на какой платформе запускается ваше приложение. -A render tree represents a single render pass of a React application. With [conditional rendering](/learn/conditional-rendering), a parent component may render different children depending on the data passed. +Дерево рендеринга представляет собой одиночный рендеринг приложения React. При [условном рендеринге](/learn/conditional-rendering) родительский компонент может рендерить разные дочерние компоненты в зависимости от переданных данных. -We can update the app to conditionally render either an inspirational quote or color. +Мы можем обновить наше приложение, чтобы оно по условию отоброжало либо вдохновляющую цитату, либо цвет. @@ -247,53 +247,53 @@ export default [ -With conditional rendering, across different renders, the render tree may render different components. +При условном рендеринге, в разных случаях, дерево рендеринга может строить разные компоненты. -In this example, depending on what `inspiration.type` is, we may render `` or ``. The render tree may be different for each render pass. +В данном случае, мы рендерим `` или `` в зависимости от `inspiration.type`. При каждом рендеринге дерево может быть разным. -Although render trees may differ across render pases, these trees are generally helpful for identifying what the top-level and leaf components are in a React app. Top-level components are the components nearest to the root component and affect the rendering performance of all the components beneath them and often contain the most complexity. Leaf components are near the bottom of the tree and have no child components and are often frequently re-rendered. +Хотя деревья рендеринга могут различаться в зависимости от этапа рендеринга, обычно они полезны для определения того, что представляют собой компоненты верхнего уровня и конечные компоненты в приложении React. Компоненты верхнего уровня — это те, которые находятся ближе к корневому компоненту. Они влияют на производительность рендеринга всех дочерних компонентов, и часто содержат наибольшую сложность. Конечные компоненты находятся в нижней части дерева. Они не имеют дочерних компонентов и часто рендерятся повторно. -Identifying these categories of components are useful for understanding data flow and performance of your app. +Определение того, к какой категории относится компонент поможет вам лучше понять поток данных и улучшнить производительность вашего приложения. -## The Module Dependency Tree {/*the-module-dependency-tree*/} +## Дерево зависимостей модулей {/*the-module-dependency-tree*/} -Another relationship in a React app that can be modeled with a tree are an app's module dependencies. As we [break up our components](/learn/importing-and-exporting-components#exporting-and-importing-a-component) and logic into separate files, we create [JS modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) where we may export components, functions, or constants. +Еще одна связь в приложении React, которую можно смоделировать с помощью дерева, — это зависимости модулей приложения. [Разбивая компоненты](/learn/importing-and-exporting-components#exporting-and-importing-a-component) и логику на отдельные файлы, мы создаем [JS-модули](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules), в которые можно экспортировать компоненты, функции или константы. -Each node in a module dependency tree is a module and each branch represents an `import` statement in that module. +Каждый узел в дереве зависимостей модулей является модулем, а каждую ветвь представляет `import`. -If we take the previous Inspirations app, we can build a module dependency tree, or dependency tree for short. +Если мы возьмем предыдущее приложение с вдохновляющими цитатами, мы сможем построить дерево зависимостей модулей. -The module dependency tree for the Inspirations app. +Дерево зависимостей модулей для приложения с вдохновляющими цитатами. -The root node of the tree is the root module, also known as the entrypoint file. It often is the module that contains the root component. +Корневым узлом дерева является корневой модуль, он же файл точки входа. Часто это модуль, содержащий корневой компонент. -Comparing to the render tree of the same app, there are similar structures but some notable differences: +Сравнив с деревом рендеринга, мы увидим схожие структуры и некоторые заметные различия: -* The nodes that make-up the tree represent modules, not components. -* Non-component modules, like `inspirations.js`, are also represented in this tree. The render tree only encapsulates components. -* `Copyright.js` appears under `App.js` but in the render tree, `Copyright`, the component, appears as a child of `InspirationGenerator`. This is because `InspirationGenerator` accepts JSX as [children props](/learn/passing-props-to-a-component#passing-jsx-as-children), so it renders `Copyright` as a child component but does not import the module. +* Узлы, составляющие дерево, представляют собой модули, а не компоненты. +* Модули которые не являются компонентами, такие как `inspirations.js`, также представлены в этом дереве. А дерево рендеринга инкапсулирует только компоненты. +* `Copyright.js` появляется под `App.js`. Но в дереве рендеринга `Copyright` отображается как дочерний элемент `InspirationGenerator`. Это связано с тем, что `Inspiration Generator` принимает JSX в качестве [дочерних пропсов](/learn/passing-props-to-a-component#passing-jsx-as-children), поэтому он отображает `Copyright` как дочерний компонент, но он не импортирует его. -Dependency trees are useful to determine what modules are necessary to run your React app. When building a React app for production, there is typically a build step that will bundle all the necessary JavaScript to ship to the client. The tool responsible for this is called a [bundler](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem), and bundlers will use the dependency tree to determine what modules should be included. +Дерево зависимостей помогает определить какие модули необходимы для запуска вашего React приложения. При создании приложения для продакшена есть этап сборки, на котором весь необходимый JavaScript будет отправлен клиенту. На этом этапе [сборщик пакетов](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem) использует дерево зависимостей для того, чтобы определить какие модули содержит проект. -As your app grows, often the bundle size does too. Large bundle sizes are expensive for a client to download and run. Large bundle sizes can delay the time for your UI to get drawn. Getting a sense of your app's dependency tree may help with debugging these issues. +По мере роста вашего приложения часто увеличивается и размер сборщика. При больших размерах требуются больше затрат для загрузки и запуска клиента, а так же это может задерживать прорисовку вашего UI. Понимание же дерева зависимостей вашего приложения может помочь в отладке и устранении этих проблем. [comment]: <> (perhaps we should also deep dive on conditional imports) -* Trees are a common way to represent the relationship between entities. They are often used to model UI. -* Render trees represent the nested relationship between React components across a single render. -* With conditional rendering, the render tree may change across different renders. With different prop values, components may render different children components. -* Render trees help identify what the top-level and leaf components are. Top-level components affect the rendering performance of all components beneath them and leaf components are often re-rendered frequently. Identifying them is useful for understanding and debugging rendering performance. -* Dependency trees represent the module dependencies in a React app. -* Dependency trees are used by build tools to bundle the necessary code to ship an app. -* Dependency trees are useful for debugging large bundle sizes that slow time to paint and expose opportunities for optimizing what code is bundled. +* Деревья — это распространенный способ показать отношение между сущностями. Они очень частно используются для построения UI. +* Деревья рендеринга представляют собой отношения между вложенными компонентами React в рамках одной отрисовки. +* С отрисоквой по условию, дерево рендеринга может меняться при разных запусках. В зависимости от пропсов, компоненты могут отображать разные дочерние компоненты. +* Деревья рендеринга помогают определить, что такое компоненты верхнего уровня и конечные компоненты. Компоненты верхнего уровня влияют на производительность отрисовки всех компонентов, находящихся под ними, а конечные компоненты часто перерисовываются повторно. Их выявление поможет вам для понимания и отладки производительности рендеринга. +* Дерево зависимостей — это зависимость модулей в приложении React. +* Деревья зависимостей пользуются инструментами сборки для объединения необходимого кода для отправки приложения. +* Деревья зависимостей полезны для отладки пакетов больших размеров, которые замедляют прорисовку и предоставляют возможности для оптимизации. From 3ee378e5d74ddb170af003c0abda6aab57525bab Mon Sep 17 00:00:00 2001 From: Pavel <60206216+L1ghT0@users.noreply.github.com> Date: Wed, 13 Mar 2024 09:35:31 -0400 Subject: [PATCH 2/6] Apply suggestions from code review Co-authored-by: Maxim Titov --- .../learn/understanding-your-ui-as-a-tree.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 9abee284d..7e47af1d8 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -6,7 +6,7 @@ title: Представление UI в виде дерева Ваше приложение React формируется с множеством вложенных друг в друга компонентов. Как же React отслеживает структуру компонентов вашего приложения? -React, как и многие другие библиотеки, моделируют UI в виде дерева. Представив ваше приложении в виде дерева, вы сможете лучше понять взаимосвязь между компонентами, а так же это поможет вам в отладке будущих концепций, таких как: производительность и управление состоянием. +React, как и многие другие библиотеки, моделирует UI в виде дерева. Представив ваше приложение в виде дерева, вы сможете лучше понять взаимосвязь между компонентами, а так же это поможет вам в отладке будущих концепций, таких как: производительность и управление состоянием. @@ -20,20 +20,20 @@ React, как и многие другие библиотеки, моделир ## UI в виде дерева {/*your-ui-as-a-tree*/} -Дерево — это модель отношений между элементами и 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)). Мобильные платформы так же используют структуру дерева для своей иерархии. +Дерево — это модель отношений между элементами, и 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)). Мобильные платформы так же используют структуру дерева для своей иерархии. -React создает UI дерево из ваших компонентов. В этом случае дерево UI используется для последующего рендеринга в DOM. +React создаёт UI-дерево из ваших компонентов. В этом случае дерево UI используется для последующего рендеринга в DOM. -React, так же как браузеры и мобильные платформы, использует структуру дерева для управления и построения связи между компонентами. Эти деревья являются полезным инструментом и помогут вам понять как данные проходят через приложение React и как оптимизировать рендеринг и размер приложения. +React, так же как браузеры и мобильные платформы, использует структуру дерева для управления и построения связи между компонентами. Эти деревья являются полезным инструментом и помогут вам понять как данные проходят через приложение React, как оптимизировать рендеринг и размер приложения. ## Дерево рендеринга {/*the-render-tree*/} Основной особенностью компонентов считается возможность составлять одни компоненты из других. Когда мы [вкладываем компоненты](/learn/your-first-component#nesting-and-organizing-components), у нас есть концепция родительских и дочерних компонентов, где каждый родительский компонент сам может быть дочерним по отношению к другому. -Когда мы рендерим React приложение, мы можем смоделировать эти связи в виде дерева, известного как дерево рендеринга. +Когда мы рендерим React-приложение, мы можем смоделировать эти связи в виде дерева, известного как дерево рендеринга. Вот пример приложения React, которое отображает вдохновляющие цитаты. @@ -120,7 +120,7 @@ export default [ -React создает *дерево рендеринга* и UI дерево состоящих из компонентов прошедших рендеринг. +React создает *дерево рендеринга* и UI-дерево, состоящее из компонентов, прошедших рендеринг. @@ -129,7 +129,7 @@ React создает *дерево рендеринга* и UI дерево со Дерево состоит из узлов, каждый из них представляет компонент. `App`, `FancyText`, `Copyright` и многие другие — это узлы нашего дерева. -Корневой узел в дереве рендеринга React является [корневым компонентом](/learn/importing-and-exporting-components#the-root-component-file) приложения. В нашем случае корневой компонент предстовляет `App` и React рендерит его первым. Каждое ответление в дереве идет от родительского компонента к дочернему. +Корневой узел в дереве рендеринга React является [корневым компонентом](/learn/importing-and-exporting-components#the-root-component-file) приложения. В нашем случае корневой компонент предстовлен `App`, и React рендерит его первым. Каждое ответление в дереве идёт от родительского компонента к дочернему. @@ -137,9 +137,9 @@ React создает *дерево рендеринга* и UI дерево со Возможно, вы уже заметили, что в приведенном выше дереве рендеринга нет упоминания о HTML-тегах, которые отображает каждый компонент. Это происходит потому, что дерево рендеринга состоит только из [компонентов](learn/your-first-component#components-ui-building-blocks) React. -Как фреймворк UI, React является платформо-независимым. Здесь же мы демонстрируем примеры рендеринга в web, где в качестве примитивов UI используется разметка HTML. Но приложение React так же может запускаться на мобильных или десктоп платформах, которые используют другие UI примитивы, такие как: [UIView](https://developer.apple.com/documentation/uikit/uiview) или [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0). +Как UI-фреймворк, React является платформонезависимым. В документации мы демонстрируем примеры рендеринга в web, где в качестве примитивов UI используется разметка HTML. Но приложение React так же может запускаться на мобильных или десктоп платформах, которые используют другие UI-примитивы, такие как: [UIView](https://developer.apple.com/documentation/uikit/uiview) или [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0). -Но примитивы на этих платформах не являются частью React и его дерево так же может давать представление о нашем приложении независимо от того, на какой платформе запускается ваше приложение. +Но примитивы на этих платформах не являются частью React. Его дерево может давать представление о вашем приложении независимо от того, на какой платформе запускается ваше приложение. @@ -281,13 +281,13 @@ export default [ Дерево зависимостей помогает определить какие модули необходимы для запуска вашего React приложения. При создании приложения для продакшена есть этап сборки, на котором весь необходимый JavaScript будет отправлен клиенту. На этом этапе [сборщик пакетов](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem) использует дерево зависимостей для того, чтобы определить какие модули содержит проект. -По мере роста вашего приложения часто увеличивается и размер сборщика. При больших размерах требуются больше затрат для загрузки и запуска клиента, а так же это может задерживать прорисовку вашего UI. Понимание же дерева зависимостей вашего приложения может помочь в отладке и устранении этих проблем. +По мере роста вашего приложения часто увеличивается и размер сборщика. При больших размерах требуется больше затрат для загрузки и запуска клиента, а так же это может задерживать прорисовку вашего UI. Понимание же дерева зависимостей вашего приложения может помочь в отладке и устранении этих проблем. [comment]: <> (perhaps we should also deep dive on conditional imports) -* Деревья — это распространенный способ показать отношение между сущностями. Они очень частно используются для построения UI. +* Деревья — это распространенный способ показать отношения между сущностями. Они очень частно используются для построения UI. * Деревья рендеринга представляют собой отношения между вложенными компонентами React в рамках одной отрисовки. * С отрисоквой по условию, дерево рендеринга может меняться при разных запусках. В зависимости от пропсов, компоненты могут отображать разные дочерние компоненты. * Деревья рендеринга помогают определить, что такое компоненты верхнего уровня и конечные компоненты. Компоненты верхнего уровня влияют на производительность отрисовки всех компонентов, находящихся под ними, а конечные компоненты часто перерисовываются повторно. Их выявление поможет вам для понимания и отладки производительности рендеринга. From ebe32d07812b62526bd3dcf5fd931f15552eb502 Mon Sep 17 00:00:00 2001 From: Pavel <60206216+L1ghT0@users.noreply.github.com> Date: Wed, 13 Mar 2024 17:45:51 -0400 Subject: [PATCH 3/6] Translated in --- src/content/learn/understanding-your-ui-as-a-tree.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 7e47af1d8..4244b4c3d 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/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)). Мобильные платформы так же используют структуру дерева для своей иерархии. - + React создаёт UI-дерево из ваших компонентов. В этом случае дерево UI используется для последующего рендеринга в DOM. @@ -118,7 +118,7 @@ export default [ - + React создает *дерево рендеринга* и UI-дерево, состоящее из компонентов, прошедших рендеринг. @@ -245,7 +245,7 @@ export default [ ``` - + При условном рендеринге, в разных случаях, дерево рендеринга может строить разные компоненты. @@ -265,7 +265,7 @@ export default [ Если мы возьмем предыдущее приложение с вдохновляющими цитатами, мы сможем построить дерево зависимостей модулей. - + Дерево зависимостей модулей для приложения с вдохновляющими цитатами. From 3a35577c3728250ff885e1044b3800fad16bfdf2 Mon Sep 17 00:00:00 2001 From: Pavel <60206216+L1ghT0@users.noreply.github.com> Date: Wed, 13 Mar 2024 17:59:01 -0400 Subject: [PATCH 4/6] Fixed: (incorrect quotation marks in ) --- src/content/learn/understanding-your-ui-as-a-tree.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 4244b4c3d..4bfe3b68c 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/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)). Мобильные платформы так же используют структуру дерева для своей иерархии. - + React создаёт UI-дерево из ваших компонентов. В этом случае дерево UI используется для последующего рендеринга в DOM. @@ -265,7 +265,7 @@ export default [ Если мы возьмем предыдущее приложение с вдохновляющими цитатами, мы сможем построить дерево зависимостей модулей. - + Дерево зависимостей модулей для приложения с вдохновляющими цитатами. From 70b8c837d3e5c946902ab8ea0bec0ea02f6f8ec3 Mon Sep 17 00:00:00 2001 From: Pavel <60206216+L1ghT0@users.noreply.github.com> Date: Thu, 21 Mar 2024 00:48:32 -0400 Subject: [PATCH 5/6] Inspirational quotes translated --- src/content/learn/understanding-your-ui-as-a-tree.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index 4bfe3b68c..99a4ca064 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -94,9 +94,9 @@ export default function Copyright({year}) { ```js quotes.js export default [ - "Don’t let yesterday take up too much of today.” — Will Rogers", - "Ambition is putting a ladder against the sky.", - "A joy that's shared is a joy made double.", + "Не позволяй вчерашнему дню занять слишком много времени сегодня.” — Уилл Роджерс", + "Амбиции — это поставить лестницу к небу.", + "Радость, которой делятся, — это радость вдвойне", ]; ``` @@ -214,11 +214,11 @@ export default function Copyright({year}) { ```js inspirations.js export default [ - {type: 'quote', value: "Don’t let yesterday take up too much of today.” — Will Rogers"}, + {type: 'quote', value: "Не позволяй вчерашнему дню занять слишком много времени сегодня.” — Уилл Роджерс"}, {type: 'color', value: "#B73636"}, - {type: 'quote', value: "Ambition is putting a ladder against the sky."}, + {type: 'quote', value: "Амбиции — это поставить лестницу к небу."}, {type: 'color', value: "#256266"}, - {type: 'quote', value: "A joy that's shared is a joy made double."}, + {type: 'quote', value: "Радость, которой делятся, — это радость вдвойне."}, {type: 'color', value: "#F9F2B4"}, ]; ``` From 4234a5389b109efaf7a1af26c9cdf677917d0fc9 Mon Sep 17 00:00:00 2001 From: Maxim Titov Date: Fri, 22 Mar 2024 16:48:51 +0500 Subject: [PATCH 6/6] Update understanding-your-ui-as-a-tree.md Fix typo from a suggestion --- src/content/learn/understanding-your-ui-as-a-tree.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index d668bb6a1..6d4138d38 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -129,13 +129,13 @@ React создает *дерево рендеринга* и UI-дерево, с Дерево состоит из узлов, каждый из них представляет компонент. `App`, `FancyText`, `Copyright` и многие другие — это узлы нашего дерева. -Корневой узел в дереве рендеринга React является [корневым компонентом](/learn/importing-and-exporting-components#the-root-component-file) приложения. В нашем случае корневой компонент предстовлен `App`, и React рендерит его первым. Каждое ответление в дереве идёт от родительского компонента к дочернему. +Корневой узел в дереве рендеринга React является [корневым компонентом](/learn/importing-and-exporting-components#the-root-component-file) приложения. В нашем случае корневой компонент представлен `App`, и React рендерит его первым. Каждое ответление в дереве идёт от родительского компонента к дочернему. #### Где же находятся HTML-теги в дереве рендеринга? {/*where-are-the-html-elements-in-the-render-tree*/} -Возможно, вы уже заметили, что в приведенном выше дереве рендеринга нет упоминания о HTML-тегах, которые отображает каждый компонент. Это происходит потому, что дерево рендеринга состоит только из [компонентов](learn/your-first-component#components-ui-building-blocks) React. +Возможно, вы уже заметили, что в приведенном выше дереве рендеринга нет упоминания о HTML-тегах, которые отображает каждый компонент. Это происходит, потому что дерево рендеринга состоит только из [компонентов](learn/your-first-component#components-ui-building-blocks) React. Как UI-фреймворк, React является платформонезависимым. В документации мы демонстрируем примеры рендеринга в web, где в качестве примитивов UI используется разметка HTML. Но приложение React так же может запускаться на мобильных или десктоп платформах, которые используют другие UI-примитивы, такие как: [UIView](https://developer.apple.com/documentation/uikit/uiview) или [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0). @@ -145,7 +145,7 @@ React создает *дерево рендеринга* и UI-дерево, с Дерево рендеринга представляет собой одиночный рендеринг приложения React. При [условном рендеринге](/learn/conditional-rendering) родительский компонент может рендерить разные дочерние компоненты в зависимости от переданных данных. -Мы можем обновить наше приложение, чтобы оно по условию отоброжало либо вдохновляющую цитату, либо цвет. +Мы можем обновить наше приложение, чтобы оно по условию отображало либо вдохновляющую цитату, либо цвет. @@ -279,7 +279,7 @@ export default [ * Модули которые не являются компонентами, такие как `inspirations.js`, также представлены в этом дереве. А дерево рендеринга инкапсулирует только компоненты. * `Copyright.js` появляется под `App.js`. Но в дереве рендеринга `Copyright` отображается как дочерний элемент `InspirationGenerator`. Это связано с тем, что `Inspiration Generator` принимает JSX в качестве [дочерних пропсов](/learn/passing-props-to-a-component#passing-jsx-as-children), поэтому он отображает `Copyright` как дочерний компонент, но он не импортирует его. -Дерево зависимостей помогает определить какие модули необходимы для запуска вашего React приложения. При создании приложения для продакшена есть этап сборки, на котором весь необходимый JavaScript будет отправлен клиенту. На этом этапе [сборщик пакетов](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem) использует дерево зависимостей для того, чтобы определить какие модули содержит проект. +Дерево зависимостей помогает определить какие модули необходимы для запуска вашего React-приложения. При создании приложения для продакшена есть этап сборки, на котором весь необходимый JavaScript будет отправлен клиенту. На этом этапе [сборщик пакетов](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem) использует дерево зависимостей для того, чтобы определить какие модули содержит проект. По мере роста вашего приложения часто увеличивается и размер сборщика. При больших размерах требуется больше затрат для загрузки и запуска клиента, а так же это может задерживать прорисовку вашего UI. Понимание же дерева зависимостей вашего приложения может помочь в отладке и устранении этих проблем. @@ -287,9 +287,9 @@ export default [ -* Деревья — это распространенный способ показать отношения между сущностями. Они очень частно используются для построения UI. +* Деревья — это распространенный способ показать отношения между сущностями. Они очень часто используются для построения UI. * Деревья рендеринга представляют собой отношения между вложенными компонентами React в рамках одной отрисовки. -* С отрисоквой по условию, дерево рендеринга может меняться при разных запусках. В зависимости от пропсов, компоненты могут отображать разные дочерние компоненты. +* С отрисовкой по условию, дерево рендеринга может меняться при разных запусках. В зависимости от пропсов, компоненты могут отображать разные дочерние компоненты. * Деревья рендеринга помогают определить, что такое компоненты верхнего уровня и конечные компоненты. Компоненты верхнего уровня влияют на производительность отрисовки всех компонентов, находящихся под ними, а конечные компоненты часто перерисовываются повторно. Их выявление поможет вам для понимания и отладки производительности рендеринга. * Дерево зависимостей — это зависимость модулей в приложении React. * Деревья зависимостей пользуются инструментами сборки для объединения необходимого кода для отправки приложения.