Ticarət robotları yazarkən kitabxanadan istifadə edərək yeni başlayanlar üçün React.JS

Yeni başlayanlar üçün React JS nədir, bu nədir, dərsliklər, quraşdırma, sənədlər – ticarət robotlarını yazarkən React JS kitabxanasını necə quraşdırmaq və istifadə etmək. Çox vaxt kompüter mütəxəssisləri üçün iş elanlarında JavaScript kitabxanasında bacarıqlarınız olduğunu bildirən tələb tapa bilərsiniz. Bəli və onlar React haqqında bilikləri təkcə proqram tərtibatçılarından deyil, həm də xarici dizaynla deyil, saytın daxili inkişafı ilə məşğul olan proqramçılardan gözləyirlər. Bu necə bir kitabxanadır, işdə hansı imkanlar verir və yeni başlayan şəxs haradan tanış olmağa başlayır? Gəlin bu məqalədə bunu anlayaq.

JavaScript kitabxanası – Reaksiya: bu nədir

React.JS populyar
JavaScript proqramlaşdırma dilinin kitabxanasıdır , Facebook onlayn sosial şəbəkəsi tərəfindən saytların və proqramların xarici qabığının – istifadəçinin qarşılıqlı əlaqədə olduğu interfeysin işlənməsi prosesini təkmilləşdirmək və sadələşdirmək məqsədilə yaradılmışdır. Kitabxananın əsas xüsusiyyəti komponentlər və dövlətlərdir. Komponent dizayn edilən sistemin müəyyən hissəsinin görünüşündən məsul olan rəqəmsal dəstin bir hissəsidir.

Qeyd! Belə komponent hissələri iç-içə ola bilər.

Vəziyyət interfeysin təfərrüatları haqqında bütün məlumatların, o cümlədən onun təsviri göstərilməsinin məcmusudur. Nümunələrdən istifadə edərək, nəyin nə olduğunu daha ətraflı və aydın şəkildə öyrənəcəyik. Aşağıdakı şəkil böyük komponentlərdən bəzilərini göstərir – onlayn sosial şəbəkəyə yerləşdirmə, ümumi məlumatı olan bölmə və fotoşəkilləri göstərmək. Hər bir hissəyə komponentlər olan daha kiçik komponentlər daxildir. Məsələn, nəşrdə mətn, fotoşəkillər, məlumatı dərc edən istifadəçinin adı və s. Şəkil bölməsində fərdi şəkillər, ümumi məlumat bölməsində isə qısa məlumat var.
Bu komponentlərin (komponentlərin) hər biri bir vəziyyətə malikdir. Yəni, ümumi məlumatı olan bölmə müxtəlif cihazlarda fərqli görünəcək, “like” elementi basıldıqda rəngini dəyişir və bəyənmələrin ümumi sayına cavabdeh olan nömrə; nəşr isə öz növbəsində mətni qısalda və ya tam şəkildə ötürə bilər.

Beləliklə, React.JS-in çevikliyi ifadə edilir – interfeys komponenti bir dəfə yazılır və bundan sonra ona bütün mümkün vəziyyətlər verilir.

React kitabxanası nə üçün lazımdır?

React.JS JS və ya HTML kodunu rahat formatda yazmaq, onun surətlərini formalaşdırmaq və vizuallaşdırmaq üçün mümkün variantlardan biridir. Buradakı komponentlər xüsusi sistem dilində – JavaScript proqramlaşdırma dilinin elementlərini və standartlaşdırılmış HTML işarələmə dilini özündə birləşdirən JSX-də yazılmışdır.
JSX-də yazılmış kod olduqca spesifikdir. Veb brauzerinin bu sistem dilini başa düşməməsi də vacibdir – React.JS kodu istənilən brauzerin problemsiz qəbul etdiyi JS-ə ötürülür. Bunun üçün kitabxanada yaradılanlar daha az tanınan proqramlaşdırma dillərindəki kodları JavaScript təsvirlərinə çevirən ixtisaslaşmış tərtibçilərdən (bu gün ən populyarlarından biri Babel js-dir) ötürülür.
Əvvəlcə istifadə sisteminin son dərəcə məntiqsiz olduğu görünə bilər, lakin bir müddət sonra buna öyrəşirsən və mexanizmin niyə belə qurulduğunu anlayırsan. JavaScript kitabxanasının bir sıra güclü üstünlükləri var:

