JSX, JavaScript file-க்குள் HTML போன்ற markup எழுத உதவுகிறது; rendering logic மற்றும் content ஒரே இடத்தில் இருக்கும். சில நேரங்களில் அந்த markup-க்குள் சிறிது JavaScript logic சேர்க்கவோ dynamic property ஒன்றை reference செய்யவோ நீங்கள் விரும்புவீர்கள். அப்படிப்பட்ட சூழலில், JSX-இல் curly braces பயன்படுத்தி JavaScript-க்கு ஒரு சாளரம் திறக்கலாம்.

நீங்கள் கற்றுக்கொள்ள போவது

  • Quotes கொண்டு strings pass செய்வது எப்படி
  • JSX-க்குள் curly braces கொண்டு JavaScript variable ஒன்றை reference செய்வது எப்படி
  • JSX-க்குள் curly braces கொண்டு JavaScript function ஒன்றை call செய்வது எப்படி
  • JSX-க்குள் curly braces கொண்டு JavaScript object ஒன்றை பயன்படுத்துவது எப்படி

Quotes கொண்டு strings pass செய்தல்

JSX-க்கு string attribute pass செய்ய விரும்பும்போது, அதை single அல்லது double quotes-க்குள் வைப்பீர்கள்:

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

இங்கே, "https://react.dev/images/docs/scientists/7vQD0fPs.jpg" மற்றும் "Gregorio Y. Zara" strings ஆக pass செய்யப்படுகின்றன.

ஆனால் src அல்லது alt text-ஐ dynamically specify செய்ய விரும்பினால் என்ன? " மற்றும் "-ஐ { மற்றும் }-ஆல் மாற்றி JavaScript-இலிருந்து ஒரு value-ஐப் பயன்படுத்தலாம்:

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

Image round ஆகும் "avatar" CSS class name-ஐ specify செய்யும் className="avatar" மற்றும் avatar என்ற JavaScript variable-ன் value-ஐ படிக்கும் src={avatar} இடையிலான வேறுபாட்டைக் கவனிக்கவும். ஏனெனில் curly braces உங்கள் markup-இலேயே JavaScript உடன் வேலை செய்ய அனுமதிக்கின்றன!

Curly braces பயன்படுத்துதல்: JavaScript உலகுக்கான சாளரம்

JSX என்பது JavaScript எழுதும் ஒரு சிறப்பு வழி. அதனால் அதற்குள் JavaScript-ஐ { } curly braces கொண்டு பயன்படுத்த முடியும். கீழே உள்ள example முதலில் scientist-க்கான பெயரை name என்று declare செய்து, பிறகு அதை <h1>-க்குள் curly braces மூலம் embed செய்கிறது:

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

name-ன் value-ஐ 'Gregorio Y. Zara'-இலிருந்து 'Hedy Lamarr' ஆக மாற்றிப் பாருங்கள். List title எப்படி மாறுகிறது என்பதை கவனிக்கவும்.

formatDate() போன்ற function calls உட்பட எந்த JavaScript expression-உம் curly braces இடையில் வேலை செய்யும்:

const today = new Date();

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

export default function TodoList() {
  return (
    <h1>{formatDate(today)}-க்கான To Do List</h1>
  );
}

Curly braces எங்கு பயன்படுத்தலாம்

JSX-க்குள் curly braces இரண்டு வழிகளில் மட்டுமே பயன்படுத்தலாம்:

  1. Text ஆக நேரடியாக JSX tag-க்குள்: <h1>{name}-ன் To Do List</h1> வேலை செய்யும், ஆனால் <{tag}>Gregorio Y. Zara-ன் To Do List</{tag}> வேலை செய்யாது.
  2. Attributes ஆக = sign-க்கு உடனடியாக பின்: src={avatar} avatar variable-ஐ படிக்கும், ஆனால் src="{avatar}" "{avatar}" என்ற string-ஐ pass செய்யும்.

”Double curlies” பயன்படுத்துதல்: JSX-இல் CSS மற்றும் பிற objects

