React Öğrenin
Kullanıcı Arayüzünü Tanımlama

JSX içinde Süslü Parantezlerle JavaScript

JSX , render etme mantığını ve içeriği aynı yerde tutarak, bir JavaScript dosyası içinde HTML benzeri işaretleme (markup) yazmanızı sağlar. Bazı durumlarda, o işaretlemenin içine biraz JavaScript mantığı eklemek veya dinamik bir özelliğe referans vermek isteyeceksiniz. Bu durumda, JSX içinde süslü parantezleri kullanarak, JavaScript’e bir pencere açabilirsiniz.

Bunları öğreneceksiniz

  • Tırnak işaretleriyle string nasıl gönderilir
  • Süslü parantezlerle JSX içinde bir JavaScript değişkenine nasıl referans verilir
  • Süslü parantezlerle JSX içinde bir JavaScript fonksiyonu nasıl çağırılır
  • Süslü parantezlerle JSX içinde bir JavaScript nesnesi nasıl kullanılır

Tırnak içerisinde string gönderilmesi

Bir string niteliğini JSX’e iletmek istediğinizde, onu tek veya çift tırnak içine alırsınız:

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

Burada, "https://i.imgur.com/7vQD0fPs.jpg" ve "Gregorio Y. Zara" string olarak iletildi.

Ancak src veya alt metnini dinamik olarak belirtmek isterseniz ne olur? " ve " yerine { ve } ile değiştirerek JavaScript’ten bir değer kullanabilirsiniz:

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

className="avatar" ifadesi, resmi yuvarlak hale getiren "avatar" CSS sınıf adını belirtirken, src={avatar} ifadesi, avatar adlı JavaScript değişkeninin değerini okuyan bir ifade olduğuna dikkat edin. Bunun nedeni, süslü parantezlerin işaretleme dilinde doğrudan JavaScript çalıştırmanıza olanak sağlamasıdır!

Süslü parantez kullanımı : JavaScript dünyasına bir pencere

JSX , JavaScript yazmanın özel bir yoludur. Bunun anlamı, JSX içinde süslü parantez { } kullanarak JavaScript kullanmanın mümkün olmasıdır. Aşağıdaki örnekte önce bir bilim adamı için bir isim olan name değişkeni tanımlanır ve daha sonra bu değişken, süslü parantezler kullanılarak <h1> etiketi içine gömülür.

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'nın Yapılacaklar Listesi</h1>
  );
}

name değerini ‘Gregorio Y. Zara’ yerine ‘Hedy Lamarr’ olarak değiştirmeyi deneyin. Liste başlığının nasıl değiştiğini görüyor musunuz?

formatDate() gibi fonksiyon çağrıları da dahil olmak üzere, herhangi bir JavaScript ifadesi süslü parantezler arasında çalışır.

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>{formatDate(today)} için yapılacaklar listesi</h1>
  );
}

Süslü parantez nerede kullanılır

JSX içinde yalnızca iki şekilde süslü parantez kullanabilirsiniz:

  1. JSX etiketi içinde doğrudan metin olarak kullanılır: <h1>{name}'s To Do List</h1> çalışır, ancak <{tag}>Gregorio Y. Zara'nın Görev Listesi</{tag}> çalışmaz.
  2. = işaretinden hemen sonra özellik olarak kullanılırsa, src={avatar} avatar değişkenini okurken, src="{avatar}" "{avatar}" stringine aktaracaktır.

Çift süslü parantez kullanımı: JSX’te CSS ve diğer objeler

Stringler, sayılar ve diğer JavaScript ifadelerine ek olarak, nesnelere bile JSX geçebilirsiniz. Objeler de { name: "Hedy Lamarr", inventions: 5 } gibi süslü parantezlerle ifade edilir. Bu nedenle, JSX içinde bir JS nesnesi geçmek için, objeyi başka bir çift süslü parantez içine almanız gerekir: person={{ name: "Hedy Lamarr", inventions: 5 }}.

JSX’de iç içe CSS tanımları için bunu görebilirsiniz. React, (çoğu durum için CSS sınıfları harika çalıştığından), size iç içe stiller kullanmanızı zorunlu tutmaz. Ancak bir iç içe stil gerektiğinde, nesneyi style özelliğine iletiyorsunuz:

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Görüntülü telefonu geliştir</li>
      <li>Havacılık derslerini hazırla</li>
      <li>Alkolle çalışan motor üzerinde çalış</li>
    </ul>
  );
}

backgroundColor ve color değerlerini değiştirmeyi deneyin.

Objeyi böyle yazdığınızda, onu gerçekten süslü parantezlerin içinde görebilirsiniz:

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

JSX içinde {{ ve }} gördüğünüzde, bunun sadece JSX süslü parantezleri içindeki bir nesne olduğunu bilin!

Tuzak

İç içe stil özellikleri camelCase kullanılarak yazılır. Örneğin, HTML’de <ul style="background-color: black"> yazımı bileşeninizde <ul style={{ backgroundColor: 'black' }}> şeklinde yazılır.

JavaScript objeleri ve süslü parantezlerle daha fazla eğlence

Çoklu ifadeleri bir nesne içinde toplayabilir ve JSX’in içindeki süslü parantezlerin içinde onlara referans verebilirsiniz:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'nın Yapılacakları</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Görüntülü telefonu geliştir</li>
        <li>Havacılık derslerini hazırla</li>
        <li>Alkolle çalışan motor üzerinde çalış</li>
      </ul>
    </div>
  );
}

Bu örnekte, person JavaScript nesnesi bir name string’i ve bir theme nesnesi içerir.

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

Bileşen, person değişkenindeki bu değerleri şu şekilde kullanabilir:

<div style={person.theme}>
  <h1>{person.name}'nın Yapılacakları</h1>

JSX, JavaScript kullanarak verileri ve mantığı düzenlemenize izin verdiği için şablonlama dili olarak oldukça minimalisttir.

Özet

Artık JSX hakkında neredeyse her şeyi biliyorsunuz:

  • Tırnak içindeki JSX özellikleri string olarak aktarılır.
  • Süslü parantezler JavaScript mantığını ve değişkelerini markup içerisine yazmanıza olanak sağlar.
  • JSX etiket içeriği veya özellikleri = işaretinden hemen sonra kullanılabilirler..
  • {{ ve }} özel bir sözdizimi değil: JSX süslü parantezlerinin içine yerleştirilmiş bir JavaScript objesidir.

Bazı problemleri deneyin

Problem 1 / 3:
Hatayı Düzelt

Bu kod, Objects are not valid as a React child(Nesneler bir React alt öğesi olarak geçerli değildir) şeklinde bir hata veriyor:

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person}'nın Yapılacakları</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Görüntülü telefonu geliştir</li>
        <li>Havacılık derslerini hazırla</li>
        <li>Alkolle çalışan motor üzerinde çalış</li>
      </ul>
    </div>
  );
}

Sorunu bulabilir misin ?

PreviousJSX ile İşaretleme (Markup) Yazma
NextBileşenlere Prop'ları Aktarma