JSX se langaj/Sentaks React itilize prensipalman pou dekri view (pati ou ka wè kote nan entèfas React la) nan aplikasyon.

Poukisa mwen di prensipalman? Enben men rezon an. React se yon framework/libreri JavaScript. Tout bagay ou ap fè ak li, ou oblije fè sa ak JavaScript. Sa vle di pa gen eleman HTML ladan l tankou h1 pou tit premye nivo, p pou paragraf, span pou eleman anliy elatriye.

Pou kreye eleman HTML sa yo, modil React la gen yon fonksyon li ofri ki rele createElement ki bezwen 3 paramèt:

  • non eleman HTML la
  • yon objè kote tout kle yo ap atribi eleman an tankou id, class (className pou React), ak yon bann lòt selon eleman an
  • kontni eleman an dwe afiche a ki se souvan yon chèn karaktè (sa yo rele string nan lang anglè), men li ka yon lòt eleman ankò ke w kreye ak fonksyon createElement la. Sa vle di ou ka gen yon eleman kòm kontni yon lòt eleman san limit.

Yon egzanp pou kreye yon eleman HTML h1 kapab sanble tankou kòd sa  a:

const eleman = React.createElement(
'h1',
{
  className: 'yon-klas',
  id: 'yon-id'
},
'Sa k pase, lemond!'
);

Nan bout kòd sa a mwen itilize mo kle (keyword nan lang anglè) const pou kreye yon varyab ki gen non eleman ki ap jwenn rezilta fonksyon createElement la, ki li menm pran kòm agiman eleman HTML mwen bezwen kreye a ki se h1, yon objè ki gen 2 kle, className ak id, ki yo menm yo chak gen valè string yon-klas ak yon-id respektivman. An dènye mwen ba li kontni mwen vle pou li afiche a, ki se Sa k pase, lemond!.

Kounye a pou mwen afiche eleman sa a, si mwen ap itilize React sou entènèt (wèb), mwen ka itilize libreri React DOM nan ki li menm ofri yon fonksyon ki rele render ki bezwen 2 paramèt:

  • eleman nou te kreye a
  • yon node (ki se yon pati nan DOM navigatè a)

Yon egzanp kòd pou sa ka sanble ak sa:

ReactDOM.render(
eleman,
document.getElementById('nodeNanDOMNan')
);

Kòm li parèt la, pou kreye eleman HTML konsa ala men, se ap yon pil travay. Se pou sa yo vini ak JSX pou kapab senplifye deskripsyon view sa yo nan React. JSX sanble ak HTML, paske ou ka ekri kòd ki sanble ak HTML, men ki an reyalite se yon bann eleman ki kreye ak fonksyon createElement React ofri a.

Yon egzanp pou kreye yon tit premye nivo jan mwen te fè li anwo a ka sanble ak sa:

const eleman = <h1 className='yon-klas' id='yon-id'>Sa k pase, lemond!</h1>

Mwen kreye yon varyab ki rele eleman ki pran kòm valè JSX ki reprezante sa  m bezwen nan HTML la. Epi menm jan mwen te fè anwo a mwen ka jis itilize fonksyon createElement React ofri a pou mwen kapab afiche li nan view aplikasyon an.

Nan lòt atik ak titoryèl ki ap vini, mwen ap eksplike e pratike plis an detay anpil nan bagay JSX ofri. Yon diferans nou ka petèt wè byen rapid se pou atribi class nan HTML la, nan plas li mwen ekri className. Se paske mo kle class la vle di yon bagay espesyal nan JavaScript. Li ap bay erè paske JavaScript ap panse ou vle itilize li pou kreye yon klas (paske tout kòd React se JavaScript), poutan se pa sa.