JSX: JavaScript genişlənməsi və istifadə nümunələri

JSX nədir?

JSX (JavaScript XML) — 2013-cü ildə React-də təqdim edilmiş JavaScript üçün sintaksis genişlənməsidir. Bu, proqramçılara istifadəçi interfeysinin strukturunu deklarativ üslubda təsvir etməyə, işarələmə və məntiqi bir faylda birləşdirməyə imkan verir.

JSX-dən əvvəl proqramçılar mətn şablonlarından (Mustache, Handlebars) istifadə edir və ya DOM elementlərini əl ilə document.createElement vasitəsilə yaradırdılar. Hər iki yanaşmanın çatışmazlıqları var idi: mətn şablonları tiplərə görə yoxlanılmırdı, əl ilə DOM yaratmaq isə çətin və səhvlərə meylli idi.

React fərqli bir yol seçdi — işarələməni birbaşa kodun içinə yerləşdirmək. Bu qərar icmada mübahisələrə səbəb oldu, lakin zamanla standarta çevrildi. Bu gün JSX təkcə React-də deyil, həm də SolidJS, Preact, Qwik və hətta Vue-də plaginlər vasitəsilə istifadə olunur.

JSX-in əsas sintaksisi

JSX elementi HTML teqinə bənzəyir, lakin birbaşa JavaScript-ə yerləşdirilir. Hər bir element üç arqumentlə React.createElement çağırışına transpilasiya olunur: elementin tipi, props obyekti və uşaq elementlər. Bir kök element — məcburi qayda: JSX ifadəsi bir valideyn element və ya fraqment qaytarmalıdır.

import React from 'react';

// Əsas JSX - tək kök element
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Qruplaşdırma üçün fraqmentlər

Əlavə DOM düyünü lazım olmadıqda, React.Fragment və ya qısa sintaksisdən <></> istifadə edin. Fraqmentlər real DOM elementi yaratmır, yalnız uşaq düyünləri qruplaşdırır. Bu, xüsusilə cədvəllərdə və siyahılarda faydalıdır, burada əlavə bürümə HTML strukturunu poza bilər.

function Columns() {
  return (
    <>
      <td>First</td>
      <td>Second</td>
    </>
  );
}

JSX-də ifadələr və dəyişənlər

İstənilən JavaScript ifadəsi JSX-ə qıvrım mötərizələr vasitəsilə daxil edilir { }. Daxildə dəyişənlərdən, funksiya çağırışlarından, üçlü operatorlardan və massiv metodlarından istifadə oluna bilər. Şərti render üçlü operator və ya məntiqi AND vasitəsilə həyata keçirilir.

function Greeting({ name, isLoggedIn }) {
  const items = ['Red', 'Green', 'Blue'];

  return (
    <div>
      {/* Expression with variable */}
      <h1>Hello, {name}</h1>

      {/* Conditional rendering */}
      {isLoggedIn ?
        <p>Welcome back!</p :
        <button>Login</button>
      }

      {/* Render array */}
      <ul>
        {items.map(item =>
          <li key={item}>{item}</li>
        )}
      </ul>
    </div>
  );
}

Əsas məhdudiyyət — qıvrım mötərizələr daxilində yalnız ifadələrdən istifadə etmək olar, təlimatlar yox. if/else, for, switch istifadə etmək olmaz — yalnız üçlü operator, məntiqi operatorlar və massiv metodları. Funksiya çağırışları, o cümlədən ox funksiyaları icazəlidir.

JSX və HTML arasındakı fərqlər

JSX vizual olaraq HTML-ə bənzəyir, lakin prinsipial fərqlərə malikdir. Atributlar camelCase ilə yazılır — className class əvəzinə, onClick onclick əvəzinə, tabIndex tabindex əvəzinə. Bu, JSX-in JavaScript-ə transpilasiya olunması ilə bağlıdır, burada xassə adında defis yolverilməzdir.

Digər vacib fərq — öz-özünə bağlanan teqlər. HTML-də bəzi teqlər (br, hr, input) bağlanmaya bilər. JSX-də bütün öz-özünə bağlanan teqlər bağlanan xəttə malik olmalıdır: <br />, <input />. SVG atribut adları da camelCase-ə çevrilir: strokeWidth, fillOpacity.

JSX JavaScript-ə necə transpilasiya olunur

Brauzerlər JSX-i birbaşa başa düşmür. İcradan əvvəl JSX kodu transpilatordan — Babel, TypeScript və ya esbuild-dən keçir. Hər bir JSX elementi createElement və ya jsx/runtime çağırışına çevrilir.

Babel vasitəsilə transformasiya

// Orijinal JSX
const element = <h1 className="title">Hello</h1>;

// Transpilasiyadan sonra
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

React 17-dən etibarən React importu tələb etməyən yeni JSX transformasiyası meydana çıxdı. Avtomatik import jsx-runtime import React from 'react' olmadan komponentlər yazmağa imkan verir. Babel və TypeScript bu transformasiyanı {"runtime": "automatic"} parametri ilə dəstəkləyir.

JSX React-dən kənar: Solid, Preact, Vue

JSX React ilə assosiasiya olunsa da, digər freymvorklar da ondan istifadə edir. SolidJS JSX-i Virtual DOM olmadan real DOM düyünlərinə kompilyasiya ilə istifadə edir. Preact — JSX-in tam dəstəyi ilə React-in yüngül alternativi. Vue @vue/babel-plugin-jsx vasitəsilə JSX-i dəstəkləyir, baxmayaraq ki, onun əsas şablonu templatedir.

Əsas fərq — ifadələrin semantikası. React-də JSX ifadələri hər renderdə icra olunur. SolidJS-də JSX bir dəfə kompilyasiya olunur və yeniləmələr siqnallar vasitəsilə izlənilir. Bu, performansa təsir edir: SolidJS Virtual DOM və reconsiliasiya tələb etmir, buna görə JSX renderi daha sürətlidir.

TypeScript-də JSX dil səviyyəsində dəstəklənir. .tsx genişlənməsi olan fayllar avtomatik olaraq JSX sintanksisini emal edir. Propsların tipləşdirilməsi — TypeScript + JSX-in əsas üstünlüklərindən biri: IDE gözlənilən atributları, callback tiplərini və propsların məcburiliyini göstərir.

JSX ilə işin ən yaxşı təcrübələri

Oxumaq və saxlamaq asan olan JSX kodu yazın. Mürəkkəb ifadələri ayrı-ayrı dəyişənlərə və ya funksiyalara çıxarın — bu, oxunaqlılığı yaxşılaşdırır və məntiqi işarələmədən ayrı test etməyə imkan verir. Lazımsız div bürümələri əvəzinə fraqmentlərdən istifadə edin.

Abzas qaydası — iç-içə elementlər üçün abzaslara riayət edin. Hər iç-içə səviyyəsi bir abzas səviyyəsidir. Bağlanan teq açılan teqin səviyyəsində olmalıdır. Uzun atributlar üçün sətir qırmasından istifadə edin.

Propslarda inline ox funksiyalarından çəkinin, əgər onlar hər renderdə yaradılırsa. Belə hallarda callback-i useCallback-ə bürüyün və ya funksiyanı komponentin xaricinə çıxarın. Mürəkkəb komponentləri daha kiçiklərə bölün — hər komponent interfeysin bir məntiqi vahidinə cavabdeh olmalıdır.