React jsx nedir?

React JSX, React ile birlikte kullanılan bir JavaScript dil uzantısıdır. JSX, JavaScript ve XML benzeri bir sentaks sunarak, React bileşenlerini oluşturmak için kullanılır.

JSX, bir HTML benzeri yapı içinde JavaScript ifadelerini kullanmamıza izin verir. Böylece, React bileşenlerini daha kolay bir şekilde oluşturabiliriz. JSX, daha sonra React tarafından HTML'e dönüştürülür ve tarayıcı tarafından anlaşılabilir hale gelir.

Örneğin, aşağıdaki JSX kodu, basit bir "Merhaba Dünya" bileşenini tanımlar:

  
//jsx

import React from 'react';

function Merhaba() {
  return <h1>Merhaba Dünya!</h1>;
}

export default Merhaba;

Bu kod, bir Merhaba adlı React bileşeni tanımlar ve <h1>Merhaba Dünya!</h1> JSX ifadesini döndürür. Bu ifade, HTML <h1> başlığına karşılık gelir.

JSX, React bileşenlerinin içinde JavaScript ifadelerini de kullanmamıza olanak tanır. Örneğin, aşağıdaki örnekte, bir değişkenin değerini JSX içinde kullanarak dinamik içerik oluşturuyoruz:

  
//jsx

import React from 'react';

function Merhaba() {
  const ad = 'John';

  return <h1>Merhaba, {ad}!</h1>;
}

export default Merhaba;

Bu örnekte, JSX içinde {ad} ifadesi, ad değişkeninin değerini yerleştirir. Böylece, bileşenin sonucu <h1>Merhaba, John!</h1> olur.

JSX, React ile birlikte kullanılarak, bileşenleri daha okunabilir, yeniden kullanılabilir ve etkileşimli hale getirmek için güçlü bir araç sağlar.

JSX, React bileşenlerini tanımlamak için sadece bir dil uzantısı değil, aynı zamanda JSX ifadelerinin içinde JavaScript ifadeleriyle etkileşimde bulunmayı da sağlar. Bu, dinamik veri kullanımı, döngüler ve koşullu ifadeler gibi JavaScript özelliklerini React bileşenlerine entegre etmenizi sağlar.

Örneğin, aşağıdaki örnekte, bir dizi veriyi kullanarak liste öğelerini oluşturuyoruz:

  
//jsx

import React from 'react';

function Liste() {
  const veri = ['Elma', 'Armut', 'Muz'];

  return (
    <ul>
      {veri.map((eleman, index) => (
        <li key={index}>{eleman}</li>
      ))}
    </ul>
  );
}

export default Liste;

Bu örnekte, 'veri' adlı bir dizi tanımlanır. Ardından, 'veri.map' fonksiyonunu kullanarak her öğe için bir '<li>' öğesi oluşturulur. Her öğe için benzersiz bir 'key' prop'u da eklenir. Sonuç olarak, '<ul>' içindeki liste öğeleri, 'veri' dizisindeki öğelerle eşleşir.

JSX ayrıca, React bileşenlerini iç içe geçirmeyi de kolaylaştırır. Örneğin:

  
//jsx

import React from 'react';

function AnaBilesen() {
  return (
    <div>
      <Baslik />
      <Metin />
    </div>
  );
}

function Baslik() {
  return <h1>Merhaba!</h1>;
}

function Metin() {
  return <p>React ve JSX hakkında bilgi alıyorsunuz.</p>;
}

export default AnaBilesen;

Bu örnekte, '<AnaBilesen>' bileşeni içinde '<Baslik>' ve '<Metin>' bileşenleri yerleştirilmiştir. JSX, bu bileşenlerin hiyerarşisini ve ilişkisini anlamak için kullanılır.

Sonuç olarak, React JSX, React uygulamalarında bileşenleri tanımlamak, dinamik içerik oluşturmak ve bileşenleri birbirine entegre etmek için güçlü bir araç sağlar. JSX, JavaScript ve XML benzeri sentaksıyla React geliştiricilerine daha kolay ve anlaşılır bir şekilde çalışma imkanı sunar.

jsx yapısı ile html yapısı nerelerde değişir.

