ReactJS Temelleri ve Uygulama Geliştirmek (Türkçe Sunum)

REACT

React'ın Temelleri ve Uygulama Geliştirmek

Volkan ŞENGÜL

Yazılımcı'nın Seyir Defteri

@volkansengul

http://volkansengul.com

React Nedir?

MVC'nin View katmanına odaklanır
Kullanıcı arayüzü oluşturmaya yarar
Facebook tarafından geliştirildi
Framework değil kütüphanedir
ES6 ve Babel kullanır

https://reactjs.org

React Tarihçesi

Facebook ana akış için React'ın doğuşu
Instagram için kullanılması
JSConf'da tanıtılması ve açık kaynak hale gelmesi
İlk tepkiler ve alay konusu olması
ve yükseliş...
React Native'in çıkışı
React Fiber değişikliği
Lisans değişikliği

React Neden Gerekliydi?

İki yönlü data bağlama'nın karmaşıklığı (two-way data binding)
DOM ağacındaki kademeli güncelleme (cascading updates) sebebiyle oluşan kötü UX (Kullanıcı deneyimi)
Zamanla değişim gösteren bir sayfada çok fazla veri olması
Facebook'un kullanıcı arayüzü mimarisinin karmaşıklığı
MVC mentalitesinden kurtulmak

Data Binding Örnekleri

Pure JS Two-Way

React One-Way

Angular Two-Way

DOM

Kademeli Güncelleme (Cascading Updates)

npm install -g create-react-app

create-react-app myApp

cd myApp
npm start

Kurulum

React : İyi

Kolay anlaşılır kod yapısı

Bir Component'in ne çıktı üreteceğini anlamak kolaydır
Declarative kod → öngörülebilir kod

if( user.likes() ) {
    if( hasBlue() ) {
        removeBlue();
        addGrey();
    } else {
        removeGrey();
        addBlue();
    }
}

if( this.state.liked ) {
    return <blueLike />;
} else {
    return <greyLike />;
}

Imperative yaklaşım

Declarative yaklaşım

Kompleks iki yönlü veri akışı yok

Tek yönlü basit reaktif veri akışı
İki yönlü akışa göre daha hızlı ve basit

React hızlıdır!

DOM güncelleme yavaştır, JavaScript hızlıdır
Virtual DOM (Sanal DOM) kullanmak, gerçek DOM için toplu güncellemelere olanak tanır
DOM ağacının kademeli güncellenmesine kıyasla büyük verimlilik artışı sağlar

React dev tools

Chrome eklentileri sayesinde çok daha kolay debug yapmak

Server-side Rendering

Sunucu taraflı render yaparak daha hızlı çıktılar (isomorphic)
React.renderToString() → HTML çıktısını string olarak alır

React : Kötü

Eski tarayıcı desteği yok

IE8 ve öncesinde çalışmaz
En az ES5 desteği gerekir ( babel )

Yetersiz dökümantasyon

Zayıf dökümantasyon öğrenme eşiğini yükseltiyor.

React : Çirkin

JSX

Neden React kullanmalıyım?

Kolay okunur ve anlaşılır viewlar
Bileşen temelli web development
Sayfa üzerinde sık değişen elemanlar varsa ve/veya gerçek zamanlı bir veri akışı söz konusuysa
Bir defa öğrendikten sonra hızlı uygulama geliştirebilme

React'a geçmek kolay mı?

Başlangıçta çalışma mantığını kavramak zaman alabilir fakat bir defa öğrendikten sonra herşey daha hızlı hale gelir.

Fundamentals

React için önemli kavramlar

Component

Bağımsız olarak çalışabilen temel yapı taşları
Temelde idempotent fonksiyonlardır
Arayüzü server-side render edilmiş bir uygulama gibi tanımlar

class Merhaba extends React.Component {
  render() {
    return (
      <div>
        Merhaba
      </div>
    );
  }
}

ReactDOM.render(
  <Merhaba />,mountNode
);

getDefaultProps

Bileşenin kullanacağı değişmeyen verilerin başlangıcını döndürür

getInitialState

Bileşenin kullanacağı değişen verilerin başlangıcını döndürür.

componentWillMount	Bileşen gerçek DOM’a bağlanmadan hemen önce bu fonksiyon çağrılır.
render	Bileşen güncellenirken render fonksiyonu çağrılır.
componentDidMount	Bileşen gerçek DOM’a bağlandıktan hemen sonra bu fonksiyon çağrılır.

shouldComponentUpdate	Bileşenin güncellenip güncellenmeyeceğine burada karar verilir. True / False
componentWillUpdate	Bileşen güncellenmeden hemen önce bu fonksiyon çağrılır. Bileşen güncellenirken render fonksiyonu çağrılır.
componentDidUpdate	Bileşen güncellendikten hemen sonra bu fonksiyon çağrılır.

Props (Stateless Data)

Virtual DOM'un amacına hizmet eder, render maliyetini azaltır
Değişmeyecek veriler için kullanılır

class Merhaba extends React.Component {
  render() {
    return (
      <div>
        Merhaba {this.props.isim}
      </div>
    );
  }
}

ReactDOM.render(
  <Merhaba isim="Volkan" />,mountNode
);

State (Statefull Data)

Değişebilir veriler için kullanılır
Her değişimde o bileşen yeniden render edilir
this.state şeklinde erişilir ve this.setSate ile tanımlanırlar

class Clock extends React.Component {
  constructor(props) { super(props);
  this.state = {date: new Date()};
}
  componentDidMount() {
    this.timerID = setInterval(() => this.tick(),
    1000);}
  componentWillUnmount() { clearInterval(this.timerID); }
  tick() {
    this.setState({ date: new Date() });
  }
  render() {
    return (<div>It is {this.state.date.toLocaleTimeString()}</div>);
  }
}

JSX

JSX ⇒ (Transpilers) ⇒ JS
XML benzeri sözdizim
HTML üretmek componentlerin içeirisne yazılır

Bunu;


class MyComponent extends React.Component {
  render() {
    return React.createElement('div', null, 'Merhaba Dünya');
    }
}
ReactDOM.render( React.createElement( MyComponent ), 
 document.getElementById('root')
);
1

Bu şekilde yazmamızı sağlar

class MyComponent extends React.Component {
  render() {
    return <div>Merhaba Dünya</div>;
  }
}
ReactDOM.render(
 <MyComponent />, 
 document.getElementById('root')
);

Kurallar

<element></element> // doğru
<element/> // doğru
<element> // yanlış

Açılan eleman mutlaka kapatılmalı

Alt elemanlar tek bir eleman içinde sarmalanmalı.

// doğru
(<element>
   <element1/>
   <element2/>
</element>)
 
//yanlış
(
<element1/>
<element2/>
)

Kurallar

(<div id="hello">
 <h1 className="title">Merhaba Dünya</h1>
</div>)

JSX elemanları HTML attribute barındırabilir.

İstisnalar
class ⇒ className
for ⇒ htmlFor

Virtual DOM

Virtual DOM (Sanal DOM) aslında DOM 'un yeniden oluşturulması için kullanılır
Yalnızca state değişimi olduğunda yeniden render ve gerçek DOM update edilir
2 sanal DOM ağacı üzerinde farklar (diff) hesaplanarak gerekli olan minimum adım bulunur ve gerçek DOM'a aktarılır
Virtual DOM üzerindeki her değişiklik hemen aktarılmaz. Repaint, Reflow tek seferde uygulanır