Merhaba Arkadaşlar !
Bu yazımızda react komponent yapısını ve hiyerarşisini temel olarak anlatmaya çalışacağım.
Komponentleri bir puzzle‘ın parçaları gibi düşünebiliriz. Sitemizin ana sayfasını ise bu puzzle parçalarından meydana gelmiş bir tablo gibi düşünebiliriz. Yani React komponentleri teker teker birleştirir. Yani mesela header komponenti, body komponenti, ve footer komponenti olduğunu varsayalım. Bu komponentler birleşince bir site ortaya çıkacaktır. Aşağıdaki resimde gördüğünüz gibi komponentlere ayrılmış bir sayfa görüyorsunuz. Turuncu çizgi ana komponentimiz, CommentForm ve CommentList alt komponentleri temsil ediyor. Comment komponenti ise CommentList’e ait alt komponenti temsil ediyor.
Yukardaki yapıyı hiyerarşik olarak gösterelim.
İki çeşit komponent yapısı vardır. Class komponent ve Fonksiyonel komponent Fonksiyonel komponentler, verileri ve bir render fonksiyonu içeren sadece bir JavaScript fonksiyonudur. Class komponentleri ise, React.Component sınıfının bir uzantısıdır ve state, lifecycle metodları gibi daha gelişmiş özelliklere sahiptir.
React komponentleri, birbirlerine iç içe geçebilir ve böylece birbirlerine bağlı olarak çalışabilirler. Bu, React komponentlerinin bir hiyerarşisi oluşmasına ve daha büyük bir bütün oluşmasına olanak tanır. React komponentleri, bir parent component (ana komponent) tarafından içeriye doğru bir şekilde iç içe geçebilir ve child components (alt komponentler) olarak tanımlanabilir.
Örnek olarak, bir “header” komponenti, bir “navigation” komponentini ve bir “logo” komponentini içerebilir ve bu komponentler parent component olarak “header” komponenti tarafından yönetilir.
<Header>
<Navigation />
<Logo />
</Header>Bu hiyerarşik yapı, React uygulamalarını daha bütünlüklü ve düzenli hale getirir ve aynı zamanda komponentlerin tekrar kullanılmasını ve bakımını kolaylaştırır.
Sonuç olarak, React komponentleri, birbirlerine iç içe geçerek bir hiyerarşi oluşturabilir ve bu hiyerarşi, React uygulamalarını daha bütünlüklü ve düzenli hale getirir.
