Ծանոթացում JSX-ի հետ

Դիտարկենք այս փոփոխականի հայտարարումը.

const element = <h1>Ողջույն, աշխարհ</h1>;

Այս հետաքրքիր շարահյուսությունը ոչ տող է ոչ HTML։

Այն կոչվում է JSX և հանդիսանում է JavaScript-ի շարահյուսական ընդլայնում։ Մենք խորհուրդ ենք տալիս օգտագործել այն React-ի հետ` սահմանելու համար, թե ինչ տեսք պետք է ունենա UI-ը։ JSX-ը կարող է ձեզ հիշեցնել ձևանմուշային լեզու, բայց այն ներառում է JavaScript-ի ամբողջ հզորությունը։

JSX-ը «արտադրում» է React էլեմենտներ։ Այն, թե ինչպես են նրանք արտապատկերվում DOM-ում, մենք կբացահայտենք հաջորդ գլխում։ Ստորև դուք կարող եք գտնել JSX-ի հետ աշխատել սկսելու համար անհրաժեշտ հիմքային գաղափարները։

ինչու՞ JSX?

React-ն ընդունում է այն գաղափարը, որ արտապատկերման տրամաբանությունը, ըստ էության, կապված է UI տրամաբանության հետ. այն, թե ինչպես են իրադարձությունները մշակվում, թե ինչպես է state-ը փոփոխվում ժամանակի ընթացքում, և, թե ինչպես են տվյալները պատրաստվում պատկերվելու համար։

Փոխանակ նշարկումն(markup) ու տրամաբանությունն(logic) առանձին ֆայլերում դնելով տեխնոլոգիաները արհեստականորեն բաժանելու` React-ը կիրառում է պատասխանատվության բաժանումeng` «կոմպոնենտներ» կոչվող, միմյանց հետ թույլ կապված բլոկների հետ, որոնք երկուսն էլ պարունակում են։ Մենք դեռ կանդրադառնանք կոմպոնենտներին հաջորդ գլխում։ Բայց եթե դեռ չեք հարմարվել նշարկումը JS-ի մեջ դնելու գաղափարի հետ, ապա գուցե այս զեկույցը համոզի ձեզ հակառակը։

React-ը չի պահանջում JSX-ի օգտագործումը, բայց շատ մարդիկ, որպես տեսողական օգնություն, համարում են դա օգտակար, երբ JavaScript կոդում աշխատում են UI-ի հետ։ Դա նաև թույլ է տալիս React-ին ցույց տալ ավելի օգտակար ծանուցումներ սխալների և զգուշացումների մասին։

Սա հասկացանք, շարժվենք առաջ։

Ներդրված արտահայտություններ JSX-ում

Ստորև ներկայացված օրինակում մենք հայտարարում ենք name անունով փոփոխական և օգտագործում այն JSX-ի ներսում` փաթաթելով այն ձևավոր փակագծերով.

const name = 'Պողոս Պողոսյան';
const element = <h1>Ողջույն, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX-ում` ձևավոր փակագծերի ներսում, դուք կարող եք տեղադրել ցանկացած վավեր JavaScript արտահայտությունeng։ Օրինակ. 2 + 2, user.firstName, կամ formatName(user). սրանք բոլորը վավեր JavaScript արտահայտություններ են։

Իսկ այս մի օրինակում, մենք ներդնում ենք JavaScript ֆունկցիայի կանչի արդյունքը` formatName(user), <h1> էլեմենտի մեջ։

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Պողոս',
  lastName: 'Պողոսյան'
};

