Turan Mahmudov

Thoughts, stories and ideas.

Released under the terms of Creative Commons Attribution 4.0 International License

Powered by Ghost

React Native - 2 [aze]

Hello World

Qurulum və ilk testdən sonra redaktə etməli olduğum index.ubuntu.js faylını açanda gözlədiyimdən daha sadə bir markup -la qarşılaşdığım üçün birbaşa kodlamağa başlamaq istəyirdim. Amma yenə də komponentlər tanış olmadığı üçün bütün sətirləri silib Hello World ilə davam etməyə qərar verdim.

Hello World kodu üçün: https://facebook.github.io/react-native/docs/tutorial.html#hello-world

React Native kodlarına baxarkən tanış gəlməyən JavaScript kodlarıyla və ya JavaScript -ə oxşamayan kodlarla qarşılaşa bilərik.
Səbəbi ES6 -dır. Web development -da hələ də tam dəstəklənmir amma React Native ES6 dəstəyi verir.
ES6 üçün ətraflı buradan oxuyun.

Hello World kodlarında hər şey çox sadədir. Lazımlı komponentləri və modulları çağırırıq (import), əsas class -ı yaradırıq, ən sonda isə əsas class -ı AppRegistry vasitəsilə işlədirik.

$ react-native run-ubuntu

Props

React Native -də komponentəri özəlləşdirmək üçün (customize) üçün istifadə edilən parametrlərə props deyiblər.

Nümunə koda baxırıq: https://facebook.github.io/react-native/docs/props.html#props

Bu arada, Text, Image kimi komponentlər JavaScript içində XML embed etməyə yarayan JSX sintaksisi ilə yazılır. Mənə əvvəldən tanış olduğu üçün başa düşməkdə çətinlik çəkmirəm.

Props üçün nümunə kodu build edib yoxladıqdan sonra sıra öz komponentimizi yaradıb əsas class içində yoxlamağa gəlir.
Bir class yaradıb içində Text komponentini işlədirik, əsas class içində isə az əvvəl yaratdığımız class -ı komponent kimi işlədirik. Bu səhifədə nümunəni görə bilirik.

Əsas class içində öz yaratdığımız komponenti çağırarkən, o komponentə ötürdüyümüz parametrləri this.props prefiksi ilə işlədirik. Məsələn, this.props.name.

Son nümunədə əvvəlki nümunələrdə olmayan yeni şey View komponentidir. View komponentləri biryerdə tutmağa və onlara dizayn verməyə yarayan olduqca yararlı bir komponentdir.

State

Komponentləri idarə edən iki tip data var: propsstate. props parent (ata, ana, bir üst) tərəfindən təyin edilir və komponent işlədiyi müddət boyunca sabit qalır. Dəyişəcək olan data üçün isə state işlədilir.

Konstruktor -da (constructor) state təyin edilir, dəyişdirmək istənəndə isə setState istifadə edilir.

Məsələn, yanıb-sönən (blink) text üçün yeni bir komponent (1. yeni komponent yaratmağı bir əvvəlki hissədə görmüşdük; 2. adı olsun "Blink") yaradırıq. Blink komponenti üçün konstruktor funksiyası (yəni manual çağırılmadan, class işləməyə başlayan anda işləməyə başlayan funksiya: constructor) içində this.state ilə state -i təyin edirik. Ardından 1 saniyədən bir yanıb sönməsi üçün setInterval funksiyası içində setState ilə state -i dəyişirik.

this.state = {showText: true};

setInterval(() => { this.setState({ showText: !this.state.showText }); // toggle }, 1000)

Blink class -ı içində render funksiyası yazırıq, hansı ki, burada state -ə görə ya əsas class -dan ötürülən text -i göstəririk ya da heç nə göstərmirik.

Nümunə kodda gördüyümüz super üçün baxırıq: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super

State haqda ətraflı məlumat və nümunə kod burada: https://facebook.github.io/react-native/docs/state.html#state

Bura qədər hər şey o qədər sadədir ki, üstündə çox qalmağı və əlavə izah verməyi vaxt itkisi sayıram. Nümunələri bir neçə dəfə yazıb build etmək və tanış olmayan şeyləri (EcmaScript, JSX və s.) araşdırmaq növbəti hissəyə keçmək üçün çox faydalı olar.

Visa for Azerbaijan