Learn React
Describing the UI

JSX లో కర్లీ బ్రేసెస్‌తో JavaScript

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

You will learn

  • కోట్స్‌తో strings ను ఎలా పాస్ చేయాలి
  • JavaScript వేరియబుల్‌ను JSX లో కర్లీ బ్రేసెస్‌తో ఎలా రిఫరెన్స్ చేయాలి
  • JavaScript ఫంక్షన్‌ను JSX లో కర్లీ బ్రేసెస్‌తో ఎలా కాల్ చేయాలి
  • JavaScript ఆబ్జెక్ట్‌ను JSX లో కర్లీ బ్రేసెస్‌తో ఎలా ఉపయోగించాలి

కోట్స్‌తో strings ను పాస్ చేయడం

మీరు JSX కు string అట్రిబ్యూట్‌ను పాస్ చేయాలనుకుంటే, మీరు దాన్ని సింగిల్ లేదా డబుల్ కోట్స్‌లో ఉంచాలి:

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

ఇక్కడ, "https://i.imgur.com/7vQD0fPs.jpg" మరియు "Gregorio Y. Zara" strings గా పాస్ అవుతున్నాయి.

కానీ మీరు డైనమిక్‌గా src లేదా alt టెక్ట్స్ ను స్పెసిఫై చేయాలనుకుంటే? మీరు JavaScript నుండి వాల్యూలను ఉపయోగించడానికి " మరియు " ను { మరియు } తో మార్చవచ్చు:

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

className="avatar" మరియు src={avatar} మధ్య తేడాని గమనించండి. "avatar" అనేది CSS class పేరు, ఇది చిత్రాన్ని రౌండ్ చేయడానికి ఉపయోగపడుతుంది, కానీ src={avatar} JavaScript వేరియబుల్ avatar వాల్యూను చదువుతుంది. ఇది కర్లీ బ్రేసెస్ JSX లో JavaScript తో పని చేయడాన్ని అనుమతిస్తాయి!

కర్లీ బ్రేసెస్ ఉపయోగించడం: JavaScript ప్రపంచంలోకి ఒక విండో

JSX అనేది JavaScript రాయడానికి ఒక ప్రత్యేకమైన విధానం. అంటే, మీరు అందులో JavaScript ఉపయోగించవచ్చు—కర్లీ బ్రేసెస్ { } తో. క్రింద ఇచ్చిన ఉదాహరణలో, మొదటా శాస్త్రవేత్త పేరు name గా డిక్లేర్ చేయబడింది, మరియు ఆ తరువాత దాన్ని కర్లీ బ్రేసెస్‌లో <h1> లో ఎంబెడ్ చేయబడింది:

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

name వాల్యూను 'Gregorio Y. Zara' నుండి 'Hedy Lamarr' గా మార్చే ప్రయత్నం చేయండి. లిస్ట్ శీర్షిక ఎలా మారుతుందో చూడండి?

ప్రతి JavaScript ఎక్స్‌ప్రెషన్ కూడా కర్లీ బ్రేసెస్ మధ్య పనిచేస్తుంది, ఉదాహరణకు formatDate() ఫంక్షన్ కాల్:

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

కర్లీ బ్రేసెస్ ఎక్కడ ఉపయోగించాలి

మీరు JSX లో కర్లీ బ్రేసెస్ ను రెండు విధాలుగా మాత్రమే ఉపయోగించవచ్చు:

  1. టెక్స్ట్ గా JSX ట్యాగ్ లో నేరుగా: <h1>{name}'s To Do List</h1> పనిచేస్తుంది, కానీ <{tag}>Gregorio Y. Zara's To Do List</{tag}> పనిచేయదు.
  2. అట్రిబ్యూట్స్ గా = సైన్ వెంటనే: src={avatar} avatar వేరియబుల్ ను చదువుతుంది, కానీ src="{avatar}" "{avatar}" string ను పాస్ చేస్తుంది.

”డబుల్ కర్లీస్” ఉపయోగించడం: JSX లో CSS మరియు ఇతర ఆబ్జెక్టులు