Strings, numbers மற்றும் பிற JavaScript expressions மட்டுமல்லாமல், JSX-இல் objects கூட pass செய்யலாம். Objects-உம் { name: "Hedy Lamarr", inventions: 5 } போல curly braces-ஆல் குறிக்கப்படுகின்றன. ஆகவே JSX-இல் JS object ஒன்றை pass செய்ய, object-ஐ இன்னொரு curly braces ஜோடிக்குள் wrap செய்ய வேண்டும்: person={{ name: "Hedy Lamarr", inventions: 5 }}.

JSX-இல் inline CSS styles-இல் இதைப் பார்க்கலாம். React inline styles பயன்படுத்த வேண்டும் என்று கட்டாயப்படுத்தாது (பெரும்பாலான cases-க்கு CSS classes நன்றாகவே வேலை செய்யும்). ஆனால் inline style தேவைப்படும்போது, style attribute-க்கு object pass செய்வீர்கள்:

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Videophone-ஐ மேம்படுத்து</li>
      <li>Aeronautics lectures தயார் செய்</li>
      <li>Alcohol-fuelled engine-ல் வேலை செய்</li>
    </ul>
  );
}

backgroundColor மற்றும் color values-ஐ மாற்றிப் பாருங்கள்.

இதுபோல் எழுதும்போது curly braces-க்குள் JavaScript object இருப்பதை தெளிவாகக் காணலாம்:

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

JSX-இல் அடுத்த முறை {{ மற்றும் }} பார்த்தால், அது JSX curlies-க்குள் உள்ள JavaScript object தவிர வேறெதுவும் அல்ல என்பதை அறிந்திருங்கள்!

Pitfall

Inline style properties camelCase-இல் எழுதப்படுகின்றன. உதாரணமாக, HTML <ul style="background-color: black"> உங்கள் component-இல் <ul style={{ backgroundColor: 'black' }}> ஆக எழுதப்படும்.

JavaScript objects மற்றும் curly braces உடன் மேலும் பயிற்சி

பல expressions-ஐ ஒரு object-க்குள் நகர்த்தி, உங்கள் JSX-இல் curly braces-க்குள் அவற்றை reference செய்யலாம்:

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

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}-ன் Todos</h1>
      <img
        className="avatar"
        src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Videophone-ஐ மேம்படுத்து</li>
        <li>Aeronautics lectures தயார் செய்</li>
        <li>Alcohol-fuelled engine-ல் வேலை செய்</li>
      </ul>
    </div>
  );
}

இந்த example-இல், person JavaScript object ஒரு name string மற்றும் theme object கொண்டுள்ளது:

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

Component இந்த values-ஐ person-இலிருந்து இவ்வாறு பயன்படுத்தலாம்:

<div style={person.theme}>
  <h1>{person.name}-ன் Todos</h1>

Templating language ஆக JSX மிகவும் minimal; ஏனெனில் JavaScript பயன்படுத்தி data மற்றும் logic organize செய்ய அது அனுமதிக்கிறது.

Recap

இப்போது JSX பற்றி கிட்டத்தட்ட அனைத்தையும் அறிந்துள்ளீர்கள்:

  • Quotes-க்குள் உள்ள JSX attributes strings ஆக pass செய்யப்படுகின்றன.
  • Curly braces JavaScript logic மற்றும் variables-ஐ உங்கள் markup-க்குள் கொண்டு வர உதவுகின்றன.
  • அவை JSX tag content-க்குள் அல்லது attributes-இல் =-க்கு உடனடியாக பின் வேலை செய்கின்றன.
  • {{ மற்றும் }} special syntax அல்ல: அது JSX curly braces-க்குள் உள்ள JavaScript object.

Try out some challenges

Challenge 1 of 3:
தவறை சரிசெய்யுங்கள்

இந்த code Objects are not valid as a React child என்று error சொல்லி crash ஆகிறது:

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

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}-ன் Todos</h1>
      <img
        className="avatar"
        src="https://react.dev/images/docs/scientists/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Videophone-ஐ மேம்படுத்து</li>
        <li>Aeronautics lectures தயார் செய்</li>
        <li>Alcohol-fuelled engine-ல் வேலை செய்</li>
      </ul>
    </div>
  );
}

Problem-ஐ கண்டுபிடிக்க முடியுமா?

PreviousJSX மூலம் மார்க்அப் எழுதுதல்
Nextஒரு காம்போனென்டுக்கு ப்ராப்ஸை அனுப்புதல்