`ని ఉపయోగించవచ్చు:
```js {1,11}
@@ -153,7 +153,7 @@ For example, you can use a `
`:
```
-If you don't want to add an extra `
` to your markup, you can write `<>` and `` instead:
+మీరు మీ మార్కప్‌కి అదనపు `
` జోడించకూడదనుకుంటే, మీరు బదులుగా `<>` మరియు `` వ్రాయవచ్చు:
```js {1,11}
<>
@@ -169,21 +169,21 @@ If you don't want to add an extra `
` to your markup, you can write `<>` and
```
-This empty tag is called a *[Fragment.](/reference/react/Fragment)* Fragments let you group things without leaving any trace in the browser HTML tree.
+ఈ ఖాళీ ట్యాగ్‌ని *[Fragment](/reference/react/Fragment)* అని అంటారు. Fragments బ్రౌజర్ HTML ట్రీలో ఎలాంటి జాడను వదలకుండా విషయాలను సమూహపరచడానికి మిమ్మల్ని అనుమతిస్తాయి.
-#### Why do multiple JSX tags need to be wrapped? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
+#### ఎందుకు మల్టిపుల్ JSX ట్యాగ్‌లను ర్యాప్ చేయాలి? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
-JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two JSX tags without wrapping them into another tag or a Fragment.
+JSX HTML లాగా కనిపిస్తుంది, కానీ లోపలి భాగంలో ఇది సాధారణ JavaScript ఆబ్జెక్టులుగా మార్చబడుతుంది. మీరు ఒక ఫంక్షన్ నుండి రెండు ఆబ్జెక్టులను తిరిగి ఇచ్చే అవకాశం లేదు, అవి ఒక array లో ర్యాప్ చేయాల్సి ఉంటుంది. ఇదే కారణంగా, మీరు రెండు JSX ట్యాగ్‌లను కూడా మరో ట్యాగ్ లేదా fragment లో ర్యాప్ చేయకుండా తిరిగి ఇవ్వలేరు.
-### 2. Close all the tags {/*2-close-all-the-tags*/}
+### 2. అన్ని ట్యాగ్‌లను మూసివేయండి {/*2-close-all-the-tags*/}
-JSX requires tags to be explicitly closed: self-closing tags like `![]()
` must become `![]()
`, and wrapping tags like `oranges` must be written as ` oranges `.
+JSX లో ట్యాగ్‌లను స్పష్టంగా మూసివేయాల్సి ఉంటుంది: స్వయంగా మూసే ట్యాగ్‌లాంటి `![]()
` ను `![]()
` గా మార్చాలి, మరియు చుట్టుకొలత ట్యాగ్‌లాంటి `oranges` ను ` oranges ` అని రాయాలి.
-This is how Hedy Lamarr's image and list items look closed:
+ఇది Hedy Lamarr యొక్క చిత్రమూ, లిస్ట్ అంశాలు ఎలా మూసివేయబడ్డాయో చూడండి:
```js {2-6,8-10}
<>
@@ -200,11 +200,11 @@ This is how Hedy Lamarr's image and list items look closed:
```
-### 3. camelCase all most of the things! {/*3-camelcase-salls-most-of-the-things*/}
+### 3. camelCase అన్ని చాలా విషయాలు! {/*3-camelcase-salls-most-of-the-things*/}
-JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`.
+JSX JavaScript గా మారుతుంది మరియు JSX లో రాసిన అట్రిబ్యూట్లు JavaScript ఆబ్జెక్టుల key లు అవుతాయి. మీ స్వంత కాంపోనెంట్లలో, మీరు తరచుగా ఆ అట్రిబ్యూట్లను వేరియబుల్స్‌లో చదవాలనుకుంటారు. కానీ JavaScript వేరియబుల్ పేర్లపై కొన్ని పరిమితులు ఉన్నాయి. ఉదాహరణకు, వాటి పేర్లలో డాష్‌లు ఉండకూడదు లేదా `class` వంటి రిజర్వ్ చేసిన పదాలు ఉండకూడదు.
-This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className):
+అందుకే React లో, చాలా HTML మరియు SVG అట్రిబ్యూట్లు camelCase లో రాయబడతాయి. ఉదాహరణకు, `stroke-width` బదులుగా మీరు `strokeWidth` ఉపయోగిస్తారు. `class` అనేది రిజర్వ్ చేసిన పదం కావడం వలన, React లో మీరు `className` అని రాస్తారు, ఇది [అనుకూల DOM ప్రాపర్టీ](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) ఆధారంగా ఉంటుంది:
```js {4}
![]()
```
-You can [find all these attributes in the list of DOM component props.](/reference/react-dom/components/common) If you get one wrong, don't worry—React will print a message with a possible correction to the [browser console.](https://developer.mozilla.org/docs/Tools/Browser_Console)
+మీరు [ఈ అన్ని అట్రిబ్యూట్లను DOM కంపోనెంట్ ప్రాపర్టీలు యొక్క లిస్ట్‌లో కనుగొనవచ్చు](/reference/react-dom/components/common). మీరు వాటిలో ఒకటి తప్పు చేసినా, చింతించకండి—React ఒక సందేశాన్ని ప్రింట్ చేస్తుంది, దాని పరిష్కారం కోసం [బ్రౌజర్ కన్సోల్](https://developer.mozilla.org/docs/Tools/Browser_Console) లో చూడండి.
-For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) attributes are written as in HTML with dashes.
+చరిత్రాత్మక కారణాల వల్ల, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) మరియు [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) అట్రిబ్యూట్లు HTML లో డాష్‌లతో రాయబడతాయి.
-### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/}
+### ప్రో-టిప్: JSX కన్వర్టర్‌ను ఉపయోగించండి {/*pro-tip-use-a-jsx-converter*/}
-Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own.
+ఇప్పటికే ఉన్న మార్కప్‌లో ఈ అట్రిబ్యూట్లను అన్నింటినీ మార్చడం చాలా శ్రమతో కూడుకున్నది! మీ ప్రస్తుత HTML మరియు SVGని JSXకి అనువదించడానికి [కన్‌వర్టర్](https://transform.tools/html-to-jsx) ని ఉపయోగించమని మేము సిఫార్సు చేస్తున్నాము. కన్వర్టర్లు ప్రాక్టికల్‌గా చాలా ఉపయోగకరంగా ఉంటాయి, కానీ మీరు సరిగ్గా ఏం జరుగుతుందో అర్థం చేసుకోవడం ఇంకా విలువైనది, తద్వారా మీరు సొంతంగా JSX సౌకర్యంగా రాయగలుగుతారు.
-Here is your final result:
+ఇది మీ చివరి ఫలితం:
@@ -258,11 +258,11 @@ img { height: 90px }
-Now you know why JSX exists and how to use it in components:
+ఇప్పుడు మీరు JSX ఎందుకు ఉన్నదీ, కంపోనెంట్లలో దాన్ని ఎలా ఉపయోగించాలో తెలుసుకున్నారు:
-* React components group rendering logic together with markup because they are related.
-* JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to.
-* Error messages will often point you in the right direction to fixing your markup.
+* React కంపోనెంట్లు రెండరింగ్ లాజిక్ మరియు మార్కప్‌ను ఒకే చోట గ్రూప్ చేస్తాయి, ఎందుకంటే అవి పరస్పర సంబంధితమైనవి.
+* JSX HTML లాగా ఉంటుంది, కానీ కొన్ని తేడాలు ఉన్నాయి. అవసరమైతే మీరు [కన్‌వర్టర్](https://transform.tools/html-to-jsx) ను ఉపయోగించవచ్చు.
+* ఎర్రర్ మెసేజ్‌లు మీ మార్కప్‌ను సరిచేయడానికి సరైన దిశను చూపిస్తాయి.
@@ -270,9 +270,9 @@ Now you know why JSX exists and how to use it in components:
-#### Convert some HTML to JSX {/*convert-some-html-to-jsx*/}
+#### కొంత HTML ని JSX గా మార్చండి {/*convert-some-html-to-jsx*/}
-This HTML was pasted into a component, but it's not valid JSX. Fix it:
+ఈ HTML ను ఒక కంపోనెంట్‌లో పెట్టారు, కానీ ఇది సరైన JSX కాదు. దీన్ని సరిచేయండి:
@@ -308,7 +308,7 @@ export default function Bio() {
-Whether to do it by hand or using the converter is up to you!
+దీనిని స్వయంగా చేయాలా లేదా కన్వర్టర్‌ను ఉపయోగించాలా అనేది మీ ఇష్టంపై ఆధారపడి ఉంటుంది!
From 479c351ca2e7f6369bf43bba00256d0190999eca Mon Sep 17 00:00:00 2001
From: Shiva Sai <112751524+Shiva-Sai-ssb@users.noreply.github.com>
Date: Wed, 15 Jan 2025 19:56:54 +0530
Subject: [PATCH 2/2] Apply suggestions from review
Co-authored-by: Srikanth Kandi <87417638+srikanth-kandi@users.noreply.github.com>
---
src/content/learn/writing-markup-with-jsx.md | 18 +++++++++---------
1 file changed, 9 insertions(+), 9 deletions(-)
diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md
index 436e57f93..b3cad47e9 100644
--- a/src/content/learn/writing-markup-with-jsx.md
+++ b/src/content/learn/writing-markup-with-jsx.md
@@ -36,7 +36,7 @@ JavaScript
-కానీ Web మరింత ఇంటరాక్టివ్‌గా మారుతున్న కొద్దీ, లాజిక్ ఎక్కువగా కంటెంట్‌ను నిర్ణయించింది. JavaScript HTML ని నియంత్రించేది! అందుకే **React లో, రెండరింగ్ లాజిక్ మరియు మార్కప్ కంపోనెంట్లలో ఒకే చోట ఉంటాయి.**
+కానీ Web మరింత ఇంటరాక్టివ్‌గా మారుతున్న కొద్దీ, లాజిక్ ఎక్కువగా కంటెంట్‌ను నిర్ణయించింది. JavaScript అనేది HTML ని నియంత్రించేది! అందుకే **React లో, రెండరింగ్ లాజిక్ మరియు మార్కప్ కంపోనెంట్లలో ఒకే చోట ఉంటాయి.**
@@ -56,7 +56,7 @@ JavaScript
బటన్ యొక్క రెండరింగ్ లాజిక్ మరియు మార్కప్‌ను కలిపి ఉంచడం వల్ల, ప్రతిసారి మార్పులు చేసినప్పుడు అవి ఒకే సమన్వయంతో ఉండేలా చేస్తుంది. మరోవైపు, బటన్ యొక్క మార్కప్ మరియు సైడ్బార్ యొక్క మార్కప్ వంటి సంబంధం లేని వివరాలు ఒకదానితో ఒకటి ప్రత్యేకంగా ఉంచబడతాయి, దీనివల్ల వాటిలో ఏదైనా స్వతంత్రంగా మార్చడం మరింత సురక్షితంగా ఉంటుంది.
-ప్రతి React కంపోనెంట్ అనేది JavaScript ఫంక్షన్, ఇది React బ్రౌజర్‌లో రెండర్ చేసే కొంత మార్కప్‌ను కలిగి ఉండవచ్చు. React కంపోనెంట్లు ఆ మార్కప్‌ను ప్రదర్శించడానికి JSX అనే సింటాక్స్ ఎక్స్‌టెన్షన్ ఉపయోగిస్తాయి. JSX HTML లాంటిదిగా కనిపిస్తుంది, కానీ ఇది కొంచెం కఠినంగా ఉంటుంది మరియు డైనమిక్ సమాచారాన్ని ప్రదర్శించగలదు. దీనిని అర్థం చేసుకోవడానికి ఉత్తమమైన మార్గం, కొంత HTML మార్కప్‌ను JSX మార్కప్‌లోకి మార్చడం.
+ప్రతి React కంపోనెంట్ అనేది ఒక JavaScript ఫంక్షన్, ఇది React బ్రౌజర్‌లో రెండర్ చేసే కొంత మార్కప్‌ను కలిగి ఉండవచ్చు. React కంపోనెంట్లు ఆ మార్కప్‌ను ప్రదర్శించడానికి JSX అనే సింటాక్స్ ఎక్స్‌టెన్షన్ ఉపయోగిస్తాయి. JSX అనేది HTML లాంటిదిగా కనిపిస్తుంది, కానీ ఇది కొంచెం స్ట్రిక్ట్ గా ఉంటుంది మరియు డైనమిక్ సమాచారాన్ని ప్రదర్శించగలదు. దీనిని అర్థం చేసుకోవడానికి ఉత్తమమైన మార్గం, కొంత HTML మార్కప్‌ను JSX మార్కప్‌లోకి మార్చడం.
@@ -122,7 +122,7 @@ img { height: 90px }
-ఇది ఎందుకంటే JSX HTML కంటే కఠినమైనది మరియు దాని కోసం కొన్ని అదనపు నియమాలు ఉన్నాయి! మీరు పై ఎర్రర్ మెసేజ్‌లను చదవితే, అవి మార్కప్‌ని సరిచేయడంలో మీకు మార్గనిర్దేశం చేస్తాయి, లేదా మీరు కింద ఉన్న గైడ్‌ను అనుసరించవచ్చు.
+ఇది ఎందుకంటే JSX అనేది HTML కంటే స్ట్రిక్ట్ గా ఉంటుంది మరియు దాని కోసం కొన్ని అదనపు నియమాలు ఉన్నాయి! మీరు పై ఎర్రర్ మెసేజ్‌లను చదవితే, అవి మార్కప్‌ని సరిచేయడంలో మీకు మార్గనిర్దేశం చేస్తాయి, లేదా మీరు కింద ఉన్న గైడ్‌ను అనుసరించవచ్చు.
@@ -134,9 +134,9 @@ img { height: 90px }
### 1. ఒకే రూట్ ఎలిమెంట్‌ని return చేయండి {/*1-return-a-single-root-element*/}
-కంపోనెంట్ల నుంచి అనేక ఎలిమెంట్స్‌ని return చేయాలంటే, **వాటిని ఒకే పేరెంట్ ట్యాగ్‌తో చుట్టండి.**
+కంపోనెంట్ల నుంచి అనేక ఎలిమెంట్స్‌ ని return చేయాలంటే, **వాటిని ఒకే పేరెంట్ ట్యాగ్‌తో చుట్టండి.**
-ఉదాహరణకు, మీరు `
`ని ఉపయోగించవచ్చు:
+ఉదాహరణకు, మీరు `
` ని ఉపయోగించవచ్చు:
```js {1,11}
@@ -175,13 +175,13 @@ img { height: 90px }
#### ఎందుకు మల్టిపుల్ JSX ట్యాగ్‌లను ర్యాప్ చేయాలి? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/}
-JSX HTML లాగా కనిపిస్తుంది, కానీ లోపలి భాగంలో ఇది సాధారణ JavaScript ఆబ్జెక్టులుగా మార్చబడుతుంది. మీరు ఒక ఫంక్షన్ నుండి రెండు ఆబ్జెక్టులను తిరిగి ఇచ్చే అవకాశం లేదు, అవి ఒక array లో ర్యాప్ చేయాల్సి ఉంటుంది. ఇదే కారణంగా, మీరు రెండు JSX ట్యాగ్‌లను కూడా మరో ట్యాగ్ లేదా fragment లో ర్యాప్ చేయకుండా తిరిగి ఇవ్వలేరు.
+JSX అనేది HTML లాగా కనిపిస్తుంది, కానీ లోపలి భాగంలో ఇది సాధారణ JavaScript ఆబ్జెక్టులుగా మార్చబడుతుంది. మీరు ఒక ఫంక్షన్ నుండి రెండు ఆబ్జెక్టులను తిరిగి ఇచ్చే అవకాశం లేదు, అవి ఒక array లో ర్యాప్ చేయాల్సి ఉంటుంది. ఇదే కారణంగా, మీరు రెండు JSX ట్యాగ్‌లను కూడా మరో ట్యాగ్ లేదా fragment లో ర్యాప్ చేయకుండా తిరిగి ఇవ్వలేరు.
### 2. అన్ని ట్యాగ్‌లను మూసివేయండి {/*2-close-all-the-tags*/}
-JSX లో ట్యాగ్‌లను స్పష్టంగా మూసివేయాల్సి ఉంటుంది: స్వయంగా మూసే ట్యాగ్‌లాంటి `![]()
` ను `![]()
` గా మార్చాలి, మరియు చుట్టుకొలత ట్యాగ్‌లాంటి `oranges` ను ` oranges ` అని రాయాలి.
+JSX లో ట్యాగ్‌లను స్పష్టంగా మూసివేయాల్సి ఉంటుంది: స్వయంగా మూసే ట్యాగ్‌లాంటి `![]()
` ను `![]()
` గా మార్చాలి, మరియు వ్రాపింగ్ టాగ్స్ లాంటి `oranges` ను ` oranges ` అని రాయాలి.
ఇది Hedy Lamarr యొక్క చిత్రమూ, లిస్ట్ అంశాలు ఎలా మూసివేయబడ్డాయో చూడండి:
@@ -224,7 +224,7 @@ JSX JavaScript గా మారుతుంది మరియు JSX లో ర
### ప్రో-టిప్: JSX కన్వర్టర్‌ను ఉపయోగించండి {/*pro-tip-use-a-jsx-converter*/}
-ఇప్పటికే ఉన్న మార్కప్‌లో ఈ అట్రిబ్యూట్లను అన్నింటినీ మార్చడం చాలా శ్రమతో కూడుకున్నది! మీ ప్రస్తుత HTML మరియు SVGని JSXకి అనువదించడానికి [కన్‌వర్టర్](https://transform.tools/html-to-jsx) ని ఉపయోగించమని మేము సిఫార్సు చేస్తున్నాము. కన్వర్టర్లు ప్రాక్టికల్‌గా చాలా ఉపయోగకరంగా ఉంటాయి, కానీ మీరు సరిగ్గా ఏం జరుగుతుందో అర్థం చేసుకోవడం ఇంకా విలువైనది, తద్వారా మీరు సొంతంగా JSX సౌకర్యంగా రాయగలుగుతారు.
+ఇప్పటికే ఉన్న మార్కప్‌లో ఈ అట్రిబ్యూట్లను అన్నింటినీ మార్చడం చాలా శ్రమతో కూడుకున్నది! మీ ప్రస్తుత HTML మరియు SVG ని JSX కి అనువదించడానికి [కన్‌వర్టర్](https://transform.tools/html-to-jsx) ని ఉపయోగించమని మేము సిఫార్సు చేస్తున్నాము. కన్వర్టర్లు ప్రాక్టికల్‌గా చాలా ఉపయోగకరంగా ఉంటాయి, కానీ మీరు సరిగ్గా ఏం జరుగుతుందో అర్థం చేసుకోవడం ఇంకా విలువైనది, తద్వారా మీరు సొంతంగా JSX సౌకర్యంగా రాయగలుగుతారు.
ఇది మీ చివరి ఫలితం:
@@ -261,7 +261,7 @@ img { height: 90px }
ఇప్పుడు మీరు JSX ఎందుకు ఉన్నదీ, కంపోనెంట్లలో దాన్ని ఎలా ఉపయోగించాలో తెలుసుకున్నారు:
* React కంపోనెంట్లు రెండరింగ్ లాజిక్ మరియు మార్కప్‌ను ఒకే చోట గ్రూప్ చేస్తాయి, ఎందుకంటే అవి పరస్పర సంబంధితమైనవి.
-* JSX HTML లాగా ఉంటుంది, కానీ కొన్ని తేడాలు ఉన్నాయి. అవసరమైతే మీరు [కన్‌వర్టర్](https://transform.tools/html-to-jsx) ను ఉపయోగించవచ్చు.
+* JSX అనేది HTML లాగా ఉంటుంది, కానీ కొన్ని తేడాలు ఉన్నాయి. అవసరమైతే మీరు [కన్‌వర్టర్](https://transform.tools/html-to-jsx) ను ఉపయోగించవచ్చు.
* ఎర్రర్ మెసేజ్‌లు మీ మార్కప్‌ను సరిచేయడానికి సరైన దిశను చూపిస్తాయి.