React JS Başlangıç Rehberi

ReactJS son zamanlarda adını sıkça duyduğumuz Facebook ekibi tarafından geliştirilen, Javascript ile kullanıcı arayüzlerini tasarlayabileceğiniz bir kütüphanedir. Popüler geliştirme desenlerinden biri olan MVC’nin View kısmına benzetebiliriz.

ReactJS Çıkış Hikayesi

Facebook şirketi React’ı geliştirip kendi web sitelerinde kullanmaya başlıyor. Daha sonra Zuckerberg Instagram’ı satın alıyor. Zuckerberg Instagram’ın geliştirici ekibini dağıtmadan kendi himayesi altına alıyor ve Instagram ‘ın bir web sitesi olması gerektiğini söylüyor. O zamanlar mobil uygulaması olsa da web sitesi yok. Instagram ekibi Facebook ‘un kodlarını incelerken çok farklı yapıda olduğunu görüyorlar. Bu yapı hoşlarına gidiyor ve Instagram’ın web sitesi için kullanmak istiyorlar. Facebook ekibinden bu sistemi bağımsız hale getirin bizde kullanalım diyorlar.

Oturup sistemi bağımsız hale getiriyorlar. Adını da React koyuyorlar. Üstüne üstün bu sistemi açık kaynak hale getiriyorlar.

Neden React?

React ‘ın en önemli özelliği Reactive Update yani uygulamadaki state değiştikçe yeni yapıyı kendi tuttuğu Virtual DOM ile karşılaştırarak sadece değişen kısımları güncellemesidir. Bu sayede çok hızlı çalışır. Ayrıca öğrenmesi ve geliştirmesi kolay bir kütüphanedir.

React Kurulumu Nasıl Yapılır?

React ‘ı kullanmak için nodejs ve npm kurulu olması gerekir. Kurulum konusunda yorum yaparak yardım isteyebilirsiniz. React kurulumu ise oldukça basittir. Node ve npm ‘iniz zaten varsa aşağıdaki komutları terminale sırasıyla yazarak hızlıca bir app oluşturabilirsiniz.

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

JSX Nedir ?

JSX işleri kolaylaştıran syntax eklentisidir. JSX ile HTML elementlerini kolayca oluşturabilirsiniz. Bir örnek ile açılayalım.

JS

React.createElement("div", {className: "div-class"}, "Hello World!");

JSX

<div className="div-class">Hello World!</div>

JSX i kısaca JavaScript’in içine HTML yazabilmemizi sağlıyor diyebiliriz.

Component Kullanımı

Örneğin aşağıdaki gibi bir Component oluşturdunuz. Bunu uygulamanızın herhangi bir yerinde <Card title=”Kart Başlığı” content=”Kart İçeriği” /> şeklinde çağırarak kullanabilirsiniz. İşte bu kadar güzel bir kütüphane.

var Card = React.createClass({
  render: function() {
    return (
      <div className="card" style={{width: '20rem’}}>
        <img className="card-img" src="..." alt="Card image cap" />
        <div className="card-block">
          <h4 className="card-title">{this.props.title}</h4>
          <p className="card-text">{this.props.content}</p>
          <a href="#" className="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    );
  }
});

State Nedir?

React ile bir uygulama geliştirirken, hemen hemen bütün dinamik değerleri State denen bir obje içerisinde tutarsınız. Ekranda göstereceğiniz zaman bu state içerisinden gösterirsiniz. React state değiştiğinde bileşen otomatik olarak yeniden render edilir.

Her component kendi state değerini barındırır. Bu değer değiştirilebilir olup setState ile değiştirilir. State değiştiği zaman component güncellenir.

Prop değeri, state’in aksine değiştirilemez nesnelerdir. Component’e dışarıdan gönderilen veriler diyebiliriz. Proplara gönderildiği component içinde this.props özelliği altından ulaşabilirsiniz.

Lifecycle Methodlar

• getDefaultProps : Bileşenin kullanacağı değişmeyen verilerin başlangıcını döndürür
• getInitialState : Bileşenin kullanacağı değişen verilerin başlangıcını döndürür.
• componentWillMount : Bileşen gerçek DOM’a bağlanmadan hemen önce bu fonksiyon çağrılır.
• render : Bileşen güncellenirken render fonksiyonu çağrılır.
• componentDidMount : Bileşen gerçek DOM’a bağlandıktan hemen sonra bu fonksiyon çağrılır.
• shouldComponentUpdate : Bileşenin güncellenip güncellenmeyeceğine burada karar verilir. True / False
• componentWillUpdate : Bileşen güncellenmeden hemen önce bu fonksiyon çağrılır. Bileşen güncellenirken render fonksiyonu çağrılır.
• componentDidUpdate : Bileşen güncellendikten hemen sonra bu fonksiyon çağrılır.

React ‘ı sevip sevmediğinizi merak ediyoruz. Siz de React hakkında düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.