HTML TSX Alapok¶

A TypeScript JSX (TSX) lehetővé teszi, hogy HTML elemeket közvetlenül írjunk a TypeScript fájlokban. Ez különösen hasznos a React komponensek fejlesztése során, ahol a felhasználói felületet HTML-szerű szintaxissal építjük fel.

HTML Elemek TSX-ben¶

Egyszerű HTML Elemek¶

A TSX fájlokban ugyanúgy lehet HTML elemeket használni, mint hagyományos JSX-ben. Példa:

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Üdvözöllek a weboldalon!</h1>
      <p>Ez egy egyszerű példa a HTML TSX-ben történő használatára.</p>
    </div>
  );
};

export default MyComponent;

Attribútumok és CamelCase¶

A TSX-ben használt HTML elemek attribútumai CamelCase formátumban vannak írva.

<button onClick={() => alert('Megnyomtál egy gombot!')} className="btn-primary">
  Kattints ide!
</button>

Megjegyzés

A class attribútum helyett className-t kell használni, mert a class TypeScript kulcsszó.

Stílusok¶

Az inline stílusok objektumként vannak megadva, ahol a CSS tulajdonságok CamelCase formában szerepelnek:

<div style={{ backgroundColor: 'lightblue', padding: '10px' }}>
  Ez egy stílusos doboz.
</div>

Rövidített If Kifejezés (Shortened If)¶

A rövidített if kifejezést általában arra használjuk, hogy feltételek alapján döntéseket hozzunk, és egyszerűsítsük a kódot. Ez a szerkezet lehetővé teszi, hogy feltétel alapján csak egy értéket adjon vissza.

Ternary Operátor¶

A ternary operátor egy rövidített if-else szerkezet, amely egy sorban írható:

const isLoggedIn = true;

const greeting = isLoggedIn ? 'Üdv újra itt!' : 'Kérjük, jelentkezz be!';

return <p>{greeting}</p>;

A fenti példa a következőképpen működik:

Ha isLoggedIn igaz, akkor greeting értéke 'Üdv újra itt!'
Ha isLoggedIn hamis, akkor greeting értéke 'Kérjük, jelentkezz be!'

Short-circuit evaluation¶

Ha csak akkor akarunk valamit megjeleníteni, ha a feltétel igaz, használhatjuk a rövidzárlat értékelést:

const isAdmin = true;

return (
  <div>
    <h1>Főoldal</h1>
    {isAdmin && <button>Adminisztrációs panel</button>}
  </div>
);

Ebben az esetben az "Adminisztrációs panel" gomb csak akkor jelenik meg, ha az isAdmin értéke igaz.

Következtetés¶

A TSX lehetővé teszi a HTML elemek egyszerű és természetes használatát a TypeScript fájlokban, valamint a rövidített if kifejezések segítségével egyszerű és hatékony feltételes logikát tudunk megvalósítani. Ezek az eszközök nagyban megkönnyítik a React komponensek építését és olvashatóságát.