React uygulamaları, bileşenler(Components) adı verilen temel yapı taşlarından oluşur . React uygulamasının bir bileşeni, tuğlaların bir evde yaptığı gibi çalışır. Bileşenlerin kullanışlı olmalarının sebeplerinden biri de, yeniden kullanılabilirliğidir olmalıdır. Örneğin bir arama kartı görüntüleyen uygulamamız olduğunu varsayalım, bu kartları elbette birçok kez oluşturabiliriz ancak bu sayı ve ihtiyaç arttıkça projemizde tekrarlayan kodlamalar yapmak stresli ve baş edilmesi zor bir durum meydana getirebilir. İşleri kolaylaştırmak için, arama kartına sahip tek bir bileşen oluşturabilir ve onu ihtiyaç duyulan her yerde yeniden kullanabiliriz.
React'te, bileşen oluşturmanın iki yolu vardır: function ve class-based bileşenlerdir.
Function Bileşenler: Bu yöntem, içinde yazılmış özel bir 'html benzeri' kod (JSX) olan bir işlev yazmayı kullanır. JSX kodu, html'ye çok benzeyen ama aslında öyle olmayan bir javascript kodudur. Normal işlev sözdizimini veya ES6 ok işlevi sözdizimini kullanarak işlevi yazabilirsiniz. Burada ES6 ok işlevi sözdizimini kullanacağım. Users.js Bu iki paragraf öğesi içeren bir işlevsel bileşen oluşturalım . Bunu yapmak için önce react paketinden React'i Kullanıcılar dosyamıza aktarmamız gerekiyor.
import React from 'react'
const Users = () => {
return(
<div>
<p>Hello there</p>
<p>It's me</p>
</div>
)
}Class-based Bileşenler: Burada, adı verilen işlevsel bir bileşen oluşturmak için User2.js, sadece react değil, aynı zamanda react paketindeki bileşeni de içe aktarıyoruz. Daha sonra bileşenimize bir ad veririz ve Bileşeni react'ten genişletiriz. Buradaki bileşen ismimiz User2 olarak adlandırılacaktır.
import React, {Component} from 'react',
class User2 extends Component {
render(){
return(
<div>
<p>This is react</p>
</div>
)
}
};Bu sınıf tabanlı bileşen , çeşitli html benzeri (JSX) öğeleri DOM'a dönüştürmemize yardımcı olan ekstra bir render () işlevi içerir. Bu nedenle, iki paragraf öğelerimizi tek bir div etiketine sarıyoruz. Çevresine hiçbir üst öğe sarılmadan iki div etiketi oluşturmak normal şartlarda bir hataya neden olur.
//This is correct
import React from 'react'
const Users = () => {
return(
<div>
<p>Hello there</p>
<p>It's me</p>
</div>
)
}/*This is wrong because there are two paragraph elements and no single parent element wrapping them*/
import React from 'react'
const Users = () => {
return(
<p>Hello there</p>
<p>It's me</p>
)
}Şimdi bu bileşenleri yarattığımıza göre, yeniden kullanılabilirliğini gösterelim. App.js Adında bir uygulama dosyası oluşturalım ve kullanmak istediğimiz bileşeni içe aktaralım. Bu durumda, Users.js adında daha önce oluşturduğumuz dosyayı kullanacağız ve içe aktaracağız bu şekilde görünecektir Users.js App.js
import Users from '(file path to Users.js here)'Users.js Bileşenini App.js'de aşağıda gösterildiği gibi kullanmayı denersek;
import React, {Component} from 'react',
class App extends Component {
render(){
return(
<Users/>
<Users/>
)
}
};Bir hata görüntülenir ve bunun nedeni uygulamamızda kullanmak için dosyayı içe aktarmayı denesek de, dosyayı dışarı aktarmadığımız için bulunamayacak olmasıdır. Bunu yapmak için, bu kodu dosyamızın export default Userssonuna Users.js eklememiz ve tekrar denememiz yeterlidir . Yani Users.js dosyamız şimdi şöyle görünüyor
import React from 'react'
const Users = () => {
return(
<div>
<p>Hello there</p>
<p>It's me</p>
</div>
)
}
export default Users;Şimdi App.js dosyamızı çalıştırmayı denersek, hataları görmeyeceğiz ve bu kod tarayıcımızda görüntülenecek.
Hello there
It's me
Hello there
It's me
Hello there
It's me
Users.js'de başka bir kodu yeniden yazmak zorunda kalmadan bizim iki kez nasıl yeniden kullanıldığına dikkat edin. Bunun nedeni, Users.js dosyamızı üç kez kullanmamızdır!
