JSX
JavaScript için bir syntax uzantısıdır. Kısaca aklınızda javascriptin içine html yazabilmenizi ve React elementleri üretmemizi sağlayan bir yazım şeklidir.
JSX olmayan yazım şekli;
const element = React.createElement(
'h1',{className: 'greeting'}, 'Hello, world!'
);JSX ile yazım şekli;
const element = (<h1 className="greeting">Hello, world! </h1>);
Örnek 2: JSX kullanımı
React yazmak için JSX’i kullanmak zorunda değilsiniz. Fakat kod yazarken okunabilirlik önemli bir faktördür. JSX in yazım şekli HTML i andırdığı için hem okunabilirlik hem de hızlı kod yazma anlamında daha kullanışlıdır. JSX yazmadan https://reactjs.org/docs/dom-elements.html isimli sayfayı incelemenizde yarar var. Bazı html taglarının property kısımlarında farklı yazım şekilleri vardır. Ör: class yerine className veya labellarda yazılan for yerine htmlFor yazmak gibi.
JSX’in çalışabilmesi bir javascript compilera(derleyici) ihtiyacınız var. Bu işlem için en popüler kullanılanı Babeldir.
Props
İnsanı component olarak düşünürseniz, insanlara verdiğiniz kartvizitler veya insanların birbirlerine verdikleri kartvizitler olarak düşünebilirsiniz. Tanım olarak; sabit verileri bir componentden başka bir componente veri aktarılmasını sağlayan verilerdir.
Propslar sabit veriler oldukları için sadece sayfa ilk yüklenişinde render edilirler. Sonrasında React bunların props olduğunu bildiği için render etmeyecek ve bu alana hiç dokunmayacaktır.
import React, { Component } from 'react';
import News from '../component/News';
const news = [
{
id: 1,
title: "React Öğreniyoruz",
description: "bu örnek props için yapılmıştır."
},{
id: 2,
title: "Props",
description: "Componentler arası veri aktarır."
},];
class Home extends Component {
render() {
return (
<div>
<News news={news} />
</div>
);
}
}
export default Home;Örnek 3: Props kullanımı. Home componentinden News componentine array objesi gönderimi.
Key
Döngülerde oluşan listelerde benzersiz bir key(anahtar) verilmesi gerekir. Key in sözlük anlamı aslında anahtar olsa da React’te tam olarak o anlamda kullanılmamaktadır. React; oluşan liste içerisindeki her bir elemanı benzersiz(unique) bir key ile işaretleyerek, listenin değişmesi durumunda içerisindeki elemanların hepsini tekrardan render etmiyor, bildiği ve değişen kısımları render ediyor.
import { Component } from "react";
class News extends Component {
render() {
return (
<div>
{this.props.news.map(news =>
<div key={news.id}>
{news.title}
<br />
{news.description}
</div>
)}
</div>
)
}
}
export default News;Örnek 4: örnek 3 de props gönderdiğimiz News componentinde key kullanımı.