JSX Nedir? React.js'de JSX'i anlamak

Peki, HTML'ye çok benzeyen ama ondan farklı olan bu JSX nedir? React kullanarak uygulama yazmak için kesinlikle JSX'e ihtiyacımız var mı? Bunlar bazı önemli sorular ve şimdi cevaplayacağız.

JSX'e geçmeden önce, React Elements'in ne olduğunu anlayalım. Bunlar, herhangi bir React Uygulamasının ( Bileşenler DEĞİL ) en küçük yapı taşlarıdır . Temel olarak, herhangi bir React Bileşeni bir veya daha fazla React Elementinden oluşur.

JSX

• UI'nin nasıl görünmesi gerektiğini açıklar ve temelde React Elements üretir.
• Derlemeden sonra JSX ifadeleri, nihayetinde düz JS nesneleri için değerlendirilen normal JS işlevleri haline gelir. Bu nedenle, JSX ifadelerini if ​​ifadeleri, döngüler içinde kullanabiliriz, bunları fonksiyonlara argüman olarak geçirebilir ve bazı fonksiyonlardan geri döndürebiliriz.
• Artık JSX'in düz JavaScript'e HTML'den daha yakın olduğunu biliyoruz. Bu nedenle, etiketler için normal HTML nitelikleri yerine camelCase özellik adlandırma kuralını kullanıyoruz. Ör: className yerine sınıfına , htmlFor yerine ilişkin vb.
• {}JSX ifadesinin içinde bahsettiğimiz her şey düz JavaScript olarak değerlendirilecektir.

Yukarıdaki tüm noktaları akılda tutacak mı, şimdi bunların ne hakkında olduğunu görelim.

React Uygulamanızın içinde bazı bileşenlerde aşağıdaki kod parçasını yazdığınızı varsayalım:

const name = 'Amiya';
const desc = 'This is my first post!';

const element = (
  <>
      <h1 className="greeting">
        Hello, <span>{ name }</span>
      </h1>
    <p id="desc">Desc: {desc}</p>
  </>
);

Şimdi, uygulama derlendiğinde, Babel yukarıdaki kod parçasını şu şekilde parçalara ayırır:

const name = 'Amiya';
const desc = 'This is my first post!';

const element = React.createElement(
  React.Fragment,
  null,
  React.createElement(
    'h1',
    {
      className: 'greeting'
    },
    'Hello, ',
    React.createElement('span', null, name)
  ),
  React.createElement(
    'p',
    {
      id: 'desc'
    },
    'Desc: ',
    desc
  )
);

Ne React.createElement() yapar temelde eleman türü alır onunla ilişkili sahne ve argümanları ve getiri bize düz bir JavaScript nesnesi olarak söz konusu elementin çocuk.

İşlev tanımı React.createElement()şöyledir:

React.createElement(
  type,
  [props],
  [...children]
)

Dolayısıyla, React Uygulamamızda sahip olduğumuz kod parçası şu şekilde değerlendirilir:

const name = 'Amiya';
const desc = 'This is my first post!';

const element = {
  type: React.Fragment, 
  props: {
    children: [
      {
        type: "h1",
        props: {
          className: "greeting",
          children: [
            "Hello, ",
            {
              type: "span",
              props: { children: name }
            }
          ]
        },
      },
      {
        type: "p",
        props: { id: "desc", children: ["Desc: ", desc] },
      }
    ]
  }
}

Bu da bizi soruya getiriyor. React Uygulamaları yazmak için gerçekten JSX'e ihtiyacımız var mı? Cevap büyük bir HAYIR . Tek başına tepki vermek için JSX gerekmez. React.createElement()JSX'i her zaman kullanabilir ve yazmayabiliriz çünkü sonunda ona derlenir.

Ancak, çok fazla iç içe etiketiniz olduğunu veya karmaşık bir kullanıcı arayüzü oluşturduğunuzu hayal edin. JSX'in sunduğu basitliği mi yoksa kullanım karmaşıklığını mı tercih edersiniz React.createElement()? Ve JSX kullanmamanın bu kadar gerçek dünya faydası yoktur. Yani, sanırım cevap oldukça açık.