React JS Component Nedir
Hepinize merhaba dostlarım 😊. Yine yeni bir REACT JS makalesiyle karşınızdayım. Başlığı görünce aklınıza direkt olarak şu şekilde bir soru gelebilir
Component olarak HTML den farklı bir yapı vs falan mı acaba
Biraz o şekilde dostlarım. İçerisinde HTML kodlarını da barındırıyor yani korkulacak, endişe edilecek herhangi bir durum yok 😉.
O halde ben konuya yavaştan giriş yapayım. Siz de yapmanız gerekenleri biliyorsunuz 😊. Elinize çayınızı kahvenizi alın ve şu an sadece benim anlatacaklarıma odaklanın
Hazırsanız başlıyoruz 🙃
Component Nedir ?
Eveeeet geldik dostlarım makalemizin en önemli noktasına. Teorik bir anlatımdan uzak olarak size bunu elimden geldiğince özetlleyeceğim.
Dostlarım Component bizim React JS uygulamalarımızda son kullanıcıya gösterilen, projemizin durumuna göre işlevsellik kazandırılmış ve yine son kullanıcının görmesi için işlenen ve geri döndürülen, React JS nin de ana malzemesidir 😊.
Yani biz örnek vereyim Laravel üzerinde blade.php dosyaları ne ise React JS üzerinde de component de odur.
Şimdi gelelim bir diğer başlığımıza
Veriler Tutuluyor Mu ?
Bunu da şu şekilde açıklayabilirim dostlarım. Aslında bu başlığı sizin aklınızdan geçen bir soru niteliğinde oluşturdum.
Siz diyorsunuz ki biz örnek veriyoruz laravel üzerinde şu şekilde yapıyorduk diyorsunuz
@php
$name="MFSoftware";
@endphpşeklinde bir değişken oluşturup bunu o sayfa içerisinde kullanıyorduk. Bu şekilde bir kullanımı sorduğunuza eminim dostlarım
Cevabım tabiki de EVET 💯😊 olacaktır. Bunu makalenin sonunda ufak bir örnekle kod üzerinden anlatacağım.
Bu kısım da tamam ise dostlarım gelelim bir diğer kısma
Peki Çeşitlilik Var Mı ?
Evet dostlarım. Çeşitlilik olmazsa olmaz diyebilirim. Yani hem fonksiyon yapısında component varken hem de class yapısında component mevcuttur.
Şimdi şunu diyor olabilirsiniz dostlarım
Hocam bu ikisinin farkı nedir yani hangisini tavsiye edersiniz ?
Dostlarım burada sizin projenizdeki duruma göre hangisini kullanacağınız tamamen size kalmış. Ama ben yine de sizlerin aklında soru işareti kalmasın, konuyu net bir şekilde kavrayın diye olayı anlatacağım
Şimdi dostlarım yeri geliyor API üzerine istek atacağınız durumlar olabilir, lifecycle üzerinden işlemler yapacağınız durumlar, state erişimleri vs. gibi (bunlar ileriki konular) işlemler yapacağınız zamanlarda class yapısında olan componenti kullanabilirsiniz
Ama örnek veriyorum ufak bir uyarı ekranı, ekranda sadece ufak bir içerik gösterme gibi durumları yapacaksanız (neredeyse hiç işlem yokmuşçasına hareket edecekseniz) fonksiyon yapısında component kullanmanızı öneririm dostlarım
Bu kısma kadar component yapısını anlattım dostlarım. Gelin ufak bir fonksiyonel component oluşturalım ve burada sadece ufacık bir veri gösterelim (Veriyi değişkende tutacağız ha 😅)
import {useState} from "react";
const MyComponent = ()=>{
const [deger,setDeger] = useState("Ben React JS uygulamasının temel yapıtaşlarından olan biricik bir Componentim"); // değişkenimiz bu
return (
<div>
<h1>{deger}</h1>
</div>
)
}
export default MyComponent;şeklinde ufak bir component oluşturduk dostlarım. Ekran çıktısına baktığımızda da karşımıza gelecek olan sonuç
şeklinde bir çıktı bizi karşıladdı ve bingoooo 💯. Bütün işlemler başarılı dostlarım. Tüm anlatacaklarım bu kadar 😊
Eveeeet dostlarım bir makalenin daha sonuna geldik. Bu makalede elimden geldiğince dilim döndüğünce "React JS Component Nedir" konusundan elimden geldiğince dilim döndüğünce anlatmaya çalıştım. Umarım faydalı olmuşumdur. Konu başlarda biraz karmaşık veya zor gelebilir dostlarım anlıyorum. Bu süreçte sizlerden istediğim tek şey her zaman dediğim gibi "İstikrarlı ve Azimli olacaksınız, Bolca pratik yapacaksınız". Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır dostlarım 😊
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer