JSX nedir?

JSX Template sözdizimi olarak tanımlanabilir ama arkasında javascript’in tüm gücünü bulundurmaktadır. React ile JSX kullanmak zorunda değilsiniz ama kullanmanızı öneririm.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

Üstteki JSX kodunu Babel.js ile compile ettiğimizde aşağıdaki gibi bir çıktı alınır. Yani JSX ne bir string objesidir nede bir HTML objesidir.

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

JSX içerisinde fonksiyonları çalıştırabilir ve gelen değerleri ekrana yazdırabilirsiniz.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

Daha fazla bilgi için aşağıdaki sayfaları okuyabilirsiniz.

https://reactjs.org/docs/introducing-jsx.html

https://reactjs.org/docs/jsx-in-depth.html