React.js JSX nedir, nasıl kullanılır?

React.js, kullanıcı arayüzü oluşturmak için kullanılan bir JavaScript kütüphanesidir. JSX (JavaScript XML), React.js’te kullanılan bir sözdizimidir ve JavaScript’e HTML benzeri bir yapı ekler. JSX, JavaScript ve HTML’i bir araya getirerek React bileşenlerinin oluşturulmasını kolaylaştırır. JSX, React uygulamalarında kullanılan temel yapı taşlarından biridir.

JSX HTML’den daha katıdır. <br /> gibi etiketleri kapatmanız gerekir. Bileşeniniz ayrıca birden fazla JSX etiketi döndüremez. Bunları bir <div>…</div> veya boş bir <>…</> sarmalayıcı gibi paylaşılan bir üst öğeye sarmanız gerekir:

Örnek bir JSX kullanımı:

import React from 'react';

// Bir React fonksiyonel bileşeni
const HelloMessage = (props) => {
  return <div>Hello, {props.name}!</div>;
}

// Yukarıdaki bileşeni kullanarak bir uygulama oluşturalım
const App = () => {
  const user = { name: 'John' };
  return (
    <div>
      <h1>Merhaba, React!</h1>
      <HelloMessage name={user.name} />
    </div>
  );
}

export default App;

Yukarıdaki örnekte, JSX, HTML benzeri etiketlerin (<div>, <h1>) ve JavaScript ifadelerinin ( {props.name}) bir arada kullanıldığı görülmektedir. JSX, React.createElement() gibi React tarafından sağlanan işlevleri çağırmak yerine daha okunaklı bir şekilde React bileşenlerini oluşturmamıza olanak tanır.

JSX, React uygulamalarının okunabilirliğini artırırken aynı zamanda geliştiricilere HTML benzeri bir sözdizimi kullanarak React bileşenlerini daha hızlı ve kolay bir şekilde oluşturma imkanı sağlar.

Share on Facebook

Tweet