);
}
@@ -80,7 +80,7 @@ export default App = AppTSX;
-ఈ శాండ్బాక్స్లు TypeScript కోడ్ ను హేండిల్ చేయగలవు, కానీ అవి టైప్-చెకర్ ను రన్ చేయలేవు. అంటే, మీరు TypeScript శాండ్బాక్స్లో సవరణలు చేయవచ్చు, కానీ మీకు ఏదైనా టైప్ ఎర్రర్స్ లేదా హెచ్చరికలు రావు. టైప్-చెకింగ్ పొందడానికి, మీరు [TypeScript Playground](https://www.typescriptlang.org/play) ను లేదా మరింత ఫుల్లీ-ఫీచర్డ్ ఆన్లైన్ శాండ్బాక్స్ ను ఉపయోగించవచ్చు.
+ఈ శాండ్బాక్స్లు TypeScript కోడ్ ను హేండిల్ చేయగలవు, కానీ అవి టైప్-చెకర్ ను రన్ చేయలేవు. అంటే, మీరు TypeScript శాండ్బాక్స్లో సవరణలు చేయవచ్చు, కానీ మీకు ఏదైనా టైప్ ఎర్రర్స్ లేదా హెచ్చరికలు రావు. టైప్-చెకింగ్ పొందడానికి, మీరు [TypeScript ప్లేగ్రౌండ్](https://www.typescriptlang.org/play) ను లేదా మరింత ఫుల్లీ-ఫీచర్డ్ ఆన్లైన్ శాండ్బాక్స్ ను ఉపయోగించవచ్చు.
@@ -90,9 +90,9 @@ export default App = AppTSX;
```tsx src/App.tsx active
interface MyButtonProps {
- /** The text to display inside the button */
+ /** బటన్ లోపల చూపించాల్సిన టెక్స్ట్ */
title: string;
- /** Whether the button can be interacted with */
+ /** బటన్ తో ఇంటరాక్ట్ అవవచ్చా */
disabled: boolean;
}
@@ -105,8 +105,8 @@ function MyButton({ title, disabled }: MyButtonProps) {
export default function MyApp() {
return (
-
Welcome to my app
-
+
నా యాప్కి స్వాగతం
+
);
}
@@ -132,14 +132,14 @@ export default App = AppTSX;
[`useState` Hook](/reference/react/useState) ఇనీషియల్ state గా ఇవ్వబడిన వేల్యూ ను రీ-యూజ్ చేసుకొని ఆ వేల్యూ యొక్క టైప్ ఏమిటి అని నిర్ధారిస్తుంది. ఉదాహరణకు:
```ts
-// టైప్ని "boolean" గా సూచిస్తుంది
+// టైప్ ను "boolean" గా సూచిస్తుంది
const [enabled, setEnabled] = useState(false);
```
-ఇది `enabled` కు `boolean` టైప్ ను అసైన్ చేస్తుంది, మరియు `setEnabled` `boolean` ఆర్గుమెంట్ ను స్వీకరించే ఫంక్షన్ లేదా `boolean` ను రిటర్న్ చేసే ఫంక్షన్ అవుతుంది. మీరు state కోసం టైప్ ను ఎక్సప్లిసిట్ గా ఇవ్వాలనుకుంటే, మీరు `useState` కాల్ కు టైప్ ఆర్గుమెంట్ ను ఇవ్వవచ్చు:
+ఇది `enabled` కు `boolean` టైప్ ను అసైన్ చేస్తుంది, మరియు `setEnabled` అనేది `boolean` ఆర్గుమెంట్ ను స్వీకరించే ఫంక్షన్ లేదా `boolean` ను రిటర్న్ చేసే ఫంక్షన్ అవుతుంది. మీరు state కోసం టైప్ ను ఎక్సప్లిసిట్ గా ఇవ్వాలనుకుంటే, మీరు `useState` కాల్ కు టైప్ ఆర్గుమెంట్ ను ఇవ్వవచ్చు:
```ts
-// టైప్ని "boolean" కి ఎక్సప్లిసిట్ గా సెట్ చేయండి
+// టైప్ ను "boolean" కి ఎక్సప్లిసిట్ గా సెట్ చేయండి
const [enabled, setEnabled] = useState(false);
```
@@ -189,7 +189,7 @@ function stateReducer(state: State, action: CounterAction): State {
case "setCount":
return { ...state, count: action.value };
default:
- throw new Error("Unknown action");
+ throw new Error("తెలియని ఆక్షన్");
}
}
@@ -201,11 +201,11 @@ export default function App() {
return (
)
}
@@ -290,18 +290,18 @@ export default App = AppTSX;
```js {5, 16-20}
import { createContext, useContext, useState, useMemo } from 'react';
-// This is a simpler example, but you can imagine a more complex object here
+// ఇది సింపుల్ ఉదాహరణ, కానీ మీరు ఇక్కడ మరింత క్లిష్టమైన ఆబ్జెక్ట్ ను ఊహించవచ్చు
type ComplexObject = {
kind: string
};
-// The context is created with `| null` in the type, to accurately reflect the default value.
+// సరైన డిఫాల్ట్ వేల్యూ ను ప్రతిబింబించడానికి, `| null` టైప్ తో context సృష్టించబడింది.
const Context = createContext(null);
-// The `| null` will be removed via the check in the Hook.
+// `| null` అనేది Hook లోని చెక్ ద్వారా తొలగించబడుతుంది.
const useGetComplexObject = () => {
const object = useContext(Context);
- if (!object) { throw new Error("useGetComplexObject must be used within a Provider") }
+ if (!object) { throw new Error("useGetComplexObject ఒక provider లోనే ఉపయోగించాలి.") }
return object;
}
@@ -320,7 +320,7 @@ function MyComponent() {
return (
-
Current object: {object.kind}
+
ప్రస్తుత ఆబ్జెక్ట్: {object.kind}
)
}
@@ -331,7 +331,7 @@ function MyComponent() {
[`useMemo`](/reference/react/useMemo) Hook ఒక ఫంక్షన్ కాల్ నుండి ఒక మేమోరైజ్డ్ వేల్యూ ను సృష్టిస్తుంది/రీ-అక్సెస్ చేస్తుంది, 2వ పారామీటర్గా పంపబడిన డిపెండెన్సీలు మారినప్పుడు మాత్రమే ఫంక్షన్ రీ-రన్ అవుతుంది. Hook ను కాల్ చేయడం వలన వచ్చిన రిజల్ట్ అనేది మొదటి పారామీటర్ లోని ఫంక్షన్ నుండి రిటర్న్ అయిన వాల్యూ ద్వారా అంచనా వేయబడుతుంది. మీరు మరింత ఎక్స్ప్లిసిట్ గా టైప్ ఆర్గుమెంట్ ను Hook కు ప్రొవైడ్ చేయవచ్చు.
```ts
-// The type of visibleTodos is inferred from the return value of filterTodos
+// visibleTodos యొక్క టైప్, filterTodos యొక్క రిటర్న్ వేల్యూ నుండి ఊహించబడుతుంది.
const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
```
@@ -355,7 +355,7 @@ TypeScript strict mode లో పని చేస్తున్నప్పు
import { useState, useCallback } from 'react';
export default function Form() {
- const [value, setValue] = useState("Change me");
+ const [value, setValue] = useState("నన్ను మార్చు");
const handleChange = useCallback>((event) => {
setValue(event.currentTarget.value);
@@ -364,7 +364,7 @@ export default function Form() {
return (
<>
-
Value: {value}
+
వేల్యూ: {value}
>
);
}
@@ -384,7 +384,7 @@ React లో DOM ఈవెంట్స్ తో పని చేస్తున
import { useState } from 'react';
export default function Form() {
- const [value, setValue] = useState("Change me");
+ const [value, setValue] = useState("నన్ను మార్చు");
function handleChange(event: React.ChangeEvent) {
setValue(event.currentTarget.value);
@@ -393,7 +393,7 @@ export default function Form() {
return (
<>
-