Skip to main content

⚛️ React'ta JSX Kullanımı: Dinamik Elementler Oluşturma Sanatı

🚀 Bu Rehberde Ne Öğreneceksiniz?​

Bu rehberde, React uygulamalarında JSX (JavaScript XML) yapısını kullanarak HTML benzeri ama JavaScript gücünü taşıyan dinamik kullanıcı arayüzleri oluşturmayı öğreneceksiniz.
Değişken kullanımı, olay yakalayıcıları, dinamik listeler (map), ve koşullu render (&&) konularına adım adım değineceğiz.

💻 Ön Gereksinimler​

Başlamadan önce aşağıdaki araçların kurulu olması gerekir:

  • Node.js (aktif sürüm)
  • Create React App ile proje oluşturmayı bilmek
  • Temel JavaScript, HTML ve CSS bilgisi

1️⃣ Proje Kurulumu ve Temizlik​

Yeni Proje Oluşturma​

npx create-react-app rabisu-jsx-rehberi

Bu komut yeni bir React projesi oluşturur.

Projeye Giriş ve Başlatma​


cd rabisu-jsx-rehberi
npm start

Tarayıcı otomatik olarak http://localhost:3000/ adresini açacaktır.

Varsayılan Kodları Temizleme​

src/App.js dosyasını açın ve içeriğini aşağıdaki hale getirin:


import React from 'react';
import './App.css';

function App() {
  return null; // Şimdilik boş
}

export default App;

Ardından şu dosyayı silin:


rm src/logo.svg

2️⃣ JSX ile Temel Yapı Kurma​

JSX, JavaScript içine HTML benzeri işaretleme eklemenizi sağlar. Ancak React, tek bir kök element döndürmenizi zorunlu kılar.

Örnek JSX:


function App() {
  return (
    <>
      <h1>Merhaba, Rabisu!</h1>
      <p>JSX öğreniyorum.</p>
    </>
  )
}
<>...</>

Fragment yapısı, fazladan <div> eklemeden birden fazla öğeyi sarmanızı sağlar.

3️⃣ CSS ve Nitelikleri (Attribute) JSX’e Ekleme​

CSS Dosyasını Güncelleyin src/App.css:


.ortala {
  display: flex;
  flex-direction: column;
  align-items: center;
}

className Kullanımı​


function App() {
  return (
    <div className="ortala">
      <h1>Merhaba, Rabisu!</h1>
      <p>JSX öğreniyorum.</p>
    </div>
  )
}

JSX’te class yerine className kullanılır, çünkü class JavaScript’te rezerve edilmiş bir kelimedir.

Değişken ile Nitelik Atama​


const baslikID = "ana-selamlama";
<h1 id={baslikID}>Merhaba, Rabisu!</h1>

Tırnak yerine kullanarak değişkenleri doğrudan JSX’e atayabilirsiniz.

4️⃣ JSX’te Event (Olay) Ekleme​

Fonksiyon Oluşturma​


const emojiIsminiGoster = event => alert(event.target.id);

onClick Kullanımı​


<button onClick={emojiIsminiGoster}>
  <span id="gulen-yuz">😀</span>
</button>

Olay isimleri camelCase ile yazılır: onClick, onChange, onSubmit gibi.

5️⃣ Map ile Dinamik JSX Elementleri Oluşturma​

Veri Dizisini Tanımla​


const emojis = [
  { emoji: "😀", name: "gulen-yuz" },
  { emoji: "🎉", name: "parti-konfeti" },
  { emoji: "💃", name: "dans-eden-kadin" }
];

Döngüyle Render Et​


<ul>
  {emojis.map(e => (
    <li key={e.name}>
      <button onClick={emojiIsminiGoster}>
        <span id={e.name}>{e.emoji}</span>
      </button>
    </li>
  ))}
</ul>

Her öğeye key eklemek zorunludur. Bu, React’ın hangi elemanı güncelleyeceğini anlamasını sağlar.

6️⃣ Koşullu Element Gösterme (Short-Circuiting)​

Örnek:


const aksiyonGoster = false;

{aksiyonGoster && <p>Bu metin yalnızca koşul doğruysa görünür!</p>}

&& operatörü ile koşul doğruysa element render edilir; değilse hiç eklenmez.

❓ Sıkça Sorulan Sorular (SSS)​

  1. JSX standart HTML midir?

Hayır. JSX, HTML’e benzeyen ama JavaScript içinde çalışan özel bir sözdizimidir.

  1. Neden class değil className kullanılıyor?

Çünkü class JavaScript’te anahtar kelimedir. React’ta className kullanılır.

  1. Neden key zorunlu?

React, DOM farklarını takip etmek için key kullanır. Benzersiz olmalı.

  1. JSX içinde yorum nasıl yazılır?

{/* Bu bir yorum satırıdır */}
  1. Birden fazla element nasıl döndürülür?

Ekstra <div> kullanmadan ... (React Fragment) yapısı ile.

🧩 Sonuç​

Bu rehberde JSX kullanarak React bileşenlerinin temelini öğrendiniz: HTML benzeri yapı, değişkenler, event’ler, map ile dinamik render ve koşullu gösterim.

Artık kendi bileşenlerinizi güvenle oluşturabilirsiniz. Hemen şimdi Rabisu Bulut platformunda ilk JSX projenizi deneyin! 🚀