React'ta Bileşen Tabanlı Yaklaşıma Giriş
Bir web sitemiz olduğunu varsayalım. Bu sitede bazı blokları ayırt edebiliriz: başlık, içerik, kenar çubuğu, alt bilgi ve benzeri. Her blok daha küçük alt bloklara ayrılabilir. Örneğin, başlıkta genellikle bir logo, menü, iletişim bloğu ve benzeri öğeler bulunur.
React'ta her böyle bloğa bileşen denir. Her bileşen, içinde daha küçük bileşenler barındırabilir, onlar da sırayla daha da küçük bileşenler barındırabilir ve bu böyle devam eder.
React'ta her bileşen, src klasöründe
bulunan bir ES6 modülüne karşılık gelir.
Modül dosyasının adı büyük harfle yazılır
ve bu dosyanın kodunda bulunan fonksiyonun
adıyla eşleşmelidir.
Örneğin, App.js adlı bir dosya
içinde App fonksiyonunu barındırmalıdır:
import React from 'react';
function App() {
// bileşen kodu
}
export default App;
Bileşenlerden biri ana bileşen olmalıdır
- diğer bileşenlerin eklendiği bileşen.
React'ta varsayılan olarak bu bileşen
App bileşenidir.
Diğer bileşenler bu bileşene bağlanacaktır.
Bunun nasıl yapıldığını - öğreticinin
ilerleyen bölümlerinde inceleyeceğiz.