Skip to content

Commit

Permalink
Post merge conflict fix for describing-the-ui
Browse files Browse the repository at this point in the history
  • Loading branch information
cvijandj committed Jan 25, 2024
1 parent 0d400ff commit fed2761
Showing 1 changed file with 12 additions and 26 deletions.
38 changes: 12 additions & 26 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 je JavaScript biblioteka za prikazivanje korisničkog interfejsa (UI). UI

<YouWillLearn isChapter={true}>

<<<<<<< HEAD
* [Kako da napišete svoju prvu React komponentu](/learn/your-first-component)
* [Kada i kako da kreirate više komponenti u jednom fajlu](/learn/importing-and-exporting-components)
* [Kako da dodate markup u JavaScript pomoću JSX](/learn/writing-markup-with-jsx)
Expand All @@ -19,17 +18,7 @@ React je JavaScript biblioteka za prikazivanje korisničkog interfejsa (UI). UI
* [Kako da uslovno prikažete komponente](/learn/conditional-rendering)
* [Kako da prikažete više komponenti odjednom](/learn/rendering-lists)
* [Kako da izbegnete zbunjujuće greške tako što ćete komponente držati čistim](/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
* [Kako da razumete vaš UI kao stablo](/learn/understanding-your-ui-as-a-tree)

</YouWillLearn>

Expand Down Expand Up @@ -536,42 +525,39 @@ Pročitajte **[Održavanje komponenti čistim](/learn/keeping-components-pure)**

</LearnMore>

<<<<<<< HEAD
## Šta dalje? {/*whats-next*/}
=======
## Your UI as a tree {/*your-ui-as-a-tree*/}
## Razumevanje vašeg UI kao stabla {/*understanding-your-ui-as-a-tree*/}

React koristi stabla da modeluje odnose između komponenti i modula.

React uses trees to model the relationships between components and modules.
React render stablo je reprezentacija odnosa roditelj-dete između komponenti.

A React render tree is a representation of the parent and child relationship between components.

<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.
Primer render stabla.

</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.
Komponente koje se nalaze bliže vrhu stabla, bliže korenu komponente, smatraju se komponentama najvišeg nivoa. Komponente bez podkomponenti su list komponente. Ova kategorizacija komponenti je korisna za razumevanje toka podataka i performansi renderovanja.

Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree.
Modelovanje odnosa između JavaScript modula je još jedan koristan način za razumevanje vaše aplikacije. Mi ga nazivamo modul zavisnosti stablo.

<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.
Primer modul zavisnosti stabla.

</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.
Drvo zavisnosti čest ose korišćeno od strane alata za izgradnju da bi se sve relevantne JavaScript datoteke za klijenta spakovalo u jednu datoteku. Velika veličina paketa regresira korisničko iskustvo za React aplikacije. Razumevanje modul zavisnosti stabla je korisno za otklanjanje grešaka.

<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.
Pročitajte **[Razumevanje vašeg UI kao stabla](/learn/understanding-your-ui-as-a-tree)** da biste naučili kako da kreirate render i modul zavisnosti stabla za React aplikaciju i kako su korisni mentalni modeli za poboljšanje korisničkog iskustva i performansi.

</LearnMore>


## What's next? {/*whats-next*/}
>>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
## Šta dalje? {/*whats-next*/}

Idite do [Vaša prva komponenta](/learn/your-first-component) da biste počeli da čitate ovo poglavlje stranicu po stranicu!

Expand Down

0 comments on commit fed2761

Please sign in to comment.