JSX: extension ng JavaScript at mga halimbawa ng paggamit

Ano ang JSX?

JSX (JavaScript XML) — isang extension ng syntax para sa JavaScript, unang ipinakilala sa React noong 2013. Pinapayagan nito ang mga developer na ilarawan ang istraktura ng user interface sa isang deklaratibong paraan, pinagsasama ang markup at logic sa isang file.

Bago ang pagdating ng JSX, ang mga developer ay gumagamit ng mga text template (Mustache, Handlebars) o manu-manong gumagawa ng mga DOM element sa pamamagitan ng document.createElement. Ang parehong approach ay may mga kakulangan: ang mga text template ay hindi naka-check sa mga type, at ang manu-manong paggawa ng DOM ay mahirap at madaling magkamali.

Pumili ang React ng ibang landas — pag-embed ng markup nang direkta sa code. Ang desisyong ito ay nagdulot ng debate sa komunidad, ngunit sa paglipas ng panahon ay naging pamantayan. Ngayon, ang JSX ay ginagamit hindi lamang sa React, kundi pati na rin sa SolidJS, Preact, Qwik at maging sa Vue sa pamamagitan ng mga plugin.

Batayang syntax ng JSX

Ang JSX element ay mukhang isang HTML tag, ngunit naka-embed nang direkta sa JavaScript. Bawat element ay trinanspila sa isang tawag ng React.createElement na may tatlong argumento: uri ng element, object ng props, at mga anak na element. Isang root element — isang mandatoryong panuntunan: ang JSX expression ay dapat magbalik ng isang parent element o fragment.

import React from 'react';

// Batayang JSX - isang root element
const element = (
  <div className="app">
    <h1>Hello, World!</h1>
    <p>Welcome to React</p>
  </div>
);

Mga fragment para sa pagpapangkat

Kapag hindi kailangan ang karagdagang DOM node, gamitin ang React.Fragment o maikling syntax <></>. Ang mga fragment ay hindi lumilikha ng tunay na DOM element, pinapangkat lang nila ang mga anak na node. Ito ay lalong kapaki-pakinabang sa mga table at listahan, kung saan ang sobrang wrapper ay makakasira sa HTML structure.

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

Mga expression at variable sa JSX

Ang anumang JavaScript expression ay naka-embed sa JSX sa pamamagitan ng curly braces { }. Sa loob ay maaaring gumamit ng mga variable, tawag ng function, ternary operator, at mga pamamaraan ng array. Conditional rendering ay ginagawa sa pamamagitan ng ternary operator o logical AND.

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>
  );
}

Ang pangunahing limitasyon — sa loob ng curly braces ay maaari lamang gumamit ng mga expression, hindi mga statement. Hindi maaaring gumamit ng if/else, for, switch — tanging ternary operator, logical operator at array methods. Ang mga tawag ng function, kasama ang arrow function, ay pinapayagan.

Mga pagkakaiba ng JSX at HTML

Ang JSX ay biswal na katulad ng HTML, ngunit may mga pangunahing pagkakaiba. Mga attribute ay isinusulat sa camelCase — className sa halip na class, onClick sa halip na onclick, tabIndex sa halip na tabindex. Ito ay dahil ang JSX ay trinanspila sa JavaScript, kung saan ang gitling sa pangalan ng property ay hindi pinapayagan.

Isa pang mahalagang pagkakaiba — mga self-closing tag. Sa HTML, ang ilang tag (br, hr, input) ay maaaring hindi nakasara. Sa JSX, lahat ng self-closing tag ay dapat may closing slash: <br />, <input />. Ang mga pangalan ng SVG attribute ay kino-convert din sa camelCase: strokeWidth, fillOpacity.

Paano trinanspila ang JSX sa JavaScript

Hindi direktang naiintindihan ng mga browser ang JSX. Bago isagawa, ang JSX code ay dumadaan sa transpiler — Babel, TypeScript o esbuild. Bawat JSX element ay nagiging tawag ng createElement o jsx/runtime.

Pagbabago sa pamamagitan ng Babel

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

// Pagkatapos ng transpilasyon
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hello'
);

Mula noong React 17, lumitaw ang isang bagong JSX transformation na hindi nangangailangan ng pag-import ng React. Awtomatikong import ng jsx-runtime ay nagpapahintulot sa pagsulat ng mga component nang walang import React from 'react'. Sinusuportahan ng Babel at TypeScript ang transformation na ito sa pamamagitan ng setting na {"runtime": "automatic"}.

JSX sa labas ng React: Solid, Preact, Vue

Kahit na ang JSX ay nauugnay sa React, ibang framework ay gumagamit din nito. SolidJS ay gumagamit ng JSX na may kompilasyon sa tunay na DOM nodes, walang Virtual DOM. Preact — magaan na alternatibo sa React na may buong suporta sa JSX. Vue ay sumusuporta sa JSX sa pamamagitan ng @vue/babel-plugin-jsx, kahit na ang pangunahing template nito ay template.

Ang pangunahing pagkakaiba — semantika ng mga expression. Sa React, ang JSX expression ay isinasagawa sa bawat render. Sa SolidJS, ang JSX ay kino-compile nang isang beses, at ang mga update ay sinusubaybayan sa pamamagitan ng mga signal. Ito ay nakakaapekto sa performance: ang SolidJS ay hindi nangangailangan ng Virtual DOM at reconciliation, kaya ang JSX rendering ay mas mabilis.

Sa TypeScript, ang JSX ay sinusuportahan sa antas ng wika. Ang mga file na may extension na .tsx ay awtomatikong nagpo-proseso ng JSX syntax. Typification ng props — isa sa mga pangunahing bentahe ng TypeScript + JSX: ang IDE ay nagmumungkahi ng inaasahang attribute, mga uri ng callback, at obligadong props.

Pinakamahusay na kasanayan sa pagtatrabaho sa JSX

Sumulat ng JSX code na madaling basahin at panatilihin. Ilabas ang mga kumplikadong expression sa hiwalay na mga variable o function — pinapabuti nito ang pagiging madaling basahin at pinapayagan ang pag-test ng logic nang hiwalay sa markup. Gumamit ng mga fragment sa halip na hindi kinakailangang div wrapper.

Ang panuntunan ng indentasyon — sundin ang indentasyon para sa mga nested element. Bawat antas ng nesting — isang antas ng indentasyon. Ang closing tag ay dapat nasa antas ng opening tag. Para sa mahabang attribute, gumamit ng line break.

Iwasan ang inline arrow function sa props, kung sila ay nilikha sa bawat render. Sa ganitong mga kaso, balutin ang callback sa useCallback o ilabas ang function sa labas ng component. Hatiin ang mga kumplikadong component sa mas maliliit — bawat component ay dapat maging responsable para sa isang lohikal na yunit ng interface.