Hordhaca JSX

JSX wuxuu noo ogolaanayaa inaan ku dhex qorno qaab-dhismeedka HTML-ka oo kale si toos ah gudaha JavaScript-ka. Tani waxay ka dhigaysaa koodhkaaga mid si fudud loo akhrin karo loona daryeeli karo.

Maxaa loo isticmaalaa JSX?

JSX la’aantiis, dhisidda UI-ga React waxay u muuqan lahayd sidan:

React.createElement('h1', null, 'Haye Dunida');
React.createElement('p', { className: 'intro' }, 'Ku soo dhowow React!');

Markaad isticmaasho JSX, isla koodhka waxa uu noqonayaa:

<h1>Haye Dunida</h1>
<p className="intro">Ku soo dhowow React!</p>

Nooca labaad waa mid si fudud loo akhrin karo — gaar ahaan marka UI-gaagu noqdo mid aad u murugsan.

Xeerarka Aasaasiga ah ee JSX

1. Waa inay leedahay mid sare oo ah weel

Qayb React kama soo celin karto elements badan oo la soo celiyay. Waa inay ku duuban yihiin mid sare:

// ❌ Khalad — labada element ee sare waa xor
function App() {
  return (
    <h1>Cinwaanka</h1>
    <p>Baaraagrafka</p>
  );
}

// ✅ Sax — ku duub Fragment ama div
function App() {
  return (
    <>
      <h1>Cinwaanka</h1>
      <p>Baaraagrafka</p>
    </>
  );
}

2. className halkii class

Maxaa yeelay class waa ereyga la xajiyay ee JavaScript, JSX waxay isticmaashaa className:

// ❌
<div class="kaardhka">Nuxurka</div>

// ✅
<div className="kaardhka">Nuxurka</div>

3. Tags-ka taagan waa in la xidaa

HTML-ka, waxaad qori kartaa <img> ama <br>. JSX-ka, waa inaad ku xidaa:

<img src="sawir.png" alt="Sharaxaad" />
<br />
<input type="text" />

4. JavaScript-ka gudaha { }

Gelida JavaScript-ka gudaha JSX-ka, isticmaal xididdada { }:

const magac = "Faarax";
const da = 25;

return (
  <div>
    <h1>Ku soo dhowow, {magac}!</h1>
    <p>Jirkaagu waa {da} sano.</p>
    <p>Sannadka dambe waad noqon doontaa {da + 1}.</p>
  </div>
);

Tusaale Dhamaystiran

Waa kan qaybta React oo buuxda ah:

export default function Salaan({ magac, xirfad }) {
  return (
    <div className="kaardhka-salaan">
      <div className="avatar">
        {magac.charAt(0)}
      </div>
      <div className="macluumaad">
        <h2 className="magaca">{magac}</h2>
        <p className="xirfadda">{xirfad}</p>
        <span className="xaaladda">🟢 Online</span>
      </div>
    </div>
  );
}

Maxaa xiga?

Casharka xiga waxaan baranayaa Props — sida xogta loogu diro qaybaha React.