Refine the Quick Start translation

src/content/learn/index.md

@@ -4,22 +4,22 @@ title: Хурдан Эхлэх
 
 <Intro>
 
-React documentation-д тавтай морил! Энэ хуудсанд таны өдөр тутам хэрэглэх React-ийн 80%-ийн ойлголтуудыг танилцуулах болно.
+React-ийн баримт бичигт тавтай морил! Энэ хуудсаар та өдөр тутам ашиглах React-ийн ойлголтуудын 80%-тай танилцана.
 
 </Intro>
 
 <YouWillLearn>
 
-- Хэрхэн компонент бүтээж нэгтгэх
-- Хэрхэн Markup болон styles нэмэх
+- Хэрхэн компонент үүсгэж, нэгтгэх
+- Хэрхэн markup болон загвар нэмэх
 - Хэрхэн өгөгдөл харуулах
 - Хэрхэн нөхцөл болон жагсаалт нэмэх
 - Үйл явдалд хэрхэн хариу үйлдэл үзүүлж дэлгэцийг шинэчлэх
 - Хэрхэн компонент хооронд өгөгдөл хуваалцах
 
 </YouWillLearn>
 
-## Хэрхэн компонент бүтээж нэгтгэх вэ {/*components*/}
+## Хэрхэн компонент үүсгэж, нэгтгэх вэ {/*components*/}
 
 React аппууд нь *компонент*-уудаас буюу бүтэц хэсгүүдээс бүтдэг. Компонент гэдэг нь өөрийн гэсэн логик, харагдах байдалтай UI (user interface) хэсэг юм. Компонент нь жижигхэн товч эсвэл бүтэн хуудас ч байж болдог.
 