JSX yapısıyla HTML yapısı arasında bazı farklar vardır. İşte bazı temel farklar:

1. Element İsimlendirmesi: JSX içinde bileşenlerin veya HTML öğelerinin isimlendirmesi PascalCase olarak yapılırken, HTML'de ise küçük harflerle kullanılır.

Örneğin, JSX'de:

  
//jsx

<MyComponent />

HTML'de:

  
//html

<div></div>

2. Class ve Stil Atama: JSX'de class yerine className kullanılır. Bu, HTML'den farklı bir sözdizimi kuralıdır. CSS sınıflarını tanımlarken, JSX'de className kullanırız.

Örneğin, JSX'de:

  
//jsx

<div className="my-class"></div>

HTML'de:

  
//html

<div class="my-class"></div>

3. JavaScript İfadeleri: JSX, içinde JavaScript ifadelerini kullanmamıza izin verir. Bu nedenle, JSX içinde süslü parantezler {} kullanarak JavaScript ifadelerini yerleştirebilirsiniz.

Örneğin, JSX'de:

//jsx

const name = "John";
const element = <h1>Merhaba, {name}!</h1>

HTML'de:

//html

<h1>Merhaba, John!</h1>

4. Özellik ve Değer Atama: JSX'de, HTML'den farklı olarak, tüm özelliklere süslü parantezler içinde JavaScript ifadeleri atanabilir. Bu, dinamik özellik değerlerini belirlememizi sağlar.

Örneğin, JSX'de:

//jsx

const url = "https://www.example.com";
const element = <a href={url}>Örnek Link</a>;

HTML'de:

//html

<a href="https://www.example.com">Örnek Link</a>

5. Self-Closing Etiketler: JSX'de, HTML'den farklı olarak, kendini kapatan etiketler için açılış ve kapanış etiketi kullanmanıza gerek yoktur. Kendini kapatan etiketler tek bir etiket olarak yazılabilir.

Örneğin, JSX'de:

  
//jsx

const element = <img src="image.jpg" alt="Resim" />;

HTML'de:

  
//html

<img src="image.jpg" alt="Resim">

6. Özellik İsimlendirme: JSX'de bazı HTML özelliklerinin isimlendirmesi farklıdır. Örneğin, for yerine htmlFor, tabindex yerine tabIndex gibi.

Örneğin, JSX'de:

  
//jsx

<label htmlFor="inputField">İsim:</label>
<input type="text" id="inputField" />

HTML'de:

  
//html

<label for="inputField">İsim:</label>
<input type="text" id="inputField" />

7. HTML Yorumları: JSX içinde HTML yorumları aynı şekilde kullanılamaz. JSX içinde JavaScript ifadeleri olarak yorumlar kullanılır.

Örneğin, JSX'de:

  
//jsx


  {/* Bu bir yorumdur */}
  <p>Paragraf</p>

HTML'de:

  
//html

<div>
   <!-- Bu bir yorumdur -->
  <p>Paragraf</p>
</div>

8. Stil Tanımlama: JSX içinde inline stil tanımlarken, stil nesneleri kullanılır. CSS özellikleri camelCase olarak tanımlanır.

Örneğin, JSX'de:

//jsx

const style = {
  color: 'blue',
  fontSize: '14px'
};

<div style={style}>Bu bir metin</div>

HTML'de:

//html

<div style="color: blue; font-size: 14px;">Bu bir metin</div>

9. HTML Entiteleri: JSX'de HTML entiteleri (örneğin,  , <, >) doğrudan kullanılamaz. Bunun yerine, Unicode karakterlerini veya JavaScript ifadelerini kullanmanız gerekir.

Örneğin, JSX'de:

  
//jsx

const element = <p>© 2023</p>;

yerine,

  
//jsx

const element = <p>{'\u00A9'} 2023</p>;

10. Root Element: JSX'de, bir bileşen veya JSX ifadesi yalnızca tek bir kök öğe içermelidir. Bu nedenle, JSX ifadeleri genellikle bir div veya benzeri bir etiketle sarmalanır.

Örneğin, JSX'de:

  
//jsx

const element = (
  <div>
    <h1>Başlık</h1>
    <p>Paragraf</p>
  </div>
);