• sistemin proqramlaşdırma dilinin tanınması tanınmış JavaScript-dən daha asandır və nəticədə kodu dəstəkləmək və ondakı səhvləri aradan qaldırmaq bir neçə dəfə az vaxt aparacaq (yeni kodların və proqramların yazılması sürəti müvafiq olaraq artacaq);
• burada tərkib elementlərin rahat və praktiki sistemi qurulmuşdur – kodun yazının müxtəlif mərhələlərində və müxtəlif proqramlarda istifadə olunan, həmçinin kontekstdən asılı olaraq dəyişən hissələrinin təkrarlanması;
• hər bir tərkib elementi yalnız öz vəziyyətinə tabedir , buna görə də təcrübədə birdən işində bir səhv aşkar edilərsə, koddakı çatışmazlıqları düzəltmək daha asandır; yanlış anlar səthə üzür: düzgün işləyən element, əlbəttə ki, onunla əlaqəli yanlış vəziyyət istifadə edilmədiyi təqdirdə, bu rejimdə sabit işləməyə davam edəcəkdir.

Beləliklə, belə nəticəyə gələ bilərik ki, React.JS kitabxanası çox vaxta qənaət edə, kodu daha konkretləşdirə, ardıcıllığı düzgün ardıcıllıqla təşkil edə və yenidən böyük bloklardan istifadə edə bilər. Bu üstünlüklər istifadəçi interfeyslərinin yaradılması prosesinin xərclərini azaltmağa, həmçinin bu prosesin vaxtını sürətləndirməyə imkan verir. JS və HTML proqramlaşdırma dilindən istifadə etmək bacarığına malik olmaq, JSX sistemindən istifadə etməyi öyrənmək asandır – onu mənimsəmək üçün cəmi bir neçə gün.

Qeyd! Böyük layihələrlə işləyərkən, çoxlu sayda dinamik səhifələr yazmaq lazım olduqda kitabxanadan istifadə etmək rasionaldır. Kiçik biznes saytının belə mürəkkəbliklərə ehtiyacı yoxdur.

A-dan Z-yə JS əsas kursuna reaksiya verin: https://youtu.be/GNrdg3PzpJQ

Başlayanlar üçün tanışlıq: əsas anlayışlar

Salam Dünya!

Kitabxananın ilk səhifəsinə daxil olarkən istifadəçi kiçik bir nümunə kimi qarşılama başlığını görəcək – “Salam dünya!”.

JSX sistem dilinin əsasları

JSX sistem proqramlaşdırma dilidir, tanınmış JavaScript-in genişləndirilməsidir. O, iki dilin birləşməsini ehtiva edir – JA proqramlaşdırma və standart HTML işarələmə dili. Tərtibatçılar ondan istifadəçi interfeysinin tam olaraq necə görünməsi lazım olduğunu React göstərmək üçün konsepsiyanı tənzimləmək üçün istifadə edirlər. JSX kitabxananın “hissələrini” yaradır.

JSX nədir?

React kitabxanası məntiqə sadiqdir ki, göstərmənin mahiyyəti bilavasitə istifadəçi interfeysinin məntiqi ilə bağlıdır: hadisələrin necə işləndiyi, müəyyən müddətdə vəziyyətin necə dəyişməsi və məlumatın təqdimat üçün necə hazırlanması. JS kitabxanası sistem dili olmadan istifadə edilə bilər, lakin çox sayda tərtibatçı onu JavaScript kodundan yaradılan istifadəçi interfeysi ilə işləyərkən onun aydınlığına və konkretliyinə görə dəyərli hesab edir. Bundan əlavə, genişləndirmə React üçün etibarsız an və səhv bildirişləri yaratmağı asanlaşdırır.

