Ի՞նչ է JSX-ը React-ում

JSX-ը բացվում է JavaScript XML։ Այն սինթաքսային ընդլայնում է JavaScript-ի համար, որը թույլ է տալիս գրել HTML-ի նման կոդ՝ JavaScript ֆայլերում։ React-ում JSX-ը օգտագործվում է ինտերֆեյսի կառուցման համար՝ component-ների մեջ։

Թեև browsers-ները չեն կարող անմիջապես հասկանալ JSX, այն compile է լինում սովորական JavaScript կոդի Babel-ի միջոցով։

---

Ինչպես է JSX-ը աշխատում

  
// JSX օրինակ
const element = <h1>Բարև, աշխարհ</h1>;

// Այս JSX կոդը compile է դառնում այսպիսի JavaScript-ի
const element = React.createElement("h1", null, "Բարև, աշխարհ");
  

Այսինքն JSX-ը ուղղակի sugar սինթաքս է՝ React.createElement կոչերի համար։

---

JSX-ի ներսում JavaScript-ի օգտագործում

JSX-ում կարող ենք օգտագործել ցանկացած JavaScript արտահայտություն՝ `{}` փակագծերի մեջ։

  
const name = "Անի";
const greeting = <h1>Բարև, {name}!</h1>;
  

Սա թույլ է տալիս օգտագործել փոփոխականներ, ֆունկցիաներ, պայմաններ և այլն։

---

JSX-ի հիմնական կանոններ

• Միայն մեկ հենակետային տարր՝ component return-ի մեջ
• HTML attribute-ները պետք է camelCase լինեն (`class` → `className`)
• JavaScript արտահայտությունները դրվում են `{}`-ի մեջ
• Բոլոր տարրերը պետք է փակված լինեն (`<img />`, `<br />`)

---

Բարդ JSX կառուցվածք

  
function Welcome(props) {
  return (
    <div className="container">
      <h1>Բարև, {props.name}!</h1>
      <p>Դա React-ի JSX է։</p>
    </div>
  );
}
  

Սա component է, որը օգտագործում է JSX՝ ներքին HTML կառուցելու և տվյալներ արտահայտելու համար։

---

JSX-ի առավելությունները

• Պարզ սինթաքս, կոդը ընթեռնելի է
• JavaScript-ի և HTML-ի համադրություն՝ մեկ տեղում
• Լավ developer experience

---

Հաջորդ հոդվածում կխոսենք React-ի component-ների մասին՝ functional vs class components, և ինչպես են դրանք աշխատում։