React.JS për dummies fillestare, duke përdorur bibliotekën kur shkruani robotë tregtarë

Çfarë është React JS për dummies fillestare, çfarë është, mësime, instalim, dokumentacion – si të instaloni dhe përdorni bibliotekën React JS kur shkruani robotë tregtarë. Shpesh në shpalljet e punës për specialistë kompjuterash, mund të gjeni një kërkesë që thotë se keni aftësi në bibliotekën JavaScript. Po, dhe ata presin njohuri për React jo vetëm nga zhvilluesit e softuerit, por edhe nga programuesit që janë të angazhuar në zhvillimin e brendshëm të faqes, dhe jo dizajnin e jashtëm. Çfarë lloj biblioteke është kjo, çfarë mundësish jep në punë dhe ku fillon të njihet një fillestar? Le ta kuptojmë në këtë artikull.

Biblioteka JavaScript – Reagon: çfarë është ajo

React.JS është një bibliotekë e gjuhës së programimit popullor
JavaScript , e formuar nga rrjeti social në internet Facebook me qëllim të përmirësimit dhe thjeshtimit të procesit të zhvillimit të guaskës së jashtme të faqeve dhe aplikacioneve – ndërfaqja me të cilën përdoruesi ndërvepron. Tipari kryesor i bibliotekës janë komponentët dhe gjendjet. Një komponent është një pjesë e një grupi dixhital që është përgjegjës për pamjen e një pjese të caktuar të sistemit që po projektohet.

Shënim! Pjesë të tilla përbërëse mund të futen me fole.

Një gjendje është një koleksion i të gjitha të dhënave në lidhje me detajet e një ndërfaqeje, duke përfshirë paraqitjen e saj përfaqësuese. Duke përdorur shembuj, ne do të zbulojmë më në detaje dhe qartë se çfarë është çfarë. Imazhi më poshtë tregon disa nga komponentët e mëdhenj – postimi në një rrjet social në internet, një seksion me informacione të përgjithshme dhe shfaqja e fotove. Çdo pjesë përfshin komponentë më të vegjël, të cilët janë komponentët. Për shembull, një publikim përmban tekst, fotografi, emrin e përdoruesit që publikon informacionin, etj. Seksioni i imazheve përfshin fotografi individuale dhe seksioni i informacionit të përgjithshëm përmban informacion të shkurtër.
Secili prej këtyre komponentëve (përbërësve) ka një gjendje. Kjo do të thotë, seksioni me informacion të përgjithshëm do të duket i ndryshëm në pajisje të ndryshme, elementi “like” ndryshon ngjyrën kur shtypet dhe numri përgjegjës për numrin total të pëlqimeve; botimi, nga ana tjetër, mund ta shkurtojë tekstin ose ta transmetojë atë të plotë.

Kështu, shprehet fleksibiliteti i React.JS – komponenti i ndërfaqes shkruhet një herë, dhe pas kësaj i jepen të gjitha gjendjet e mundshme.

Pse nevojitet biblioteka React?

React.JS është një nga opsionet e mundshme për të shkruar kodin JS ose HTML në një format të përshtatshëm, për të krijuar kopje të tij dhe për ta bërë atë vizual. Komponentët këtu janë shkruar në një gjuhë të veçantë të sistemit – JSX, e cila përfshin elemente të gjuhës programuese JavaScript dhe gjuhës së standardizuar të shënjimit HTML.
Kodi i shkruar në JSX është mjaft specifik. Është gjithashtu e rëndësishme që shfletuesi i internetit nuk duhet të kuptojë këtë gjuhë të sistemit – kodi React.JS transferohet në JS, të cilin çdo shfletues e percepton pa probleme. Për ta bërë këtë, ajo që krijohet në bibliotekë kalon përmes përpiluesve të specializuar (një nga më të njohurit sot është Babel js), të cilët konvertojnë kodet në gjuhë programimi më pak të njohura në përfaqësime JavaScript.
Në fillim mund të duket se sistemi i përdorimit është jashtëzakonisht i palogjikshëm, por pas një kohe mësohesh dhe e kupton pse mekanizmi është projektuar në atë mënyrë. Biblioteka JavaScript ka një numër avantazhesh të forta:

