JSX తో మార్కప్ రాయడం

JSX అనేది JavaScript కోసం ఒక సింటాక్స్ ఎక్స్‌టెన్షన్. ఇది JavaScript ఫైల్‌లో HTML లాంటి మార్కప్ రాయడానికి అనుమతిస్తుంది. కంపోనెంట్లను రాయడానికి ఇతర మార్గాలు ఉన్నప్పటికీ, చాలా React డెవలపర్లు JSX యొక్క సౌకర్యాన్ని ఇష్టపడతారు మరియు చాలా కోడ్‌బేస్‌లు దీనిని ఉపయోగిస్తాయి.

You will learn

React మార్కప్‌ను రెండరింగ్ లాజిక్‌తో ఎందుకు కలుపుతుంది
JSX HTML కి ఎలా భిన్నంగా ఉంటుంది
JSX ద్వారా సమాచారం ఎలా ప్రదర్శించాలి

JSX: మార్కప్‌ను JavaScript లో ఉంచడం

Web అనేది HTML, CSS, మరియు JavaScript పై ఆధారపడి నిర్మించబడింది. చాలా సంవత్సరాలుగా, వెబ్ డెవలపర్లు కంటెంట్‌ను HTML లో, డిజైన్‌ను CSS లో, మరియు లాజిక్‌ను JavaScript లో విడిగా ఉంచేవారు—ఇప్పటికీ వేరే ఫైళ్లలో! కంటెంట్ HTML లో మార్కప్ చేయబడేది, ఆ పేజీ యొక్క లాజిక్ మాత్రం JavaScript లో వేరుగా ఉండేది:

HTML markup with purple background and a div with two child tags: p and form. — HTML

Three JavaScript handlers with yellow background: onSubmit, onLogin, and onClick. — JavaScript

కానీ Web మరింత ఇంటరాక్టివ్‌గా మారుతున్న కొద్దీ, లాజిక్ ఎక్కువగా కంటెంట్‌ను నిర్ణయించింది. JavaScript HTML ని నియంత్రించేది! అందుకే React లో, రెండరింగ్ లాజిక్ మరియు మార్కప్ కంపోనెంట్లలో ఒకే చోట ఉంటాయి.

React component with HTML and JavaScript from previous examples mixed. Function name is Sidebar which calls the function isLoggedIn, highlighted in yellow. Nested inside the function highlighted in purple is the p tag from before, and a Form tag referencing the component shown in the next diagram. — `Sidebar.js` React కంపోనెంట్

React component with HTML and JavaScript from previous examples mixed. Function name is Form containing two handlers onClick and onSubmit highlighted in yellow. Following the handlers is HTML highlighted in purple. The HTML contains a form element with a nested input element, each with an onClick prop. — `Form.js` React కంపోనెంట్

బటన్ యొక్క రెండరింగ్ లాజిక్ మరియు మార్కప్‌ను కలిపి ఉంచడం వల్ల, ప్రతిసారి మార్పులు చేసినప్పుడు అవి ఒకే సమన్వయంతో ఉండేలా చేస్తుంది. మరోవైపు, బటన్ యొక్క మార్కప్ మరియు సైడ్బార్ యొక్క మార్కప్ వంటి సంబంధం లేని వివరాలు ఒకదానితో ఒకటి ప్రత్యేకంగా ఉంచబడతాయి, దీనివల్ల వాటిలో ఏదైనా స్వతంత్రంగా మార్చడం మరింత సురక్షితంగా ఉంటుంది.

ప్రతి React కంపోనెంట్ అనేది JavaScript ఫంక్షన్, ఇది React బ్రౌజర్‌లో రెండర్ చేసే కొంత మార్కప్‌ను కలిగి ఉండవచ్చు. React కంపోనెంట్‌లు ఆ మార్కప్‌ను ప్రదర్శించడానికి JSX అనే సింటాక్స్ ఎక్స్‌టెన్షన్ ఉపయోగిస్తాయి. JSX HTML లాంటిదిగా కనిపిస్తుంది, కానీ ఇది కొంచెం కఠినంగా ఉంటుంది మరియు డైనమిక్ సమాచారాన్ని ప్రదర్శించగలదు. దీనిని అర్థం చేసుకోవడానికి ఉత్తమమైన మార్గం, కొంత HTML మార్కప్‌ను JSX మార్కప్‌లోకి మార్చడం.

Note

JSX మరియు React రెండు వేర్వేరు విషయాలు. వీటిని తరచుగా కలిపి ఉపయోగిస్తారు, కానీ మీరు వాటిని స్వతంత్రంగా ఉపయోగించవచ్చు. JSX అనేది ఒక సింటాక్స్ ఎక్స్‌టెన్షన్ కాగా, React అనేది ఒక JavaScript లైబ్రరీ.

HTML ని JSX గా మార్చడం

మీ దగ్గర కొంత (పూర్తిగా సరైన) HTML ఉందని అనుకుందాం:

<h1>Hedy Lamarr's Todos</h1>
<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  class="photo"
>
<ul>
    <li>Invent new traffic lights
    <li>Rehearse a movie scene
    <li>Improve the spectrum technology
