JSX-ը, որն այլ կերպ կոչվում է JS XML կամ JavaScript eXtension, ՉԻ HTML, բայց այն հաստատ շատ է օգտագործում HTML-ը: Պարզ ասած, JSX-ը շարահյուսական շաքար է, որն օգնում է ծրագրավորողներին արձագանքելու կոդ գրել ավելի ինտուիտիվ և տեսողականորեն համահունչ ձևով:

React-ն իր ԴՆԹ-ի մեջ միացված շատ սկզբունքներ ունի: Մտահոգությունների տարանջատումը և դեկլարատիվ մոտեցումը դրանցից երկուսն են:

Նախքան հետագա գնալը, տեսնենք, թե ինչ է նշանակում մտահոգությունների տարանջատում և հռչակագրային մոտեցում:

  1. Մտահոգությունների տարանջատումը, կամ SoC,ծրագրաշարի նախագծման սկզբունք է, որը մեզ հուշում է կոդը բաժանել տարբեր բաղադրիչների, որպեսզի յուրաքանչյուր բաղադրիչ ունենա մեկ և միայն մեկ concern (կանչ դա պատասխանատվություն) հոգ տանել.
  2. Դեկլարատիվ մոտեցումը ապահովում է, որ մշակողը պետք է նշի, թե ինչ է ուզում, և how մասը հոգում է կազմողը:

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

Ամեն ինչ ասվեց, ինչպե՞ս է JSX-ն իրականում հասնում վերը նշված սկզբունքներին: Դա հասկանալու համար եկեք ավելի խորացնենք և վերանայենք կոդի մի քանի հատված.

  1. Մաքուր JS մոտեցում. Հետևյալ կոդի հատվածը ցույց է տալիս մաքուր JS-ի վրա հիմնված մոտեցում՝ մեր HTML փաստաթղթում root տարրին ավելացնելու պարզ պարբերություն:

Նախքան արձագանքելը, մաքուր JS-ի վրա հիմնված հանգույցի ստեղծումը պահանջում էր շատ անհարկի կոդավորում՝ նույնիսկ փոքր միջերեսի հասնելու համար:

2. Վաղ JSX մոտեցում.Երբ արձագանքը առաջին անգամ եկավ, այն նույնպես ուներ շատ նման և հրամայական եղանակ՝ նշելու նոր HTML հանգույցները և UI-ը: Ահա կոդերի նմուշի հատված՝ օգտագործելով վաղ JSX-ը.

Ինչպես տեսնում եք վերը նշված կոդի հատվածում, չնայած մենք օգտագործում ենք JSX, կոդը դեռ ավելի մոտ է հրամայական կոդ կոչվելուն, քան հռչակագրային կոդ: Բացի այդ, JSX-ի այս տարբերակում շատ կրկնություններ կան: Մշակողը պետք է կանչի createElement յուրաքանչյուր ստեղծված նոր բաղադրիչի համար, նշի HTML տարրերը ոչ UI ձևով, ինչը խոչընդոտում է ծրագրավորողի՝ UI-ն իրական կոդի հետ հեշտությամբ փոխկապակցելու կարողությանը: Դրան ավելացված է, որ վրիպազերծումը ևս մեկ մարտահրավեր է այս կոդավորման ոճով:

Հաշվի առնելով այս մարտահրավերները՝ React-ի հետևում կանգնած թիմը ստեղծեց JSX-ի նոր տարբերակը, որն ավելի ինտուիտիվ է և մոտ է HTML շարահյուսությանը:

3. Ժամանակակից JSX մոտեցում. Սովորելով սխալներից՝ react թիմը ամբողջությամբ թարմացրել է JSX-ը: Թեև react-ն օգտագործում է early JSX-ը նույնիսկ հիմա՝ տարրերը մատուցելու համար, այն ավելի շատ դարձավ ֆոնային կարգավորում: CreativeElement-ի և կոդավորման հրամայական կերպով նշելու պատասխանատվությունը հանվել է ծրագրավորողներից: Ներդրվել է ավելի ինտուիտիվ շարահյուսություն, որը շատ նման է HTML-ին:

JSX-ի ներկայիս կրկնությունն իսկապես դեկլարատիվ և ինտուիտիվ է մշակողների համար: Նրանք մտածում են միայն այն մասին, թե ինչ պետք է ցուցադրվի UI-ում և ինչպես այն պետք է լինի, բայց ոչ թե ինչպես է այն արտացոլվում UI-ում կամ ինչպես են ստեղծվում HTML հանգույցները/տարրերը:

Վերոնշյալ օրինակները ցույց են տալիս մեզ, թե ինչ առավելություններ է ստանում react մշակողը JSX-ն օգտագործելիս՝ համեմատած վանիլային JS-ի վրա հիմնված UI ներդրման հետ: Բայց դա պատասխանի կեսն է։ Ինչու՞ պետք է JSX պիտակները նման լինեն մեր HTML թեգերին: Ինչո՞ւ JSX-ի մշակողները չընտրեցին այլ պիտակների անվանումներ, որոնք կարող են ավելի լավ լինել, քան HTML թեգերը: Դրա պատճառը կայանում է նրանում, թե ինչպես է ժամանակակից JSX-ը վերածվում HTML կոդի: Այժմ տեսնենք, թե ինչպես է JSX տարրը ներկայացվում UI-ում:

Այս JSX կոդը՝ <h1>Header Text</h1> թարգմանվում է հետևյալ կոդով JS կոմպիլյատորի կողմից

Եվ հիմա, այս միջանկյալ կոդը վերածվում է իրական JS կոդի, որը h1 տարրը կփոխանցի UI-ին: Այս կերպ, Babel-ի նման կոմպիլյատորներն օգնում են ծրագրավորողներին կենտրոնանալ իրական առաջադրանքի վրա՝ հստակեցնելու, թե ինչպիսի տեսք պետք է ունենա UI-ը, իսկ մնացածը թողնեն համակարգի վրա: Եվ քանի որ ժամանակակից JSX-ի HTML կոդի թարգմանությունը հոգում է կոմպիլյատորը, բազային շարահյուսությունը դեռևս նման է HTML-ին։

Այս հոդվածում մենք տեսանք, թե ինչու է JSX-ն օգտագործվում ռեակտիվ հավելվածներ մշակելիս, և ինչու է այն շատ նման HTML թեգերին, չնայած այն իրականում HTML չէ:

Եթե ​​ձեզ դուր եկավ այս գրառումը, խնդրում եմ բաժանորդագրվեք ինձ՝ ավելի շատ նման բովանդակություն ստանալու համար: