ReactJs Component Yapısı ve Component Kullanımı

Merhaba arkadaşlar,
“ReactJs Component Yapısı ve Component Kullanımı” adlı bu yazımızda React component ‘leri (bileşen) üzerine konuşacağız.

Bir önceki yazımızda ReactJs Kurulumu ve İlk Uygulama hakkında bilgi vermiştik ve bir örnekle konuyu detaylandırmaya çalışmıştık. Umarım kafanızdaki soru işaretlerini giderebilmişimdir.

Bu yazımızda ise biraz daha ReactJs Component mantığı üzerine kullanımlarını inceleyeceğiz.

Basit bir tanımla giriş yapalım.

ReactJs Component Nedir ?

Basite indirgemek gerekirse React Component ‘leri kullanıcı arayüzünü şekillendiren, belirli görevleri olan, class veya fonksiyon olarak tanımlanmış, geriye react elementleri döndüren (bir önceki yazımızda bahsettiğimiz JSX), opsiyonel olarak parametre (daha sonra bunlara prop diyeceğiz) alan yapı taşlarıdır.

Bir önceki yazımızdan da hatırlayacağınız üzere örnek bir component oluşturmuştuk. Bu yazımızda component çeşitlerinden bahsedelim. Temel olarak iki çeşit component ‘imiz mevcut Class-Based ve Functional.

Class-Based Components  (Sınıf Tabanlı)

React kütüphanesi içerisindeki “Component” class ‘ından extend olan javascript class ‘ları olarak tanımlayabiliriz. Bu class ‘lar React Component ‘ten extend olduğu için Component Lifecycle süreçlerini de barındırır.Bu süreçler hakkındaki detaylı bilgiyi ilerleyen kurslarda vereceğim.  Örnek üzerinden göstermemde fayda var sanırım…

import React, { Component } from 'react';

class ClassBasedComponent extends Component {
  render() {
    return (
      <div>
        <h1> I'm {this.props.type}.</h1>
      </div>
    )
  }
}


export default ClassBasedComponent;

Basit bir class-based component yukarıdaki şekilde oluşturulabilir. render() metodu ile içerisine yazılan JSX ‘i DOM içerisine yerleştirir.

Functional Components  (Fonksiyonel)

Basit olarak react elementleri (JSX) dönen javascript fonksiyonlarıdır. Dummy, dumb component olarak da isimlendirildiği oluyor. Bunun sebebi temelde state ‘e erişemediklerindendir. Ancak bu yapı v.16.8 ile biraz değişmiş oldu. artık fonksiyonel component ‘ler de state ‘e erişim sağlayabiliyor (Yine ilerleyen süreçte karşımıza çıkacak).

import React from 'react'

const FunctionalComponent = props => {
  return (
    <div>
      <h1> I'm {props.type}.</h1>
    </div>
  )
}

export default FunctionalComponent;

v.16.8 ile aralarında syntax dışında pek de bir fark kalmayan component çeşitlerini kullanım amacınıza, keyfinize ve yapacağınız işe göre seçmek tamamen size kalmış. Biraz da state ve prop ‘lardan bahsedelim tam olsun.

 

Peki , State Ne Prop Ne ?

Prop -> Parameter  // Çok kısa olacak ama Component ‘e geçilen parametre diyebiliriz.

State -> Component Memory //Yine çok kısa olacak ama: Component oluşturulduğunda içinde veri tutacak olan javascript nesnesi/objesi.

that's it!

Soğumadan Bir Örnekle Bitirelim !

Component Kullanımı

Yukarıda yazdığım iki çeşit component ‘i de kullanacağımız bir demo yapalım. Functional olana parametre geçerek veriyi basalım; Class-based olan ise kendi state ‘ini kullanarak veriyi yazdırsın. Senaryo hazır , motor !

 

Class-based olanla başlıyorum. State object ‘imi oluşturarak, içerisine de bir type property ‘si ekliyorum. render() metodunda ise state içerisindeki type property ‘sini yazdırıyorum.

reactjs-component
class-based-component.js

Dipnot: State içerisindeki her property değişikliği render() metodunu tetikler ve render süreci tekrarlanır.

Dipnot: State ‘i güncellemek için direkt olarak state ‘e atama işlemi yapmamanızı React şiddetle tavsiye ediyor. Bunun yerine size diyor ki : Al kardeşim setState() metodunu kullan. Bu metodla state ‘ini güncelle.

Örnek Kullanımlar :

Senaryomuz az çok anlaşılacağı üzere butona tıklandığında state ‘teki veriyi değiştirsin. Doğru ve Yanlış kullanımlar aşağıda gösteriliyor :

reactjs-component
class-based-component.js

Zaten direkt state ‘e atama yaptığınızda console ‘da şu uyarıyı görmeniz işten bile değil.

reactjs-component-warning

State ‘in nasıl kullanılması gerektiği anlaşıldıysa konumuza dönebiliriz.

 

Burada function olarak tanımladığım component mevcut. Parametre olarak prop ‘ları alıyor (aynı şeyler aslında …). type property ‘sini App.js ‘ten gönderiyorum.

react-js-component
functional-component.js

Ve oluşturduğum iki component ‘i import ederek çağırıyorum.

App.js

Not: functional component ‘leri functional-component.js ‘teki gibi veya app.js ‘teki gibi yazabilirsiniz. (es5 function-  es6 arrow function)

es5:

function sayHi(greeting){
     return greeting;
}
sayHi('Hello!');
// 'Hello!'

es6:

var sayHi = greeting => greeting
sayHi('Hello!');
// 'Hello!'

gibi …

 

Bakalım ne yapmışız ..

react-js-component
localhost:300

Evet, biri kendi state ‘ini kullanarak diğeri ise gönderdiğimiz props ‘u kullanarak çıktı veriyor.

 

Bir yazımızın daha sonuna geldik. Kafanıza takılan veya anlamadığınız noktaları yorum bırakarak veya  iletişim adreslerinden sorabilirsiniz. Umarım fayda sağlayabilmişimdir.

 

Bir önceki “ReactJs Kurulumu ve İlk Uygulama” adlı yazıma buradan ulaşabilirsiniz.

Bir sonraki yazımızda Event Handling” konusuna giriş yapacağız. Tabi state ‘ten bahsetmeye de devam edeceğiz 🙂

Serinin bir sonraki yazısında görüşmek üzere.

Saygılar sevgiler… Hoşçakalın.

 

Faydalı Linkler

React ‘e ait türkçe dokümantasyona buradan ulaşabilirsiniz.

24

Batuhan Yahşi

2 Yorum

  • Çok teşekkürler yazılar için çok faydalı oluyor, fakat class based componentler ile fuction based komponentleri anlatırken birde state ve props’u aynı örnekte kullanmak biraz kafa karıştırıcı oluyor ilk defa öğrenen birisi için, veya benim kafam biraz karıştı jeton yeni düştü 😀

    • Sanırım öyle olmuş 🙂 Ancak aradaki farklar veya benzerlikleri gösterebilmek adına biraz zorlamak gerekti diye düşünüyorum 🙂

      Saygılarımla

Haftalık Bülten

Mobilhanem'de yayınlanan dersleri haftalık mail almak ister misiniz?