React.js — Komponent, State və Propslar

Component (Komponent)

Komponentlər, tətbiqinizi təkrar istifadə olunan hissələrə bölməyə və hər bir parçanı ayrıca düşünməyə imkan verir. Bu button, form, dialoq, ekran və s. kimi ola bilər. 2 növ komponent var. Bunlar funksiya komponenti və sinif komponentidir.

Əslində Komponentlər funksiyalar kimi işləyirlər. Parametr göndərilə bilər (biz onları props adlandırırıq) və ekranda nə görünəcəyini izah edən React elementlərini return ilə qaytarır.

class Salam extends Component {
  render() {
    return <h1>Salam Dünya</h1>
    }
}

Bu bir komponent quruluşudur və bu komponent çağırıldıqda ekranda “Salam Dünya” yazacaqdır. Bəs komponenti necə adlandırırıq?

import Salam;

class AnaSəhifə extends Component {
  render(){
    return (
    <div> <Salam /> </div>
  );
}

AnaSəhifə bizim üçün digər komponentləri işlədən əsas komponent olsun. “<Salam />” bir komponenti təmsil edir. Və “<Salam />” deyərək müəyyən etdiyimiz digər komponenti çağıra bilərik. Nəticə “Salam dünya olacaq” olacaq.

Props

JSX atributlarını vahid bir obyekt kimi bir komponentə köçürməyə imkan verən obyektə props deyilir. Məsələn, komponent adı və soyad dəyişənləri parametrlər kimi köçürsək, bu parametrlərə komponentdə props.ad, props.soyad kimi daxil ola bilərik. Bunu etmək üçün, müəyyən etdiyimiz Salam və AnaSəhifə Komponentindəki propslardan istifadə edə biləcəyimiz üçün kiçik bir dəyişiklik etməliyik.

class Salam extends Component {
  render() {
    return <h1>Salam {this.props.ad} {this.props.soyad}</h1>
    }
}
import Salam;

class AnaSəhifə extends Component {
  render(){
    return (
    <div>
      <Salam ad={“Zahir”} soyad={“Mirzamammadli”} />
    </div>
    );
}

Bu dəfə ekranda “Salam Zahir Mirzamammadli” olacaq.

State

State yalnız siniflər üçün mövcud olan bir xüsusiyyətdir. State bu sinifin qlobal dəyişənləri sayıla bilər. Aşağıda Salam class komponentindəki vəziyyəti təyin edirik və propslardakı dəyərləri ona təyin edirik.

class Salam extends Component {
  constructor(props){
    super(props);
    this.state={classAd:this.props.ad, classSoyad:this.props.soyad};
    }
  render() {
    return <h1>Salam {this.state.classAd} {this.state.classSoyad}</h1>
  }
}
import Salam;

class AnaSəhifə extends Component {
  render(){
    return (
      <div>
        <Salam ad={“Zahir”} soyad={“Mirzamammadli”} />
      </div>
    );
}

Yuxarıdakı Salam sinif komponentindəki “konstruktor” funksiyası obyekt yaratmaq və başlatmaq üçün bir sinif ilə yaradılan xüsusi bir funksiyadır. “Konstruktor” adı olan bir sinifdə yalnız bir xüsusi funksiya ola bilər. Sinif yeni yaradıldıqda propsları götürərək state-ə həvalə edən bir funksiya yaratdıq. Sinif komponentlərində props həmişə konstruktorla çağırılmalıdır.

Oxuduğunuz üçün təşəkkürlər.

LinkedIn: https://www.linkedin.com/mwlite/in/zahir-mirzamammadli-055960186

Facebook: https://www.facebook.com/Zahir.Mirzememmedli.05/