Sıfırdan ileriye ReactJs serisinin yeni bir konusuna hoş geldiniz. Geçen konuda react nedir/tarihçesi, react dosyası nasıl açılır ve react yapısından bahsederek bir giriş yapmıştık. Bugün aslında React için çok kullanılan component ya da diğer adıyla bileşenin ne olduğunu öğreneceğiz.
Component Nedir ?
Component dediğimiz şey aslında bir programdaki her özellik için farklı dosyalar açarak kod yapısını azaltıp yönetimini kolaylaştırmaya yarar diyebiliriz. Mesela bir uygulama yapıyorsunuz bu uygulamayı tek dosyada yaptınız ve 1000 satır kod var diyelim. Bir gün bir özellik eklemeye, silmeye veya düzeltmeye çalışsanız hatta bir bug olsa o 1000 satır kodla bol şans size. Hem okunabilirlik hem de proje yönetimi çok zor olur. Bu yöntem yerine her özellik için bir sayfa mesela E-ticaret sitesi yapıyorsunuz bu sitede sepet için ayrı sayfa, ürünleri apiden çekmek için ayrı bir sayfa, normal ana sayfa için ayrı bir sayfa, apiden çekilen ürünleri siteye yansıtmak için ayrı bir sayfa vs. şeklinde proje yaptığınızı düşünün ve sepet kısmında bug oldu. Bu bug'un nerede ve nasıl düzenleteceğini çok daha rahat bulabilirsiniz eğer bug sepette ise basket.jsx veya sepet.jsx dosyasına bakacağız.
Temelde component küçük parçalardan bir bütün yapma diyebiliriz. Mesela ileriki bölümlerde biz de yapacağız. Api çekmek için bir sayfa çektiğimiz apiyi listelemek için bir sayfa ve bu sayfaları ana sayfa olan App.jsx import ederek kullanacağız.
Bu görseli birkaç dakika inceleyin. Todo uygulamasının başlığını ayrı input alanı için ayrı listelenen todo verileri için ayrı component oluşturulmuş ve bu oluşturulan componentleri direkt ana sayfaya import ederek kullanmış. Şimdi bunu reactte yapalım.
ReactJs ile Component
Şimdi bu anlattıklarımız ReactJs üzerinde uygulayalım. Vite sunucusu açıp içindeki hazır kodları sileceğim böylece yeni proje yapmaya hazır olacağız. Nasıl yaptığımızı geçen konuda anlattım oraya okumanızı öneririm.
Hatırlarsanız bunlar vite sunucusu + node dosyalarını indirince otomatik olarak gelen klasörlerdi şimdi src içine bir klasör oluşturup adına giriş diyelim. (Src klasörüne sağ tık yapıp new folder diyip isimlendirin)
Daha sonra oluşturulan klasöre sağ tıklayıp new file diyip adlandırın. (iki adet dosya açacağız)
Fotoğrafta görüldüğü üzere oluşturduğum dosyalar bu şekilde. Bunlar boş gelecektir hazır React yapısı için "rfce" yazın ve otomatik olarak vs code tarafından dosya react yapısına uygun hale gelecektir.
JavaScript:
import React from 'react'
function KayıtOl() {
return (
<div>
<div className='mail'><input type="text" placeholder='Mailinizi girin' /></div>
<div className='sifre'><input type="password" placeholder='Şifrenizi girin' /></div>
<button>Kayıt Ol</button>
</div>
)
}
export default KayıtOl
Kayıt component yapımızı oluşturduk. KayıtOl yerine KayitOl yazarsanız daha doğru olur. Onun harici function kısmından return kısmına kadar Javascript, return içine ise html yazıldığından bahsetmiştik. En sonda ise export ile başlayan kısım aslında bu dosyayı diğer component ihraç etmemize sağlıyor. Birazdan yapacağız bunu mesela bu dosyayı ihraç etmek istiyorsam KayıtOl olarak yapabilirim. Direkt olarak dosya adını baz alıyor ama isterseniz bunu değiştirebilirsiniz.
Şimdi diğer component'e geçelim.
JavaScript:
import React from 'react'
function GirişYap() {
return (
<div>
<div className='mail'><input type="text" placeholder='Mailinizi girin' /></div>
<div className='sifre'><input type="password" placeholder='Şifrenizi girin' /></div>
<button>Giriş Yap Ol</button>
</div>
)
}
export default GirişYap
Dalgınlığıma Türkçe karakter kullanmışım ama siz dosya adlarında Türkçe karaktere dikkat edin. Sorun çıkarmasa bile sektörde kullanımı biraz hoş karşılanmaz.
İki adet component var bunları App.jsx'e import edelim o halde.
Eğer ana sayfaya componentler import edilmezse sayfa bomboş gözükür. Bu yüzden import edip yaptığımız kodların çıktısını alacağız.
JavaScript:
import './App.css'
import GirişYap from './Giriş/GirişYap'
import KayıtOl from './Giriş/KayıtOl'
function App() {
return (
<div>
<KayıtOl />
<GirişYap />
</div>
)
}
export default App
Direkt olarak return bloğu içine component içinde bulunan export kısmındaki adlandırmayı html etiketi açarmış gibi yazın zaten vscode bize otomatik bitirmesiyle bunu kullan diye önerecek. Karışık olduğunun farkındayım bu yüzden alttaki resim anlamanıza yardımcı olacaktır.
Ek olarak eğer component aynı klasör içinde ise import ederken "./" ifadesi kullanılmaz bu ifade başka klasördeki dosyalara erişmek için kullanılır. Mesela biz Giriş diye klasör oluşturup bu dosyaları oluştururduk burda "./" ifadesi kullandık.
Import işlemleri bittiğine göre sitemize bakalım.
Çıktımızı gördüğünüz gibi aldık.
Son olarak bazen direkt bir dosya yerine o dosya içindeki özelliği import etmek isteyebiliriz. Bunu users diye bir dosya oluşturup (Src içinde) Javascript ile dizi içinde obje oluşturalım. Bir de bu dosya içine random şeyler yazalım bu random şeyleri almamak için sadece objeyi export yani import'a açacağız.
Eğer export istediğiniz özellik varsa bunu function bloğu içinde yapamazsınız bu yüzden hemen function yazısının bir üstünde yani dışında oluşturup export edeceğiz. Function kısmında ise bu users dizisini konsola yazdıracağız.
JavaScript:
import React from 'react'
export const users = [
{
name: "Dark",
surname: "S0ldier",
Date: 2024
},
{
name: "S0ldier",
surname: "Dark",
Date: 1907
}
]
function Users() {
return (
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, laudantium fugiat facere magnam animi necessitatibus expedita repudiandae harum molestiae. Dolorem?</div>
)
}
export default Users
Şu şartlarda konsola bakarsak hiçbir şey görmeyiz çünkü ana dosyaya import etmedik. Bunu ana yani App dosyasına import edelim. Normal bir şekilde import nasıl edileceğini öğrendik ama özel şeyleri import ederken tırknaklı parantez yapısı + değişken adı kullanılır.
JavaScript:
import { users } from './Users'
Böylece Users dosyası içindek users değişkenini import etmemizi belirtiriz.
import './App.css'
import GirişYap from './Giriş/GirişYap'
import KayıtOl from './Giriş/KayıtOl'
import { users } from './Users'
function App() {
console.log(users)
return (
<div>
<KayıtOl />
<GirişYap />
</div>
)
}
export default App
Import edilen users değişkenini function içinde konsola yazdırıyoruz ve çıktımızı alıyoruz.
Component tamamen bu mantıktan ibaret anlaması gayet kolay kullanması gayet pratiktir. Şimdi ise geçen konu anlatmayı unuttuğum bir şeye değinmek istiyorum. React içinde yazdığımız Javascript kodlarını Html içinde kullanabiliriz bunun için aynı az önceki örnekteki gibi tırnaklı parantezler içinde değişken adı lazım.
JavaScript:
import './App.css'
function App() {
let yazi = "Tht 2024 deneme lorem React Javascript Html"
return (
<div>
{yazi}
</div>
)
}
export default App
Burada biraz saçmaladım ama Javascript içinde yapılan kodları Html içinde de kullanabiliriz aynı örnekteki gibi.
Bugünlük React konusunun sonuna geliyoruz. Bir başka konuda görüşmek üzere o zamana kadar pratik yapmayı unutmayın. Okuduğunuz için teşekkürler