• gjuha e programimit të sistemit është më e lehtë për t’u njohur se JavaScript e njohur, dhe për rrjedhojë, do të duhet disa herë më pak kohë për të mbështetur kodin dhe për të eliminuar gabimet në të (shpejtësia e shkrimit të kodeve dhe programeve të reja do të rritet në përputhje me rrethanat);
• këtu është ndërtuar një sistem i përshtatshëm dhe praktik i elementeve përbërës – duke përsëritur pjesë të kodit që përdoren në faza të ndryshme të shkrimit dhe në programe të ndryshme, dhe gjithashtu ndryshojnë në varësi të kontekstit;
• çdo element përbërës është i varur vetëm nga gjendja e tij , prandaj është më e lehtë të korrigjohen mangësitë në kod nëse papritmas zbulohet një gabim në punën e tij në praktikë; Momentet e pasakta notojnë në sipërfaqe: një element që funksionon siç duhet do të vazhdojë të funksionojë në mënyrë të qëndrueshme në këtë mënyrë, përveç nëse, natyrisht, përdoret gjendja e gabuar në lidhje me të.

Kështu, mund të konkludojmë se biblioteka React.JS mund të kursejë shumë kohë, ta bëjë kodin më specifik, të organizojë sekuencën në rendin e duhur dhe të përdorë përsëri blloqe të mëdha. Këto avantazhe bëjnë të mundur uljen e kostos së procesit të krijimit të ndërfaqeve të përdoruesit, si dhe përshpejtimin e kohës së këtij procesi. Duke pasur aftësi për të përdorur gjuhën e programimit JS dhe HTML, është e lehtë të mësosh të përdorësh sistemin JSX – vetëm disa ditë për ta zotëruar atë.

Shënim! Është racionale të përdoret biblioteka kur punoni me projekte të mëdha, kur është e nevojshme të shkruani një numër të madh faqesh dinamike. Një sit i biznesit të vogël nuk ka nevojë për kompleksitete të tilla.

Kursi themelor React JS nga A në Z: https://youtu.be/GNrdg3PzpJQ

Njohja për fillestarët: konceptet themelore

Përshendetje Botë!

Kur hyn në faqen e parë të bibliotekës, përdoruesi do të shohë një titull mirëseardhjeje si një shembull i vogël – “Përshëndetje botë!”.

Bazat e gjuhës së sistemit JSX

JSX është një gjuhë programimi e sistemit, një zgjerim i JavaScript-it të mirënjohur. Ai përfshin një kombinim të dy gjuhëve – programimin JA dhe gjuhën e standardizuar të shënjimit HTML. Zhvilluesit e përdorin atë për të rregulluar konceptin për të treguar React saktësisht se si duhet të duket ndërfaqja e përdoruesit. JSX krijon “pjesët” e bibliotekës.

Çfarë është JSX?

Biblioteka React i përmbahet logjikës se thelbi i paraqitjes lidhet drejtpërdrejt me logjikën e ndërfaqes së përdoruesit: si përpunohen ngjarjet, si ndryshon gjendja në një periudhë të caktuar dhe si përgatitet informacioni për prezantim. Biblioteka JS mund të përdoret pa gjuhën e saj të sistemit, por një numër i madh zhvilluesish e shohin të vlefshëm për shkak të qartësisë dhe konkretitetit të saj kur punojnë me një ndërfaqe përdoruesi të krijuar nga kodi JavaScript. Për më tepër, zgjerimi e bën më të lehtë për React që të gjenerojë njoftime të pavlefshme momentesh dhe gabimesh.

Formimi i shprehjeve në gjuhën e sistemit

JSX ju lejon të përdorni çdo shprehje JavaScript të shkruar mirë brenda kllapave kaçurrelë në një proces.

JSX është gjithashtu një shprehje Pasi kodi burim është koduar me bytek, çdo shprehje JSX kthehet në një thirrje standarde të funksionit JS që synon kategorinë JavaScript. Nga kjo mund të kuptohet se zgjerimi i sistemit të gjuhës zyrtare të programimit mund të përdoret brenda manualit if dhe për periudha.

JSX është Objekte Objektet e përfaqësuara nga zgjerimi quhen elementë React. Ata sqarojnë rezultatin që zhvilluesi dëshiron të shohë në ekran. Biblioteka i njeh këto objekte dhe i përdor ato në procesin e gjenerimit dhe mirëmbajtjes së Modelit të Objektit të Dokumentit.

Paraqitja e detajeve

Detajet janë shumë blloqe të vogla ndërtuese që përbëjnë programet React.
Detajet janë fotografia që zhvilluesi dëshiron të shohë në fund në monitor. Krahasuar me elementët e modelit të objektit të dokumentit, elementët e bibliotekës janë të thjeshtë dhe nuk marrin shumë burime. Elementet janë përbërës të komponentëve.