Sistem dilində ifadələrin formalaşması

JSX bir prosesdə əyri mötərizələrin içərisində hər hansı yaxşı yazılmış JavaScript ifadələrindən istifadə etməyə imkan verir.

JSX həm də ifadədir Mənbə kodu bayt kodlaşdırıldıqdan sonra istənilən JSX ifadəsi JavaScript kateqoriyasını hədəf alan standart JS funksiya çağırışına çevrilir. Buradan belə başa düşmək olar ki, rəsmi proqramlaşdırma dilinin sistem genişləndirilməsi if manual daxilində və dövrlər üçün istifadə oluna bilər.

JSX Obyektdir Genişlənmə ilə təmsil olunan obyektlər Reaksiya elementləri adlanır. Onlar tərtibatçının ekranda görmək istədiyi nəticəni aydınlaşdırırlar. Kitabxana bu obyektləri tanıyır və onlardan Sənəd Obyekt Modelinin yaradılması və saxlanması prosesində istifadə edir.

Detalların göstərilməsi

Təfərrüatlar React proqramlarını təşkil edən çoxlu kiçik tikinti bloklarıdır.
Detallar, tərtibatçının sonda monitorda görmək istədiyi şəkildir. Sənəd Obyekt Modeli elementləri ilə müqayisədə kitabxana elementləri sadədir və çoxlu resurs tutmur. Elementlər komponentlərin tərkib hissələridir.

Komponentlər və rekvizitlər

Komponentlər UI-ni ayrıca işləmək daha asan olan müstəqil hissələrə bölməyə imkan verir. Onlar birləşdirilə və dəfələrlə istifadə edilə bilər. Əksər hallarda komponentlərin funksionallığı JavaScript proqramlaşdırma dilinin funksionallığına bənzəyir. Onlar rekvizit adlanan giriş məlumatını götürür və tərtibatçının monitorda görmək istədiyi inkişaf modelini göstərən React elementlərini qaytarır.

Komponentlərin növləri: funksional və sinif

Kitabxana komponentinə funksiya kimi müraciət etmək ən asandır.
Komponentlər ES6 sinif formatında da təqdim edilə bilər.

Maraqlıdır! React kitabxanası bu iki növ komponenti oxşar olaraq təyin edir.

rekvizit

Rekvizitlər yalnız oxuna bilən dəyişməz obyektlərdir. Buna görə də, hansı növə aid olmasından asılı olmayaraq komponent öz rekvizitlərinə heç nə yazmamalıdır.

Vəziyyət və həyat dövrü

Birincisi, dövlətin işdə necə düzgün tətbiq olunacağını anlayaq. Komponent vəziyyəti haqqında bilmək üçün üç vacib şey var:

1. Vəziyyəti birbaşa dəyişdirməyin, setState metodundan istifadə edin. Unutmayın ki, vəziyyəti birbaşa dəyişə biləcəyiniz yeganə sahə konstruktordur.
2. Dövlət yeniləmələri sinxron olmaya bilər.
3. İnformasiya axınının bir istiqaməti var. Komponent tikintisində onların heç biri dövlətin başqa bir komponentə təyin edilib-edilmədiyini bilmir. Bu və ya digər müstəqil funksional elementin necə formalaşmasının əhəmiyyəti yoxdur – funksional və ya təsnifat alətindən istifadə etməklə. Buna “aşağı axın” məlumat axını deyilir. Vəziyyət həmişə hansısa element üçün müəyyən edilir və bu dövlətin struktur assosiasiyaları yalnız iyerarxik qaydada “aşağıda” yerləşən hissələrə təsir göstərə bilər.

