JSX

JSX'e giriş

“React.js” çerçevesine sahip bir web uygulaması uyguladıysanız, React.js bileşenlerini yazmak için kullanılan sözdiziminin diğer Javascript kodunuzdan biraz farklı göründüğünü fark etmiş olabilirsiniz. Çoğunlukla aynı olmasına rağmen, React bileşenleri özel parantezler, sol ve sağ köşeli parantezler ile tanımlanır. Tıpkı “Genişletilebilir İşaretleme Dili” olan XML sözdizimine benziyorlar. React.js'de bu sözdizimine benzer şekilde "Javascript XML" anlamına gelen "JSX" denir.

Bu sözdiziminin temel amacı, React kodu yazmayı basitleştirmektir. JSX kodu JVM'ler tarafından yorumlanamaz, bu nedenle kullanımdan önce gerçek Javascript koduna derlenmesi gerekir - tipik olarak Babel veya Webpack gibi paketleyiciler tarafından yapılan bir görev.

Muhtemelen hiç yazmadığınız React kodu

Bu, JSX kodunuzdan oluşturulan bu tür "gerçek" React.js bileşenlerini hiç yazmamış olmanızın çok muhtemel olduğu anlamına gelir. Ancak endişelenmeyin, bu çok fazla güçlük çekmeden kolayca yapılabilir. Aslında, JSX kullanmadan eksiksiz bir React web uygulaması bile yazabilirsiniz. Aşağıdaki kod parçacığı, yalnızca Javascript içeren gerçek bir React.js bileşeninin nasıl göründüğünü gösterir.

// A common JSX-element.

<Header title="Lorem ipsum" variant="primary">
  I am a subtitle
</Header>

//
// ...
//

// After the compilation step:

React.createElement(
  Header,
  {title: 'Lorem ipsum', variant: "primary"},
  'I am a subtitle'
);

Bunu herhangi bir yazılım yüklemeden tarayıcınızda bile deneyebilirsiniz! Ekteki bağlantıyı kullanmak için bu sayfanın sonuna kaydırmanız yeterlidir.

Kodunuzu basitleştirmek için JSX kullanma

Gördüğünüz gibi, JSX sözdiziminin ana avantajı, XML benzeri sözdizimi, kodun etki alanının açık bir göstergesini sağladığından, UI ile ilgili kodunuzu daha kolay yazmak ve uygulamanızın diğer bölümlerinden ayırt etmeyi kolaylaştırmaktır.

JSX'in bir başka büyük özelliği de derleme adımından sonra bir ifade haline gelmesidir. Bu nedenle onu if-else-ifadelerinde kullanabilir, hatta sonucunu bir değişkende saklayabilirsiniz. Ve React.js bileşenleri, ifadeleri çocuk olarak içerebildiğinden, yüksek oranda şekillendirilebilir kullanıcı arayüzü kodu yazabilirsiniz!

Her JSX dosyası için varsayılan bir içe aktarma

Çeşitli öğreticilerdeki, kılavuzlardaki ve büyük olasılıkla kendi kodunuzdaki her JSX dosyasının, bu içe aktarılan değişkeni hiçbir zaman doğrudan çağırmasanız bile, React kitaplığından varsayılan içe aktarmaya sahip olduğunu fark etmiş olabilirsiniz. Bunun nedeni, daha önce kod örneğinde gördüğünüz gibi, derleme adımından sonra her JSX ifadesinin bir "React.createElement" çağrısı haline gelmesidir. Bu nedenle, her dosyanın kapsamına dahil edilen varsayılan içe aktarmadan “React” değişkenine sahip olmak gerekir.

HTML'ye benziyor ama değil

JSX sözdiziminde kodlama yaparken önemli bir kısıtlama, bileşeninizin adının gösterimidir. Paketleyicinin bileşenlerinizi doğru bir şekilde tanımlaması için, sözdizimi aynı göründüğünden, standart HTML etiketlerinden benzersiz olmaları gerekir.

// 1. A valid example.
function Header(props){
  return (
    <div>
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
}

// 2. Invalid, only uppercase for React elements.
function header(props){
  return (
    // ...
  );
}

// 3. Invalid, only uppercase 
// when calling React components.
function Page(props){
  // Notice the invalid 'layout':
  return (
    <div style={{ margin: 12 }}>
      <layout>{/* ... */}</layout/>
    </div>
  );
}

Bu nedenle, JSX öğelerini her zaman cümle içinde kodlamak bir gerekliliktir; bu, ilk harfin büyük olması gerektiği anlamına gelir.

TypeScript varyantı

Birçok projenin, React.js bileşen dosyaları için dosya soneki olarak TSX'i de kullandığını fark etmiş olabilirsiniz. Bu, Typescript ile uyumlu olması için orijinal JSX'in bir uzantısıdır. TSX dosyaları, JSX gösterim bileşenleriyle birlikte TypeScript kodu yazmanıza olanak tanır.

sadece başlangıç

Bu makale, React bileşenlerini kodlamak için JSX'e basit bir giriş sağladı. Ana avantajı, bir web ortamında doğal hissettiren çok özlü bir sözdizimidir. Çok az kodla yüksek oranda şekillendirilebilir öğeler yazabilirsiniz; bu, şüphesiz React'in şu anki ünlü ve popüler durumunun kilit faktörlerinden biridir. Merak ediyorsanız, sitelerinde React ekibinin çok daha fazla ve mükemmel ayrıntılı kılavuzları var, bağlantılar bu sayfanın sonundaki ekte.