const element = (
  <h1>
    Ողջույն, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Փորձել CodePen-ում

Մենք բաժանում ենք JSX-ը բազմաթիվ տողերի ընթեռնելիության համար։ Այդպիսի դեպքերում, չնայած դա պարտադիր չէ, մենք նաև խորհուրդ ենք տալիս դնել դրանց փակագծերի մեջ` կետ-ստորակետների ավտոմատ տեղադրմանeng ժամանակ անկանխատեսելի խնդիրներից խուսափելու համար։

JSX-ը նույնպես արտահայտություն է

Կոմպիլյացիայից հետո JSX արտահայտությունները վերածվում են սովորական JavaScript ֆունկցիայի կանչերի և հաշվարկվում որպես JavaScript օբյեկտներ։

Սա նշանակում է, որ դուք կարող եք օգտագործել JSX-ը if պայմանի կամ for ցիկլի ներսում, վերագրել այն փոփոխականների, ընդունել այն որպես արգումենտ և վերադարձնել այն ֆունկցիաներից.

function getGreeting(user) {
  if (user) {
    return <h1>Ողջույն, {formatName(user)}!</h1>;
  }
  return <h1>Ողջույն, անծանոթ։</h1>;
}

Ատրիբուտների սահմանում JSX-ում

Դուք կարող եք օգտագործել ապաթարցեր` հայտարարելու համար տողային լիտերալներ որպես ատրիբուտներ.

const element = <div tabIndex="0"></div>;

Դուք նաև կարող եք օգտագործել ձևավոր փակագծեր` ներդնելու համար JavaScript արտահայտություններ ատրիբուտում.

const element = <img src={user.avatarUrl}></img>;

Մի դրեք ապաթարցեր ձևավոր փակագծերի շուրջ, երբ ներդնում եք JavaScript արտահայտություն ատրիբուտում։ Դուք պետք է կա՛մ օգտագործեք ապատարցեր (տողային արժեքների համար), կա՛մ ձևավոր փակագծեր (արտահայտությունների համար), բայց ոչ երկուսը միասին նույն ատրիբուտում։

Զգուշացում.

Քանի որ JSX-ն ավելի մոտ է JavaScript-ին, քան HTML-ին, ReactDOM-ը HTML ատրիբուտների անուների փոխարեն օգտագործում է ուղտաԳիր հատկությունների անունների պայմանավորվածություն։

Օրինակ. class-ը JSX-ում դառնում է classNameeng, tabindex-ը դառնում է tabIndexeng։

Զավակների հայտարարումը JSX-ում

Եթե թեգը դատարկ է, դուք կարող եք անմիջապես փակել այն սրանով />, ինչպես XML-ում.

const element = <img src={user.avatarUrl} />;

JSX թեգերը կարող են պարունակել զավակներ.

const element = (
  <div>
    <h1>Ողջույն!</h1>
    <h2>Ուրախ ենք Ձեզ տեսնել այստեղ։</h2>
  </div>
);

JSX-ը կանխում է ներարկման հարձակումները

Ապահով է ներդնել օգտագործողի input-ը JSX-ում.

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

Լռությամբ, ReactDOM-ն էկրանավորումeng է JSX-ում ներդրված ցանկացած արժեք մինչ նրանց արտապատկերումը։ Այդպիսով նա երաշխավորում է, որ դուք երբեք չեք կարող «ներարկել» այն, ինչ ակնհայտորեն գրված չէ ձեր հավելվածում։ Ամեն ինչ ձևափոխվում է տողի մինչ արտապատկերվելը։ Սա թույլ է տալիս կանխել XSS (cross-site-scripting)eng հարձակումները։

JSX-ն իրենից ներկայացնում է օբյեկտներ

Babel-ը կոմպիլացնում է JSX-ը React.createElement() կանչերի։

Այս երկու օրինակները համարժեք են.

const element = (
  <h1 className="greeting">
    Ողջույն, աշխարհ
  </h1>
);
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Ողջույն, աշխարհ'
);

React.createElement()-ը կատարում է մի քանի ստուգում` օգնելու համար ձեզ գրել սխալներից ազատ կոդ, բայց, ըստ էության, այն ստեղծում է այսպիսի օբյեկտ.

// Նշում. այս կառուցվածքը պարզեցված է
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Ողջույն, աշխարհ'
  }
};

Այս օբյեկտները կոչվում են «React էլեմենտներ»։ Դուք կարող եք դրանք համարել այն բաների նկարագրություն, որոնք ցանկանում եք տեսնել էկրանին։ React-ը կարդում է այդ օբյեկտները և օգտագործում է նրանց DOM-ը կառուցելու և այն թարմ պահելու համար։

Մենք կուսումնասիրենք React էլեմենտների արտապատկերումը DOM-ում հաջորդ գլխում։

Խորհուրդ:

Մենք խորհուրդ ենք տալիս օգտագործել «Babel լեզվի սահմանում»-ը ձեր խմբագրիչի համար, որպեսզի ES6 և JSX կոդերն ընդգծվեն ինչպես հարկն է։ Այս վեբկայքն օգտագործում է «Oceanic Next» գունային սխեման, որը համատեղելի է դրա հետ։