11. Özel Elementler: JSX, HTML'de tanımlı olan standart etiketlerin yanı sıra, özel bileşenlerin de oluşturulmasını sağlar. Bu sayede kendi özel etiketlerinizi ve bileşenlerinizi tanımlayabilirsiniz.

Örneğin, JSX'de:

//jsx

import React from 'react';

function OzelBilesen() {
  return <div>Özel Bileşen</div>;
}

const element = (
  <div>
    <h1>Başlık</h1>
    <OzelBilesen />
  </div>
);

Bu örnekte, OzelBilesen adlı bir özel bileşen tanımlanmış ve JSX içinde kullanılmıştır.

JSX, React bileşenlerini tanımlamak ve kullanmak için kullanıcı dostu bir yapı sağlar. HTML ile benzerlikleri sayesinde, React bileşenlerini daha kolay ve tutarlı bir şekilde oluşturmanıza yardımcı olur. JSX, JavaScript ifadeleri ve kontrol akışı kullanarak dinamik içerik ve işlevsellik eklemenizi sağlar.

12. Fragments: JSX'de, birden fazla öğeyi döndürmek için div gibi bir kök öğe kullanmak yerine, React Fragments kullanabilirsiniz. Fragments, etiketler olmadan birden fazla öğeyi bir araya getirmenize izin verir.

Örneğin, JSX'de Fragments kullanımı:

  
//jsx

import React, { Fragment } from 'react';

function MyComponent() {
  return (
    <Fragment>
      <h1>Başlık</h1>
      <p>Paragraf</p>;
    </Fragment>
  );
}

Bu şekilde, <Fragment> etiketi yerine kullanabilirsiniz:

  
//jsx

import React from 'react';

function MyComponent() {
  return (
    <>
      <h1>Başlık</h1>
      <p>Paragraf</p>
    </>
  );
}

13. JSX İfadelerinde Koşullu Renderlama: JSX, JavaScript ifadelerini içerdiği için koşullu renderlama işlemlerini gerçekleştirebilirsiniz. Örneğin, bir if veya üçlü operatör kullanarak koşula bağlı olarak farklı JSX ifadelerini döndürebilirsiniz.

Örneğin, JSX içinde koşullu renderlama:

  
//jsx

function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Giriş yapıldı.</p> : <p>Giriş yapılmalı.</p>}
    </div>
  );
}

14. JSX İçinde Döngüler: JSX, JavaScript döngülerini içinde barındırabilir. Örneğin, map fonksiyonu kullanarak bir dizi üzerinde dönerek dinamik olarak bileşenleri oluşturabilirsiniz.

Örneğin, JSX içinde döngü kullanımı:

  
//jsx

