Bu sabah kalktığımda, buraya geçirdiğimiz eski verilerin çoğunun geçerliliğini yitirmiş olduklarının fazlasıyla farkındaydım. Bu sebeple görece daha güncel bir konuda bir şeyler söylemek istedim; React. Başlanıcak onlarca farklı nokta yok, sıralamalara da her zaman güvenemiyorum. Bu yüzden React ın yapısal olarak en belirgin parçalarından biri olan Component i biraz açalım.
Component yani bütünü oluşturan bileşen yaklaşımı uzun yıllardır burada, özellikle web sitelerinde. Bu bileşenler Asp.net, Php, Angular vb. diğer üretim tesislerinde de benzer şekilde mevcut. En iyisini düşünmeye çok gerek yok, projeye ve çalışan insanlara en uygununu seçmek yeter. Hepsi 2 senede bir yeni özellikler ekliyor ya da evrim geçiriyor zaten. Bence en iyisi React (:
Detayını çok düşünmeden önce temel olarak şunları söylemeliyim:
React projesi ilk oluşturduğunuzda, index.html içerisinden çağırılan bir index.js ile çalıştırılır. Bu index.js içerisinde de ana bileşen olan App.js çağırılır. Bu ekstra katman sıkça ihtiyaç duyacağınız bir yapıdır. Bu yüzden başta sorgulamayın.
App.js ise bir jsx dosyası aslında, içinde hem javascript kodu var hem de ekrana çıkartacağınız html öğelerini koymaya da burada başlıyorsunuz, index.html deki ana hatları saymazsak. Angular da bu html ve onu dinamik hale getiren kod ayrı sayfalarda yer alıyor, hiç sevemedim. Aynı yerde olmaları ve jsx bence baya güzel. Angular Google insanlarından çıkma diye demiyorum, React da Facebook dan gelme.
Örnekler, React Hooks a geçmemiş bir yapıdalar (: Ama geçtiyseniz farkı rahatlıkla anlarsınız diye umuyorum. Başka örnekler koyarsam, Hooks sevici fonksiyonellikle olmaları muhtemel ya da değil bilmiyorum, gelecek bir anlamda belirsiz.
Bu oluşturuduğumuz ufak bir Component:
import React, { Component } from 'react';
import './Header.css';
class Header extends Component {
render() {
return (
<header></header>
);
}
}
export default Header;
Bunu ana bileşen (Component) App.js, burada da yukarıda oluşturduğumuz Header bileşenini çağırıp, kullanıyoruz. Import işlemleri sırasında, js uzantılı olan dosyaları, uzantıları yazmadan çağırabilirsiniz.
import React, { Component } from 'react';
import './App.css';
import Header from './Header';
class App extends Component {
render() {
return (
<div className="App">
<Header />
</div>
);
}
}
export default App;
Görüldüğü gibi oluşturduğunuz bileşeni çağırma işlemi, sıradan bir html öğesini yerleştirmekle aynı şekilde gerçekleşiyor. Hooks a kadar React yazarken iki tip Component ile işlem yapabiliyordunuz, ikisinin de ufak tefek eksileri artıları var; Sınıf ve fonksiyonel bileşenler. Ama artık ikisi ile yapılan tüm işlemleri biraz farklı da olsa, fonksiyonel bileşenler ile yapabiliyorsunuz, bu yapıya izin veren oraya buraya atlayan, yer değiştiren, tekrar kullanılan kod parçalarına da Hooks diyip geçiyorlar.