Tipik olaraq, dövlət “yerli”, “daxili” və ya gizli adlandırılır. O, yalnız funksional elementin özünə görünür və React-in digər hissələrinə görünmür. Kitabxana proqramlarında müstəqil funksional elementin müəyyən vəziyyətə malik olub-olmaması bu hissənin daxili inkişafıdır və zaman keçdikcə dəyişə bilər. Həm də maraqlıdır ki, əsərdə komponentləri dövlətli və dövlətsiz birləşdirə bilərsiniz.

Hadisə təhlili

Reaksiya komponentlərində hadisələrin təhlili prosesi sənəd obyekti model elementlərində hadisələrin idarə edilməsinə bənzəyir. Ancaq onları bir-birindən fərqləndirən bir sıra xüsusiyyətlər var:

1. JavaScript kitabxanasındakı hadisələr standartdan fərqli üslubda adlandırılır.
2. Sistem Genişləndirilmiş Proqramlaşdırma Dilindən istifadə edərək, tərtibatçı sətir əvəzinə hadisə idarəedicisi kimi alt proqramı keçir.

Elementlərin şərti göstərilməsi

JavaScript kitabxanası elementlərin inkişaf etdirilməsi məntiqini müstəqil komponentlərə ayırmağa imkan verir. Hal-hazırda hansı vəziyyətə sahib olduqlarından asılı olaraq, onlar ümumi nümayiş üçün göstərilə və ya gizlənə bilər. Elementlərin şərti göstərilməsi JavaScript proqramlaşdırma dilinə əsaslanan şərti ifadələrlə eyni prinsip üzərində işləyir. Bəzən elə olur ki, kitabxana dövlətin bəzi elementlərin gizlədilməsinə və ya göstərilməsinə necə təsir etdiyini izah etməyi tələb edir. Burada şərti JS köməkçisindən və ya if ilə oxşar ifadələrdən istifadə etmək daha məntiqlidir.

Komponentlərin dəyişdirilməsi

Reaksiya kitabxana elementləri dəyişənlərə əlavə edilə bilər. Bu, hansısa şərt komponentin hansısa hissəsinin çəkilməli olub-olmadığını göstərdikdə və ya onun mənası yoxdur, qalan hissəsi isə dəyişməz qaldıqda bu praktik həlldir.

Siyahılar və açarlar

Bu bölmə bir neçə komponentdən ibarətdir:

1. Çoxlu elementlərin çəkilməsi . İstifadəçi elementlər dəstini yarada və onu əyri mötərizələrdən istifadə edərək sistem proqramlaşdırma dilinə daxil edə bilər.
2. Elementlərin elementar siyahısı . Çox vaxt istifadəçilər və tərtibatçılar siyahıları birbaşa komponent hissəsi daxilində tənzimləyirlər.

Açarlar

React JavaScript kitabxanasındakı açar komponentlərin siyahısını yaradan zaman daxil edilməli olan xüsusi aləti bildirir. Açarlar JavaScript kitabxanasına hansı elementlərin düzəliş edildiyini, əlavə edildiyini və ya silindiyini müəyyən etməyə kömək edir. Onları qeyd etmək vacibdir ki, müəyyən vaxt keçdikdən sonra React struktur məlumatların komponentlərini əlaqələndirə bilsin.

Formalar

JS kitabxanasında standartlaşdırılmış işarələmə dili elementləri sənəd obyekti modelinin komponentlərindən bir qədər fərqli işləyir, çünki forma elementləri əvvəlcə gizli vəziyyətə malikdir.

İdarə olunan maddələr

Standartlaşdırılmış işarələmə dilində input , select , textarea kimi formalar öz vəziyyətlərini saxlamağa və tərtibatçı yeni məlumat daxil etdikdə onu yeniləməyə meyllidirlər. React.js vəziyyəti həmişə idarə olunan tərtib elementində giriş sahələrinin dəyərini müəyyən edir. Baxmayaraq ki, bu, istifadəçinin orijinal verilmiş koddan bir qədər çox yazmalı olduğunu göstərsə də, indi bu dəyəri istifadəçi interfeysinin digər hissələrinə ötürmək mümkündür.

