React, JSX nedir ?

React’ı düşündüğümüz zaman ilk akla gelenlerden biri JSX olur. JSX, React için kod yazımını kolaylaştıran bir yazım biçimidir.

const multiply = (firstNumber, secondNumber) => {
 return firstNumber * secondNumber
}

const element = <p> The multiply result is {multiply(2,2)} </p>

const person = { 
firstName: "Enis" , lastName: "Gültekin"
}

const element = <p> My first name is {person.firstName} and last name is {person.lastName}</p>

Yukarıdaki örnekteki gibi JSX, elementlerin içine süslü parantezler ( ) içerisinde herhangi bir variable yazmamızı veya bir variable’ı farklı şekilde döndüren fonksiyonları yazmamızı sağlar. Bu bize componentlere verilen propsları direkt elementlerin içinde kullanabilmemiz gibi kolaylıklar sağlar.

const element = <img src={user.profilePhoto}></img>

JSX ayrıca herhangi bir attribute için de kullanılabilir.

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


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

JSX, kodları direkt okunamaz ve bunun için bir compilera ihtiyaç duyar. Burada ise devreye Babel girer. Babel JSX kodlarını 2. örnekteki gibi React.createElement() çağrısına dönüştürür. Yukarıdaki iki örnekte aynı işlevi görür. React.createElement() aşağıdaki basitlendirilmiş şekilde verilen objeyi oluşturur ve onu DOM’ a işler. Bu şekilde oluşturulan her objeye “React Elementleri” adı verilir.

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};