Komponentët dhe mbështetësit

Komponentët bëjnë të mundur ndarjen e UI në pjesë të pavarura, të cilat janë më të lehta për t’u punuar veçmas. Ato mund të kombinohen dhe përdoren disa herë. Në pjesën më të madhe, funksionaliteti i komponentëve është i ngjashëm me funksionalitetin e vetë gjuhës së programimit JavaScript. Ata marrin informacionin hyrës, i cili quhet props, dhe kthejnë elemente React që tregojnë modelin e zhvillimit që zhvilluesi dëshiron të shohë në monitor.

Llojet e komponentëve: funksionale dhe klasore

Është më e lehtë t’i referohesh një komponenti të bibliotekës si funksion.
Komponentët mund të përfaqësohen gjithashtu në formatin e klasës ES6.

Interesante! Biblioteka React i përcakton këto dy lloje të komponentëve si të ngjashëm.

props

Propat janë objekte të pandryshueshme që janë vetëm për lexim. Prandaj, një komponent nuk duhet të shkruajë asgjë në mbështetëset e tij, pavarësisht se cilit lloj i përket.

Gjendja dhe cikli i jetës

Së pari, le të kuptojmë se si ta zbatojmë siç duhet shtetin në punë. Ka tre gjëra të rëndësishme për të ditur për gjendjen e komponentit:

1. Mos e ndryshoni gjendjen drejtpërdrejt, përdorni metodën setState. Mos harroni se e vetmja zonë ku mund të ndryshoni gjendjen drejtpërdrejt është konstruktori.
2. Përditësimet e gjendjes mund të mos jenë sinkron.
3. Rrjedha e informacionit ka një drejtim. Në ndërtimin e komponentëve, asnjëri prej tyre nuk e di nëse gjendja i është caktuar një komponenti tjetër. Nuk ka rëndësi se si u formua ky apo ai element funksional i pavarur – duke përdorur një mjet funksional ose klasifikues. Kjo quhet rrjedha e të dhënave “në rrjedhën e poshtme”. Një gjendje përcaktohet gjithmonë për disa elementë, dhe shoqatat strukturore të këtij shteti mund të ndikojnë vetëm në pjesët që ndodhen “më poshtë” në rendin hierarkik.

Në mënyrë tipike, shteti referohet si “lokal”, “i brendshëm” ose i fshehur. Është i dukshëm vetëm për vetë elementin funksional dhe i padukshëm për pjesët e tjera të React. Në programet e bibliotekës, nëse një element funksional i pavarur është i pajisur me një gjendje të caktuar apo jo, është një zhvillim i brendshëm i kësaj pjese, i cili mund të ndryshojë me kalimin e kohës. Shtë gjithashtu interesante që në punë mund të kombinoni përbërës me dhe pa gjendje.

Analiza e ngjarjeve

Procesi i analizimit të ngjarjeve në komponentët React është i ngjashëm me trajtimin e ngjarjeve në elementët e modelit të objektit të dokumentit. Sidoqoftë, ka disa veçori që i dallojnë ato nga njëri-tjetri:

1. Ngjarjet në bibliotekën JavaScript emërtohen në një stil të ndryshëm nga ai standard.
2. Duke përdorur gjuhën e programimit të zgjeruar të sistemit, zhvilluesi kalon një nënprogram si një mbajtës ngjarjesh në vend të një vargu.

Paraqitja e kushtëzuar e elementeve

Biblioteka JavaScript bën të mundur ndarjen e logjikës së zhvillimit të elementeve në komponentë të pavarur. Ato mund të shfaqen për shfaqje të përgjithshme ose të fshehura, në varësi të gjendjes me të cilën janë të pajisura për momentin. Përkthimi i kushtëzuar i elementeve funksionon në të njëjtin parim si shprehjet e kushtëzuara të bazuara në gjuhën e programimit JavaScript. Ndonjëherë ndodh që biblioteka të kërkojë një shpjegim se si shteti ndikon në fshehjen ose paraqitjen e disa elementeve. Këtu është më logjike të përdoret një ndihmës i kushtëzuar JS ose shprehje të ngjashme me if.

Ndryshimi i Komponentëve

Elementet e bibliotekës React mund t’u shtohen variablave. Kjo është një zgjidhje praktike kur një kusht tregon nëse një pjesë e komponentit duhet të vizatohet, ose nuk ka kuptim, ndërsa pjesa tjetër e pjesës mbetet e pandryshuar.

Listat dhe çelësat

Ky seksion përfshin disa komponentë:

1. Vizatimi i shumë elementeve . Përdoruesi mund të formojë një grup elementësh dhe t’i vendosë në gjuhën e programimit të sistemit duke përdorur kllapa kaçurrelë.
2. Lista elementare e elementeve . Shpesh, përdoruesit dhe zhvilluesit i rregullojnë listat direkt brenda një pjese përbërëse.

Çelësat

Një çelës në bibliotekën React JavaScript tregon një mjet të specializuar që duhet të futet kur gjenerohet një listë e komponentëve. Çelësat ndihmojnë bibliotekën JavaScript të identifikojë se cilët artikuj janë rregulluar, shtuar ose hequr. Është e rëndësishme t’i shënoni ato në mënyrë që React të mund të korrelojë përbërësit e të dhënave strukturore pasi të ketë kaluar një kohë e caktuar.

Format

Në bibliotekën JS, elementët e standardizuar të gjuhës së shënjimit funksionojnë pak më ndryshe se përbërësit e modelit të objektit të dokumentit, sepse elementët e formës fillimisht kanë një gjendje të fshehur.

Artikuj të menaxhuar

Në një gjuhë të standardizuar të shënjimit, format si input , select , textarea priren të ruajnë gjendjen e tyre dhe ta përditësojnë atë kur zhvilluesi fut informacion të ri. Gjendja React.js përcakton gjithmonë vlerën e fushave hyrëse në një element kompozues të menaxhuar. Edhe pse kjo tregon se përdoruesi duhet të shkruajë pak më shumë se kodi i dhënë origjinal, tani është e mundur që kjo vlerë të kalohet në pjesë të tjera të ndërfaqes së përdoruesit.

Ngritja e shtetit

Lifting State është një shabllon i standardizuar që çdo zhvillues duhet të jetë i vetëdijshëm dhe të jetë në gjendje ta aplikojë në procesin e punës. Përdorimi i tij do të eliminojë modelet komplekse dhe zakonisht të padobishme të menaxhimit të shtetit.

Pse është kaq e nevojshme të kontrollohet ngritja e shtetit?

Ngritja e shtetit në nivelin e komponentëve të kaluar për ato pjesë që e kërkojnë është e nevojshme që të gjithë elementët të mund të marrin pjesë në shtet. Një nivel i qëndrueshëm i shtetit do ta bëjë më të lehtë shpërndarjen e tij midis të gjithë komponentëve që mbështeten në të.

Përbërja vs Trashëgimia

React.js përfshin një model të fortë kompozimi, kështu që rekomandohet të përdoret procesi i ndërtimit të një tërësie nga pjesë në vend të trashëgimisë për të ripërdorur kodin e shkruar më parë midis elementeve. Kështu, mbështetësit dhe aftësia për të krijuar një përbërje të vetme të tërë nga pjesë përbërëse, i ofrojnë zhvilluesit fleksibilitetin e nevojshëm për të krijuar guaskën dhe sjelljen e elementit në një mënyrë specifike dhe të sigurt.

Përkujtim! Pjesët përbërëse mund të marrin pjesë të palidhura, duke përfshirë pjesët elementare që përbëjnë bibliotekat ose funksionet.

Në rast se ju duhet të përdorni një funksion pa pamje për të punuar me komponentët për herë të dytë ose të tretë, nxirreni atë në një modul të veçantë JS. Zhvendoseni atë në një komponent dhe përdorni funksionin e krijuar pa zgjerim të mëtejshëm. React ose Vue ose Angular, çfarë të zgjidhni: https://youtu.be/Nm8GpLCAgwk

React.js Parimet

E gjithë filozofia e bibliotekës JavaScript është e fshehur në udhëzuesin React. Duket se kjo është e gjatë dhe jo e një rëndësie kaq të madhe, megjithatë, shumë përdorues pretendojnë se pasi lexuan gjithçka ra në vend. Dokumentacioni është mjaft i vjetër, por ende me vlerë dhe rëndësi të madhe –
https://ru.reactjs.org/docs/thinking-in-react.html . React js tutorial https://ru.reactjs.org/tutorial/tutorial.html

Funksionaliteti i bibliotekës React.js

