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 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.

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> // doğru
<element/> // doğru
<element> // yanlış

Açılan eleman mutlaka kapatılmalı

Alt elemanlar tek bir eleman içinde sarmalanmalı.

// doğru
(<element>
   <element1/>
   <element2/>
</element>)
 
//yanlış
(
<element1/>
<element2/>
)

Kurallar

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

JSX elemanları HTML attribute barındırabilir.

İ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

ReactJS & NextJS

By Volkan Şengül

Made with Slides.com

ReactJS & NextJS

reactjs'in temelleri, çözdüğü sorunlar, artı ve eksileri, react ile uygulama geliştirme örnekleri

  • 212

More from Volkan Şengül