01.04. Bileşen (Component)

React’ta, birleştirilebilir ve modüler bileşenleri kullanarak uygulamalar geliştirilir. Bu bileşenler görsel arayüzün bir kısmını temsil eder. Bu bölümde JSX konusu kullanılacak ve bileşenler kullanılacaktır.

ES6 ortamında basit bir bileşen kodu ile başlayalım. App.js dosyasını açıp tüm kodu seçip CTRL+Ö yapın. Hazır yazılmış kodun yok ettik, şimdi kendi kodlarımıza geçebiliriz.

import React, { Component } from 'react';
class App01 extends Component {
  render() {
    return ( 
      <h1>
        Merhaba React!
      </h1>
    );
  }
}
export default App01;

import React, { Component } from 'react';

class App01 extends Component {

render() {

return (

<h1>

Merhaba React!

</h1>

);

}

export default App01;

CTRL+S yapıp sonucu tarayıcınızda görebilirsiniz. Eğer bir hata yaparsanız, terminal ekranında hatanın sebebi yazar. Buradaki ilk olarak React ve Component import edilmiştir. render metodu JSX içeren bir bölümdür. Tipik bir React projesinde bu bölüm ayrı bir .jsx uzantılı dosyada tutulabilir. Ancak, React Native uygulamalarda bu özellik fazla kullanılmaz. Component sayesinde Babel gibi Javascript dönüştürücüleri tarayıcı uyumlu Javascript’e nasıl dönüştüreceğini bilmesinde yardımcı olur. “export default” ise tarayıcı da hangi class’ın çalışacağını gösterir. Aslında “export default” ifadesi direkt class yanına da yazılabilir. Ancak ben bu bölümde farklı class’lar yaratacağım ve çalıştırmak istediğim class son bölümde export edeceğim, bu açıdan bu kullanımla devam edeceğim.

import React, { Component } from 'react';
class App01 extends Component {
  render() {
    return ( 
      <h1>
        Merhaba React!
      </h1>
    );
  }
}

class App02 extends Component {
  render() {
    return ( 
      <h1>
        Merhaba React 2!
      </h1>
    );
  }
}

export {App01, App02}
export default App02;

import React, { Component } from 'react';

class App01 extends Component {

render() {

return (

<h1>

Merhaba React!

</h1>

);

}

class App02 extends Component {

render() {

return (

<h1>

Merhaba React 2!

</h1>

);

}

export {App01, App02}

export default App02;

B,rden fazla class olduğunda yorumlayıcı “Warning” mesajı verir. Tüm class’ların projeye yüklenmesini ister. Bu hatadan kurtulmak için “export {App01, App02}” satırını ekledim ve default class’ımı App02 yaptım.

Bu bölüme kadar Component’in sadece HTML göstermesine değindik. Ancak Component birçok farklı özelliği de destekler.