Duke përdorur bibliotekën JavaScript, përdoruesi ka mundësinë t’i kushtojë të gjithë vëmendjen e tij drejtpërdrejt procesit të zhvillimit të UI dhe komponentëve të aplikacionit, më së paku duke u hutuar nga formimi dhe mangësitë e mundshme të kodit të shkruar. Biblioteka ju lejon të zhvilloni programe më shpejt, e bën më të lehtë konfigurimin dhe modifikimin e komponentëve dhe procesin e të gjithë projektit në tërësi. Kështu, React.js përmban elementë përgjegjës për komunikimin në rrjetin global, UI, kontrollin e shtetit të programit dhe aftësinë për të zgjidhur çështje të tjera komplekse. Biblioteka gjithashtu ka karakteristikat e mëposhtme funksionale:

1. Prakticiteti . React.js është në dispozicion në format të minifikuar. Kjo paketë kompakte nuk ka nevojë të konfigurohet qartë. Ai tashmë përfshin një veçori të ndarjes së kodit që redukton kohën që duhet për të hapur versionin e shfletuesit të faqes, pasi ky opsion parandalon që komponentët të paraqiten në të njëjtën kohë.
2. Ekosistemi i pompuar dhe pajtueshmëria . Një numër i madh mjetesh janë në dispozicion në bibliotekë, të mbështetur nga faqe të tjera, të cilat i lejojnë përdoruesit të zhvillojë programe të reja komplekse për çdo qëllim.
3. Funksionalitet i plotë . Avantazhi kryesor i bibliotekës JavaScript është se të gjitha versionet e reja të platformës plotësojnë kërkesat e atyre të vjetra, kështu që ju mund të përdorni si versionin e vjetër ashtu edhe atë të përditësuar, të gjitha ato mbështeten dhe janë të rëndësishme deri më sot. Versionet e lëshuara më parë nuk vjetërohen pas përditësimeve më të fundit.

Përdorimi praktik

Në faqen kryesore të bibliotekës, në udhëzimet për përdoruesit, ka disa shembuj ilustrues të përdorimit të React në praktikë. Mund t’i korrigjoni manualisht dhe të përpiqeni t’i ekzekutoni ato. Edhe nëse jeni përdorues i ri dhe nuk e kuptoni thelbin dhe logjikën e bibliotekës, rregulloni kodin sipas dëshirës tuaj dhe shikoni rezultatin.

Zbatimi praktik i React kur shkruani robotë tregtarë në JavaScript

Është e rëndësishme të kuptohet se një zhvillues nuk programon JS, por shkruan skriptet (skriptet). prandaj, duke përdorur bibliotekën, një zhvillues mund të shkruajë kodin për një robot të mëvonshëm tregtar të përdorur për qëllime tregtare, dhe gjithashtu të vazhdojë të dizajnojë pamjen e tij bazuar në këtë platformë. Në fakt, një robot tregtar për tregtim është gjithashtu një aplikacion, një numër i madh i të cilit janë duke u zhvilluar duke përdorur React.js. Megjithatë, disa funksione dhe pjesa e brendshme e robotit do të duhet ende të kryhen në sajte të tjera që ofrojnë mjete të përshtatshme për këtë.

GitHub dhe React.js

GitHub është një platformë që pret të gjitha versionet e projekteve. Përdoruesi lidh hostin, kalon procedurën e regjistrimit në faqen zyrtare të GitHub dhe më pas krijon një depo në internet ku transferon të gjithë skedarët nga Git.
Git është shërbimi më popullor dhe më i rëndësishëm i kontrollit të versionit të projektit sot, dhe GitHub është një depo kodi në distancë.

Referenca! Vetëm ata përdorues që kanë marrë lidhjen e duhur me leje kanë qasje në redaktimin dhe shkarkimin e skedarëve.

Dokumentacioni

Të gjitha mësimet dhe materialet e përditësuara në lidhje me bibliotekën JavaScript janë të përditësuara me përditësimet më të fundit. Zhvilluesit gjithashtu përpilojnë dhe postojnë për lexim të përgjithshëm versionet e vjetra të dokumentacionit, të postuara në një faqe të veçantë të bibliotekës. Prandaj, do të jetë më e lehtë për fillestarët të zotërojnë aftësitë e menaxhimit të faqes: si materiali i vjetër ashtu edhe i ri – gjithçka është këtu, qasja është falas për të gjithë.

Shënim! Mos harroni të lexoni manualet. Të paktën hidhini një sy – tashmë shumica e asaj që dukej e pakuptueshme do të bjerë në vend.

Biblioteka React është një platformë popullore dhe e rëndësishme sot. Shkathtësia e tij i lejon zhvilluesit të bëjnë projekte me cilësi më të mirë dhe në më pak kohë. Përveç kësaj, njohja e platformës dhe aftësitë për ta përdorur e bën një specialist më të kërkuar në tregun e punës.