diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index aa87752a..fd61ce02 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -4,28 +4,28 @@ title: 'ట్యుటోరియల్: టిక్-టాక్-టో' -ఈ ట్యుటోరియల్ లో మీరు ఒక చిన్న టిక్-టాక్-టో గేమ్ ని నిర్మించుతారు. ఈ ట్యుటోరియల్ మీకు ఎలాంటి React(రియాక్ట్) ఫ్రేమ్ వర్క్ పరిజ్ఞానం లేదని భావిస్తుంది . ఈ ట్యుటోరియల్ లో మీరు నేర్చుకునే విధాలు ఏవైనా React(రియాక్ట్) యాప్ ని నిర్మించడానికి మూలముగా ఉంటాయి, మరియు దానిని పూర్తిగా అర్థం చేసుకోవడం వల్ల React(రియాక్ట్) గురించి మీకు లోతైన అవగాహన లభిస్తుంది. +ఈ ట్యుటోరియల్ లో మీరు ఒక చిన్న టిక్-టాక్-టో గేమ్ ని బిల్డ్ చేస్తారు. ఈ ట్యుటోరియల్ మీకు ఎలాంటి 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) +ఈ ట్యుటోరియల్ **చేయడం ద్వారా నేర్చుకోవడానికి** ఇష్టపడే వారికి మరియు త్వరగా ఏదైనా సృష్టించాలనుకునే వ్యక్తుల కోసం రూపొందించబడింది. మీరు ప్రతి కాన్సెప్ట్ ని స్టెప్ బై స్టెప్ గా నేర్చుకోవాలనుకుంటే, [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 ‌తో ఇంటరాక్టివ్ టిక్-టాక్-టో గేమ్‌ని నిర్మిస్తారు. -You can see what it will look like when you're finished here: +మీరు పూర్తి చేసినప్పుడు అది ఎలా ఉంటుందో మీరు ఇక్కడ చూడవచ్చు: @@ -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 ( @@ -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 (
  • @@ -194,15 +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. +ట్యుటోరియల్‌తో కొనసాగడానికి ముందు మీరు పైన ఉన్న టిక్-టాక్-టో గేమ్‌ని తనిఖీ చేయాలని మేము సిఫార్సు చేస్తున్నాము. మీరు గమనించే ఫీచర్లలో ఒకటి గేమ్ బోర్డ్ యొక్క కుడి వైపున సంఖ్యా జాబితా ఉంది. ఈ జాబితా మీకు గేమ్‌లో జరిగిన అన్ని కదలికల చరిత్రను అందిస్తుంది మరియు గేమ్ అభివృద్ధి చెందుతున్నప్పుడు ఇది అప్డేట్ అవుతుంది. -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*/} +## ట్యుటోరియల్ కోసం సెటప్ {/*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. +దిగువ లైవ్ కోడ్ ఎడిటర్‌లో, CodeSandbox వెబ్‌సైట్‌ని ఉపయోగించి కొత్త ట్యాబ్‌లో ఎడిటర్‌ను తెరవడానికి టాప్-రైట్ కార్నర్లో ఉన్న **Fork** ని క్లిక్ చేయండి. CodeSandbox మీ బ్రౌజర్‌లో కోడ్‌ను వ్రాయడానికి మరియు మీరు సృష్టించిన యాప్‌ని మీ యూజర్స్ ఎలా చూస్తారనే ప్రివ్యూని అందిస్తుంది. కొత్త ట్యాబ్‌లో ఈ ట్యుటోరియల్ కోసం ఖాళీ స్క్వేర్ మరియు స్టార్టర్ కోడ్‌ను చూస్తారు. @@ -261,33 +261,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 **Download Sandbox** 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/) ని ఇన్‌స్టాల్ చేయండి +1. మీరు ఇంతకు ముందు ఓపెన్ చేసిన CodeSandbox ట్యాబ్‌లో, మెనుని తెరవడానికి టాప్-లెఫ్ట్ కార్నర్ లో ఉన్న బటన్ను క్లిక్ చేయండి, ఆపై ఫైల్‌ల ఆర్కైవ్‌ను లోకల్ గా డౌన్‌లోడ్ చేయడానికి ఆ మెనులో **Download Sandbox** ని క్లిక్ చేయండి +1. ఆర్కైవ్‌ను అన్జిప్ చేసి, ఆపై మీరు అన్జిప్ చేసిన డైరెక్టరీని టెర్మినల్ లో `cd` ని ఉపయోగించి తెరవండి +1. `npm install` తో డిపెండెన్సీలను ఇన్‌స్టాల్ చేయండి +1. లోకల్ సర్వర్‌ని స్టార్ట్ చేయడానికి `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 లో మీరు మూడు ప్రధాన విభాగాలను చూస్తారు: -![CodeSandbox with starter code](../images/tutorial/react-starter-code-codesandbox.png) +![CodeSandbox స్టార్టర్ కోడ్](../images/tutorial/react-starter-code-codesandbox.png) -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` అనే ఫోల్డర్‌తో _Files_ విభాగం +1. _కోడ్ ఎడిటర్_ ఇక్కడ మీరు ఎంచుకున్న ఫైల్ యొక్క సోర్స్ కోడ్‌ని మీరు చూస్తారు +1. మీరు వ్రాసిన కోడ్ ఎలా ప్రదర్శించబడుతుందో మీరు చూసే _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` ఫైల్ ని ఇప్పుడు _Files_ విభాగంలో సెలెక్ట్ చేయండి. _కోడ్ ఎడిటర్_ లో ఫైల్ యొక్క కంటెంట్‌ ఇలా ఉండాలి: ```jsx export default function Square() { @@ -295,15 +295,15 @@ export default function Square() { } ``` -The _browser_ section should be displaying a square with a X in it like this: +_బ్రౌసర్_ విభాగం ఇలా X తో కూడిన స్క్వేర్ ని ప్రదర్శించాలి: -![x-filled square](../images/tutorial/x-filled-square.png) +![X నిండిన స్క్వేర్](../images/tutorial/x-filled-square.png) -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 లో కొంత భాగాన్ని రిప్రజెంట్ చేసే రీయూజబుల్ కోడ్ యొక్క భాగం. మీ అప్లికేషన్‌లోని UI ఎలిమెంట్‌లను రెండర్ చేయడానికి, మేనేజ్ చేయడానికి మరియు అప్‌డేట్ చేయడానికి కాంపోనెంట్లు ఉపయోగించబడతాయి. కాంపోనెంట్ లో లైన్ బై లైన్ గా ఏం జరుగుతుందో చూద్దాం: ```js {1} export default function Square() { @@ -311,7 +311,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 +319,15 @@ 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. +రెండవ లైన్ బటన్‌ను అందిస్తుంది. `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 యొక్క _Files_ విభాగంలో `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 యొక్క _Files_ విభాగంలో `index.js` అని లేబుల్ చేయబడిన ఫైల్‌పై క్లిక్ చేయండి. మీరు ట్యుటోరియల్ సమయంలో ఈ ఫైల్‌ని ఎడిట్ చేయరు కానీ మీరు `App.js` ఫైల్‌లో క్రియేట్ చేసిన కాంపోనెంట్ మరియు వెబ్ బ్రౌజర్‌కి మధ్య ఇది వంతెన లా పని చేస్తుంది. ```jsx import { StrictMode } from 'react'; @@ -337,20 +337,20 @@ import './styles.css'; import App from './App'; ``` -Lines 1-5 bring 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 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 +358,7 @@ export default function Square() { } ``` -You'll get this error: +మీకు ఈ ఎర్రర్ వస్తుంది: @@ -366,7 +366,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 +379,17 @@ export default function Square() { } ``` -Now you should see: +మీరు ఈ ఔట్పుట్ ని చూస్తారు: -![two x-filled squares](../images/tutorial/two-x-filled-squares.png) +![రెండు X నిండిన స్క్వేర్స్](../images/tutorial/two-x-filled-squares.png) -Great! Now you just need to copy-paste a few times to add nine squares and... +గ్రేట్! మీరు చేయాల్సిందల్లా తొమ్మిది స్క్వేర్లు ఉండే వరకు కొన్ని సార్లు కాపీ చేసి పేస్ట్ చేయండి... -![nine x-filled squares in a line](../images/tutorial/nine-x-filled-squares.png) +![ఒక లైన్ లో తొమ్మిది X నిండిన స్క్వేర్స్](../images/tutorial/nine-x-filled-squares.png) -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` లతో వరుసలుగా (rows) గ్రూప్ చేయాలి మరియు కొన్ని 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 +415,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` తో divs ని స్టైల్ చేస్తుంది. ఇప్పుడు మీరు మీ కాంపోనెంట్‌లను స్టైల్ చేసిన `div` లతో వరుసలుగా గ్రూప్ చేసారు కాబట్టి మీరు మీ టిక్-టాక్-టో బోర్డుని కలిగి ఉన్నారు: -![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png) +![టిక్-టాక్-టో బోర్డు 1 నుండి 9 వరకు సంఖ్యలతో నిండి ఉంటుంది](../images/tutorial/number-filled-board.png) -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 +427,7 @@ export default function Board() { } ``` -At this point your code should look something like this: +ఈ దశలో, మీ కోడ్ ఇలా ఉండాలి: @@ -504,15 +504,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" కి మార్చాలనుకుంటున్నారు. మీరు ఇప్పటివరకు బోర్డ్‌ను ఎలా నిర్మించారు అనే దానితో మీరు స్క్వేర్‌ను తొమ్మిది సార్లు అప్‌డేట్ చేసే కోడ్‌ను కాపీ-పేస్ట్ చేయాలి (మీ వద్ద ఉన్న ప్రతి స్క్వేర్‌కు ఒకసారి)! కాపీ-పేస్ట్ చేయడానికి బదులుగా, మీరు రీయూజబుల్ కాంపోనెంట్లను సృష్టించడానికి మరియు డూప్లికేట్‌లతో నిండిన చిందరవందరగా ఉన్న కోడ్‌ను వ్రాయకుండా నిరోధించడానికి 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 +524,7 @@ export default function Board() { } ``` -Then you'll update the Board component to render that `Square` component using JSX syntax: +JSX సింటాక్స్‌ని ఉపయోగించి ఆ `Square` కాంపోనెంట్‌ని రెండర్ చేయడానికి మీరు `Board` కాంపోనెంట్‌ని అప్‌డేట్ చేస్తారు: ```js {5-19} // ... @@ -551,15 +551,15 @@ 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: +ఏమి జరిగిందో చూద్దాం: -![one-filled board](../images/tutorial/board-filled-with-ones.png) +![1 తో నిండిన పూర్తి బోర్డు](../images/tutorial/board-filled-with-ones.png) -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`). +అరెరే! మీరు ఇంతకు ముందు ఉన్న సంఖ్యా స్క్వేర్లను కోల్పోయారు. ఇప్పుడు ప్రతి స్క్వేర్ "1" అని చెబుతుంది. దీన్ని పరిష్కరించడానికి, మీరు ప్రతి స్క్వేర్ కలిగి ఉండవలసిన వేల్యూ ను పేరెంట్ కాంపోనెంట్ (`Board`) నుండి దాని చైల్డ్ (`Square`) కి పాస్ చేయడానికి *props* ని ఉపయోగిస్తారు. -Update the `Square` component to read the `value` prop that you'll pass from the `Board`: +మీరు `Board` నుండి పాస్ చేసే `value` ప్రాప్‌ని రీడ్ చేయడానికి `Square` కాంపోనెంట్‌ను అప్‌డేట్ చేయండి: ```js {1} function Square({ value }) { @@ -567,9 +567,9 @@ function Square({ value }) { } ``` -`function Square({ value })` indicates the Square component can be passed a prop called `value`. +`function Square({ value })` అనేది స్క్వేర్ కాంపోనెంట్‌ను `value` అనే ప్రాప్‌ని పాస్ చేయవచ్చని సూచిస్తుంది. -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 +577,11 @@ function Square({ value }) { } ``` -Oops, this is not what you wanted: +అయ్యో, ఇది మీరు అనుకున్న అవుట్పుట్ కాదు: -![value-filled board](../images/tutorial/board-filled-with-value.png) +!["value" నిండిన బోర్డు](../images/tutorial/board-filled-with-value.png) -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 +589,11 @@ function Square({ value }) { } ``` -For now, you should see an empty board: +ప్రస్తుతానికి, మీరు ఖాళీ బోర్డుని చూడాలి: -![empty board](../images/tutorial/empty-board.png) +![ఖాళీ బోర్డు](../images/tutorial/empty-board.png) -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` ప్రాప్‌ను ఇంకా పాస్ చేయలేదు. దాన్ని పరిష్కరించడానికి మీరు `Board` కాంపోనెంట్ ద్వారా రెండర్ చేయబడిన ప్రతి `Square` కాంపోనెంట్‌కి `value` ప్రాప్‌ని జోడిస్తారు: ```js {5-7,10-12,15-17} export default function Board() { @@ -619,11 +619,11 @@ export default function Board() { } ``` -Now you should see a grid of numbers again: +ఇప్పుడు మీరు మళ్లీ సంఖ్యల గ్రిడ్‌ని చూడాలి: -![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png) +![టిక్-టాక్-టో బోర్డు 1 నుండి 9 వరకు సంఖ్యలతో నిండి ఉంటుంది](../images/tutorial/number-filled-board.png) -Your updated code should look like this: +మీ అప్డేటెడ్ కోడ్ ఇలా ఉండాలి: @@ -702,9 +702,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` నుండి రిటర్న్ అయిన బటన్ JSX ఎలిమెంట్ యొక్క ప్రాప్‌లకు `onClick` ని జోడించండి: ```js {2-4,9} function Square({ value }) { @@ -723,19 +723,19 @@ 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). +మీరు మీ లోకల్ డెవలప్మెంట్ ఎన్విరాన్మెంట్ ని ఉపయోగించి ఈ ట్యుటోరియల్‌ని అనుసరిస్తుంటే, మీరు మీ బ్రౌజర్ కన్సోల్‌ను తెరవాలి. ఉదాహరణకు, మీరు Chrome బ్రౌజర్‌ని ఉపయోగిస్తుంటే, మీరు కన్సోల్‌ను కీబోర్డ్ షార్ట్‌కట్‌తో **Shift + Ctrl + J** (Windows/Linux లో) లేదా **Option + ⌘ + J** (macOS లో) వీక్షించవచ్చు. -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 లో స్టోర్ చేసి, `Square` క్లిక్ చేసినప్పుడు దాన్ని మారుద్దాం. -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` ప్రాప్‌ను రిమూవ్ చేయండి. బదులుగా, `Square` ప్రారంభానికి కొత్త లైన్ ని జోడించి, `useState` ని కాల్ చేయండి. `value` అనే state వేరియబుల్ రిటర్న్ అయింది అని ఇది నిర్ధారిస్తుంది. ```js {1,3,4} import { useState } from 'react'; @@ -747,9 +747,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` state యొక్క కరెంట్ వేల్యూ ని స్టోర్ చేస్తుంది మరియు `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` కాంపోనెంట్ సృష్టించిన మొత్తం తొమ్మిది స్క్వేర్ కాంపోనెంట్ల నుండి `value` ప్రాప్‌ను రిమూవ్ చేస్తారు: ```js {6-8,11-13,16-18} // ... @@ -776,7 +776,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: +ఇప్పుడు మీరు క్లిక్ చేసినప్పుడు "X" ని ప్రదర్శించడానికి `Square` ని మారుస్తారు. `console.log("clicked!");` ఈవెంట్ హ్యాండ్లర్‌ను `setValue('X');` తో రీప్లేస్ చేయండి. ఇప్పుడు మీ `Square` కాంపోనెంట్ ఇలా కనిపిస్తుంది: ```js {5} function Square() { @@ -797,13 +797,13 @@ function Square() { } ``` -By calling this `set` function from an `onClick` handler, you're telling React to re-render that `Square` whenever its `