From 1b5b58d4599d16ca19aacc9f98012abc6793d43e Mon Sep 17 00:00:00 2001 From: TolgaYuceel Date: Tue, 13 Feb 2024 21:45:54 +0300 Subject: [PATCH 1/2] translate understanding-your-ui-as-a-tree.md --- .../learn/understanding-your-ui-as-a-tree.md | 124 +++++++++--------- src/sidebarLearn.json | 2 +- 2 files changed, 63 insertions(+), 63 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 2abf7affc..24f9f95ca 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: Kullanıcı Arayüzünüzü Bir Ağaç Olarak Anlamak --- -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 uygulamanız birçok bileşenin iç içe geçmesiyle şekilleniyor. React, uygulamanızın bileşen yapısını nasıl takip ediyor? -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 ve diğer birçok UI kütüphanesi, UI'ı bir ağaç olarak modeller. Uygulamanızı bir ağaç olarak düşünmek, bileşenler arasındaki ilişkiyi anlamak için kullanışlıdır. Bu anlayış, performans ve durum yönetimi gibi gelecekteki kavramlarda hata ayıklamanıza yardımcı olacaktır. -* 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 bileşen yapılarını nasıl "görür" +* Render ağacı nedir ve ne işe yarar +* Modül bağımlılık ağacının ne olduğu ve ne işe yaradığı -## Your UI as a tree {/*your-ui-as-a-tree*/} +## Bir ağaç olarak kullanıcı arayüzünüz {/*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. +Ağaçlar öğeler arasında bir ilişki modelidir ve kullanıcı arayüzü genellikle ağaç yapıları kullanılarak temsil edilir. Örneğin, tarayıcılar HTML ([DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)) ve CSS ([CSSOM](https://developer.mozilla.org/docs/Web/API/CSS_Object_Model)) modellemek için ağaç yapılarını kullanır. Mobil platformlar da görünüm hiyerarşilerini temsil etmek için ağaçları kullanır. - + -React creates a UI tree from your components. In this example, the UI tree is then used to render to the DOM. +React, bileşenlerinizden bir Kullanıcı Arayüzü(UI) ağacı oluşturur. Bu örnekte, Kullanıcı Arayüzü(UI) ağacı daha sonra DOM'a render etmek için kullanılır. -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. +Tarayıcılar ve mobil platformlar gibi React de bir React uygulamasındaki bileşenler arasındaki ilişkiyi yönetmek ve modellemek için ağaç yapıları kullanır. Bu ağaçlar, verilerin bir React uygulamasında nasıl aktığını ve render ile uygulama boyutunun nasıl optimize edileceğini anlamak için yararlı araçlardır. -## The Render Tree {/*the-render-tree*/} +## Render Ağacı {/*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. +Bileşenlerin önemli bir özelliği, diğer bileşenlerin bileşenlerini oluşturma yeteneğidir. Eş [bileşenleri iç içe](/learn/your-first-component#nesting-and-organizing-components) yerleştirdiğimizde, her bir üst bileşenin kendisinin başka bir bileşenin alt elemanı olabileceği üst ve alt bileşen kavramına sahip oluruz. -When we render a React app, we can model this relationship in a tree, known as the render tree. +Bir React uygulamasını render ettiğimizde, bu ilişkiyi render ağacı olarak bilinen bir ağaçta modelleyebiliriz. -Here is a React app that renders inspirational quotes. +İşte ilham verici alıntıları render eden bir React uygulaması. @@ -47,7 +47,7 @@ import Copyright from './Copyright'; export default function App() { return ( <> - + @@ -77,9 +77,9 @@ export default function InspirationGenerator({children}) { return ( <> -

Your inspirational quote is:

+

İlham verici sözün:

