Skip to content

Commit

Permalink
final touchup
Browse files Browse the repository at this point in the history
  • Loading branch information
@srikanth-kandi
srikanth-kandi committed Mar 30, 2024
1 parent 7dfc21f commit c68ea62
Showing 1 changed file with 34 additions and 34 deletions.
68 changes: 34 additions & 34 deletions src/content/learn/tutorial-tic-tac-toe.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,9 @@ function Board({ xIsNext, squares, onPlay }) {
const winner = calculateWinner(squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
status = 'విజేత: ' + winner;
} else {
status = 'Next player: ' + (xIsNext ? 'X' : 'O');
status = 'నెక్స్ట్ ప్లేయర్: ' + (xIsNext ? 'X' : 'O');
}

return (
Expand Down Expand Up @@ -103,9 +103,9 @@ export default function Game() {
const moves = history.map((squares, move) => {
let description;
if (move > 0) {
description = 'Go to move #' + move;
description = '#' + move + ' కదలికకు వెళ్లండి';
} else {
description = 'Go to game start';
description = 'ఆట ప్రారంభానికి వెళ్లండి';
}
return (
<li key={move}>
Expand Down Expand Up @@ -1342,22 +1342,22 @@ DOM `<button>` ఎలిమెంట్ యొక్క `onClick` అట్ర
```jsx
const squares = [null, null, null, null, null, null, null, null, null];
squares[0] = 'X';
// ఇప్పుడు `స్క్వేర్స్` ["X", null, null, null, null, null, null, null, null];
// ఇప్పుడు `squares` ["X", null, null, null, null, null, null, null, null];
```
మీరు `squares` array ని మ్యుటేట్ చేయకుండా డేటాను చేంజ్ చేసినట్లయితే అది ఎలా ఉంటుందో ఇక్కడ ఉంది:
```jsx
const squares = [null, null, null, null, null, null, null, null, null];
const nextSquares = ['X', null, null, null, null, null, null, null, null];
// ఇప్పుడు `squares` మారలేదు, కానీ `nextSquares` మొదటి ఎలిమెంట్ `null` కాకుండా 'X'
// ఇప్పుడు `squares` మారలేదు, కానీ `nextSquares` మొదటి ఎలిమెంట్ `null` కాకుండా 'X' అయ్యింది
```
ఫలితం ఒకే విధంగా ఉంటుంది కానీ డైరెక్ట్ గా మ్యుటేట్ చేయకుండా ఉండటం (లోపల ఉన్న డేటాను మార్చడం) ద్వారా, మీరు అనేక ప్రయోజనాలను పొందుతారు.
ఇమ్ముటబిలిటీ కాంప్లెక్స్ ఫీచర్లను ఇంప్లిమెంట్ చేయడం చాలా సులభం చేస్తుంది. ఈ ట్యుటోరియల్‌లో తర్వాత, మీరు గేమ్ చరిత్రను రివ్యూ చేయడానికి మరియు గత కదలికలకు "జంప్ బ్యాక్" అవ్వడానికి మిమ్మల్ని అనుమతించే "టైమ్ ట్రావెల్" ఫీచర్‌ను అమలు చేస్తారు. ఈ ఫంక్షనాలిటీ గేమ్‌లకు ప్రత్యేకమైనది కాదు--నిర్దిష్ట చర్యలను అన్డు మరియు రీడు చేయడం అనేది యాప్‌లకు సాధారణ అవసరం. డైరెక్ట్ డేటా మ్యుటేషన్‌ను నివారించడం వలన డేటా యొక్క మునుపటి వెర్షన్‌లను అలాగే ఉంచడానికి మరియు వాటిని తర్వాత మళ్లీ ఉపయోగించుకోవడానికి మిమ్మల్ని అనుమతిస్తుంది.
ఇమ్ముటబిలిటీ వల్ల మరో ప్రయోజనం కూడా ఉంది. డిఫాల్ట్‌గా, పేరెంట్ కాంపోనెంట్ స్థితి మారినప్పుడు అన్ని చైల్డ్ కాంపోనెంట్‌లు ఆటోమేటిక్‌గా రీ-రెండర్ అవుతాయి. మార్పు వల్ల ప్రభావితం కాని చైల్డ్ కాంపోనెంట్‌లు కూడా ఇందులో ఉన్నాయి. రీ-రెండరింగ్ అనేది యూసర్ నోటీస్ చేయనప్పటికీ (మీరు దానిని అవొఇద్ చేయడానికి యాక్టివ్ గా ట్రై చేయకూడదు!), మీరు పెర్ఫార్మన్స్ ఇస్సుఎస్ వల్ల ట్రీ లో క్లియర్గా అఫక్ట్ అవ్వని కొంత భాగాన్ని రీ-రెండరింగ్ చేయడం స్కిప్ చేయవచ్చు. ఇమ్యుటబిలిటీ వారి డేటా మారినదా లేదా అనేదానిని పోల్చడానికి కాంపోనెంట్లను చాలా చౌకగా చేస్తుంది. మీరు [`memo` API రిఫరెన్స్](/reference/react/memo) లో కాంపోనెంట్‌ను ఎప్పుడు రీ-రెండర్ చేయాలో React ఎలా ఎంచుకుంటుంది అనే దాని గురించి మరింత తెలుసుకోవచ్చు.
ఇమ్ముటబిలిటీ వల్ల మరో ప్రయోజనం కూడా ఉంది. డిఫాల్ట్‌గా, పేరెంట్ కాంపోనెంట్ state మారినప్పుడు అన్ని చైల్డ్ కాంపోనెంట్‌లు ఆటోమేటిక్‌గా రీ-రెండర్ అవుతాయి. మార్పు వల్ల ప్రభావితం కాని చైల్డ్ కాంపోనెంట్‌లు కూడా ఇందులో ఉన్నాయి. రీ-రెండరింగ్ అనేది యూసర్ నోటీస్ చేయనప్పటికీ (మీరు దానిని అవొఇద్ చేయడానికి యాక్టివ్ గా ట్రై చేయకూడదు!), మీరు పెర్ఫార్మన్స్ ఇస్సుఎస్ వల్ల ట్రీ లో క్లియర్గా అఫక్ట్ అవ్వని కొంత భాగాన్ని రీ-రెండరింగ్ చేయడం స్కిప్ చేయవచ్చు. ఇమ్యుటబిలిటీ వారి డేటా మారినదా లేదా అనేదానిని పోల్చడానికి కాంపోనెంట్లను చాలా చౌకగా చేస్తుంది. మీరు [`memo` API రిఫరెన్స్](/reference/react/memo) లో కాంపోనెంట్‌ను ఎప్పుడు రీ-రెండర్ చేయాలో React ఎలా ఎంచుకుంటుంది అనే దాని గురించి మరింత తెలుసుకోవచ్చు.
### టర్న్స్ తీసుకోవడం {/*taking-turns*/}
Expand Down Expand Up @@ -1406,7 +1406,7 @@ export default function Board() {
`X` ఒక `O` ద్వారా ఒవెర్రైట్ చేయబడింది! ఇది గేమ్‌కు చాలా ఆసక్తికరమైన ట్విస్ట్‌ని జోడిస్తుంది, మనం ప్రస్తుతానికి ఒరిజినల్ రూల్స్ కు కట్టుబడి ఉందాము.
మీరు స్క్వేర్‌ను `X` లేదా `O`తో మార్క్ చేసినప్పుడు, స్క్వేర్‌లో ఇప్పటికే `X` లేదా `O` వేల్యూ ఉందో లేదో తనిఖీ చేయడం లేదు. మీరు *ఎర్లీగా రిటర్న్ చేయడం* ద్వారా దీన్ని పరిష్కరించవచ్చు. స్క్వేర్‌లో ఇప్పటికే `X` లేదా `O` ఉందో లేదో మీరు తనిఖీ చేస్తారు. స్క్వేర్ ఇప్పటికే ఫిల్ అయి ఉంటే, మీరు ముందుగా `handleClick` ఫంక్షన్‌లో `return` అవుతారు--ఇది బోర్డ్ state ని అప్డేట్ చేయడానికి ప్రయత్నించే ముందు.
మీరు స్క్వేర్‌ను `X` లేదా `O` తో మార్క్ చేసినప్పుడు, స్క్వేర్‌లో ఇప్పటికే `X` లేదా `O` వేల్యూ ఉందో లేదో తనిఖీ చేయడం లేదు. మీరు *ఎర్లీగా రిటర్న్ చేయడం* ద్వారా దీన్ని పరిష్కరించవచ్చు. స్క్వేర్‌లో ఇప్పటికే `X` లేదా `O` ఉందో లేదో మీరు తనిఖీ చేస్తారు. స్క్వేర్ ఇప్పటికే ఫిల్ అయి ఉంటే, మీరు ముందుగా `handleClick` ఫంక్షన్‌లో `return` అవుతారు--ఇది బోర్డ్ state ని అప్డేట్ చేయడానికి ప్రయత్నించే ముందు.
```js {2,3,4}
function handleClick(i) {
Expand Down Expand Up @@ -1568,17 +1568,17 @@ function handleClick(i) {
}
```
ఆట ముగిసినప్పుడు ప్లేయర్స్కు తెలియజేయడానికి, మీరు "Winner: X" లేదా "Winner: O" వంటి టెక్స్ట్ ని డిస్ప్లే చేయవచ్చు. అలా చేయడానికి మీరు `Board` కాంపోనెంట్‌కి `status` సెక్షన్ ని జోడిస్తారు. గేమ్ ముగిసినట్లయితే స్టేటస్ విజేతను డిస్ప్లే చేస్తుంది మరియు గేమ్ కొనసాగుతున్నట్లయితే, నెక్స్ట్ ఏ ప్లేయర్ టర్న్ ఉందో మీరు డిస్ప్లే చేస్తారు:
ఆట ముగిసినప్పుడు ప్లేయర్స్కు తెలియజేయడానికి, మీరు "విజేత: X" లేదా "విజేత: O" వంటి టెక్స్ట్ ని డిస్ప్లే చేయవచ్చు. అలా చేయడానికి మీరు `Board` కాంపోనెంట్‌కి `status` సెక్షన్ ని జోడిస్తారు. గేమ్ ముగిసినట్లయితే స్టేటస్ విజేతను డిస్ప్లే చేస్తుంది మరియు గేమ్ కొనసాగుతున్నట్లయితే, నెక్స్ట్ ఏ ప్లేయర్ టర్న్ ఉందో మీరు డిస్ప్లే చేస్తారు:
```js {3-9,13}
export default function Board() {
// ...
const winner = calculateWinner(squares);
let status;
if (winner) {
status = "Winner: " + winner;
status = "విజేత: " + winner;
} else {
status = "Next player: " + (xIsNext ? "X" : "O");
status = "నెక్స్ట్ ప్లేయర్: " + (xIsNext ? "X" : "O");
}

return (
Expand Down Expand Up @@ -1626,9 +1626,9 @@ export default function Board() {
const winner = calculateWinner(squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
status = "విజేత: " + winner;
} else {
status = 'Next player: ' + (xIsNext ? 'X' : 'O');
status = "నెక్స్ట్ ప్లేయర్: " + (xIsNext ? "X" : "O");
}

return (
Expand Down Expand Up @@ -1851,7 +1851,7 @@ function Board({ xIsNext, squares, onPlay }) {
కాల్ చేసినప్పుడు `handlePlay` ఏమి చేయాలి? Board అప్‌డేట్ చేయబడిన array తో `setSquares` ని కాల్ చేస్తుంది అని గుర్తుంచుకోండి, ఇప్పుడు అది అప్డేట్ చేయబడిన `squares` array ని `onPlay` కి పాస్ చేస్తుంది.
రీ-రెండర్‌ ని ట్రిగ్గర్ చేయడానికి `handlePlay` ఫంక్షన్‌ `Game`యొక్క state ని అప్‌డేట్ చేయాలి, కానీ మీరు ఇకపై కాల్ చేయగల `setSquares` ఫంక్షన్‌ను కలిగి లేరు--మీరు ఇప్పుడు ఈ ఇన్ఫర్మేషన్ని స్టోర్ చేయడానికి `history` state వేరియబుల్ ని ఉపయోగిస్తున్నారు. మీరు అప్డేట్ చేయబడిన `squares` array ని కొత్త చరిత్ర ఎంట్రీగా జోడించడం ద్వారా `history` ని అప్డేట్ చేయాలి. Board ఉపయోగించిన విధంగానే మీరు కూడా `xIsNext` ని టోగుల్ చేయాలనుకుంటున్నారు:
రీ-రెండర్‌ ని ట్రిగ్గర్ చేయడానికి `handlePlay` ఫంక్షన్‌ `Game` యొక్క state ని అప్‌డేట్ చేయాలి, కానీ మీరు ఇకపై కాల్ చేయగల `setSquares` ఫంక్షన్‌ను కలిగి లేరు--మీరు ఇప్పుడు ఈ ఇన్ఫర్మేషన్ని స్టోర్ చేయడానికి `history` state వేరియబుల్ ని ఉపయోగిస్తున్నారు. మీరు అప్డేట్ చేయబడిన `squares` array ని కొత్త చరిత్ర ఎంట్రీగా జోడించడం ద్వారా `history` ని అప్డేట్ చేయాలి. Board ఉపయోగించిన విధంగానే మీరు కూడా `xIsNext` ని టోగుల్ చేయాలనుకుంటున్నారు:
```js {4-5}
export default function Game() {
Expand Down Expand Up @@ -1900,9 +1900,9 @@ function Board({ xIsNext, squares, onPlay }) {
const winner = calculateWinner(squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
status = "విజేత: " + winner;
} else {
status = 'Next player: ' + (xIsNext ? 'X' : 'O');
status = "నెక్స్ట్ ప్లేయర్: " + (xIsNext ? "X" : "O");
}

return (
Expand Down Expand Up @@ -2049,9 +2049,9 @@ export default function Game() {
const moves = history.map((squares, move) => {
let description;
if (move > 0) {
description = 'Go to move #' + move;
description = '#' + move + ' కదలికకు వెళ్లండి';
} else {
description = 'Go to game start';
description = 'ఆట ప్రారంభానికి వెళ్లండి';
}
return (
<li>
Expand Down Expand Up @@ -2111,9 +2111,9 @@ function Board({ xIsNext, squares, onPlay }) {
const winner = calculateWinner(squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
status = "విజేత: " + winner;
} else {
status = 'Next player: ' + (xIsNext ? 'X' : 'O');
status = "నెక్స్ట్ ప్లేయర్: " + (xIsNext ? "X" : "O");
}

return (
Expand Down Expand Up @@ -2155,9 +2155,9 @@ export default function Game() {
const moves = history.map((squares, move) => {
let description;
if (move > 0) {
description = 'Go to move #' + move;
description = '#' + move + ' కదలికకు వెళ్లండి';
} else {
description = 'Go to game start';
description = 'ఆట ప్రారంభానికి వెళ్లండి';
}
return (
<li>
Expand Down Expand Up @@ -2339,9 +2339,9 @@ function Board({ xIsNext, squares, onPlay }) {
const winner = calculateWinner(squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
status = "విజేత: " + winner;
} else {
status = 'Next player: ' + (xIsNext ? 'X' : 'O');
status = "నెక్స్ట్ ప్లేయర్: " + (xIsNext ? "X" : "O");
}

return (
Expand Down Expand Up @@ -2383,9 +2383,9 @@ export default function Game() {
const moves = history.map((squares, move) => {
let description;
if (move > 0) {
description = 'Go to move #' + move;
description = '#' + move + ' కదలికకు వెళ్లండి';
} else {
description = 'Go to game start';
description = 'ఆట ప్రారంభానికి వెళ్లండి';
}
return (
<li key={move}>
Expand Down Expand Up @@ -2560,9 +2560,9 @@ function Board({ xIsNext, squares, onPlay }) {
const winner = calculateWinner(squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
status = "విజేత: " + winner;
} else {
status = 'Next player: ' + (xIsNext ? 'X' : 'O');
status = "నెక్స్ట్ ప్లేయర్: " + (xIsNext ? "X" : "O");
}

return (
Expand Down Expand Up @@ -2608,9 +2608,9 @@ export default function Game() {
const moves = history.map((squares, move) => {
let description;
if (move > 0) {
description = 'Go to move #' + move;
description = '#' + move + ' కదలికకు వెళ్లండి';
} else {
description = 'Go to game start';
description = 'ఆట ప్రారంభానికి వెళ్లండి';
}
return (
<li key={move}>
Expand Down Expand Up @@ -2770,9 +2770,9 @@ function Board({ xIsNext, squares, onPlay }) {
const winner = calculateWinner(squares);
let status;
if (winner) {
status = 'Winner: ' + winner;
status = "విజేత: " + winner;
} else {
status = 'Next player: ' + (xIsNext ? 'X' : 'O');
status = "నెక్స్ట్ ప్లేయర్: " + (xIsNext ? "X" : "O");
}

return (
Expand Down Expand Up @@ -2816,9 +2816,9 @@ export default function Game() {
const moves = history.map((squares, move) => {
let description;
if (move > 0) {
description = 'Go to move #' + move;
description = '#' + move + ' కదలికకు వెళ్లండి';
} else {
description = 'Go to game start';
description = 'ఆట ప్రారంభానికి వెళ్లండి';
}
return (
<li key={move}>
Expand Down

0 comments on commit c68ea62

Please sign in to comment.