Dövlətin yüksəlişi

Dövlət qaldırma hər bir tərtibatçının bilməli və iş prosesində tətbiq edə bildiyi standartlaşdırılmış şablondur. Onun istifadəsi mürəkkəb və adətən yararsız dövlət idarəetmə nümunələrini aradan qaldıracaq.

Dövlətin yüksəlişinə nəzarət etmək niyə bu qədər zəruridir?

Dövləti tələb edən hissələr üçün keçmiş komponentlər səviyyəsinə qaldırmaq lazımdır ki, bütün elementlər dövlətdə iştirak edə bilsin. Stabil dövlət səviyyəsi onu ona arxalanan bütün komponentlər arasında bölüşdürməyi asanlaşdıracaq.

Tərkibi vərəsəlik

React.js güclü kompozisiya modelini ehtiva edir, ona görə də elementlər arasında əvvəllər yazılmış kodu təkrar istifadə etmək üçün miras əvəzinə hissələrdən bütöv yaratmaq prosesindən istifadə etmək tövsiyə olunur. Beləliklə, rekvizitlər və komponent hissələrdən vahid bütöv bir kompozisiya yaratmaq bacarığı, tərtibatçıya elementin qabığını və davranışını xüsusi və təhlükəsiz şəkildə yaratmaq üçün lazım olan çevikliyi təmin edir.

Xatırlatma! Komponent hissələri, kitabxanaları və ya funksiyaları təşkil edən elementar hissələr də daxil olmaqla, əlaqəli olmayan rekvizitləri götürə bilər.

Komponentlərlə işləmək üçün ikinci və ya üçüncü dəfə baxımsız funksiyadan istifadə etməlisinizsə, onu ayrı bir JS moduluna çıxarın. Onu komponentə köçürün və yaradılan funksiyanı əlavə genişləndirmədən istifadə edin. React və ya Vue və ya Angular, nə seçmək lazımdır: https://youtu.be/Nm8GpLCAgwk

React.js Prinsipləri

JavaScript kitabxanasının bütün fəlsəfəsi React bələdçisində gizlidir. Görünür, bu uzun və o qədər də böyük əhəmiyyət kəsb etmir, lakin bir çox istifadəçi oxuduqdan sonra hər şeyin yerinə düşdüyünü iddia edir. Sənədlər kifayət qədər köhnədir, lakin yenə də böyük dəyərə və aktuallığa malikdir –
https://ru.reactjs.org/docs/thinking-in-react.html . React js dərsliyi https://ru.reactjs.org/tutorial/tutorial.html

React.js kitabxanasının funksionallığı

JavaScript kitabxanasından istifadə edərək istifadəçi bütün diqqətini birbaşa UI inkişaf prosesinə və tətbiqin komponentlərinə yönəltmək imkanı əldə edir, ən azı yazılı kodun formalaşması və mümkün çatışmazlıqları ilə diqqəti yayındırır. Kitabxana proqramları daha sürətli inkişaf etdirməyə imkan verir, bütövlükdə bütün layihənin komponentlərini və prosesini konfiqurasiya etməyi və redaktə etməyi asanlaşdırır. Beləliklə, React.js qlobal şəbəkədə ünsiyyətə cavabdeh olan elementləri, UI, proqram vəziyyətinə nəzarəti və digər mürəkkəb məsələləri həll etmək qabiliyyətini ehtiva edir. Kitabxana həmçinin aşağıdakı funksional xüsusiyyətlərə malikdir:

