Fix Tic-Tac-Toe tutorial MDX syntax

Author: Zorig

src/content/learn/tutorial-tic-tac-toe.md

@@ -318,7 +318,7 @@ export default function Square() {
 }
 ```
 
-Хоёр дахь мөр нь button буцааж өгдөг. return JavaScript түлхүүр үг нь функц руу дуудагдсаны дараа буцаах утгыг заадаг. <button> нь JSX элемент юм. JSX элемент гэдэг нь JavaScript код болон HTML тагийг хослуулж, юу харуулахыг тодорхойлдог. className="square" нь button-ийн шинж чанар буюу prop бөгөөд CSS-д хэрхэн загварлахыг хэлдэг.X нь товч дотор харуулж буй текст, харин </button> нь JSX элементийг хааж, дараагийн агуулгыг товч дотор оруулахгүй гэдгийг заана.
+Хоёр дахь мөр товч буцаана. JavaScript-ийн `return` түлхүүр үг нь араас нь бичсэн зүйлийг функц дуудсан талд утга болгон буцаахыг илэрхийлдэг. `<button>` бол JSX элемент юм. JSX элемент нь JavaScript код болон HTML tag-ийг хослуулан юу харуулахыг тодорхойлдог. `className="square"` нь товчны шинж чанар буюу prop бөгөөд товчийг CSS-ээр хэрхэн загварлахыг заана. `X` бол товч дотор харагдах текст, харин `</button>` нь JSX элементийг хааж, дараагийн агуулгыг товч дотор оруулахгүйг илэрхийлнэ.
 
 #### `styles.css` {/*stylescss*/}
 
@@ -510,7 +510,7 @@ body {
 
 Дараагийн алхамд, хэрэглэгч дөрвөлжин дээр дарсан үед дөрвөлжний утгыг хоосноос "X" болгож өөрчлөх хэрэгтэй. Одоогоор самбарыг ингэж бүтээсэн бол дөрвөлжин бүрийг шинэчлэх кодыг 9 удаа хуулж наах шаардлагатай болно (есөн дөрвөлжин тутамд нэг удаа)! Харин хуулж наахын оронд, React-ийн компонентын архитектур нь дагаж ашиглах боломжтой компонент үүсгэж, дахин давтагдах, замбараагүй кодоос зайлсхийх боломжийг олгодог.
 
-Юуны өмнө, Board компонент дахь анхны дөрвөлжинг тодорхойлсон мөрийг (<button className="square">1</button>) шинэ Square компонент руу хуулж орно:
+Юуны өмнө `Board` компонент дахь анхны дөрвөлжинг тодорхойлсон мөрийг (`<button className="square">1</button>`) шинэ `Square` компонент руу хуулна:
 
 ```js {1-3}
 function Square() {
@@ -578,7 +578,7 @@ function Square({ value }) {
 
 ![Дамжуулсан value-гаар дүүрсэн самбар](../images/tutorial/board-filled-with-value.png)
 
-Чи компонентынхаа value нэртэй JavaScript хувьсагчийг дүрслэхийг хүсэж байна, "value" гэсэн текстийг биш. JSX-д JavaScript руу шилжихийн тулд тэгш бөгж ({}) хэрэгтэй. JSX-д value-г ингэж оруулна:
+Та `value` нэртэй JavaScript хувьсагчийг дүрслэхийг хүсэж байгаа болохоос "value" гэсэн текстийг биш. JSX дотор JavaScript руу шилжихийн тулд угалзан хаалт (`{}`) ашиглана. `value`-г JSX-д ингэж оруулна:
 
 ```js {2}
 function Square({ value }) {
@@ -1153,7 +1153,7 @@ export default function Board() {
 }
 ```
 
-Дараа нь, та тухайн 'i' аргументыг 'handleClick' рүү дамжуулах шаардлагатай болно. Та JSX дотор шууд 'onSquareClick={handleClick(0)}' гэж тохируулахыг оролдож болох ч, энэ нь ажиллахгүй:
+Дараа нь `i` аргументыг `handleClick` рүү дамжуулах шаардлагатай. Та JSX дотор шууд `onSquareClick={handleClick(0)}` гэж тохируулахыг оролдож болох ч энэ нь ажиллахгүй:
 
 ```jsx
 <Square value={squares[0]} onSquareClick={handleClick(0)} />
@@ -1169,9 +1169,9 @@ Too many re-renders. React limits the number of renders to prevent an infinite l
 
 Яагаад энэ асуудал өмнө нь гараагүй вэ?
 
-Та өмнө нь 'onSquareClick={handleClick}' гэж дамжуулахдаа 'handleClick' функцийг өөрийг нь 'prop' болгон дамжуулж байсан. Та түүнийг дуудаагүй байсан! Харин одоо та тухайн функцийг шууд дуудаж байна — 'handleClick(0)' доторх хаалтыг анзаараарай — тийм ч учраас энэ нь хэтэрхий эрт ажиллаад байгаа юм. Та хэрэглэгчийг дарах хүртэл 'handleClick'-ийг дуудахыг хүсэхгүй байгаа шүү дээ!
+Та өмнө нь `onSquareClick={handleClick}` гэж дамжуулахдаа `handleClick` функцийг өөрийг нь prop болгон дамжуулсан. Та түүнийг дуудаагүй! Харин одоо функцийг шууд дуудаж байна—`handleClick(0)` доторх хаалтыг анзаараарай. Тиймээс энэ нь хэтэрхий эрт ажиллаж байна. Хэрэглэгч дарах хүртэл `handleClick`-ийг дуудах хэрэггүй.
 
-Та үүнийг 'handleClick(0)'-ийг дууддаг 'handleFirstSquareClick' гэх мэт функц, 'handleClick(1)'-ийг дууддаг 'handleSecondSquareClick' гэх мэт функцүүд үүсгэх замаар засч болох юм. Тэгээд эдгээр функцүүдээ 'onSquareClick={handleFirstSquareClick}' гэх мэтээр 'prop' болгон дамжуулна (дуудах биш). Энэ нь төгсгөлгүй давталтын асуудлыг шийдэх болно.
+Үүнийг `handleClick(0)`-ийг дууддаг `handleFirstSquareClick`, `handleClick(1)`-ийг дууддаг `handleSecondSquareClick` зэрэг функц үүсгэх замаар засаж болно. Дараа нь эдгээр функцийг `onSquareClick={handleFirstSquareClick}` гэх мэтээр prop болгон дамжуулна (дуудахгүй). Ингэснээр төгсгөлгүй давталтын асуудал шийдэгдэнэ.
 
 Гэвч есөн өөр функц тодорхойлж, тус бүрт нь нэр өгөх нь хэтэрхий нуршуу (verbose) хэрэг болно. Үүний оронд дараах байдлаар хийцгээе:
 
@@ -1327,7 +1327,7 @@ body {
 
 <Note>
 
-DOM '<button>' элементийн 'onClick' аттрибут нь React-ийн хувьд онцгой утгатай байдаг, учир нь энэ нь суулгагдсан компонент юм. 'Square' шиг өөрөө үүсгэсэн компонентуудын хувьд нэршил нь таны дур мэдлийн хэрэг. Та 'Square'-ийн 'onSquareClick' проп эсвэл 'Board'-ын 'handleClick' функцэд ямар ч нэр өгч болох бөгөөд код яг ижилхэн ажиллах болно. React-д үйл явдлыг илэрхийлж буй проп-д 'onSomething' нэр ашиглах, харин тэдгээр үйл явдлыг боловсруулж буй функцийн тодорхойлолтод 'handleSomething' нэр ашиглах нь тогтсон хэвшил юм.
+DOM-ийн `<button>` элементийн `onClick` атрибут нь суурилагдсан компонент учраас React-д тусгай утгатай. `Square` шиг өөрийн үүсгэсэн компонентийн нэршлийг та өөрөө сонгоно. `Square`-ийн `onSquareClick` prop эсвэл `Board`-ын `handleClick` функцэд өөр нэр өгсөн ч код адилхан ажиллана. React-д үйл явдлыг илэрхийлэх prop-д `onSomething`, харин үйл явдлыг боловсруулах функцэд `handleSomething` гэсэн нэр ашиглах нь тогтсон хэвшил юм.
 
 </Note>
 
@@ -1771,7 +1771,7 @@ export default function Game() {
 }
 ```
 
-Та 'function Board() {' тодорхойлолтын өмнөх 'export default' түлхүүр үгсийг хасаж, 'function Game() {' тодорхойлолтын өмнө нэмж байгааг анхаарна уу. Энэ нь таны 'index.js' файлд 'Board' компонентын оронд 'Game' компонентыг дээд түвшний компонент болгон ашиглахыг зааж өгч байгаа юм. 'Game' компонентоос буцааж буй нэмэлт 'div' хэсгүүд нь дараа нь хөлөг дээр нэмэгдэх тоглоомын мэдээлэлд зориулж зай гаргаж байгаа хэрэг юм.
+`function Board() {` тодорхойлолтын өмнөх `export default` түлхүүр үгсийг хасаж, `function Game() {` тодорхойлолтын өмнө нэмснийг анхаарна уу. Ингэснээр `index.js` файл `Board`-ын оронд `Game` компонентыг дээд түвшний компонент болгон ашиглана. `Game` компонентоос буцааж буй нэмэлт `div`-үүд нь дараа нь хөлөгт нэмэх тоглоомын мэдээллийн зайг гаргана.
 
 Аль тоглогч дараагийнх болох болон нүүдлийн түүхийг хянахын тулд 'Game' компонентдоо зарим төлөвийг нэмнэ үү:
 
@@ -2020,7 +2020,7 @@ body {
 
 Та тоглоомын түүхийг бүртгэж байгаа тул одоо тоглогчид өмнөх нүүдлүүдийн жагсаалтыг харуулах боломжтой.
 
-React-ийн элементүүд (жишээ нь '<button>') нь жирийн JavaScript объектууд тул та тэдгээрийг аппликейшн дотроо дамжуулан ашиглаж болно. React-д олон тооны элементүүдийг дүрслэхийн тулд та React элементүүдээс бүрдсэн массивыг ашиглаж болно.
+React-ийн элементүүд (`<button>` гэх мэт) нь жирийн JavaScript объект тул апп дотроо дамжуулан ашиглаж болно. React-д олон элемент дүрслэхийн тулд React элементүүдээс бүрдсэн массив ашиглаж болно.
 
 Танд 'history' нүүдлүүдийн массив 'state'-д хэдийн байгаа тул одоо үүнийг React элементүүдийн массив болгон хувиргах хэрэгтэй. JavaScript-д нэг массивыг нөгөө массив руу хөрвүүлэхийн тулд та... [array `map` method:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
 
@@ -2248,7 +2248,7 @@ body {
 
 `map`-д дамжуулсан функц `history` массиваар давтах үед `squares` аргумент `history`-ийн элемент бүрээр, харин `move` аргумент массивын индекс бүрээр (`0`, `1`, `2`, …) дамжина. Ихэнх тохиолдолд массивын бодит элементүүд хэрэгтэй байдаг ч нүүдлийн жагсаалтыг дүрслэхэд зөвхөн индексүүд хэрэгтэй.
 
-Тоглоомын түүхэн дэх нүүдэл бүрт та товчлуур '<button>' агуулсан жагсаалтын элемент '<li>'-ийг үүсгэнэ. Товчлуур нь 'jumpTo' (та хараахан хэрэгжүүлээгүй байгаа) нэртэй функцийг дууддаг 'onClick' боловсруулагчтай байна.
+Тоглоомын түүхэн дэх нүүдэл бүрд `<button>` агуулсан `<li>` жагсаалтын элемент үүсгэнэ. Товч нь хараахан хэрэгжүүлээгүй байгаа `jumpTo` функцийг дууддаг `onClick` handler-тай байна.
 
 Одоохондоо танд тоглоомонд хийгдсэн нүүдлүүдийн жагсаалт болон хөгжүүлэгчийн хэрэгслийн консол дээр алдаа харагдах ёстой. 'key' алдаа нь юу гэсэн үг болохыг хэлэлцэцгээе.
 
@@ -2286,15 +2286,15 @@ to
 
 Динамик жагсаалт үүсгэх бүртээ тохирох түлхүүрүүдийг оноохыг хатуу зөвлөж байна. Хэрэв танд тохиромжтой түлхүүр байхгүй бол өгөгдлийн бүтцээ өөрчлөх талаар бодож үзээрэй.
 
-Хэрэв ямар нэг түлхүүр зааж өгөөгүй бол React алдаа зааж, массивын индексийг анхдагч түлхүүр болгон ашиглах болно. Жагсаалтын элементүүдийг дахин эрэмбэлэх эсвэл элемент нэмэх/хасах үед массивын индексийг түлхүүр болгон ашиглах нь асуудал үүсгэдэг. Ил тодоор 'key={i}' гэж дамжуулах нь алдааны мэдээг арилгах боловч массивын индекстэй ижил асуудлуудыг дагуулдаг тул ихэнх тохиолдолд зөвлөдөггүй.
+Хэрэв түлхүүр заагаагүй бол React алдаа мэдээлж, массивын индексийг анхдагч түлхүүр болгон ашиглана. Жагсаалтын элементүүдийг дахин эрэмбэлэх, нэмэх эсвэл хасах үед массивын индексийг түлхүүр болгох нь асуудал үүсгэдэг. `key={i}` гэж ил тод дамжуулах нь алдааг арилгах боловч массивын индекстэй ижил асуудалтай тул ихэнх тохиолдолд зөвлөдөггүй.
 
 Түлхүүрүүд нь дэлхий даяар (globally) цор ганц байх албагүй; тэд зөвхөн тухайн компонент болон түүний ижил түвшний элементүүдийн (siblings) дунд цор ганц байхад хангалттай.
 
 ### Цаг хугацаагаар аялахыг хэрэгжүүлэх {/*implementing-time-travel*/}
 
 'Tic-tac-toe' тоглоомын түүхэнд өнгөрсөн нүүдэл бүр өөртэйгөө холбогдсон дахин давтагдашгүй ID-тай байдаг: энэ нь нүүдлийн дарааллын дугаар юм. Нүүдлүүд хэзээ ч дахин эрэмбэлэгдэхгүй, устахгүй, эсвэл дундуур нь нэмэгдэхгүй тул нүүдлийн индексийг түлхүүр ('key') болгон ашиглахад аюулгүй.
 
-'Game' функц дотор та түлхүүрийг '<li key={move}>' байдлаар нэмж болох бөгөөд хэрэв та дүрслэгдсэн тоглоомыг дахин ачаалбал React-ийн 'key' алдаа арилах ёстой:
+`Game` функц дотор түлхүүрийг `<li key={move}>` байдлаар нэмнэ. Дүрслэгдсэн тоглоомыг дахин ачаалахад React-ийн `key` алдаа арилах ёстой:
 
 ```js {4}
 const moves = history.map((squares, move) => {