function MyComponent({ data }) {
  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Bu şekilde, data dizisi üzerinde dönerek her öğe için bir <li> öğesi oluşturulur. JSX, React uygulamalarının güçlü bir parçasıdır ve React bileşenlerini daha esnek ve dinamik hale getirir. HTML ile benzer bir sentaksa sahip olduğu için, React geliştiricileri genellikle JSX kullanarak daha kolay ve okunabilir kod yazabilirler.

15. JSX İçinde İfadelere CSS Sınıfı Eklemek: JSX içinde CSS sınıfları eklemek için genellikle şartlı ifadeler ve işlevler kullanılır. Örneğin, belirli bir duruma bağlı olarak farklı CSS sınıflarını bir bileşene ekleyebilirsiniz.

  
//jsx

function MyComponent({ isActive }) {
  const className = isActive ? 'active' : 'inactive';

  return <div className={className}>Bileşen</div>;
}

Bu örnekte, isActive durumuna bağlı olarak active veya inactive CSS sınıfını <div> bileşenine ekliyoruz.

16. JSX İçinde İçerik ve Stil İşlemleri: JSX, içerik ve stil işlemlerini JavaScript ifadeleriyle kolayca gerçekleştirebilirsiniz. Örneğin, içerikte dize birleştirme veya stil özelliklerini JavaScript değişkenlerine dayalı olarak tanımlama gibi işlemler yapabilirsiniz.

//jsx

function MyComponent({ name, color }) {
  const greeting = `Merhaba, ${name}!`;
  const style = { color };

  return <div style={style}>{greeting}</div>;
}

Bu örnekte, name prop'unu kullanarak bir içerik dizesi oluşturuyoruz ve color prop'unu kullanarak bir stil nesnesi tanımlıyoruz.

17. JSX İçinde Olay İşleyicileri: JSX, olaylara (event) tepki göstermek için olay işleyicileri (event handlers) kullanmanızı sağlar. Örneğin, bir düğme tıklamasında bir fonksiyonu tetikleyebilirsiniz.

//jsx

function MyComponent() {
  const handleClick = () => {
    console.log('Düğmeye tıklandı!');
  };

  return <button onClick={handleClick}>Tıkla</button>;
}

Bu örnekte, handleClick adlı bir fonksiyon tanımlıyoruz ve <button> öğesine onClick olayını ekleyerek bu fonksiyonu tetikliyoruz.

18. JSX İçinde Fragments Kullanmak: JSX'de Fragments kullanarak, ek bir etiket olmadan birden fazla öğeyi bir araya getirebilirsiniz. Bu özellik, gereksiz bir ortak etiket eklemekten kaçınmanıza yardımcı olur.

//jsx

function MyComponent() {
  return (
    <>
      <h1>Başlık</h1>
      <p>Paragraf 1</p>
      <p>Paragraf 2</p>
    </>
  );
}

Bu şekil simgelerle, <></> ile sarmalanan öğeler bir Fragments oluşturur.

19. JSX İçinde Değişkenleri Kullanma: JSX içinde JavaScript değişkenlerini doğrudan kullanabilirsiniz. JSX, süslü parantezlerin içine yerleştirilen değişkenleri yerinde değer olarak alır.

//jsx

function MyComponent() {
  const message = 'Merhaba, Dünya!';

  return <div>{message}</div>;
}

Bu örnekte, message adlı bir değişken tanımlanır ve JSX içinde kullanılır.

20. JSX İçinde İmport İşlemleri: JSX dosyaları genellikle başka dosyalardan bileşenleri içe aktarmak için import ifadesini kullanır. Bu şekilde, başka bileşenleri JSX içinde kullanabilirsiniz.

//jsx

import React from 'react';
import Header from './Header';

function App() {
  return (
    <div>
      <Header />
      <p>Ana içerik</p>
    </div>
  );
}

Bu örnekte, Header bileşeni başka bir dosyadan içe aktarılır ve JSX içinde kullanılır.

20. checked Özelliği: checked özelliği, bir checkbox veya radio düğmesinin seçili olup olmadığını belirtir. Bu özellik, boolean bir değeri alır.

Örneğin, JSX'de bir checkbox için checked özelliğini kullanmak:

//jsx

function MyComponent() {
  const isChecked = true;

  return <input type="checkbox" checked={isChecked} />;
}

Bu örnekte, checked özelliği isChecked değişkeninin değerine bağlı olarak checkbox'un seçili olmasını sağlar.

21. for Özelliği: for özelliği, bir etiketin hangi form elemanına bağlı olduğunu belirtir. Ancak JSX'de for yerine htmlFor kullanılır.

Örneğin, JSX'de bir label etiketinin for özelliğini kullanmak:

  
//jsx

function MyComponent() {
  return (
    <div>
      <label htmlFor="inputField">İsim:</label>
      <input type="text" id="inputField" />
    </div>
  );
}

Bu örnekte, htmlFor özelliği inputField id'sine sahip bir input alanına bağlantı sağlar.

22. value Özelliği: value özelliği, bir form elemanının değerini belirtir. Örneğin, bir input alanının veya select'in seçili değerini belirlemek için value özelliğini kullanabilirsiniz.

Örneğin, JSX'de bir input alanının value özelliğini kullanmak:

  
//jsx

function MyComponent() {
  const inputValue = 'Örnek değer';

  return <input type="text" value={inputValue} />;
}

Bu örnekte, value özelliği inputValue değişkeninin değerini input alanına atar.

23. <select> Etiketi: <select> etiketi, bir açılır liste (dropdown) oluşturur ve kullanıcının seçim yapmasına olanak tanır. <option> etiketleriyle birlikte kullanılır.

Örneğin, JSX'de <select> etiketini ve <option> etiketlerini kullanmak:

  
//jsx

function MyComponent() {
  const selectedOption = 'option2';

  return (
    <select value={selectedOption}>
      <option value="option1">Seçenek 1</option>
      <option value="option2">Seçenek 2</option>
      <option value="option3">Seçenek 3</option>
    </select>
  );
}

Bu örnekte, her <option> etiketi, value özelliği aracılığıyla bir değeri temsil eder. Seçilen seçenek, <select> etiketininvalue özelliği ile ilişkilendirilir ve selectedOption değişkenine göre başlangıçta "Seçenek 2" olarak ayarlanır. Bu şekilde, <option> etiketlerini kullanarak kullanıcının seçenekler arasından bir seçim yapmasını sağlayabilir ve seçimin değerini <select> etiketinin value özelliği ile alabilirsiniz.

JSX'de onchange nasıl kullanılır

onChange olayı, kullanıcının bir form elemanının değerini değiştirdiğinde tetiklenen bir olaydır. JSX içinde onChange olayını kullanarak kullanıcının girişini yakalayabilir ve bu olaya bir işlev atayabilirsiniz.

Örneğin, JSX'de <input> alanında onChange olayını kullanarak kullanıcının girişini yakalamak:

//jsx

function MyComponent() {
  const handleChange = (event) => {
    const value = event.target.value;
    console.log('Değer değişti:', value);
  };

  return <input type="text" onChange={handleChange} />;
}

Bu örnekte, <input> alanında herhangi bir değer değişikliği olduğunda onChange olayı tetiklenir ve handleChange adlı işlev çağrılır. event.target.value kullanarak kullanıcının girdiği değeri alabilir ve işlev içinde kullanabilirsiniz.

onChange olayı, <input> alanı için sadece metin girişiyle sınırlı değildir. Checkbox, radio düğmeleri veya açılır listeler gibi diğer form elemanları için de kullanılabilir.

Örneğin, JSX'de bir checkbox için onChange olayını kullanmak:

  
//jsx

function MyComponent() {
  const handleCheckboxChange = (event) => {
    const isChecked = event.target.checked;
    console.log('Checkbox durumu değişti:', isChecked);
  };

  return <input type="checkbox" onChange={handleCheckboxChange} />;
}

Bu örnekte, checkbox'un durumu değiştiğinde onChange olayı tetiklenir ve handleCheckboxChange adlı işlev çağrılır. event.target.checked ile checkbox'un seçili durumunu alabilirsiniz.

onChange olayı, form elemanlarının değerlerini yakalamak ve kullanıcının girişini kontrol etmek için kullanılan önemli bir JSX olayıdır. Bu olayı kullanarak kullanıcının girdilerine anlık tepki verebilir ve form verilerini yönetebilirsiniz.

JSX, React uygulamalarını oluştururken kullanılan güçlü bir araçtır. HTML benzeri sözdizimi ve JavaScript ifadelerini içinde barındırabilme yeteneği sayesinde React bileşenlerini daha esnek, dinamik ve okunabilir hale getirir. JSX, React projelerinde yaygın olarak kullanılan bir standart haline gelmiştir.

map Döngü kullanan bir örnek:

  

import React from 'react';

const MyComponent = () => {
  const names = ['Alice', 'Bob', 'Charlie', 'Dave'];

  return (
    <div>
      <h1>İsimler</h1>
      <ul>
        {names.map((name, index) => (
          <li key={index}>{name}</li>
        ))}
      </ul>
    </div>
  );
};


export default MyComponent;

Bu örnekte, names dizisi içindeki her bir öğe için bir <li> öğesi oluşturuluyor. map yöntemi, names dizisindeki her bir öğe üzerinde dönerek yeni bir dizi oluşturuyor. Her bir öğe için <li> öğesi oluşturulurken, key prop'u da index değeri olarak atanıyor. Bu, React'in her bir öğeyi benzersiz bir şekilde tanımasına yardımcı olur.

Bu örnekte, <h1> öğesi altında oluşturulan bir liste (<ul>) bulunuyor. names.map yöntemiyle oluşturulan <li> öğeleri, listeye ekleniyor. Böylece, names dizisindeki her bir öğe, bir liste öğesi olarak görüntüleniyor.

Bu kod parçasını bir React projesinde kullanabilir ve MyComponent bileşenini başka bir bileşen içinde çağırabilirsiniz

JavaScript İfadelerini JSX İçinde Nasıl Kullanır

JSX içerisinde JavaScript ifadelerini kullanmak için süslü parantezleri ({}) kullanabilirsiniz. JSX içinde süslü parantezlerin içine yerleştirdiğiniz herhangi bir JavaScript ifadesi, o ifadenin değerini döndürecektir. Bu sayede JSX içinde dinamik içerikler oluşturabilirsiniz.

Aşağıda basit bir örnek verilmiştir:

  

function MyComponent() {
  const name = 'John Doe';
  const age = 30;

  return (
    <div>
      <h1>{name}</h1>
      <p>{age} yaşında</p>
      <p>{age >= 18 ? 'Ehliyet alabilir' : 'Ehliyet alamaz'}</p>
    </div>
  );
}

Yukarıdaki örnekte, name ve age değişkenleri JSX içinde süslü parantezlerin içine yerleştirilerek kullanılmıştır. name değişkeni <h1> içinde doğrudan yazılmış, age değişkeni ise {age} yaşında ifadesi ile kullanılmıştır.

Ayrıca, üçlü ifade (condition ? expr1 : expr2) kullanarak koşullu ifadeleri de JSX içinde kullanabilirsiniz. Yukarıdaki örnekte, {age >= 18 ? 'Ehliyet alabilir' : 'Ehliyet alamaz'} ifadesi, age değişkeninin değerine bağlı olarak farklı metinleri döndürecektir.

Bunun yanı sıra, JSX içinde JavaScript ifadeleri içinde işlemler, fonksiyon çağrıları, döngüler gibi diğer JavaScript kod yapılarını da kullanabilirsiniz. JSX içinde JavaScript ifadelerini kullanmak için dikkat etmeniz gereken tek şey, süslü parantezlerin içinde geçerli bir JavaScript ifadesi olmasıdır.

jsx içine if ifadesi nasıl kullanılır

JSX içinde if ifadesini kullanmak yerine, genellikle koşullu ifadelerin (conditional expressions) veya koşullu renderlemenin (conditional rendering) kullanılması tercih edilir. JSX, JavaScript ifadelerini kullanmanıza izin verdiği için, bu ifadeleri kullanarak dinamik içerikler oluşturabilirsiniz.

Aşağıda, JSX içinde koşullu ifadelerin nasıl kullanılabileceğiyle ilgili örnekler bulunmaktadır:

Ternary Operatörü:

function MyComponent() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <p>Giriş yapıldı</p> : <p>Giriş yapılmadı</p>}
    </div>
  );
}

