Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix merge conflicts and update describing-the-ui.md #52

Merged
merged 1 commit into from
Nov 2, 2023
Merged

Fix merge conflicts and update describing-the-ui.md #52

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 10 additions & 24 deletions src/content/learn/describing-the-ui.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ React ແມ່ນ JavaScript library ສຳລັບສະແດງຜົນໜ

<YouWillLearn isChapter={true}>

<<<<<<< HEAD
* [ວິທີຂຽນ React component ທຳອິດຂອງທ່ານ](/learn/your-first-component)
* [ເມືອໃດ ແລະ ວິທີການສ້າງຫຼາຍຟາຍ component](/learn/importing-and-exporting-components)
* [ວິທີການເພີ່ມ markup ໃສ່ JavaScript ດ້ວຍ JSX](/learn/writing-markup-with-jsx)
Expand All @@ -19,17 +18,8 @@ React ແມ່ນ JavaScript library ສຳລັບສະແດງຜົນໜ
* [ວິທີການສະແດງ component ແບບມີເງື່ອນໄຂ](/learn/conditional-rendering)
* [ວິທີການສະແດງຫຼາຍ component ພ້ອມກັນ](/learn/rendering-lists)
* [ວິທີການຫຼີກເວັ້ນຂໍ້ຜິດພາດໂດຍການຮັກສາໃຫ້ component pure ທີ່ສຸດ](/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)
>>>>>>> 4bdb87b172a7723d56d03a5630c8a9870f6f03ec

</YouWillLearn>

Expand Down Expand Up @@ -535,42 +525,38 @@ export default function TeaSet() {

</LearnMore>

<<<<<<< HEAD
## ຕໍ່ໄປແມ່ນຫຍັງ? {/*whats-next*/}
=======
## Your UI as a tree {/*your-ui-as-a-tree*/}
## UI ຂອງທ່ານຄືກັບຕົ້ນໄມ້ {/*your-ui-as-a-tree*/}

React uses trees to model the relationships between components and modules.
React ໃຊ້ tree ເພື່ອສ້າງ model ຄວາມສຳພັນລະຫວ່າງ component ແລະ module.

A React render tree is a representation of the parent and child relationship between components.
tree ການ render React ເປັນຕົວແທນຂອງຄວາມສຳພັນລະຫວ່າງ parent ແລະ child ລະຫວ່າງ component ຕ່າງໆ.

<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.
ຕົວຢ່າງ React render tree.

</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.
Component ທີ່ຢູ່ດ້ານເທິງສຸດຂອງ tree, ໃກ້ກັບ root component, ຖືເປັນສ່ວນປະກອບຂອງ top-level component. Component ທີ່ບໍ່ມີ child component ເປັນ leaf component. ການຈັດໝວດໝູ່ component ນີ້ເປັນປະໂຫຍດຫຼາຍສຳລັບການທຳຄວາມເຂົ້າໃຈການໄຫຼຂໍ້ມູນ ແລະ ປະສິດທິພາບການ render.

Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree.
ການສ້າງ Model ຄວາມສຳພັນລະຫວ່າງ JavaScript module ເປັນອີກວິທີທີ່ມີປະໂຫຍດໃນການທຳຄວາມເຂົ້າໃຈແອັບຂອງທ່ານ. ພວກເຮົາເອີ້ນມັນວ່າເປັນ module dependency tree.

<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.
ຕົວຢ່າງຂອງ module dependency tree.

</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.
Build tools ມັກໃຊ້ dependency tree ເພື່ອລວມ JavaScript Code ທີ່ກ່ຽວຂ້ອງທັງໝົດເພື່ອໃຫ້ client ດາວໂຫຼດ ແລະ render. Bundle ຂະໜາດໃຫຍ່ເຮັດໃຫ້ປະສົບການໃຊ້ງານຂອງຜູ້ໃຊ້ງານບໍ່ຄ່ອຍດີສຳລັບແອັບ React. ການທຳຄວາມເຂົ້າໃຈ module dependency tree ເປັນປະໂຫຍດຫຼາຍໃນການ debug ຫາບັນຫາດັ່ງກ່າວ.

<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.
ອ່ານ **[UI ຂອງທ່ານຄືກັບຕົ້ນໄມ້](/learn/understanding-your-ui-as-a-tree)** ເພື່ອຮຽນຮູ້ກ່ຽວກັບວິທີສ້າງການ render ແລະ module dependency tree ສຳລັບແອັບ React ແລະ ແບບຢ່າງ model ທີ່ເປັນປະໂຫຍດແນວໃດສຳລັບການປັບປຸງປະສົບການໃຊ້ງານຂອງຜູ້ໃຊ້ ແລະ ປະສິດທິພາບ.

</LearnMore>


## What's next? {/*whats-next*/}
>>>>>>> 4bdb87b172a7723d56d03a5630c8a9870f6f03ec
## ຕໍ່ໄປແມ່ນຫຍັງ? {/*whats-next*/}

ໄປທີ່ [Component ທຳອິດຂອງທ່ານ](/learn/your-first-component) ເພື່ອເລີ່ມອ່ານບົດນີ້ເທື່ອລະໜ້າ!

Expand Down
Loading