@@ -33,7 +33,7 @@ function MyButton() {
 }
 ```
 
-Ингэснээр та өөрийн товч болох `MyButton`-ыг зарлачихлаа, Одоо үүнийг өөр нэг компонентд нэгтгэж үзье:
+Ингэснээр та `MyButton` нэртэй товч компонентоо зарлалаа. Одоо үүнийг өөр компонент дотор ашиглая:
 
 ```js {5}
 export default function MyApp() {
@@ -46,7 +46,7 @@ export default function MyApp() {
 }
 ```
 
-Компонент нэгтгэх, зарлах нь том үсгээр эхлэж байгааг анзаараарай `<MyButton />`. Ингэснээр та үүнийг React component гэж таних боломжтой. React component нь заавал том үсгээр эхлэх ёстой ба HTML tag-ууд нь жижиг үсэг байх ёстой гэдгийг санаарай.
+`<MyButton />` том үсгээр эхэлж байгааг анзаараарай. Ингэснээр React үүнийг компонент гэж танина. React компонентийн нэр заавал том үсгээр, харин HTML tag жижиг үсгээр эхлэх ёстойг санаарай.
 
 Одоо үр дүнг нь үзье:
 
@@ -73,13 +73,13 @@ export default function MyApp() {
 
 </Sandpack>
 
-`export default` нь файлын үндсэн компонентийг зааж өгдөг. Хэрэв JavaScript syntax талаар ойлголтгүй бол, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) , [javascript.info](https://javascript.info/import-export) сайтаар зочилж мэдээлэл аваарай.
+`export default` нь файлын үндсэн компонентийг зааж өгдөг. Хэрэв JavaScript-ийн энэ syntax-ийн талаар сайн мэдэхгүй бол [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) болон [javascript.info](https://javascript.info/import-export) сайтаас дэлгэрүүлэн уншаарай.
 
 ## JSX ашиглан markup бичих нь {/*writing-markup-with-jsx*/}
 
-Markup syntax нь таны харж байгаачлан *JSX* гэж нэрлэгддэг. Ашиглах эсэх нь таны дур боловч ихэнх React төслүүд тохиромжтой байх үүднээс JSX ашигладаг. Мөн бүх [local хөгжүүлэлтэнд санал болгох хэрэгслүүд](/learn/installation) нь JSX-г дэмждэг юм.
+Markup syntax нь таны харж байгаачлан *JSX* гэж нэрлэгддэг. Ашиглах эсэх нь таны дур боловч ихэнх React төслүүд тохиромжтой байх үүднээс JSX ашигладаг. Мөн бүх [local хөгжүүлэлтэд санал болгох хэрэгслүүд](/learn/installation) нь JSX-г дэмждэг юм.
 
-JSX нь HTML-ыг бодвол арай хатуу дүрэмтэй. Жишээ нь `<br />` гэх мэт tag-уудыг хаах ёстой. Мөн компонент нь нэгээс дээш JSX tag буцааж болохгүй. Аль нэг parent-д оруулах хэрэгтэй, жишээ нь `<div>...</div>` эсвэл хоосон `<>...</>` гэх wrapper-т:
+JSX нь HTML-ыг бодвол арай хатуу дүрэмтэй. Жишээ нь `<br />` гэх мэт tag-уудыг хаах ёстой. Мөн компонент нь нэгээс дээш JSX tag буцааж болохгүй. Аль нэг parent-д оруулах хэрэгтэй, жишээ нь `<div>...</div>` эсвэл хоосон `<>...</>` wrapper-т:
 
 ```js {3,6}
 function AboutPage() {
@@ -92,11 +92,11 @@ function AboutPage() {
 }
 ```
 
-Хэрэв танд JSX руу хувиргах HTML их байгаа бол, [online converter](https://transform.tools/html-to-jsx) хувиргагчыг ашиглаарай
+Хэрэв танд JSX руу хувиргах HTML их байгаа бол [online converter](https://transform.tools/html-to-jsx) хувиргагчийг ашиглаарай.
 
 ## Загвар нэмэх нь (styles) {/*adding-styles*/}
 
-React дээр, та CSS class-аа `className` гэж зааж өгөөрэй. Энэ нь HTML дээрхи[`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class)-тай ижил замаар ажилладаг. Жишээ нь:
+React дээр CSS class-аа `className` гэж зааж өгнө. Энэ нь HTML-ийн [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class)-тай ижил зарчмаар ажилладаг. Жишээ нь:
 
 ```js
 <img className="avatar" />
@@ -111,11 +111,11 @@ React дээр, та CSS class-аа `className` гэж зааж өгөөрэй.
 }
 ```
 
-React нь CSS файлуудыг хэрхэн нэмэхийг заадаггүй. Энгийнээр бол [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag-ыг HTML дээрээ зааж өгж болно. Хэрэв тусгай хэрэглүүр эсвэл framework ашиглах бол тухайн заавар, documentation-ээс суулгаж ашиглах зааврыг олоорой.
+React нь CSS файлуудыг хэрхэн нэмэхийг заадаггүй. Энгийнээр бол [`<link>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag-ыг HTML дээрээ зааж өгч болно. Хэрэв тусгай хэрэглүүр эсвэл framework ашиглах бол тухайн заавар, documentation-ээс суулгаж ашиглах зааврыг олоорой.
 
 ## Өгөгдөл дүрслэх нь {/*displaying-data*/}
 
-JSX нь JavaScript дээр markup хийх боломжийг танд олгодог. Буржгар таныг Javascript-тэйгээ найзлахад чинь туслах ба ингэснээр та өөрийн кодоос зарим нэг хувьсагчийг оруулж, хэрэглэгчдэд харуулах боломжтой. Жишээлвэл доорхи код нь `user.name` -ийг дүрслэнэ:
+JSX нь JavaScript дотор markup бичих боломж олгодог. Угалзан хаалт ашиглан JavaScript руу шилжиж, кодын хувьсагчийг оруулан хэрэглэгчид харуулж болно. Жишээлбэл, доорх код `user.name`-ийг дүрсэлнэ:
 
 ```js {3}
 return (
@@ -125,7 +125,7 @@ return (
 );
 ```
 
-Та мөн JSX аттрибутаас "JavaScript руу зугтаж" болно, гэхдээ та хашилтын оронд буржгар ашиглах хэрэгтэй. Жишээлбэл, `className="avatar"` нь `"avatar"` мөрийг CSS class болгон дамжуулдаг боловч `src={user.imageUrl}` нь JavaScript `user.imageUrl` хувьсагчийн утгыг уншиж, дараа нь энэ утгыг `src` атрибут байдлаар дамжуулдаг:
+Та мөн JSX атрибутаас "JavaScript руу шилжиж" болно. Үүний тулд хашилтын оронд угалзан хаалт ашиглана. Жишээлбэл, `className="avatar"` нь `"avatar"` мөрийг CSS class болгон дамжуулдаг бол `src={user.imageUrl}` нь JavaScript-ийн `user.imageUrl` хувьсагчийн утгыг уншиж, `src` атрибут болгон дамжуулдаг:
 
 ```js {3,4}
 return (
@@ -136,7 +136,7 @@ return (
 );
 ```
 
-Та JSX буржгар хаалтанд үүнээс ч илүү төвөгтэй томъёо оруулж болно, жишээлбэл [string concatenation](https://javascript.info/operators#string-concatenation-with-binary):
+Та JSX-ийн угалзан хаалтад үүнээс ч илүү төвөгтэй илэрхийлэл оруулж болно. Жишээлбэл, [string concatenation](https://javascript.info/operators#string-concatenation-with-binary):
 
 
 <Sandpack>
@@ -178,7 +178,7 @@ export default function Profile() {
 
 </Sandpack>
 
-Дээрхи жишээнд, `style={{}}` нь онцгой синтакс биш, харин `style={ }` JSX буржгар хаалт доторх ердийн `{}` объект юм. Таны загвар(style) JavaScript хувьсагчдаас хамаарах үед та `style` атрибутыг ашиглаж болно.
+Дээрх жишээн дэх `style={{}}` нь онцгой syntax биш, харин `style={ }` JSX угалзан хаалт доторх ердийн `{}` объект юм. Таны загвар (style) JavaScript хувьсагчдаас хамаарах үед `style` атрибутыг ашиглаж болно.
 
 
 ## Нөхцөлт дүрслэл {/*conditional-rendering*/}
@@ -305,7 +305,7 @@ function MyButton() {
 
 ## Дэлгэц шинэчлэх нь {/*updating-the-screen*/}
 
-Зарим тохиолдолд та өөрийн зарим мэдээллийг "санаж", харуулах компонент үүсгэхийг хүсэж магадгүй. Жишээлбэл, та товчыг хэдэн удаа дарж байгааг тоолмоор байж болно. Үүнийг хийхийн тулд өөрийн компонентэд *state* нэмнэ.
+Зарим тохиолдолд та өөрийн зарим мэдээллийг "санаж", харуулах компонент үүсгэхийг хүсэж магадгүй. Жишээлбэл, та товчыг хэдэн удаа дарж байгааг тоолмоор байж болно. Үүнийг хийхийн тулд өөрийн компонентэд *төлөв* буюу *state* нэмнэ.
 
 Эхлээд React-аас [`useState`](/reference/react/useState) импортлох хэрэгтэй:
 
@@ -323,7 +323,7 @@ function MyButton() {
 
 Та `useState`-ээс хоёр зүйлийг авах болно: одоогийн төлөв (`count`) болон үүнийг шинэчлэх боломжийг олгодог функц (`setCount`). Та тэдэнд ямар ч нэр өгч болно, гэхдээ дүрэм нь `[yamarnegzvil, setYamarnegzvil]` гэж бичих юм.
 
-Товч анх үзэгдэх үед `count` нь `0` байх болно, учир нь та `useState()` руу `0`-г дамжуулсан. Төлөвийг өөрчлөхийг хүсвэл `setCount()'-ыг дуудаж түүнд шинэ утгыг дамжуулаарай. Товчийг дарснаар тоолуур нэмэгдэнэ:
+Товч анх үзэгдэх үед `count` нь `0` байх болно, учир нь та `useState()` руу `0`-г дамжуулсан. Төлөвийг өөрчлөхийг хүсвэл `setCount()`-ыг дуудаж түүнд шинэ утгыг дамжуулаарай. Товчийг дарснаар тоолуур нэмэгдэнэ:
 
 ```js {5}
 function MyButton() {
@@ -343,7 +343,7 @@ function MyButton() {
 
 React таны компонентийн функцийг дахин дуудна. Товчин дээр дарах үед тоо нь `1` болно, дараа нь `2` болно гэх мэт.
 
-Хэрэв компонентоо 2 удаа дуудвал тус тус өөрийн төлөвтэй байх болно. Аль аль товчыг нь дараад үзээрэй
+Хэрэв компонентоо 2 удаа дуудвал тус тус өөрийн төлөвтэй байх болно. Аль аль товчыг нь дараад үзээрэй.
 
 <Sandpack>
 
@@ -385,11 +385,11 @@ button {
 </Sandpack>
 
 
-Товч тус бүр өөрийн `тоолох` төлөвийг хэрхэн "санаж", нөгөө тоолуурдаа нөлөөлөхгүй байгааг анзаараарай.
+Товч тус бүр өөрийн `тоолох` төлөвийг хэрхэн "санаж", нөгөө тоолууртаа нөлөөлөхгүй байгааг анзаараарай.
 
 ## Hooks ашиглах нь {/*using-hooks*/}
 
-`use`-ээр эхэлсэн функцуудыг ерөнхийд нь *Hooks* гэж нэрлэдэг. Жишээ нь `useState` гэхэд React-ийн бэлдэж суурилуулсан Hook бөгөөд Бусад React-ийн бэлдэж суурилуулсан Hook-уудийг [API лавлагаа.](/reference/react) дотроос олох боломжтой. Та мөн бэлдсэн Hook-уудийг ашиглан нэгтгэж өөрийн гэсэн hook бичих боломжтой.
+`use`-ээр эхэлсэн функцуудыг ерөнхийд нь *Hooks* гэж нэрлэдэг. Жишээ нь `useState` гэхэд React-ийн бэлдэж суурилуулсан Hook бөгөөд бусад React-ийн бэлдэж суурилуулсан Hook-уудыг [API лавлагаа](/reference/react) дотроос олох боломжтой. Та мөн бэлдсэн Hook-уудыг ашиглан нэгтгэж өөрийн гэсэн hook бичих боломжтой.
 
 Hooks нь бусад функцуудээ бодвол арай хязгаарлагдмал байдаг. Та hook дуудахдаа зөвхөн компонентийн дээд хэсэгт дуудах ёстой. Хэрэв та нөхцөл эсвэл давталтанд `useState`-г ашиглахыг хүсвэл шинэ компонент задалж, тэнд байрлуулаарай.
 
@@ -415,9 +415,7 @@ Hooks нь бусад функцуудээ бодвол арай хязгаар
 
 Гэсэн хэдий ч танд өгөгдөл хуваалцдаг, үргэлж хамт шинэчлэгддэг компонентууд хэрэг болно
 
-To make both `MyButton` components display the same `count` and update together, you need to move the state from the individual buttons "upwards" to the closest component containing all of them.
-
-Тусдаа орших хоёр `MyButton` компонентийн тоолуурийг ижил болгохын тулд, Тоолуурын функцээ хамгийн эхэнд байрлах буюу үндсэн компонентийн дотор байрлуулах хэрэгтэй.
+Хоёр `MyButton` компонентод ижил `count` харуулж, хамтад нь шинэчлэхийн тулд тус тусын товч доторх төлөвийг тэдгээрийг агуулдаг хамгийн ойрын компонент руу дээш шилжүүлэх хэрэгтэй.
 
 Доорхи жишээн дээр `MyApp` компонент дотор байрлуулав:
 
@@ -439,7 +437,7 @@ To make both `MyButton` components display the same `count` and update together,
 
 Одоо та аль нэг товч дээр дарахад `MyApp` доторх `count` төлөв өөрчлөгдөх бөгөөд энэ нь `MyButton`-ий тоонуудыг хоёуланг нь өөрчлөх болно. Үүнийг кодоор хэрхэн илэрхийлж болохыг доорхи жишээнээс үзнэ үү.
 
-Эхлээд, *State ээ*  `MyButton` дотроос авж `MyApp`-руу нүүлгье:
+Эхлээд *state*-ийг `MyButton` дотроос `MyApp` руу шилжүүлье:
 
 ```js {2-6,18}
 export default function MyApp() {
@@ -500,10 +498,8 @@ function MyButton({ count, onClick }) {
 }
 ```
 
-When you click the button, the `onClick` handler fires. Each button's `onClick` prop was set to the `handleClick` function inside `MyApp`, so the code inside of it runs. That code calls `setCount(count + 1)`, incrementing the `count` state variable. The new `count` value is passed as a prop to each button, so they all show the new value. This is called "lifting state up". By moving state up, you've shared it between components.
-
+Товчийг дарахад `onClick` handler ажиллана. Товч бүрийн `onClick` prop-ийг `MyApp` доторх `handleClick` функцээр тохируулсан тул уг функцийн код ажиллана. Тэр код `setCount(count + 1)`-ыг дуудаж, `count` төлөвийн хувьсагчийг нэмэгдүүлнэ. Шинэ `count` утгыг товч бүрт prop болгон дамжуулдаг тул бүгд шинэ утгыг харуулна. Үүнийг "төлөвийг дээш өргөх" (lifting state up) гэж нэрлэдэг. Ингэснээр төлөвийг компонентууд хоорондоо хуваалцана.
 
-Таныг товчин дээр дарах үед, `onClick` handler асах болно. Товч тус бүрийн`onClick` prop-ийг `MyApp` доторхи `handleClick` функцээр тохируулсан тул доторх код нь ажиллах юм. Энэ код нь `setCount(count + 1)`-ийг дуудах ба `count` төлөвийн хувьсагчийг нэмэгдүүлнэ. Шинэ `count` утгыг товч бүрт prop болгон дамжуулдаг тул бүгд шинэ утгыг харуулдаг. Үүнийг "төлөв өргөх(lifting state up)" гэж нэрлэнэ. Төлөвийг дээшлүүлснээр та үүнийг компонентуудын хооронд мэдээлэл хуваалцах юм.
 <Sandpack>
 
 ```js