Yukarıdaki örnekte, isLoggedIn adlı bir değişken kullanılarak koşullu bir ifade oluşturulmuştur. Eğer isLoggedIn true ise <p>Giriş yapıldı</p> döner, aksi takdirde <p>Giriş yapılmadı</p> döner.

Short-circuit İfadesi (Logical && Operator):

function MyComponent() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn && <p>Giriş yapıldı</p>}
    </div>
  );
}

Yukarıdaki örnekte, isLoggedIn değişkeni true ise <p>Giriş yapıldı<</p> döner. isLoggedIn false ise, <p>Giriş yapıldı</p> bileşeni hiç oluşturulmaz.

If-Else İfadesi (Dışarıda):

  

function MyComponent() {
  const isLoggedIn = true;

  let content;
  if (isLoggedIn) {
    content = <p>Giriş yapıldı</p>;
  } else {
    content = <p>Giriş yapılmadı</p>;
  }

  return (
    <div>
      {content}
    </div>
  );
}

Yukarıdaki örnekte, isLoggedIn değişkenine bağlı olarak farklı bir JSX içeriği oluşturulur ve content adlı bir değişkene atanır. Ardından, content değişkeni JSX içinde kullanılır.

Bu yöntemlerle JSX içinde koşullu ifadeler oluşturabilirsiniz. JSX, JavaScript ifadelerinin kullanımına izin verdiği için, koşullu ifadeleri kullanarak istediğiniz gibi dinamik içerikler oluşturabilirsiniz.