React JSX Nedir? React JSX Kullanımı

Merhaba arkadaşlar, bugünki yazımda sizlere “React JSX nedir?” ve “React JSX Kullanımı” konularını anlatmaya çalışacağım. React’te yazmaya başlamadan önce JSX yapısını anlamak ve öğrenmek oldukça önemlidir. Hadi başlayalım!

React JSX Nedir?

JSX (JavaScript XML) adı verilen React için özel ve geçerli bir söz dizimi uzantısıdır. Normalde frontend ile ilgili projelerde HTML, CSS ve JavaScript kodunu ayrı dosyalarda tutarız. Ancak React’te bu biraz farklı çalışır.

React projelerinde, ayrı HTML dosyaları oluşturmuyoruz çünkü JSX, ileriki örneklerde göreceğiniz gibi HTML ve JavaScript’i aynı dosyada birleştirerek yazmamıza izin veriyor. Bununla birlikte, CSS’nizi başka bir dosyada tutabilirsiniz.

Başlangıçta, JSX biraz tuhaf görünebilir. Ama merak etmeyin, çok hızlı alışacaksınız.

React bileşenlerinin render fonksiyonuna sahip olduğunu biliyoruz. Render fonksiyonu, bir React bileşeninin HTML çıktısını belirtir. JSX dediğimiz yapı (JavaScript Extension), HTML gibi görünen JavaScript kodu yazmamızı sağlayan bir React uzantısıdır. Başka bir deyişle, JSX, JavaScript/React kodunun bir arada kullanılabilmesi için ECMAScript’i genişleten ve HTML benzeri bir sözdizimine olanak tanıyan bir uzantıdır. Bu sözdizimi, ön işleyiciler (örneğin, babel gibi transpiler lar) tarafından HTML benzeri sözdizimini, bir JavaScript motorunun ayrıştırabileceği standart JavaScript nesnelerine dönüştürmek için kullanılır.

JSX, JavaScript kodunu yazdığınız dosyanın içinde HTML/XML benzeri yapıları (örneğin, DOM benzeri ağaç yapılarını) yazmanıza olanak sağlar ve ön işleyici bu ifadeleri gerçek JavaScript koduna dönüştürür. XML/HTML gibi, JSX etiketlerinin bir tag adı, attribute lari ve child lari vardır. HTML ve JavaScript bilgilerinizin yetersiz olduğunu düşünüyorsanız aşağıdaki linklerden daha fazla bilgi edinebilirsiniz.

HTML Nedir? Ne İşe Yarar? Html Sayfası Oluşturma

JavaScript Nedir? JavaScript Ne işe Yarar?

Evet, bir örnek ile devam edelim.

Burada, JSX sözdizimini JSX dosyasında yazacağız ve ön işleyici (babel) tarafından dönüştürülen karşılık gelen JavaScript kodunu göreceğiz.

JSX Kodu

<div>Hello Mehsatek</div>

<div>Hello Mehsatek</div>

(Siz React JSX’te bu kodu yazıyorsunuz)

Buna karşılık gelen çıktı:

React.createElement("div", null, "Hello Mehsatek ");

React.createElement("div", null, "Hello Mehsatek ");

(JSX yapısı onu bu şekilde yorumlayıp sayfanıza işliyor)

Yukarıdaki satır bir React elementi oluşturur ve içine üç argüman geçirir. İlk argüman, div elementinin adıdır, ikinci argüman, div etiketinde geçirilen attribute lardir ve son argüman ise geçtiğiniz içeriktir, yani “Hello Mehsatek “.

JSX Neden Kullanılır?

JSX, JavaScript’e dönüştürülürken optimizasyon yaparak normal JavaScript’ten daha hızlıdır.
JSX, React’te HTML yazmamıza izin verir.
JSX, React’te HTML yazmayı ve eklemeyi kolaylaştırır.
HTML ve mantığı ayrı dosyalara ayırarak teknolojileri ayırmak yerine, React componentlerini kullanır. Componentleri daha sonra detaylı bir şekilde öğreneceğiz.
Bu yazım tipi güvenlidir ve çoğu hata derleme zamanında bulunabilir.
Şablon oluşturmayı kolaylaştırır.

NOT: JSX kullanmanıza gerek yoktur, ancak JSX, React uygulamaları yazmayı kolaylaştırır.

JSX’de İç İçe Geçmiş Elementler