</ul>

మరియు మీరు దానిని మీ కంపోనెంట్‌లో పెట్టాలనుకుంటున్నట్లయితే:

export default function TodoList() {
  return (
    // ???
  )
}

మీరు కాపీ చేసి అలాగే పేస్ట్ చేస్తే, ఇది పని చేయదు:

Fork

export default function TodoList() {
  return (
    // This doesn't quite work!
    <h1>Hedy Lamarr's Todos</h1>
    <img 
      src="https://i.imgur.com/yXOvdOSs.jpg" 
      alt="Hedy Lamarr" 
      class="photo"
    >
    <ul>
      <li>Invent new traffic lights
      <li>Rehearse a movie scene
      <li>Improve the spectrum technology
    </ul>

ఇది ఎందుకంటే JSX HTML కంటే కఠినమైనది మరియు దాని కోసం కొన్ని అదనపు నియమాలు ఉన్నాయి! మీరు పై ఎర్రర్ మెసేజ్‌లను చదవితే, అవి మార్కప్‌ని సరిచేయడంలో మీకు మార్గనిర్దేశం చేస్తాయి, లేదా మీరు కింద ఉన్న గైడ్‌ను అనుసరించవచ్చు.

Note

చాలా సమయాల్లో, React యొక్క ఆన్-స్క్రీన్ ఎర్రర్ మెసేజ్‌లు సమస్య ఎక్కడ ఉందో కనుగొనడంలో మీకు సహాయపడతాయి. మీరు చిక్కులో పడితే, వాటిని చదవండి!

JSX యొక్క నియమాలు

1. ఒకే రూట్ ఎలిమెంట్‌ని return చేయండి

కంపోనెంట్ల నుంచి అనేక ఎలిమెంట్స్‌ని return చేయాలంటే, వాటిని ఒకే పేరెంట్ ట్యాగ్‌తో చుట్టండి.

ఉదాహరణకు, మీరు <div>ని ఉపయోగించవచ్చు:

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</div>

మీరు మీ మార్కప్‌కి అదనపు <div> జోడించకూడదనుకుంటే, మీరు బదులుగా <> మరియు </> వ్రాయవచ్చు:

<>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
  >
  <ul>
    ...
  </ul>
</>

ఈ ఖాళీ ట్యాగ్‌ని Fragment అని అంటారు. Fragments బ్రౌజర్ HTML ట్రీలో ఎలాంటి జాడను వదలకుండా విషయాలను సమూహపరచడానికి మిమ్మల్ని అనుమతిస్తాయి.

Deep Dive

ఎందుకు మల్టిపుల్ JSX ట్యాగ్‌లను ర్యాప్ చేయాలి?

JSX HTML లాగా కనిపిస్తుంది, కానీ లోపలి భాగంలో ఇది సాధారణ JavaScript ఆబ్జెక్టులుగా మార్చబడుతుంది. మీరు ఒక ఫంక్షన్ నుండి రెండు ఆబ్జెక్టులను తిరిగి ఇచ్చే అవకాశం లేదు, అవి ఒక array లో ర్యాప్ చేయాల్సి ఉంటుంది. ఇదే కారణంగా, మీరు రెండు JSX ట్యాగ్‌లను కూడా మరో ట్యాగ్ లేదా fragment లో ర్యాప్ చేయకుండా తిరిగి ఇవ్వలేరు.

2. అన్ని ట్యాగ్‌లను మూసివేయండి

JSX లో ట్యాగ్‌లను స్పష్టంగా మూసివేయాల్సి ఉంటుంది: స్వయంగా మూసే ట్యాగ్‌లాంటి <img> ను <img /> గా మార్చాలి, మరియు చుట్టుకొలత ట్యాగ్‌లాంటి <li>oranges ను <li>oranges</li> అని రాయాలి.

ఇది Hedy Lamarr యొక్క చిత్రమూ, లిస్ట్ అంశాలు ఎలా మూసివేయబడ్డాయో చూడండి:

<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
   />
  <ul>
    <li>Invent new traffic lights</li>
    <li>Rehearse a movie scene</li>
    <li>Improve the spectrum technology</li>
  </ul>
</>

3. camelCase అన్ని చాలా విషయాలు!

JSX JavaScript గా మారుతుంది మరియు JSX లో రాసిన అట్రిబ్యూట్లు JavaScript ఆబ్జెక్టుల key లు అవుతాయి. మీ స్వంత కాంపోనెంట్లలో, మీరు తరచుగా ఆ అట్రిబ్యూట్లను వేరియబుల్స్‌లో చదవాలనుకుంటారు. కానీ JavaScript వేరియబుల్ పేర్లపై కొన్ని పరిమితులు ఉన్నాయి. ఉదాహరణకు, వాటి పేర్లలో డాష్‌లు ఉండకూడదు లేదా class వంటి రిజర్వ్ చేసిన పదాలు ఉండకూడదు.

అందుకే React లో, చాలా HTML మరియు SVG అట్రిబ్యూట్లు camelCase లో రాయబడతాయి. ఉదాహరణకు, stroke-width బదులుగా మీరు strokeWidth ఉపయోగిస్తారు. class అనేది రిజర్వ్ చేసిన పదం కావడం వలన, React లో మీరు className అని రాస్తారు, ఇది అనుకూల DOM ప్రాపర్టీ ఆధారంగా ఉంటుంది:

<img 
  src="https://i.imgur.com/yXOvdOSs.jpg" 
  alt="Hedy Lamarr" 
  className="photo"
/>

మీరు ఈ అన్ని అట్రిబ్యూట్లను DOM కంపోనెంట్ ప్రాపర్టీలు యొక్క లిస్ట్‌లో కనుగొనవచ్చు. మీరు వాటిలో ఒకటి తప్పు చేసినా, చింతించకండి—React ఒక సందేశాన్ని ప్రింట్ చేస్తుంది, దాని పరిష్కారం కోసం బ్రౌజర్ కన్సోల్ లో చూడండి.

Pitfall

చరిత్రాత్మక కారణాల వల్ల, aria-* మరియు data-* అట్రిబ్యూట్లు HTML లో డాష్‌లతో రాయబడతాయి.

ప్రో-టిప్: JSX కన్వర్టర్‌ను ఉపయోగించండి

ఇప్పటికే ఉన్న మార్కప్‌లో ఈ అట్రిబ్యూట్లను అన్నింటినీ మార్చడం చాలా శ్రమతో కూడుకున్నది! మీ ప్రస్తుత HTML మరియు SVGని JSXకి అనువదించడానికి కన్‌వర్టర్ ని ఉపయోగించమని మేము సిఫార్సు చేస్తున్నాము. కన్వర్టర్లు ప్రాక్టికల్‌గా చాలా ఉపయోగకరంగా ఉంటాయి, కానీ మీరు సరిగ్గా ఏం జరుగుతుందో అర్థం చేసుకోవడం ఇంకా విలువైనది, తద్వారా మీరు సొంతంగా JSX సౌకర్యంగా రాయగలుగుతారు.

ఇది మీ చివరి ఫలితం:

Fork

export default function TodoList() {
  return (
    <>
      <h1>Hedy Lamarr's Todos</h1>
      <img 
        src="https://i.imgur.com/yXOvdOSs.jpg" 
        alt="Hedy Lamarr" 
        className="photo" 
      />
      <ul>
        <li>Invent new traffic lights</li>
        <li>Rehearse a movie scene</li>
        <li>Improve the spectrum technology</li>
      </ul>
    </>
  );
}

Recap

ఇప్పుడు మీరు JSX ఎందుకు ఉన్నదీ, కంపోనెంట్లలో దాన్ని ఎలా ఉపయోగించాలో తెలుసుకున్నారు:

React కంపోనెంట్లు రెండరింగ్ లాజిక్ మరియు మార్కప్‌ను ఒకే చోట గ్రూప్ చేస్తాయి, ఎందుకంటే అవి పరస్పర సంబంధితమైనవి.
JSX HTML లాగా ఉంటుంది, కానీ కొన్ని తేడాలు ఉన్నాయి. అవసరమైతే మీరు కన్‌వర్టర్ ను ఉపయోగించవచ్చు.
ఎర్రర్ మెసేజ్‌లు మీ మార్కప్‌ను సరిచేయడానికి సరైన దిశను చూపిస్తాయి.

Try out some challenges

Challenge 1 of 1:
కొంత HTML ని JSX గా మార్చండి

ఈ HTML ను ఒక కంపోనెంట్‌లో పెట్టారు, కానీ ఇది సరైన JSX కాదు. దీన్ని సరిచేయండి:

Fork

export default function Bio() {
  return (
    <div class="intro">
      <h1>Welcome to my website!</h1>
    </div>
    <p class="summary">
      You can find my thoughts here.
      <br><br>
      <b>And <i>pictures</b></i> of scientists!
    </p>
  );
}

దీనిని స్వయంగా చేయాలా లేదా కన్వర్టర్‌ను ఉపయోగించాలా అనేది మీ ఇష్టంపై ఆధారపడి ఉంటుంది!

PreviousImporting and Exporting Components

NextJavaScript in JSX with Curly Braces

JSX తో మార్కప్ రాయడం

You will learn

JSX: మార్కప్‌ను JavaScript లో ఉంచడం

Note

HTML ని JSX గా మార్చడం

Note

JSX యొక్క నియమాలు

1. ఒకే రూట్ ఎలిమెంట్‌ని return చేయండి

Deep Dive

ఎందుకు మల్టిపుల్ JSX ట్యాగ్‌లను ర్యాప్ చేయాలి?

2. అన్ని ట్యాగ్‌లను మూసివేయండి

3. camelCase అన్ని చాలా విషయాలు!

Pitfall

ప్రో-టిప్: JSX కన్వర్టర్‌ను ఉపయోగించండి

Recap

Try out some challenges

Challenge 1 of 1: కొంత HTML ని JSX గా మార్చండి

Challenge 1 of 1:
కొంత HTML ని JSX గా మార్చండి