- + {children} ); @@ -94,9 +94,9 @@ export default function Copyright({year}) { ```js src/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.", + "Zafer, 'zafer benimdir' diyebilenindir.Başarı ise 'başaracağım' diye başlayarak sonunda 'başardım' diyenindir. - Mustafa Kemal Atatürk", + "Hırs, gökyüzüne merdiven dayamaktır.", + "Paylaşılan bir sevinç, ikiye katlanmış bir sevinçtir.", ]; ``` @@ -118,34 +118,34 @@ export default [ - + -React creates a *render tree*, a UI tree, composed of the rendered components. +React, render edilen bileşenlerden oluşan bir Kullanıcı Arayüzü(UI) ağacı olan *render ağacı* oluşturur. -From the example app, we can construct the above render tree. +Örnek uygulama üzerinden yukarıdaki render ağacını oluşturabiliriz. -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. +Ağaç, her biri bir bileşeni temsil eden düğümlerden oluşur. Birkaç örnek vermek gerekirse `App`, `FancyText`, `Copyright`, hepsi ağacımızdaki düğümlerdir. -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 render ağacındaki kök düğüm, uygulamanın [kök bileşeni](/learn/importing-and-exporting-components#the-root-component-file)'dir. Bu durumda, kök bileşen `App`'dir ve React'in işlediği ilk bileşendir. Ağaçtaki her ok, bir üst bileşenden bir alt bileşene işaret eder. -#### Where are the HTML tags in the render tree? {/*where-are-the-html-elements-in-the-render-tree*/} +#### HTML etiketleri render ağacının neresinde? {/*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). +Yukarıdaki render ağacında, her bileşenin işlediği HTML etiketlerinden bahsedilmediğini fark edeceksiniz. Bunun nedeni, render ağacının yalnızca React [bileşenlerinden](learn/your-first-component#components-ui-building-blocks) oluşmasıdır. -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). +React, bir UI çatısı olarak platformdan bağımsızdır. tr.react.dev'de, UI ilkelleri olarak HTML işaretlemesini kullanan web'e işlenen örnekleri sergiliyoruz. Ancak bir React uygulaması, [UIView](https://developer.apple.com/documentation/uikit/uiview) veya [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0) gibi farklı UI ilkellerini kullanabilen bir mobil veya masaüstü platformunda da işlenebilir. -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. +Bu platform UI ilkelleri React'in bir parçası değildir. React render ağaçları, uygulamanızın hangi platformda render edildiğinden bağımsız olarak React uygulamamıza fikir verebilir. -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. +Bir render ağacı, React uygulamasının tek bir render geçişini temsil eder. [Koşullu render](/learn/conditional-rendering) ile bir üst bileşen, aktarılan verilere bağlı olarak farklı alt bileşenleri render edebilir. -We can update the app to conditionally render either an inspirational quote or color. +Uygulamayı koşullu olarak ilham verici bir alıntı veya renk oluşturacak şekilde güncelleyebiliriz. @@ -157,7 +157,7 @@ import Copyright from './Copyright'; export default function App() { return ( <> - + @@ -199,7 +199,7 @@ export default function InspirationGenerator({children}) { ? : } - + {children} ); @@ -214,11 +214,11 @@ export default function Copyright({year}) { ```js src/inspirations.js export default [ - {type: 'quote', value: "Don’t let yesterday take up too much of today.” — Will Rogers"}, + {type: 'quote', value: "Zafer, 'zafer benimdir' diyebilenindir.Başarı ise 'başaracağım' diye başlayarak sonunda 'başardım' diyenindir. - Mustafa Kemal Atatürk"}, {type: 'color', value: "#B73636"}, - {type: 'quote', value: "Ambition is putting a ladder against the sky."}, + {type: 'quote', value: "Hırs, gökyüzüne merdiven dayamaktır."}, {type: 'color', value: "#256266"}, - {type: 'quote', value: "A joy that's shared is a joy made double."}, + {type: 'quote', value: "Paylaşılan bir sevinç, ikiye katlanmış bir sevinçtir."}, {type: 'color', value: "#F9F2B4"}, ]; ``` @@ -245,55 +245,55 @@ export default [ ``` - + -With conditional rendering, across different renders, the render tree may render different components. +Koşullu render ile, farklı render işlemlerinde, render ağacı farklı bileşenleri render edebilir. -In this example, depending on what `inspiration.type` is, we may render `` or ``. The render tree may be different for each render pass. +Bu örnekte, `inspiration.type` öğesinin ne olduğuna bağlı olarak, `` veya `` öğesini render edebiliriz. Render ağacı her render geçişi için farklı olabilir. -Although render trees may differ across render passes, 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. +Render ağaçları render geçişlerinde farklılık gösterse de, bu ağaçlar genellikle bir React uygulamasında *üst düzey* ve *yaprak bileşenlerin* ne olduğunu belirlemek için yardımcı olur. Üst düzey bileşenler, kök bileşene en yakın bileşenlerdir ve altlarındaki tüm bileşenlerin render performansını etkiler ve genellikle en karmaşık bileşenlerdir. Yaprak bileşenler ağacın en altında yer alır ve alt bileşenleri yoktur ve genellikle sık sık yeniden render edilirler. -Identifying these categories of components are useful for understanding data flow and performance of your app. +Bu bileşen kategorilerini tanımlamak, uygulamanızın veri akışını ve performansını anlamak için yararlıdır. -## The Module Dependency Tree {/*the-module-dependency-tree*/} +## Modül Bağımlılık Ağacı {/*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. +Bir React uygulamasında ağaç ile modellenebilecek bir başka ilişki de uygulamanın modül bağımlılıklarıdır. [Bileşenlerimizi ve mantığımızı ayrı dosyalara böldüğümüzde](/learn/importing-and-exporting-components#exporting-and-importing-a-component), bileşenleri, fonksiyonları veya sabitleri dışa aktarabileceğimiz [JS modülleri](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) oluştururuz. -Each node in a module dependency tree is a module and each branch represents an `import` statement in that module. +Bir modül bağımlılık ağacındaki her düğüm bir modüldür ve her dal o modüldeki bir `import` deyimini temsil eder. -If we take the previous Inspirations app, we can build a module dependency tree, or dependency tree for short. +Önceki İlham Alma uygulamasını ele alırsak, bir modül bağımlılık ağacı veya kısaca bağımlılık ağacı oluşturabiliriz. - + -The module dependency tree for the Inspirations app. +İlham Alma uygulaması için modül bağımlılık ağacı. -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. +Ağacın kök düğümü, giriş noktası dosyası olarak da bilinen kök modüldür. Genellikle kök bileşeni içeren modüldür. -Comparing to the render tree of the same app, there are similar structures but some notable differences: +Aynı uygulamanın render ağacı ile karşılaştırıldığında, benzer yapılar vardır ancak bazı önemli farklılıklar da mevcuttur: -* 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. +* Ağacı oluşturan düğümler bileşenleri değil modülleri temsil eder. +* Bileşen olmayan modüller, örneğin `inspirations.js` de bu ağaçta temsil edilir. Render ağacı yalnızca bileşenleri kapsüller. +* `Telif hakkı.js`, `App.js` altında görünür, ancak render ağacında bileşen olan `Copyright`, `InspirationGenerator`ın bir alt elemanı olarak görünür. Bunun nedeni `InspirationGenerator` bileşeninin JSX'i [children props](/learn/passing-props-to-a-component#passing-jsx-as-children) olarak kabul etmesidir, bu nedenle `Copyright` bileşenini alt bileşen olarak işler ancak modülü içe aktarmaz. -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. +Bağımlılık ağaçları, React uygulamanızı çalıştırmak için hangi modüllerin gerekli olduğunu belirlemek için kullanışlıdır. Üretim için bir React uygulaması oluştururken, genellikle istemciye göndermek için gerekli tüm JavaScript'i paketleyecek bir derleme adımı vardır. Bundan sorumlu araca [bundler](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem) adı verilir ve bundler'lar hangi modüllerin dahil edilmesi gerektiğini belirlemek için bağımlılık ağacını kullanır. -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. +Uygulamanız büyüdükçe, genellikle paket boyutu da büyür. Büyük paket boyutlarını, bir istemcinin indirmesi ve çalıştırması oldukça pahalıdır. Büyük paket boyutları, kullanıcı arayüzünüzün çizilme süresini geciktirebilir. Uygulamanızın bağımlılık ağacı hakkında fikir edinmek bu sorunları ayıklamanıza yardımcı olabilir. [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. +* Ağaçlar, varlıklar arasındaki ilişkiyi temsil etmenin yaygın bir yoludur. Genellikle kullanıcı arayüzünü modellemek için kullanılırlar. +* Render ağaçları, tek bir render boyunca React bileşenleri arasındaki iç içe geçmiş ilişkiyi temsil eder. +* Koşullu render ile render ağacı farklı render işlemlerinde değişebilir. Farklı prop değerleri ile bileşenler farklı alt bileşenleri oluşturabilir. +* Render ağaçları, üst düzey ve yaprak bileşenlerin ne olduğunu belirlemeye yardımcı olur. Üst düzey bileşenler altlarındaki tüm bileşenlerin render performansını etkiler ve yaprak bileşenler genellikle sık sık yeniden render edilir. Bunları tanımlamak, oluşturma performansını anlamak ve hata ayıklamak için yararlıdır. +* Bağımlılık ağaçları, bir React uygulamasındaki modül bağımlılıklarını temsil eder. +* Bağımlılık ağaçları, bir uygulamayı göndermek için gerekli kodu paketlemek üzere derleme araçları tarafından kullanılır. +* Bağımlılık ağaçları, boyama süresini yavaşlatan ve hangi kodun paketlendiğini optimize etme fırsatlarını ortaya çıkaran büyük paket boyutlarında hata ayıklamak için kullanışlıdır. diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index cfbef3281..ab7e5c87c 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -88,7 +88,7 @@ "path": "/learn/keeping-components-pure" }, { - "title": "Your UI as a Tree", + "title": "Ağaç Olarak Kullanıcı Arayüzünüz", "path": "/learn/understanding-your-ui-as-a-tree" } ] From 9e49fec6efda98c95587c8592634d60e2b16ec15 Mon Sep 17 00:00:00 2001 From: TolgaYuceel Date: Thu, 15 Feb 2024 23:40:03 +0300 Subject: [PATCH 2/2] fix: typo's --- src/content/learn/understanding-your-ui-as-a-tree.md | 6 +++--- 1 file changed, 3 insertions(+), 3 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 24f9f95ca..7350392c6 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -14,7 +14,7 @@ React ve diğer birçok UI kütüphanesi, UI'ı bir ağaç olarak modeller. Uygu * React bileşen yapılarını nasıl "görür" * Render ağacı nedir ve ne işe yarar -* Modül bağımlılık ağacının ne olduğu ve ne işe yaradığı +* Modül bağımlılık ağacı nedir ve ne işe yarar @@ -137,9 +137,9 @@ React render ağacındaki kök düğüm, uygulamanın [kök bileşeni](/learn/im Yukarıdaki render ağacında, her bileşenin işlediği HTML etiketlerinden bahsedilmediğini fark edeceksiniz. Bunun nedeni, render ağacının yalnızca React [bileşenlerinden](learn/your-first-component#components-ui-building-blocks) oluşmasıdır. -React, bir UI çatısı olarak platformdan bağımsızdır. tr.react.dev'de, UI ilkelleri olarak HTML işaretlemesini kullanan web'e işlenen örnekleri sergiliyoruz. Ancak bir React uygulaması, [UIView](https://developer.apple.com/documentation/uikit/uiview) veya [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0) gibi farklı UI ilkellerini kullanabilen bir mobil veya masaüstü platformunda da işlenebilir. +React, bir UI çatısı olarak platformdan bağımsızdır. tr.react.dev'de, UI öğeleri olarak HTML işaretlemesini kullanan web'e işlenen örnekleri sergiliyoruz. Ancak bir React uygulaması, [UIView](https://developer.apple.com/documentation/uikit/uiview) veya [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0) gibi farklı UI öğelerini kullanabilen bir mobil veya masaüstü platformunda da işlenebilir. -Bu platform UI ilkelleri React'in bir parçası değildir. React render ağaçları, uygulamanızın hangi platformda render edildiğinden bağımsız olarak React uygulamamıza fikir verebilir. +Bu platform UI temel öğeleri React'in bir parçası değildir. React render ağaçları, uygulamanızın hangi platformda render edildiğinden bağımsız olarak React uygulamamıza fikir verebilir.