Birden fazla element kullanmak için, onları bir konteyner elementiyle sarmalamanız gerekir. Burada, içinde üç iç içe geçmiş elemente sahip bir div kullanıyoruz.

import React from "react";
const App = () => {
return (
<div>
<h1>Mehsatek</h1>
<h2>React JSX nedir?</h2>
<p>Bu web sitesinde React'i çok iyi şekilde öğrenebilirsiniz</p>
</div>
);
};
export default App;

import React from "react";

const App = () => {

return (

<div>

<h1>Mehsatek</h1>

<h2>React JSX nedir?</h2>

<p>Bu web sitesinde React'i çok iyi şekilde öğrenebilirsiniz</p>

</div>

);

};

export default App;

Çıktı:

JSX Attributes

JSX, HTML elementlerinde olduğu gibi attributlerı kullanır. JSX, HTML’deki standart adlandırma kurallarının yerine, attributler için camelcase adlandırma kurallarını kullanır. Örneğin, HTML’deki class JSX’te className olarak kullanılır çünkü class, JavaScript’te rezerve edilmiş bir anahtar kelimedir. Yine JSX’te tabindex – “tabIndex” şeklinde, onclick – “onClick” şeklinde yazılır.

JSX’de kendi özel attribute larımızı da kullanabiliriz. Özel Attribute lar için “data-“ ön ekini kullanmamız gerekmektedir. Aşağıdaki örnekte, <p> etiketi için data-demoAttribute adında bir özel attribute kullandım.

import React from "react";
const App = () => {
return (
<div>
<h1>Mehsatek</h1>
<h2>React JSX nedir?</h2>
<p data-demoAttribute="demo">Bu web sitesinde React'i çok iyi öğrenebilirsiniz</p>
</div>
);
};
export default App;

import React from "react";

const App = () => {

return (

<div>

<h1>Mehsatek</h1>

<h2>React JSX nedir?</h2>

<p data-demoAttribute="demo">Bu web sitesinde React'i çok iyi öğrenebilirsiniz</p>

</div>

);

};

export default App;

JSX’de attribute değerlerini iki şekilde belirtebiliriz:

1. Dize Sabitleri Olarak: Attribute değerlerini çift tırnak içinde belirtebiliriz.

import React from "react";
const App = () => {
return (
<div>
<h1>Mehsatek</h1>
<h2 className="hello">React JSX nedir?</h2>
<p data-demoAttribute="demo">Bu web sitesinde React'i çok iyi şekilde öğrenebilirsiniz</p>
</div>
);
};
export default App;

import React from "react";

const App = () => {

return (

<div>

<h1>Mehsatek</h1>

<h2 className="hello">React JSX nedir?</h2>

<p data-demoAttribute="demo">Bu web sitesinde React'i çok iyi şekilde öğrenebilirsiniz</p>

</div>

);

};

export default App;

Burada <h2> için hello adında bir class belirledik. Ve bunu tırnak içinde tanımladık.

2. İfadeler Olarak: Attribute değerlerini süslü parantezler { } kullanarak ifadeler olarak belirtebiliriz.

import React from "react";
const App = () => {
let title = "hello"
return (
<div>
<h1>Mehsatek</h1>
<h2 className={title}>React JSX nedir?</h2>
<p data-demoAttribute="demo">Bu web sitesinde React'i çok iyi şekilde öğrenebilirsiniz</p>
</div>
);
};
export default App;

import React from "react";

const App = () => {

let title = "hello"

return (

<div>

<h1>Mehsatek</h1>

<h2 className={title}>React JSX nedir?</h2>

<p data-demoAttribute="demo">Bu web sitesinde React'i çok iyi şekilde öğrenebilirsiniz</p>

</div>

);

};

export default App;

Burada hello class’ımızı yukarıda JavaScript değişkeni olarak tanımladık ve <h2> tagı için süslü parantezler {} içinde attribute olarak kullandık.

JSX Yorum Satırları

JSX, JSX ifadeleri gibi süslü parantezler {} içine alınmış /* ile başlayan ve */ ile biten yorumları kullanmamıza izin verir. Aşağıdaki örnek, JSX içinde nasıl yorum kullanılacağını göstermektedir.

const App = () => {
let title = "hello"
return (
<div>
<h1>Mehsatek</h1>
{/* <h2  className = {title}>React JSX nedir?</h2> */}
<p data-demoAttribute="demo">Bu web sitesinde React'i çok iyi şekilde öğrenebilirsiniz</p>
</div>
);
};
export default App;

