Apply suggestions from review

Co-authored-by: Srikanth Kandi <[email protected]>

Author: Shiva-Sai-ssb

src/content/learn/writing-markup-with-jsx.md

@@ -36,7 +36,7 @@ JavaScript
 
 </DiagramGroup>
 
-కానీ Web మరింత ఇంటరాక్టివ్‌గా మారుతున్న కొద్దీ, లాజిక్ ఎక్కువగా కంటెంట్‌ను నిర్ణయించింది. JavaScript HTML ని నియంత్రించేది! అందుకే **React లో, రెండరింగ్ లాజిక్ మరియు మార్కప్ కంపోనెంట్లలో ఒకే చోట ఉంటాయి.**
+కానీ Web మరింత ఇంటరాక్టివ్‌గా మారుతున్న కొద్దీ, లాజిక్ ఎక్కువగా కంటెంట్‌ను నిర్ణయించింది. JavaScript అనేది HTML ని నియంత్రించేది! అందుకే **React లో, రెండరింగ్ లాజిక్ మరియు మార్కప్ కంపోనెంట్లలో ఒకే చోట ఉంటాయి.**
 
 <DiagramGroup>
 
@@ -56,7 +56,7 @@ JavaScript
 
 బటన్ యొక్క రెండరింగ్ లాజిక్ మరియు మార్కప్‌ను కలిపి ఉంచడం వల్ల, ప్రతిసారి మార్పులు చేసినప్పుడు అవి ఒకే సమన్వయంతో ఉండేలా చేస్తుంది. మరోవైపు, బటన్ యొక్క మార్కప్ మరియు సైడ్బార్ యొక్క మార్కప్ వంటి సంబంధం లేని వివరాలు ఒకదానితో ఒకటి ప్రత్యేకంగా ఉంచబడతాయి, దీనివల్ల వాటిలో ఏదైనా స్వతంత్రంగా మార్చడం మరింత సురక్షితంగా ఉంటుంది.
 
-ప్రతి React కంపోనెంట్ అనేది JavaScript ఫంక్షన్, ఇది React బ్రౌజర్‌లో రెండర్ చేసే కొంత మార్కప్‌ను కలిగి ఉండవచ్చు. React కంపోనెంట్‌లు ఆ మార్కప్‌ను ప్రదర్శించడానికి JSX అనే సింటాక్స్ ఎక్స్‌టెన్షన్ ఉపయోగిస్తాయి. JSX HTML లాంటిదిగా కనిపిస్తుంది, కానీ ఇది కొంచెం కఠినంగా ఉంటుంది మరియు డైనమిక్ సమాచారాన్ని ప్రదర్శించగలదు. దీనిని అర్థం చేసుకోవడానికి ఉత్తమమైన మార్గం, కొంత HTML మార్కప్‌ను JSX మార్కప్‌లోకి మార్చడం.
+ప్రతి React కంపోనెంట్ అనేది ఒక JavaScript ఫంక్షన్, ఇది React బ్రౌజర్‌లో రెండర్ చేసే కొంత మార్కప్‌ను కలిగి ఉండవచ్చు. React కంపోనెంట్‌లు ఆ మార్కప్‌ను ప్రదర్శించడానికి JSX అనే సింటాక్స్ ఎక్స్‌టెన్షన్ ఉపయోగిస్తాయి. JSX అనేది HTML లాంటిదిగా కనిపిస్తుంది, కానీ ఇది కొంచెం స్ట్రిక్ట్ గా ఉంటుంది మరియు డైనమిక్ సమాచారాన్ని ప్రదర్శించగలదు. దీనిని అర్థం చేసుకోవడానికి ఉత్తమమైన మార్గం, కొంత HTML మార్కప్‌ను JSX మార్కప్‌లోకి మార్చడం.
 
 <Note>
 
@@ -122,7 +122,7 @@ img { height: 90px }
 
 </Sandpack>
 
-ఇది ఎందుకంటే JSX HTML కంటే కఠినమైనది మరియు దాని కోసం కొన్ని అదనపు నియమాలు ఉన్నాయి! మీరు పై ఎర్రర్ మెసేజ్‌లను చదవితే, అవి మార్కప్‌ని సరిచేయడంలో మీకు మార్గనిర్దేశం చేస్తాయి, లేదా మీరు కింద ఉన్న గైడ్‌ను అనుసరించవచ్చు.
+ఇది ఎందుకంటే JSX అనేది HTML కంటే స్ట్రిక్ట్ గా ఉంటుంది మరియు దాని కోసం కొన్ని అదనపు నియమాలు ఉన్నాయి! మీరు పై ఎర్రర్ మెసేజ్‌లను చదవితే, అవి మార్కప్‌ని సరిచేయడంలో మీకు మార్గనిర్దేశం చేస్తాయి, లేదా మీరు కింద ఉన్న గైడ్‌ను అనుసరించవచ్చు.
 
 <Note>
 
@@ -134,9 +134,9 @@ img { height: 90px }
 
 ### 1. ఒకే రూట్ ఎలిమెంట్‌ని return చేయండి {/*1-return-a-single-root-element*/}
 
-కంపోనెంట్ల నుంచి అనేక ఎలిమెంట్స్‌ని return చేయాలంటే, **వాటిని ఒకే పేరెంట్ ట్యాగ్‌తో చుట్టండి.**
+కంపోనెంట్ల నుంచి అనేక ఎలిమెంట్స్‌ ని return చేయాలంటే, **వాటిని ఒకే పేరెంట్ ట్యాగ్‌తో చుట్టండి.**
 
-ఉదాహరణకు, మీరు `<div>`ని ఉపయోగించవచ్చు:
+ఉదాహరణకు, మీరు `<div>` ని ఉపయోగించవచ్చు:
 
 ```js {1,11}
 <div>
@@ -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 లో ర్యాప్ చేయకుండా తిరిగి ఇవ్వలేరు.
 
 </DeepDive>
 
 ### 2. అన్ని ట్యాగ్‌లను మూసివేయండి {/*2-close-all-the-tags*/}
 
-JSX లో ట్యాగ్‌లను స్పష్టంగా మూసివేయాల్సి ఉంటుంది: స్వయంగా మూసే ట్యాగ్‌లాంటి `<img>` ను `<img />` గా మార్చాలి, మరియు చుట్టుకొలత ట్యాగ్‌లాంటి `<li>oranges` ను `<li>oranges</li>` అని రాయాలి.
+JSX లో ట్యాగ్‌లను స్పష్టంగా మూసివేయాల్సి ఉంటుంది: స్వయంగా మూసే ట్యాగ్‌లాంటి `<img>` ను `<img />` గా మార్చాలి, మరియు వ్రాపింగ్ టాగ్స్ లాంటి `<li>oranges` ను `<li>oranges</li>` అని రాయాలి.
 
 ఇది 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) ను ఉపయోగించవచ్చు.
 * ఎర్రర్ మెసేజ్‌లు మీ మార్కప్‌ను సరిచేయడానికి సరైన దిశను చూపిస్తాయి.
 
 </Recap>