diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index 16e5f518d..c7c491d79 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -4,28 +4,28 @@ title: 'Tutorial: Tic-Tac-Toe'
-You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you'll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React.
+Энэ хичээлийн явцад чи жижиг tic-tac-toe тоглоом хийж бүтээнэ. Уг хичээл нь React-ийн өмнөх мэдлэг шаарддаггүй. Хичээлээр сурах аргууд нь ямар ч React аппликейшн хийхэд суурь болдог бөгөөд үүнийг бүрэн ойлгосноор чи React-ийг гүнзгий ойлгох болно.
-This tutorial is designed for people who prefer to **learn by doing** and want to quickly try making something tangible. If you prefer learning each concept step by step, start with [Describing the UI.](/learn/describing-the-ui)
+Энэ хичээл нь хийж үзэнгээ сурахыг илүүд үздэг, мөн богино хугацаанд бодитоор ямар нэг зүйл бүтээж үзэхийг хүсдэг хүмүүст зориулагдсан. Харин ойлголт бүрийг алхам алхмаар сурмаар байвал [Describing the UI.](/learn/describing-the-ui)
-The tutorial is divided into several sections:
+Хичээл нь хэд хэдэн хэсэгт хуваагдсан:
-- [Setup for the tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial.
-- [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state.
-- [Completing the game](#completing-the-game) will teach you **the most common techniques** in React development.
-- [Adding time travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React.
+- [Хичээлийн орчныг бэлтгэх](#setup-for-the-tutorial) Энэ нь хичээлийг дагаж хийхэд зориулсан эхлэл суурийг чамд өгнө.
+- [Тойм](#overview) Чи React-ийн үндсэн ойлголтуудыг сурна: компонентийг, props болон state.
+- [Тоглоомыг дуусгах](#completing-the-game) чи React хөгжүүлэлтэд ашиглагддаг хамгийн түгээмэл аргуудыг сурна.
+- [Цагийг буцаан хянах боломж нэмэх](#adding-time-travel) React-ийн өвөрмөц давуу талуудыг илүү гүнзгий ойлгоход тусална.
-### What are you building? {/*what-are-you-building*/}
+### Чи юу бүтээж байгаа вэ? {/*what-are-you-building*/}
-In this tutorial, you'll build an interactive tic-tac-toe game with React.
+Энэ хичээлээр чи **React ашиглан интерактив Tic-Tac-Toe тоглоом** бүтээнэ.
-You can see what it will look like when you're finished here:
+Төгсгөлд нь энэ нь хэрхэн харагдахыг эндээс үзэж болно:
@@ -194,16 +194,15 @@ body {
-If the code doesn't make sense to you yet, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax.
+Хэрвээ кодыг одоогоор ойлгож чадахгүй байвал эсвэл кодын синтакст танил бус байвал санаа зовох хэрэггүй! Энэ хичээлийн зорилго нь React болон түүний синтаксыг ойлгоход туслах юм.
-We recommend that you check out the tic-tac-toe game above before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and it is updated as the game progresses.
+Хичээлийг үргэлжлүүлэхээсээ өмнө дээрх tic-tac-toe тоглоомыг үзэхийг зөвлөж байна. Тоглоомд анзаарах нэг онцлог нь тоглоомын самбарын баруун талд дугаарлагдсан жагсаалт байх явдал юм. Энэ жагсаалт нь тоглоомд болсон бүх хөдөлгөөний түүхийг харуулж, тоглоом урагшилж байх тусам шинэчлэгддэг.
-Once you've played around with the finished tic-tac-toe game, keep scrolling. You'll start with a simpler template in this tutorial. Our next step is to set you up so that you can start building the game.
+Төгсгөлд нь тоглоомыг туршиж үзсэний дараа хуудас доош гүйлгэж үргэлжлүүлээрэй. Энэ хичээлд чи энгийн загвараас эхлэн тоглоом бүтээх болно. Дараагийн алхам нь тоглоомыг бүтээж эхлэхэд зориулсан орчныг бэлтгэх юм.
-## Setup for the tutorial {/*setup-for-the-tutorial*/}
-
-In the live code editor below, click **Fork** in the top-right corner to open the editor in a new tab using the website CodeSandbox. CodeSandbox lets you write code in your browser and preview how your users will see the app you've created. The new tab should display an empty square and the starter code for this tutorial.
+## Хичээлийн орчныг бэлтгэх {/setup-for-the-tutorial/}
+Доорх жив код editor дээр баруун дээд буланд байгаа Fork товчийг дарж CodeSandbox вэбсайтаар шинэ таб дээр editor -ийг нээ. CodeSandbox нь браузерээсээ код бичиж, хэрэглэгчид хэрхэн харагдахыг урьдчилан харах боломжийг олгодог. Шинэ таб дээр хоосон дөрвөлжин болон энэ хичээлийн эхний код харагдах болно.
```js App.js
@@ -261,33 +260,33 @@ body {
-You can also follow this tutorial using your local development environment. To do this, you need to:
+Мөн чи энэ хичээлийг өгөгдсөн компьютертээ хөгжүүлэлтийн орчинд дагаж хийж болно. Үүний тулд:
-1. Install [Node.js](https://nodejs.org/en/)
-1. In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose **File > Export to ZIP** in that menu to download an archive of the files locally
-1. Unzip the archive, then open a terminal and `cd` to the directory you unzipped
-1. Install the dependencies with `npm install`
-1. Run `npm start` to start a local server and follow the prompts to view the code running in a browser
+1. Суулгах багаж [Node.js](https://nodejs.org/en/)
+2. Өмнө нээсэн CodeSandbox таб дээр баруун дээд буланд байгаа товчийг дарж цэсийг нээж, File > Export to ZIP-г сонгон файлуудыг өөрийн компьютерт татаж авна
+3. Архивыг задлаад терминал нээж, задласан хавтас руу cd командаар орно
+4. Хамааралтай багцуудыг суулгахын тулд 'npm install' гүйцэтгэнэ.[Node modules]
+5. 'npm start' командыг ажиллуулж орчныг локал сервер дээр эхлүүлж, кодыг браузерээс харах зааврыг дагана
-If you get stuck, don't let this stop you! Follow along online instead and try a local setup again later.
+Хэрвээ асуудал гарвал санаа зовох хэрэггүй! Эхлээд онлайн хувилбараар дагаж, дараа нь локал орчинд дахин оролдож болно.
-## Overview {/*overview*/}
+## Тойм {/*overview*/}
-Now that you're set up, let's get an overview of React!
+Одоо орчныг бэлдсэн тул, React-ийн тоймыг үзье!
-### Inspecting the starter code {/*inspecting-the-starter-code*/}
+## Эхний кодыг шалгах {/inspecting-the-starter-code/}
-In CodeSandbox you'll see three main sections:
+CodeSandbox дээр чи гурван үндсэн хэсгийг харах болно:
-
+
-1. The _Files_ section with a list of files like `App.js`, `index.js`, `styles.css` and a folder called `public`
-1. The _code editor_ where you'll see the source code of your selected file
-1. The _browser_ section where you'll see how the code you've written will be displayed
+1.App.js, index.js, styles.css зэрэг файлууд болон public нэртэй хавтас бүхий Файлууд хэсэг
+2.Сонгосон файлын эх кодыг харах код редактор хэсэг.[Code editor]
+3.Бичсэн код хэрхэн харагдахыг үзүүлэх браузер хэсэг[Browser]
-The `App.js` file should be selected in the _Files_ section. The contents of that file in the _code editor_ should be:
+Файлууд хэсэгт App.js файл сонгогдсон байх ёстой. Код редактор дээр тус файлын агуулга дараах байдалтай байна:
```jsx
export default function Square() {
@@ -295,15 +294,15 @@ export default function Square() {
}
```
-The _browser_ section should be displaying a square with a X in it like this:
+Браузер хэсэгт дараах байдлаар X тэмдэгттэй дөрвөлжин харагдаж байх ёстой:
-
+
-Now let's have a look at the files in the starter code.
+Одоо эхний кодын файлуудыг харцгаая.
#### `App.js` {/*appjs*/}
-The code in `App.js` creates a _component_. In React, a component is a piece of reusable code that represents a part of a user interface. Components are used to render, manage, and update the UI elements in your application. Let's look at the component line by line to see what's going on:
+App.js дахь код нь компонент үүсгэдэг. React-д компонент гэдэг нь дагалдах кодын хэсэг бөгөөд хэрэглэгчийн интерфэйсийн нэг хэсгийг төлөөлдөг. Компонентуудыг аппликейшнд UI элементийг дүрслэх, удирдах, шинэчлэх зорилгоор ашигладаг.
```js {1}
export default function Square() {
@@ -311,7 +310,7 @@ export default function Square() {
}
```
-The first line defines a function called `Square`. The `export` JavaScript keyword makes this function accessible outside of this file. The `default` keyword tells other files using your code that it's the main function in your file.
+Эхний мөрөнд Square нэртэй функц тодорхойлсон байна. export JavaScript түлхүүр үг нь энэ функцийг энэ файлын гаднаас ашиглах боломжтой болгодог. default түлхүүр үг нь бусад файлуудад энэ файлын гол функц нь энэ гэдгийг зааж өгдөг.
```js {2}
export default function Square() {
@@ -319,15 +318,14 @@ export default function Square() {
}
```
-The second line returns a button. The `return` JavaScript keyword means whatever comes after is returned as a value to the caller of the function. `` closes the JSX element to indicate that any following content shouldn't be placed inside the button.
+Хоёр дахь мөр нь button буцааж өгдөг. return JavaScript түлхүүр үг нь функц руу дуудагдсаны дараа буцаах утгыг заадаг. нь JSX элементийг хааж, дараагийн агуулгыг товч дотор оруулахгүй гэдгийг заана.
#### `styles.css` {/*stylescss*/}
-Click on the file labeled `styles.css` in the _Files_ section of CodeSandbox. This file defines the styles for your React app. The first two _CSS selectors_ (`*` and `body`) define the style of large parts of your app while the `.square` selector defines the style of any component where the `className` property is set to `square`. In your code, that would match the button from your Square component in the `App.js` file.
-
+CodeSandbox-ийн Файлууд хэсгээс styles.css файлыг дар. Энэ файл нь React аппликейшнийхээ загварыг тодорхойлдог.Эхний хоёр CSS сонгогч (* болон body) нь аппликейшний томоохон хэсгүүдийн загварыг тодорхойлдог бол .square сонгогч нь className нь square гэж тогтоосон компонент бүрийн загварыг тодорхойлдог. Чиний кодонд энэ нь App.js дахь Square компонентын товчийг зааж байна.
#### `index.js` {/*indexjs*/}
-Click on the file labeled `index.js` in the _Files_ section of CodeSandbox. You won't be editing this file during the tutorial but it is the bridge between the component you created in the `App.js` file and the web browser.
+CodeSandbox-ийн Файлууд хэсгээс index.js файлыг дар. Энэ файлыг хичээлийн явцад засварлах шаардлагагүй, гэхдээ энэ файл нь App.js дахь чиний бүтээсэн компонентыг веб браузерт холбох гүүр юм.
```jsx
import { StrictMode } from 'react';
@@ -337,20 +335,20 @@ import './styles.css';
import App from './App';
```
-Lines 1-5 brings all the necessary pieces together:
+1–5-р мөрүүд нь бүх шаардлагатай хэсгүүдийг нэгтгэдэг:
-* React
-* React's library to talk to web browsers (React DOM)
-* the styles for your components
-* the component you created in `App.js`.
+*React
+*React-ийг веб браузерт холбоход ашигладаг сан (React DOM)
+*Компонентуудын загварууд
+*App.js файлд чи бүтээсэн компонент
-The remainder of the file brings all the pieces together and injects the final product into `index.html` in the `public` folder.
+Файлын үлдсэн хэсэг нь бүх хэсгүүдийг нэгтгэж, эцсийн бүтээгдэхүүнийг public хавтсанд байгаа index.html руу шиддэг.
-### Building the board {/*building-the-board*/}
+### Самбарыг бүтээх {/*building-the-board*/}
-Let's get back to `App.js`. This is where you'll spend the rest of the tutorial.
+Одоо App.js руу буцъя. Чи хичээлийн үлдсэн хугацааг ихэнхдээ энд өнгөрүүлэх болно.
-Currently the board is only a single square, but you need nine! If you just try and copy paste your square to make two squares like this:
+Одоогоор самбар нь зөвхөн нэг дөрвөлжин байна, гэхдээ чи есөн дөрвөлжин хэрэгтэй! Хэрвээ зөвхөн нэгийг нь хуулж наах замаар хоёр дөрвөлжин хийх гэж оролдвол:
```js {2}
export default function Square() {
@@ -358,7 +356,7 @@ export default function Square() {
}
```
-You'll get this error:
+Чи дараах алдааг авна:
@@ -366,7 +364,7 @@ You'll get this error:
-React components need to return a single JSX element and not multiple adjacent JSX elements like two buttons. To fix this you can use *fragments* (`<>` and ``) to wrap multiple adjacent JSX elements like this:
+React компонент нь нэг JSX элемент буцаах ёстой бөгөөд хоёр товч зэрэг зэрэг байрлах олон JSX элементийг шууд буцааж болохгүй. Үүнийг засахын тулд фрагмент (<> ба ) ашиглан олон ойр JSX элементийг дараах байдлаар боож өгч болно:
```js {3-6}
export default function Square() {
@@ -379,17 +377,17 @@ export default function Square() {
}
```
-Now you should see:
+Одоо чи дараах зүйлийг харах ёстой:
-
+
-Great! Now you just need to copy-paste a few times to add nine squares and...
+Сайхан байна! Одоо чи хуулж хэд хэдэн удаа наах замаар есөн дөрвөлжин нэмэхэд л болно, мөн...
-
+
-Oh no! The squares are all in a single line, not in a grid like you need for our board. To fix this you'll need to group your squares into rows with `div`s and add some CSS classes. While you're at it, you'll give each square a number to make sure you know where each square is displayed.
+Өө, үгүй! Дөрвөлжин бүгд нэг мөрөнд гарч байна, самбарын сүлжээ шиг биш байна. Үүнийг засахын тулд дөрвөлжин бүрийг div дотор мөр болгон бүлэглэж, зарим CSS класс нэмэх хэрэгтэй. Мөн энэ үеэр дөрвөлжин бүрт дугаар өгч, хаана харуулж байгааг нь тодорхой болгоно.
-In the `App.js` file, update the `Square` component to look like this:
+App.js файлын Square компонент-ыг дараах байдлаар шинэчилнэ үү:
```js {3-19}
export default function Square() {
@@ -415,11 +413,11 @@ export default function Square() {
}
```
-The CSS defined in `styles.css` styles the divs with the `className` of `board-row`. Now that you've grouped your components into rows with the styled `div`s you have your tic-tac-toe board:
+styles.css файлд тодорхойлсон CSS нь board-row className-тэй div-үүдийг загварладаг. Одоо компонентуудыг стильтэй div-д бүлэглэснээр, чиний Tic-Tac-Toe самбар бэлэн болсон:
-
+
-But you now have a problem. Your component named `Square`, really isn't a square anymore. Let's fix that by changing the name to `Board`:
+Гэхдээ одоо нэг асуудал гарч байна. Square нэртэй компонент чинь оролцоогоор квадрат биш болсон байна. Үүнийг засахын тулд нэрийг Board гэж өөрчилнө:
```js {1}
export default function Board() {
@@ -427,7 +425,7 @@ export default function Board() {
}
```
-At this point your code should look something like this:
+Энэ үеэр чиний код дараах байдлаар харагдах ёстой:
@@ -504,15 +502,15 @@ body {
-Psssst... That's a lot to type! It's okay to copy and paste code from this page. However, if you're up for a little challenge, we recommend only copying code that you've manually typed at least once yourself.
+Пссст… Энэ их код бичих шаардлагатай шүү! Санаа зоволтгүй, энэ хуудаснаас хуулж нааж болно. Гэхдээ бага зэрэг сорилт хүсэж байвал, заавал өөрөө нэг удаа гараар бичсэн кодыг л хуулж авахыг зөвлөж байна.
-### Passing data through props {/*passing-data-through-props*/}
+### Props ашиглан өгөгдөл дамжуулах {/passing-data-through-props/}
-Next, you'll want to change the value of a square from empty to "X" when the user clicks on the square. With how you've built the board so far you would need to copy-paste the code that updates the square nine times (once for each square you have)! Instead of copy-pasting, React's component architecture allows you to create a reusable component to avoid messy, duplicated code.
+Дараагийн алхамд, хэрэглэгч дөрвөлжин дээр дарсан үед дөрвөлжний утгыг хоосноос "X" болгож өөрчлөх хэрэгтэй. Одоогоор самбарыг ингэж бүтээсэн бол дөрвөлжин бүрийг шинэчлэх кодыг 9 удаа хуулж наах шаардлагатай болно (есөн дөрвөлжин тутамд нэг удаа)! Харин хуулж наахын оронд, React-ийн компонентын архитектур нь дагаж ашиглах боломжтой компонент үүсгэж, дахин давтагдах, замбараагүй кодоос зайлсхийх боломжийг олгодог.
-First, you are going to copy the line defining your first square (``) from your `Board` component into a new `Square` component:
+Юуны өмнө, Board компонент дахь анхны дөрвөлжинг тодорхойлсон мөрийг () шинэ Square компонент руу хуулж орно:
```js {1-3}
function Square() {
@@ -524,7 +522,7 @@ export default function Board() {
}
```
-Then you'll update the Board component to render that `Square` component using JSX syntax:
+Дараа нь Board компонентыг JSX синтакс ашиглан шинэ Square компонентыг дүрслэх байдлаар шинэчилнэ:
```js {5-19}
// ...
@@ -551,15 +549,14 @@ export default function Board() {
}
```
-Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter.
+Анхаар: браузерийн div-үүдээс ялгаатай нь, чиний өөрийн компонентууд болох Board болон Square нь том үсгээр эхлэх ёстой.
-Let's take a look:
+Одоо харцгаая:
-
+
-Oh no! You lost the numbered squares you had before. Now each square says "1". To fix this, you will use *props* to pass the value each square should have from the parent component (`Board`) to its child (`Square`).
-
-Update the `Square` component to read the `value` prop that you'll pass from the `Board`:
+Өө, үгүй! Өмнөх дугаарлагдсан дөрвөлжингуудыг алджээ. Одоо дөрвөлжин бүр "1" гэж гарч байна. Үүнийг засахын тулд props ашиглаж, эх компонент (Board)–аас хүүхэд компонент (Square) руу дөрвөлжин бүрийн утгыг дамжуулна.
+Square компонентыг Board-аас дамжуулж буй value prop-ыг уншдаг байдлаар шинэчилнэ:
```js {1}
function Square({ value }) {
@@ -567,9 +564,9 @@ function Square({ value }) {
}
```
-`function Square({ value })` indicates the Square component can be passed a prop called `value`.
+`function Square({ value })` Энэ нь Square компонент руу value нэртэй prop дамжуулж болно гэдгийг зааж өгч байна.
-Now you want to display that `value` instead of `1` inside every square. Try doing it like this:
+Одоо дөрвөлжин бүрийн дотор "1" биш, дамжуулсан value-г харуулахыг хүсэж байна. Ингэж хийж болно:
```js {2}
function Square({ value }) {
@@ -577,11 +574,11 @@ function Square({ value }) {
}
```
-Oops, this is not what you wanted:
+Өө, энэ бол хүссэн үр дүн биш байна:
-
+
-You wanted to render the JavaScript variable called `value` from your component, not the word "value". To "escape into JavaScript" from JSX, you need curly braces. Add curly braces around `value` in JSX like so:
+Чи компонентынхаа value нэртэй JavaScript хувьсагчийг дүрслэхийг хүсэж байна, "value" гэсэн текстийг биш. JSX-д JavaScript руу шилжихийн тулд тэгш бөгж ({}) хэрэгтэй. JSX-д value-г ингэж оруулна:
```js {2}
function Square({ value }) {
@@ -589,11 +586,11 @@ function Square({ value }) {
}
```
-For now, you should see an empty board:
+Одоогоор чи хоосон самбар харах ёстой:
-
+
-This is because the `Board` component hasn't passed the `value` prop to each `Square` component it renders yet. To fix it you'll add the `value` prop to each `Square` component rendered by the `Board` component:
+Энэ нь Board компонент өөрийн дүрсэлж буй Square бүрт value prop-ыг дамжуулээгүйтэй холбоотой. Үүнийг засахын тулд Board компонентын dүрслэж буй Square бүрт value prop нэмнэ:
```js {5-7,10-12,15-17}
export default function Board() {
@@ -619,11 +616,11 @@ export default function Board() {
}
```
-Now you should see a grid of numbers again:
+Одоо чи дахин дугаарласан сүлжээтэй самбар харах ёстой:
-
+
-Your updated code should look like this:
+Чиний шинэчилсэн код дараах байдлаар харагдах ёстой:
@@ -702,9 +699,9 @@ body {
-### Making an interactive component {/*making-an-interactive-component*/}
+### Интерактив компонент үүсгэх {/making-an-interactive-component/}
-Let's fill the `Square` component with an `X` when you click it. Declare a function called `handleClick` inside of the `Square`. Then, add `onClick` to the props of the button JSX element returned from the `Square`:
+Square компонент дээр дарвал X гаргахыг хийцгээе. Square дотор handleClick нэртэй функц зарлаж, дараа нь Square-ээс буцааж буй button JSX элементэд onClick шинж чанарыг нэмнэ:
```js {2-4,9}
function Square({ value }) {
@@ -723,19 +720,21 @@ function Square({ value }) {
}
```
-If you click on a square now, you should see a log saying `"clicked!"` in the _Console_ tab at the bottom of the _Browser_ section in CodeSandbox. Clicking the square more than once will log `"clicked!"` again. Repeated console logs with the same message will not create more lines in the console. Instead, you will see an incrementing counter next to your first `"clicked!"` log.
+Одоо дөрвөлжин дээр дарвал CodeSandbox-ийн Browser хэсгийн доор байгаа Console таб-д "clicked!" гэж бичигдэж харагдах ёстой. Дөрвөлжин дээр хэд дахин дарсан ч "clicked!" дахин бичигдэх ба шинэ мөр нэмэгдэхгүй. Харин анхны "clicked!" бичлэгийн хажууд тоо нэмэгдэх байдлаар харагдана.
-If you are following this tutorial using your local development environment, you need to open your browser's Console. For example, if you use the Chrome browser, you can view the Console with the keyboard shortcut **Shift + Ctrl + J** (on Windows/Linux) or **Option + ⌘ + J** (on macOS).
+Хэрвээ чи хичээлийг локал хөгжүүлэлтийн орчинд дагаж байгаа бол браузерийн Console-ийг нээх хэрэгтэй. Жишээ нь, Chrome браузер ашиглаж байвал Console-ийг дараах товчлолоор нээж болно:
+Windows/Linux: Shift + Ctrl + J
+macOS: Option + ⌘ + J
-As a next step, you want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use *state*.
+Дараагийн алхамд, Square компонент дарсан гэдгээ "санаж", "X" тэмдэгтэй болгохыг хүсэж байна. Юу санах гэж байгааг компонентууд state ашиглаж хийдэг.
-React provides a special function called `useState` that you can call from your component to let it "remember" things. Let's store the current value of the `Square` in state, and change it when the `Square` is clicked.
+React нь useState нэртэй тусгай функц өгдөг бөгөөд үүнийг компонент дотроос дуудахдаа юмс "санах" боломжтой болдог. Одоо Square-ийн одоо байгаа утгыг state-д хадгалж, дөрвөлжин дээр дарвал утгыг өөрчилөх байдлаар ашиглана.
-Import `useState` at the top of the file. Remove the `value` prop from the `Square` component. Instead, add a new line at the start of the `Square` that calls `useState`. Have it return a state variable called `value`:
+Файлын эхэнд useState-г импорт хийнэ. Square компонентын value prop-ыг устгаад**, оронд нь Square-ийн эхэнд **useState-г дуудах шинэ мөр нэмнэ**. Энэ нь **value` нэртэй state хувьсагчийг буцаах болно:
```js {1,3,4}
import { useState } from 'react';
@@ -747,9 +746,9 @@ function Square() {
//...
```
-`value` stores the value and `setValue` is a function that can be used to change the value. The `null` passed to `useState` is used as the initial value for this state variable, so `value` here starts off equal to `null`.
+'value' нь утгыг хадгалдаг бол 'setValue' нь тухайн утгыг өөрчлөхөд ашиглах функц юм.useState руу дамжуулсан 'null' нь state хувьсагчийн эхний утгыг заадаг тул энд 'value' эхэндээ 'null' утгатай байна.
-Since the `Square` component no longer accepts props anymore, you'll remove the `value` prop from all nine of the Square components created by the Board component:
+Одоо 'Square' компонент props авчрахгүй болсон тул, Board компонентын дүрсэлсэн есөн Square бүрээс 'value' prop-ыг устгана:
```js {6-8,11-13,16-18}
// ...
@@ -776,7 +775,7 @@ export default function Board() {
}
```
-Now you'll change `Square` to display an "X" when clicked. Replace the `console.log("clicked!");` event handler with `setValue('X');`. Now your `Square` component looks like this:
+Одоо 'Square' дээр дарвал "X" гарч ирэхээр өөрчилнө. 'console.log("clicked!");' -г орлуулж 'setValue('X');' -г ашиглана. Ингэснээр Square компонент дараах байдлаар харагдана:
```js {5}
function Square() {
@@ -797,13 +796,13 @@ function Square() {
}
```
-By calling this `set` function from an `onClick` handler, you're telling React to re-render that `Square` whenever its `
-Before you can implement `jumpTo`, you need the `Game` component to keep track of which step the user is currently viewing. To do this, define a new state variable called `currentMove`, defaulting to `0`:
+'jumpTo' функцийг хэрэгжүүлэхийн өмнө 'Game' компонент хэрэглэгч яг аль алхмыг үзэж байгааг хянах шаардлагатай. Үүнийг хийхийн тулд анхны утга нь '0' байх 'currentMove' нэртэй шинэ 'state' хувьсагчийг тодорхойлно уу:
```js {4}
export default function Game() {
@@ -2482,7 +2479,7 @@ export default function Game() {
}
```
-Next, update the `jumpTo` function inside `Game` to update that `currentMove`. You'll also set `xIsNext` to `true` if the number that you're changing `currentMove` to is even.
+Дараа нь, 'currentMove'-ийг шинэчлэхийн тулд 'Game' доторх 'jumpTo' функцийг шинэчилнэ үү. Мөн та 'currentMove'-ийг өөрчилж буй тоо тань тэгш байвал 'xIsNext'-ийг 'true' болгож тохируулна.
```js {4-5}
export default function Game() {
@@ -2495,10 +2492,11 @@ export default function Game() {
}
```
-You will now make two changes to the `Game`'s `handlePlay` function which is called when you click on a square.
+Одоо та нүдэн дээр дарахад дуудагддаг 'Game' компонентын 'handlePlay' функцэд хоёр өөрчлөлт оруулна.
+
+-Хэрэв та 'цаг хугацаагаар ухарч' очоод, тухайн цэгээс шинэ нүүдэл хийвэл та зөвхөн тэр цэг хүртэлх түүхийг хадгалахыг хүснэ. 'history' доторх бүх элементүүдийн араас 'nextSquares'-ийг нэмэхийн оронд ('...' spread синтакс), та үүнийг 'history.slice(0, currentMove + 1)'-ийн бүх элементүүдийн араас нэмэх бөгөөд ингэснээр та хуучин түүхийн зөвхөн тухайн хэсгийг хадгалах болно.
-- If you "go back in time" and then make a new move from that point, you only want to keep the history up to that point. Instead of adding `nextSquares` after all items (`...` spread syntax) in `history`, you'll add it after all items in `history.slice(0, currentMove + 1)` so that you're only keeping that portion of the old history.
-- Each time a move is made, you need to update `currentMove` to point to the latest history entry.
+-Нүүдэл хийх бүртээ та 'currentMove'-ийг хамгийн сүүлийн түүхийн бичилт рүү зааж байхаар шинэчлэх хэрэгтэй.
```js {2-4}
function handlePlay(nextSquares) {
@@ -2509,7 +2507,7 @@ function handlePlay(nextSquares) {
}
```
-Finally, you will modify the `Game` component to render the currently selected move, instead of always rendering the final move:
+Эцэст нь, та 'Game' компонентыг үргэлж хамгийн сүүлийн нүүдлийг дүрслэхийн оронд, одоо сонгогдсон нүүдлийг дүрсэлдэг (render) болгон өөрчилнө:
```js {5}
export default function Game() {
@@ -2522,7 +2520,7 @@ export default function Game() {
}
```
-If you click on any step in the game's history, the tic-tac-toe board should immediately update to show what the board looked like after that step occurred.
+Хэрэв та тоглоомын түүхийн аль нэг алхам дээр дарвал, 'tic-tac-toe' хөлөг тухайн алхам хийгдсэний дараа ямар харагдаж байсан болж шууд шинэчлэгдэх ёстой.
@@ -2693,11 +2691,11 @@ body {
-### Final cleanup {/*final-cleanup*/}
+### Эцсийн цэвэрлэгээ {/*final-cleanup*/}
-If you look at the code very closely, you may notice that `xIsNext === true` when `currentMove` is even and `xIsNext === false` when `currentMove` is odd. In other words, if you know the value of `currentMove`, then you can always figure out what `xIsNext` should be.
+Хэрэв та кодыг маш анхааралтай ажиглавал 'currentMove' тэгш байх үед 'xIsNext === true', харин 'currentMove' сондгой байх үед 'xIsNext === false' байгааг анзаарч магадгүй. Өөрөөр хэлбэл, хэрэв та 'currentMove'-ийн утгыг мэдэж байвал 'xIsNext' ямар байх ёстойг үргэлж тодорхойлж чадна гэсэн үг.
-There's no reason for you to store both of these in state. In fact, always try to avoid redundant state. Simplifying what you store in state reduces bugs and makes your code easier to understand. Change `Game` so that it doesn't store `xIsNext` as a separate state variable and instead figures it out based on the `currentMove`:
+Эдгээр хоёр утгыг хоёуланг нь 'state'-д хадгалах шаардлага байхгүй. Үнэндээ, илүүдэл 'state'-ээс үргэлж зайлсхийхийг хичээгээрэй. 'State'-д хадгалах зүйлсээ хялбарчлах нь алдааг (bugs) багасгаж, таны кодыг ойлгоход хялбар болгодог. 'Game' компонентыг 'xIsNext'-ийг тусдаа 'state' хувьсагч болгож хадгалахгүйгээр, харин 'currentMove' дээр үндэслэн тодорхойлдог байхаар өөрчилнө үү:
```js {4,11,15}
export default function Game() {
@@ -2719,20 +2717,20 @@ export default function Game() {
}
```
-You no longer need the `xIsNext` state declaration or the calls to `setXIsNext`. Now, there's no chance for `xIsNext` to get out of sync with `currentMove`, even if you make a mistake while coding the components.
+Танд 'xIsNext' 'state' зарлалт эсвэл 'setXIsNext' дуудлагууд дахин хэрэггүй болно. Одоо, компонентын кодыг бичих явцдаа алдаа гаргасан ч 'xIsNext' нь 'currentMove'-тэй синхрончлол алдагдах (зөрөх) ямар ч боломжгүй боллоо.
-### Wrapping up {/*wrapping-up*/}
+### Дүгнэлт {/*wrapping-up*/}
-Congratulations! You've created a tic-tac-toe game that:
+Баяр хүргэе! Та дараах боломжуудтай 'tic-tac-toe' тоглоомыг бүтээлээ:
-- Lets you play tic-tac-toe,
-- Indicates when a player has won the game,
-- Stores a game's history as a game progresses,
-- Allows players to review a game's history and see previous versions of a game's board.
+- 'Tic-tac-toe' тоглох боломжтой,
+- Тоглогч хожсон үед үүнийг зааж өгдөг,
+- Тоглоомын явцад тоглоомын түүхийг хадгалдаг,
+- Тоглогчдод тоглоомын түүхийг эргэн харах болон тоглоомын хөлгийн өмнөх хувилбаруудыг үзэх боломжийг олгодог.
-Nice work! We hope you now feel like you have a decent grasp of how React works.
+Сайн байна! Одоо танд React хэрхэн ажилладаг талаар боломжийн ойлголттой болсон мэт сэтгэгдэл төрж байгаа байх гэж найдаж байна.
-Check out the final result here:
+Эцсийн үр дүнг эндээс шалгаарай:
@@ -2901,12 +2899,12 @@ body {
-If you have extra time or want to practice your new React skills, here are some ideas for improvements that you could make to the tic-tac-toe game, listed in order of increasing difficulty:
+Хэрэв танд нэмэлт цаг байгаа бол эсвэл шинээр сурсан 'React' чадвараа бататгахыг хүсвэл 'tic-tac-toe' тоглоомыг сайжруулах зарим санаануудыг хүндрэлийн зэрэг нэмэгдэх дарааллаар доор жагсаалаа:
-1. For the current move only, show "You are at move #..." instead of a button.
-1. Rewrite `Board` to use two loops to make the squares instead of hardcoding them.
-1. Add a toggle button that lets you sort the moves in either ascending or descending order.
-1. When someone wins, highlight the three squares that caused the win (and when no one wins, display a message about the result being a draw).
-1. Display the location for each move in the format (row, col) in the move history list.
+1. Зөвхөн одоогийн нүүдлийн хувьд товчлуурын оронд "Та #... нүүдэл дээр байна" гэсэн бичвэрийг харуулах.
+2. Board компонентыг нүднүүдийг (squares) нэг бүрчлэн гараар бичихгүйгээр, хоёр давталт (loop) ашиглан үүсгэдэг болгож дахин бичих.
+3. Нүүдлүүдийг өсөх эсвэл буурах дарааллаар эрэмбэлэх боломжтой сэлгэн залгах (toggle) товчлуур нэмэх.
+4. Нүүдлүүдийг өсөх эсвэл буурах дарааллаар эрэмбэлэх боломжтой сэлгэн залгах (toggle) товчлуур нэмэх.
+5. Нүүдлийн түүхийн жагсаалтад нүүдэл бүрийн байршлыг (мөр, багана) гэсэн форматаар харуулах.
Throughout this tutorial, you've touched on React concepts including elements, components, props, and state. Now that you've seen how these concepts work when building a game, check out [Thinking in React](/learn/thinking-in-react) to see how the same React concepts work when build an app's UI.