Özgür GÜL

React

Reactjs, son yılların popüler javascript kütüphanesi. Popüler olmasındaki sebeplerden bazıları şunlar:

Kompleks bir interaktif web uygulama geliştirmeniz gerektiğini düşünün. Tıpkı facebook’un web versiyonunda olduğu gibi, sol tarafta gruplar, etkinlikler veya belki bir chat alanı. Üst tarafta kişiye gelen bildirimlerin de gösterildiği bir alan ve sağda ise ana içerik, ana içerik içinde farklı farklı öğeler.

--------------------------
|          header        |
--------------------------
|         |              |
|         |              |
| sidebar |     main     |
|         |              |
|         |              |
--------------------------

Bu tarz bir web sitesi herhangi bir web framework’u kullanmadan bildiğimiz sade javascript ile de yapabilir. Ama React ile şu yapıyı elde etmek projeye daha çok okunabilirlik katıyor.


class App extends React.component {

    render() {
      
      return (
        <div>
          <div class="header"><Header color={"mavi"}/></div>
          <div class="row">
            <div class="col-md-3"><Sidebar/></div>
            <div class="col-md-9"><Main/></div>
          </div>
        </div>
      )
    
    }

}

Dikkat ettiyseniz render() fonksiyonu içinde bildiğimiz < > etiketleri ile HTML yazdık. Buna imkan veren JSX. Javascript içinde yazdığımız HTML kodları compile aşamasından sonra şuna döndürülüyor:


render = function() {
  
  return React.createElement(
        "div",
        null,
        React.createElement(
          "div",
          { "class": "header" },
          React.createElement(Header, { color: "mavi" })
        ),
        React.createElement(
          "div",
          { "class": "row" },
          React.createElement(
            "div",
            { "class": "col-md-3" },
            React.createElement(Sidebar, null)
          ),
          React.createElement(
            "div",
            { "class": "col-md-9" },
            React.createElement(Main, null)
          )
        )
      );
  
}

JSX, yazdığımız etiketleri ve bileşenleri React.createElement fonksiyonuna çeviren yardımcı bir araç ve yazım şekli denebilir.

Bileşenlerin kendine ait bir yaşam döngüsü vardır (life-cycle). Yaşam döngüsü metodları bileşenin oluşum aşamasından DOM’dan silinme aşamasına kadar farklı metodları içerir:

Örnek:


componentDidMount(){
    // bileşen oluştu, HTTP istekleri vs yapılabilir
}

componentWillUnmount() {
    // bileşen DOM'dan siliniyor
}

React’ta bileşenlerin kendine ait bir yaşam döngüsü olmasının yanında kendi durumları (state) ve o bileşenleri oluştururken yollanan parametrelerin tutulduğu props‘ları mevcut.


class Header extends React.component {

    constructor(props) {
       super(props)
       
       this.state = {
          mesajSayisi: 1
       }
    }

    render() {
    
      let self = this
      
      return (
        <div style=>
            <span>Mesaj Sayisi: {self.state.mesajSayisi} </span>
        </div>
      )
    
    }

}

Header bileşeninde state ve props‘u göstermek istedim. Bileşenin yapıcısında this.state = {} içinde o bileşenin ne gibi bir duruma sahip olacağını belirtiyoruz. Bileşende herhangi bir yerde state’e this.state.mesajSayisi gibi ulaşabiliyoruz.

Önemli: Bileşenlerin başlangıç state’ini constructor içinde belirtmek zorundayız. Es6 kullanmadığınızda getInitialState() fonksiyonu ile belirtirsiniz.

mesajSayisi isimli değişkeni sunucudan bir veri ile güncelleştirdiğimizi ve kullanıcıya göstermek istediğimizi varsayalım, bunun için setState() metodu kullanılır:

this.setState({mesajSayisi: sunucudanGelenVeri})

render() metodu bileşenlerin görünümünü döndüren fonksiyondur. this.props ile o bileşene paslanan bir veriye ulaşabiliyoruz.

React hakkında yazılacak ve okunacak çok şey var. React uygulamalarında veri akışını yönetmeye yarayan Flux, Redux, mobx mimarilerine göz atabilirsiniz. Onun dışında react’ın hafif versiyonu olan preact da popüler.

Benim Mithril.js‘ten React’e geçmemdeki en büyük sebeplerden biri React ile alakalı çok daha fazla kaynak olması ve topluluğunun geniş olması. React Toolbox gibi kütüphanelerle çok az zahmet ile, css’e fazla bulaşmadan web uygulamaları geliştirebilmek de bana göre bir artı.