1. Praktiklik . React.js kiçildilmiş formatda mövcuddur. Bu kompakt paketin aydın şəkildə konfiqurasiyasına ehtiyac yoxdur. O, artıq saytın brauzer versiyasını açmaq üçün lazım olan vaxtı azaldan kod bölmə funksiyasını ehtiva edir, çünki bu seçim komponentlərin eyni vaxtda göstərilməsinə mane olur.
2. Pompalı ekosistem və uyğunluq . Kitabxanada digər saytlar tərəfindən dəstəklənən çoxlu sayda alətlər mövcuddur ki, bu da istifadəçiyə istənilən məqsəd üçün yeni kompleks proqramlar hazırlamağa imkan verir.
3. Tam funksionallıq . JavaScript kitabxanasının əsas üstünlüyü ondan ibarətdir ki, platformanın bütün yeni versiyaları köhnələrin tələblərinə cavab verir, ona görə də həm köhnə, həm də yenilənmiş versiyadan istifadə edə bilərsiniz, onların hamısı dəstəklənir və bu gün üçün aktualdır. Əvvəllər buraxılmış versiyalar ən son yeniləmələrdən sonra köhnəlmir.

Praktik istifadə

Kitabxananın əsas səhifəsində istifadəçilər üçün təlimatlarda React-in praktikada istifadəsinə dair bir neçə illüstrativ nümunə var. Onları əl ilə düzəldə və işə salmağa cəhd edə bilərsiniz. Hətta yeni istifadəçi olsanız və kitabxananın mahiyyətini və məntiqini başa düşməsəniz belə kodu öz zövqünüzə uyğunlaşdırın və nəticəyə baxın.

JavaScript-də ticarət robotları yazarkən React-in praktik tətbiqi

Bir tərtibatçının JS-ni proqramlaşdırmadığını, skriptləri (skriptləri) yazdığını başa düşmək vacibdir. buna görə də, kitabxanadan istifadə edərək, bir tərtibatçı ticarət məqsədləri üçün istifadə edilən sonrakı ticarət robotu üçün kod yaza bilər və həmçinin bu platforma əsasında görünüşünü dizayn etməyə davam edə bilər. Əslində, ticarət üçün ticarət robotu da React.js istifadə edərək çoxlu sayda inkişaf etdirilən bir tətbiqdir. Bununla belə, bəzi funksiyalar və botun daxili hissəsi hələ də bunun üçün uyğun alətlər təqdim edən digər saytlarda yerinə yetirilməlidir.

GitHub və React.js

GitHub layihələrin bütün versiyalarını özündə cəmləşdirən platformadır. İstifadəçi hostinqi əlaqələndirir, rəsmi GitHub saytında qeydiyyat prosedurundan keçir və sonra Git-dən bütün faylları köçürdüyü onlayn repozitoriya yaradır.
Git bu gün ən populyar və müvafiq layihə versiyasına nəzarət xidmətidir, GitHub isə uzaq kod anbarıdır.

İstinad! Yalnız icazə ilə müvafiq linki almış istifadəçilər faylları redaktə etmək və yükləmək hüququna malikdirlər.

Sənədlər

JavaScript kitabxanası ilə bağlı bütün dərs vəsaitləri və ən müasir materiallar ən son yeniləmə ilə yenilənir. Tərtibatçılar həmçinin kitabxananın ayrıca səhifəsində yerləşdirilən sənədlərin köhnə versiyalarını ümumi oxumaq üçün tərtib edir və yerləşdirirlər. Buna görə də, yeni başlayanlar üçün saytın idarə edilməsi bacarıqlarını mənimsəmək daha asan olacaq: həm köhnə, həm də yeni material – hər şey burada, giriş hər kəs üçün pulsuzdur.

Qeyd! Təlimatları oxumağı unutmayın. Heç olmasa bir nəzər salın – artıq anlaşılmaz görünənlərin çoxu yerinə düşəcək.

React kitabxanası bu gün məşhur və uyğun platformadır. Onun çox yönlü olması tərtibatçılara daha keyfiyyətli və daha az vaxtda layihələr hazırlamağa imkan verir. Bundan əlavə, platformanı bilmək və ondan istifadə etmək bacarığına malik olmaq mütəxəssisi əmək bazarında daha çox tələb edir.