const App = () => {

let title = "hello"

return (

<div>

<h1>Mehsatek</h1>

{/* <h2 className = {title}>React JSX nedir?</h2> */}

<p data-demoAttribute="demo">Bu web sitesinde React'i çok iyi şekilde öğrenebilirsiniz</p>

</div>

);

};

export default App;

Yukardaki örnekte <h2> tagımızın olduğu satırı yoruma aldık.

Ve artık “React JSX nedir?” yazısını çıktımızda göremiyoruz. Aşağıdaki çıktı resmini inceleyiniz lütfen.

Çıktı:

JSX CSS (Stil Verme)

React her zaman iç içe stil kullanımını önerir. İç içe stil kullanmak için camelCase sözdizimini kullanmanız gerekmektedir. Bununla birlikte en çok tercih edilen style yöntemi her component için aynı isimle bir style dosyası açmaktır.

Örneğin Footer.js adında bir componentimiz varsa, Footer.css adında bir CSS dosyası oluşturmalı ve Footer componentine ait tüm CSS’leri buraya yazmalıyız.

Böylece ilgili componentiniz için yazacağınız tüm css kodlarını bir yerde toplamış olursunuz. Yeniden bulmak ve yönetmek oldukça kolay olur.

Aşağıdaki örnek, bir elemente iç içe nasıl stil verileceğini göstermektedir.

import React from "react";
const App = () => {
const title = {
fontSize: 80,
fontFamily: "Courier",
color: "#003300",
};
return (
<div>
<h1 style={title}>www.mehsatek.com</h1>
</div>
);
};
export default App;

import React from "react";

const App = () => {

const title = {

fontSize: 80,

fontFamily: "Courier",

color: "#003300",

};

return (

<div>

<h1 style={title}>www.mehsatek.com</h1>

</div>

);

};

export default App;

Bu örnekte JavaScripte söz dizimi ile title adında bir değişken tanımladık. Daha sonra bu değişkene CSS kodları yazdık. En sonunda da bu değişkeni süslü parentezler ile h1 tagımıza style attribute olarak atadık.

Son durumda çıktımız aşağıdaki gibi oldu:

React If-Else ve Ternary Kullanımı

If-else ifadelerini JavaScript olarak yazıp, bunu JSX’te kullanmak zahmetli ve karmaşık olabilir. JSX ifadelerinde if-else ifadelerini kullanmak mümkün değildir. Bunun yerine, koşullu (ternary) ifadeleri kullanabilirsiniz. Aşağıdaki örnekte her iki kullanımı görebilirsiniz.

1 (JavaScript ifadesi olarak if-else yazmak ve değişkeni kullanmak)

import React from "react";
const App = () => {
const i = 5;
let text = "True!";
if (i < 10) {
text = "False!";
}
return (
<div>
<h1>{text}</h1>
</div>
);
};
export default App;

import React from "react";

const App = () => {

const i = 5;

let text = "True!";

if (i < 10) {

text = "False!";

}

return (

<div>

</div>

);

};

export default App;

Çıktı:

2 Ternary ifadesi olarak if-else yazmak.

import React from "react";
const App = () => {
const i = 5;
return (
<div>
<h1>{i === 1 ? "True!" : "False!"}</h1>
</div>
);
};
export default App;

import React from "react";

const App = () => {

const i = 5;

return (

<div>

<h1>{i === 1 ? "True!" : "False!"}</h1>

</div>

);

};

export default App;

Çıktı:

Umarım “React JSX Nedir? React JSX Kullanımı” başlıklı yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

Node.js Nedir? Node.js Kurulumu Nasıl Yapılır?

Npm Nedir? Npm ile Paket Kurulumu Nasıl Yapılır?

Kaynaklar

react.dev

w3schools.com

React JSX Nedir? React JSX Kullanımı

React JSX Nedir?

JSX Neden Kullanılır?

JSX’de İç İçe Geçmiş Elementler

JSX Attributes

JSX Yorum Satırları

JSX CSS (Stil Verme)

React If-Else ve Ternary Kullanımı

Kaynaklar

Yazar Hakkında

Yorum Yazın

React JSX Nedir?

JSX Neden Kullanılır?

JSX’de İç İçe Geçmiş Elementler

JSX Attributes

JSX Yorum Satırları

JSX CSS (Stil Verme)

React If-Else ve Ternary Kullanımı

Kaynaklar

Benzer Yazılar

Yazar Hakkında

Yorum Yazın