React Component Nedir, Ne İşe Yarar?

Selam dostlar!

React duyduğumuzda ardından duyduğumuz 3 şeyden birisi “component” yapısıdır. Diğer ikisi “props” ve “state managment” terimleridir. Burada component yapısını anlamaya çalışacağız. Javascripteki fonksiyon yapısını biliyorsak anlaması çok daha kolay olacak çünkü hemen hemen aynı şeyler. Hadi başlayalım.

Aşağıdaki görselde görülen her kısım (header, nav, main, footer), React’ta component olarak adlandırılıyor. Yine <main> componenti içindeki <article> kısımlarını da ayrı bir component olarak düşünebilir, böylece component içinde component kullanabildiğimizi de burada öğrenmiş oluyoruz. Burada önemli bir detay var. Yalnızca child konumunda olan bir component’ten parent konumundaki component arasında props ile veri paylaşımı yapılabilir.

Aşağıdaki görselde temel bir react uygulamasının yapısını görüyorsunuz. Bu yapıdaki “components” yapıları sadece 1 defa oluşturuluyor ve aynı component defalarca istenildiği yerden çağırılıyor. Aynı function gibi. Header, aside, footer gibi componentler oluşturup, bunların da içlerine yine başka componentler oluşturabiliriz ve dilediğimiz kadar kullanabiliriz.

Buradan sonra component yapısını pekiştirmek için aşağıdaki hiyerarşiden faydalanabiliriz. Burada tüm componentsler App.js altında toplanıyor. Çünkü App bizim ana componentimiz ve 1000 tane de components olsa hepsi App altında olmalı. Yani tüm componentler App componentinin içidir.

Burada küçük bir örnek yaparak konuyu pekiştirelim ki daha kalıcı olsun. Şimdi Login isminde bir component oluşturup App içerisinden çalıştıracağız.

//Login.jsx

import React from 'react'
function Login() {
    return (
        <div>Login</div>
    )
}
export default Login

Şimdi bu Login.jsx dosyamızı App içerisine import edip, kullanalım.

//App.jsx

import './App.css'
import Login from './Login';

function App() {
  return (
    <div>
      <Login />
    </div>
  )
}

export default App

Sonuç olarak ekranda artık “Login” yazımızı görüyoruz ve ilk componentimizi oluşturarak kullanmış olduk.

Component return()

Burada önemli bir konuyu belirtmek istiyorum. Bir component içindeki return() içeriği yazılırken dikkat edilmesi gereken ana husus, dönecek olan kodların hepsi sadece 1 tane ana element ile sarmalanmış olmak zorunda. Örnek olarak hemen gösterelim

//Burada return 3 adet p elementi dönmeye çalışıyor, bu hatalı kullanımdır.

function Login() {
    return (
        <p>Text1</p>
        <p>Text2</p>
        <p>Text3</p>
    )
}
export default Login

Burada yapılması gereken şey 3 veya daha fazla etiketi 1 tane ana etiketin içine almak. Yani 1 adet parent dönmek zorundasınız. Parent içine istediğiniz kadar eleman yerleştirin sorun değil. Hatta parent elementiniz isimsiz dahi olabilir <> … </> (buna fragment deniyor) şeklinde…

//Burada return 1 ana div dönüyor. Div hiç kardeşe sahip değil ve kapsayıcı olarak görev yapıyor. Doğru kullanım.

function Login() {
    return (
        <div>
           <p>Text1</p>
           <p>Text2</p>
           <p>Text3</p>
        </div>
    )
}
export default Login

//Burada return kodları bir <> ... </> (fragment) boş etiket içinde dönüyor ve kapsayıcı olarak görev yapıyor. <>...</> boş elemanı hiç kardeşe sahip değil. Doğru kullanım.

function Login() {
    return (
        <>
           <p>Text1</p>
           <p>Text2</p>
           <p>Text3</p>
        </>
    )
}
export default Login

Export default ve Export kullanımı arasındaki fark

Son olarak burada yazılan componentleri dışarı export default ComponentName şeklinde çıkarıyoruz ve diğer taraftan import componentName from ‘./componentFile.jsx’ şeklinde dahil ediyoruz.

Export default isimtüm dosyayı export eder ancak sadece export isim şeklinde kullanırsak sadece export ettiğimiz elemana diğer taraftan ulaşabiliriz. Ayrıca Export default yapılan yapıları import istediğinİsim from ‘./dosyaKonumu.jsx’ şeklinde import ederken, sadece export kullanımlarında import ederken import { importEdilenYapıİsmi } from ‘./dosyaKonumu.jsx’ şeklide çağırıyoruz. import default yapılan yapıları dosyaya dahil ederken istediğimi isimde dahil edebiliriz ancak sadece export ile dışarı aktardığımız yapıları süslü parantez ve orjinal isimleri ile import etmeliyiz.

//sadece export kullanımı

import React from 'react'

export const myArray = [
    "Hüseyin",
    "Gözde",
    "Mirza"
]

//sadece export kullanımının import edilmesi

import { myArray } from './Login'

function App() {
  return (
    <div>
      <p>{myArray.map(name => <p>{name}</p>)}</p>
    </div>
  )
}

Sonuç olarak bu bölümde React’ta component yapısını anlamaya ve en temel şekilde kullanmaya çalıştık. Bu kullanımda faydalandığımız bazı püf noktaları da öğrenmiş olduk. Umarım faydalı olmuştur. Bir sonraki derste görüşmek üzere 🙂

Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.