Strings, నంబర్లను మరియు ఇతర JavaScript ఎక్స్‌ప్రెషన్స్‌ను మించి, మీరు JSX లో ఆబ్జెక్ట్‌లను కూడా పాస్ చేయవచ్చు. ఆబ్జెక్ట్స్‌ను కూడా కర్లీ బ్రేసెస్‌తో చూపిస్తారు, ఉదాహరణకు { name: "Hedy Lamarr", inventions: 5 }. అందువల్ల, JavaScript ఆబ్జెక్ట్‌ను JSX లో పాస్ చేయడానికి మీరు దానిని మరో కర్లీ బ్రేసెస్ జంటలో ఉంచాలి: person={{ name: "Hedy Lamarr", inventions: 5 }}.

మీరు దీన్ని JSX లో ఇన్‌లైన్ CSS స్టైల్‌లతో చూడవచ్చు. React ఇన్‌లైన్ స్టైల్‌లను ఉపయోగించమని నిర్దిష్టంగా చెప్పదు (CSS class లు చాలా సందర్భాలలో బాగుంటాయి). కానీ మీరు ఇన్‌లైన్ స్టైల్ అవసరం ఉన్నప్పుడు, మీరు ఆ style అట్రిబ్యూట్‌కు ఒక ఆబ్జెక్ట్ పంపాలి:

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

backgroundColor మరియు color వాల్యూలను మార్చే ప్రయత్నం చేయండి.

మీరు కర్లీ బ్రేసెస్ లో JavaScript ఆబ్జెక్టును ఇలా రాసినప్పుడు, మీరు ఆ ఆబ్జెక్టును నిజంగా చూడవచ్చు:

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

తదుపరి మీరు JSX లో {{ మరియు }} చూసినప్పుడు, అవి JSX కర్లీ బ్రేసెస్‌లో ఉన్న ఒక ఆబ్జెక్ట్ మాత్రమే అని గుర్తించండి!

Pitfall

ఇన్‌లైన్ style ప్రాపర్టీలు camelCase లో రాయాలి. ఉదాహరణకు, HTML <ul style="background-color: black"> JSX లో <ul style={{ backgroundColor: 'black' }}> అనే విధంగా రాయబడుతుంది.

మరింత సరదా జావాస్క్రిప్ట్ ఆబ్జెక్టులతో మరియు కర్లీ బ్రేసెస్‌తో

మీరు చాలా ఎక్స్‌ప్రెషన్లను ఒక ఆబ్జెక్ట్‌లోకి తీసుకెళ్లి, వాటిని మీ JSX లో కర్లీ బ్రేసెస్ లో రిఫరెన్స్ చేయవచ్చు:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

ఈ ఉదాహరణలో, person JavaScript ఆబ్జెక్ట్‌లో ఒక name string మరియు ఒక theme ఆబ్జెక్ట్ ఉన్నాయి:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

కంపోనెంట్ ఈ వాల్యూను person నుండి ఇలా ఉపయోగించవచ్చు:

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

JSX ఒక టెంప్లేటింగ్ లాంగ్వేజ్‌గా చాలా సాధారణంగా ఉంటుంది ఎందుకంటే ఇది JavaScript ఉపయోగించి డేటా మరియు లాజిక్‌ను నిర్వహించడానికి సహాయపడుతుంది.

Recap

ఇప్పుడు మీరు JSX గురించి చాలా విషయాలను తెలుసుకున్నారు:

  • JSX అట్రిబ్యూట్‌లు కోట్స్‌లో strings గా పంపబడతాయి.
  • కర్లీ బ్రేసెస్ JavaScript లాజిక్ మరియు వేరియబుల్స్‌ను మీ మార్కప్‌లో చేర్చడానికి అనుమతిస్తాయి.
  • అవి JSX ట్యాగ్ కంటెంట్ లో లేదా అట్రిబ్యూట్స్‌లో = తర్వాత పనిచేస్తాయి.
  • {{ మరియు }} ప్రత్యేక సింటాక్స్ కాదు: ఇవి JSX కర్లీ బ్రేసెస్‌లో వేసిన JavaScript ఆబ్జెక్ట్.

Try out some challenges

Challenge 1 of 3:
తప్పును సరిచేయండి

ఈ కోడ్ Objects are not valid as a React child అనే ఎర్రర్ తో క్రాష్ అవుతోంది:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

మీరు సమస్యను కనుగొనగలరా?

PreviousWriting Markup with JSX
NextPassing Props to a Component