React.JS por komencantoj dummioj, uzante la bibliotekon kiam verkado de komercaj robotoj

Kio estas React JS por komencantoj, kio ĝi estas, lerniloj, instalado, dokumentado – kiel instali kaj uzi la bibliotekon React JS dum verkado de komercaj robotoj. Ofte en laborreklamoj por komputilaj specialistoj, vi povas trovi postulon, kiu diras, ke vi havas kapablojn en la JavaScript-biblioteko. Jes, kaj ili atendas scion pri React ne nur de programistoj, sed ankaŭ de programistoj, kiuj okupiĝas pri interna disvolviĝo de la retejo, kaj ne ekstera dezajno. Kia biblioteko estas ĉi tiu, kiajn ŝancojn ĝi donas en laboro, kaj kie komencanto komencas konatiĝi? Ni eltrovu ĝin en ĉi tiu artikolo.

JavaScript-biblioteko – Reagi: kio ĝi estas

React.JS estas biblioteko de la populara
JavaScript programlingvo , formita de la interreta socia reto Facebook por plibonigi kaj simpligi la procezon de evoluigado de la ekstera ŝelo de retejoj kaj aplikoj – la interfaco kun kiu la uzanto interagas. La ĉefa trajto de la biblioteko estas komponantoj kaj ŝtatoj. Komponanto estas parto de cifereca aro, kiu respondecas pri la aspekto de certa parto de la sistemo desegnita.

Notu! Tiaj komponentoj povas esti nestitaj.

Ŝtato estas kolekto de ĉiuj datumoj pri la detaloj de interfaco, inkluzive de ĝia reprezenta bildigo. Per ekzemploj, ni ekscios pli detale kaj klare kio estas kio. La suba bildo montras kelkajn el la grandaj komponantoj – afiŝado al interreta socia reto, sekcio kun ĝeneralaj informoj kaj montrante fotojn. Ĉiu parto inkluzivas pli malgrandajn komponentojn, kiuj estas la komponentoj. Ekzemple, publikaĵo enhavas tekston, fotojn, la nomon de la uzanto, kiu publikigas la informojn, ktp. La bildo-sekcio inkluzivas individuajn bildojn, kaj la ĝeneralaj informoj enhavas mallongajn informojn.
Ĉiu el ĉi tiuj komponantoj (komponentoj) havas staton. Tio estas, la sekcio kun ĝeneralaj informoj aspektos malsama en malsamaj aparatoj, la “kiel” elemento ŝanĝas koloron kiam premata kaj la nombro respondeca por la totala nombro de ŝatoj; la publikigo, siavice, povas mallongigi la tekston aŭ transdoni ĝin plene.

Tiel, la fleksebleco de React.JS estas esprimita – la interfaca komponanto estas skribita unufoje, kaj post tio ĝi ricevas ĉiujn eblajn statojn.

Kial necesas la biblioteko React?

React.JS estas unu el la eblaj opcioj por skribi JS aŭ HTML-kodon en oportuna formato, formi kopiojn de ĝi kaj fari ĝin vida. La komponantoj ĉi tie estas skribitaj en speciala sistemlingvo – JSX, kiu inkluzivas elementojn de la JavaScript programlingvo kaj la normigita HTML-marklingvo.
Kodo skribita en JSX estas sufiĉe specifa. Gravas ankaŭ, ke la retumilo ne devas kompreni ĉi tiun sisteman lingvon – la kodo React.JS estas transdonita al JS, kiun ĉiu retumilo perceptas senprobleme. Por fari tion, kio estas kreita en la biblioteko estas trapasita per specialaj kompililoj (unu el la pli popularaj hodiaŭ estas Babel js), kiuj konvertas kodojn en malpli konataj programlingvoj en JavaScript-reprezentojn.
Komence povas ŝajni, ke la sistemo de uzo estas ege mallogika, sed post iom da tempo oni alkutimiĝas kaj oni rimarkas, kial la mekanismo estas desegnita tiel. La JavaScript-biblioteko havas kelkajn fortajn avantaĝojn:

• la sistema programlingvo estas pli facile rekonebla ol la konata JavaScript, kaj sekve, necesos plurfoje malpli da tempo por subteni la kodon kaj forigi erarojn sur ĝi (la rapideco verki novajn kodojn kaj programojn pliiĝos laŭe);
• konvena kaj praktika sistemo de konsistigaj elementoj estas enkonstruita ĉi tie – ripetantajn partojn de la kodo, kiuj estas uzataj en diversaj stadioj de skribo kaj en diversaj programoj, kaj ankaŭ ŝanĝiĝas laŭ la kunteksto;
• ĉiu konsistiga elemento estas subigita nur al sia stato , tial estas pli facile korekti mankojn en la kodo se subite trovos eraro en ĝia laboro en la praktiko; malĝustaj momentoj flosas al la surfaco: elemento, kiu funkcias ĝuste, daŭre funkcios stabile en ĉi tiu reĝimo, krom se, kompreneble, la malĝusta stato estas uzata rilate al ĝi.

Tiel, ni povas konkludi, ke la biblioteko React.JS povas ŝpari multan tempon, fari la kodon pli specifa, organizi la sekvencon en la ĝusta ordo kaj uzi grandajn blokojn denove. Ĉi tiuj avantaĝoj ebligas redukti la koston de la procezo de kreado de uzantinterfacoj, kaj ankaŭ akceli la tempon de ĉi tiu sama procezo. Havante la kapablojn uzi la programlingvon JS kaj HTML, lerni uzi la sistemon JSX estas facile – nur kelkaj tagoj por regi ĝin.

Notu! Estas racie uzi la bibliotekon kiam oni laboras kun grandaj projektoj, kiam necesas skribi grandan nombron da dinamikaj paĝoj. Malgranda komerca retejo ne bezonas tiajn kompleksaĵojn.

Reagi JS-fundamentan kurson de A ĝis Z: https://youtu.be/GNrdg3PzpJQ

Konato por komencantoj: bazaj konceptoj

Saluton mondo!

Alirante la unuan paĝon de la biblioteko, la uzanto vidos bonvenan titolon kiel malgranda ekzemplo – “Saluton mondo!”.

Fundamentoj de la JSX-sistemlingvo

JSX estas sistema programlingvo, etendaĵo de la konata JavaScript. Ĝi inkluzivas kombinaĵon de du lingvoj – JA-programado kaj la normigita HTML-marklingvo. Programistoj uzas ĝin por ĝustigi la koncepton por montri al React ĝuste kiel la uzantinterfaco devus aspekti. JSX kreas la “partojn” de la biblioteko.

Kio estas JSX?

La React-biblioteko aliĝas al la logiko ke la esenco de bildigo estas rekte rilata al la logiko de la uzantinterfaco: kiel okazaĵoj estas prilaboritaj, kiel stato ŝanĝiĝas en certa periodo, kaj kiel informoj estas pretaj por prezento. La JS-biblioteko povas esti uzata sen sia sistemlingvo, sed granda nombro da programistoj trovas ĝin valora pro sia klareco kaj konkreteco kiam ili laboras kun uzantinterfaco generita de JavaScript-kodo. Krome, la etendaĵo faciligas por React generi nevalidajn momentojn kaj erarajn sciigojn.

Formado de esprimoj en la sistema lingvo

JSX permesas uzi iujn ajn bone skribitajn JavaScript-esprimojn en buklaj krampoj en procezo.

JSX ankaŭ estas esprimo Post kiam la fontkodo estas bajkodita, ajna JSX-esprimo fariĝas norma JS-funkcivoko, kiu celas la JavaScript-kategorion. El tio oni povas kompreni, ke la sistema etendo de la oficiala programlingvo povas esti uzata ene de la if-manlibro kaj por periodoj.

JSX estas Objektoj La objektoj reprezentitaj de la etendaĵo estas nomitaj React-elementoj. Ili klarigas la rezulton, kiun la programisto volas vidi sur la ekrano. La biblioteko rekonas tiujn objektojn kaj uzas ilin en la procezo de generado kaj konservado de la Dokumenta Objekto-Modelo.

Detala bildigo

Detaloj estas la multaj etaj konstrubriketoj, kiuj konsistigas React-programojn.
Detaloj estas la bildo, kiun la programisto volas vidi fine sur la ekrano. Kompare al Document Object Model-elementoj, bibliotekaj elementoj estas simplaj kaj ne okupas multajn rimedojn. Elementoj estas la komponantoj de komponantoj.

Komponantoj kaj Props

Komponantoj ebligas dividi la UI en sendependajn partojn, kiuj estas pli facile prilaboreblaj aparte. Ili povas esti kombinitaj kaj uzataj plurfoje. Plejparte, la funkcieco de la komponantoj estas simila al la funkcieco de la JavaScript programlingvo mem. Ili prenas enigajn informojn, kiuj estas nomitaj props, kaj resendas React-elementojn, kiuj indikas la evolumodelon, kiun la programisto volas vidi sur la ekrano.

Varioj de komponantoj: funkciaj kaj klasaj

Plej facile estas referenci al bibliotekkomponento kiel funkcio.
Komponantoj ankaŭ povas esti reprezentitaj en ES6-klasformato.

Interesaj! La React-biblioteko difinas ĉi tiujn du specojn de komponantoj kiel similajn.

apogiloj

Rekvizitoj estas neŝanĝeblaj objektoj, kiuj estas nurlegeblaj. Tial komponanto ne devas skribi ion ajn al siaj apogiloj, negrave al kia speco ĝi apartenas.

Ŝtato kaj vivociklo

Unue, ni eltrovu kiel ĝuste apliki la ŝtaton ĉe la laboro. Estas tri gravaj aferoj por scii pri komponenta stato:

1. Ne ŝanĝu la staton rekte, uzu la metodon setState. Memoru, ke la sola areo, kie vi povas rekte ŝanĝi la staton, estas la konstrukciisto.
2. Ŝtataj ĝisdatigoj eble ne estas sinkronaj.
3. La fluo de informoj havas unu direkton. En komponentkonstruo, neniu el ili scias ĉu la ŝtato estas asignita al alia komponento. Ne gravas kiel tiu aŭ alia sendependa funkcia elemento estis formita – uzante funkcian aŭ klasifikan ilon. Tio estas nomita “malflua” datumfluo. Ŝtato ĉiam estas difinita por iu elemento, kaj strukturaj asocioj de ĉi tiu stato povas nur influi partojn kiuj situas “malsupre” en la hierarkia ordo.

Tipe, la ŝtato estas referita kiel “loka”, “interna”, aŭ kaŝa. Ĝi estas nur videbla por la funkcia elemento mem kaj nevidebla por aliaj partoj de React. En bibliotekaj programoj, ĉu sendependa funkcia elemento estas dotita per certa stato aŭ ne, estas interna evoluo de ĉi tiu parto, kiu povas ŝanĝiĝi kun la tempo. Estas ankaŭ interese, ke en la laboro vi povas kombini komponantojn kun kaj sen ŝtato.

Analizo de eventoj

La procezo de analizado de eventoj en React-komponentoj estas simila al pritraktado de eventoj en dokumentobjektmodelelementoj. Tamen, ekzistas pluraj trajtoj, kiuj distingas ilin unu de la alia:

1. Eventoj en la JavaScript-biblioteko estas nomitaj en malsama stilo ol la norma.
2. Uzante la System Extended Programming Language, la programisto pasas subrutinon kiel okazaĵtraktilon anstataŭe de ĉeno.

Kondiĉa bildigo de elementoj

La JavaScript-biblioteko ebligas rompi la logikon de evoluigado de elementoj en sendependajn komponentojn. Ili povas esti montritaj por ĝenerala ekrano aŭ kaŝitaj, depende de kia stato ili estas dotitaj nuntempe. Kondiĉa bildigo de elementoj funkcias laŭ la sama principo kiel kondiĉaj esprimoj bazitaj sur la JavaScript programlingvo. Foje okazas, ke la biblioteko postulas klarigon pri kiel la ŝtato influas la kaŝadon aŭ bildigon de iuj elementoj. Ĉi tie estas pli logike uzi kondiĉan JS-helpilon aŭ esprimojn similajn al if.

Ŝanĝante Komponantoj

React-bibliotekelementoj povas esti aldonitaj al variabloj. Ĉi tio estas praktika solvo kiam iu kondiĉo indikas ĉu iu parto de la komponanto devus esti desegnita, aŭ ĝi ne havas sencon, dum la resto de la parto restas senŝanĝa.

Listoj kaj Ŝlosiloj

Ĉi tiu sekcio inkluzivas plurajn komponantojn:

1. Desegni plurajn elementojn . La uzanto povas formi aron de elementoj kaj enigi ĝin en la sistema programlingvo uzante buklajn krampojn.
2. Elementa listo de elementoj . Ofte, uzantoj kaj programistoj ĝustigas listojn rekte ene de komponento.

Ŝlosiloj

Ŝlosilo en la Biblioteko React JavaScript indikas specialan ilon, kiu devas esti enigita dum generado de listo de komponantoj. Ŝlosiloj helpas la JavaScript-bibliotekon identigi kiuj eroj estis alĝustigitaj, aldonitaj aŭ forigitaj. Gravas marki ilin por ke React povu korelacii la komponantojn de la strukturaj datumoj post kiam certa tempo pasis.

Formoj

En la JS-biblioteko, normigitaj marklingvaj elementoj funkcias iomete malsame ol komponentoj de la dokumentobjekta modelo, ĉar formelementoj komence havas kaŝitan staton.

Administritaj Eroj

En normigita markadlingvo, formoj kiel enigo , select , textarea tendencas konservi sian propran staton kaj ĝisdatigi ĝin kiam la programisto enmetas novajn informojn. React.js-ŝtato ĉiam difinas la valoron de enigkampoj en administrita kompona elemento. Kvankam ĉi tio indikas, ke la uzanto devas skribi iom pli ol la origina donita kodo, nun eblas transdoni ĉi tiun valoron al aliaj partoj de la uzantinterfaco.

La leviĝo de la ŝtato

Ŝtata levado estas normigita ŝablono, kiun ĉiu programisto devus konscii kaj povi apliki en la procezo de laboro. Uzado de ĝi eliminos kompleksajn kaj kutime senutilajn ŝtatadministradpadronojn.

Kial estas tiom necese kontroli la leviĝon de la ŝtato?

Levigi la ŝtaton al la nivelo de la pasintaj komponantoj por tiuj partoj, kiuj postulas ĝin, estas necesa por ke ĉiuj elementoj povu partopreni en la ŝtato. Stabila nivelo de ŝtato plifaciligos ĝin distribui inter ĉiuj komponantoj, kiuj dependas de ĝi.

Kunmetaĵo vs Heredaĵo

React.js inkluzivas fortan komponan modelon, do oni rekomendas uzi la procezon konstrui tuton el partoj anstataŭ heredo por reuzi kodon skribitan pli frue inter elementoj. Tiel, teatrorekvizitoj kaj la kapablo krei ununuran tutan kunmetaĵon el komponentoj, provizas la programiston kun la fleksebleco necesa por krei la ŝelon kaj konduton de la elemento en specifa kaj sekura maniero.

Rememorigilo! Komponantoj povas preni senrilatajn teatrorekvizitojn, inkluzive de elementaj partoj kiuj konsistigas bibliotekojn aŭ funkciojn.

Se vi bezonas uzi senpagan funkcion por labori kun komponantoj duan aŭ trian fojon, eltiru ĝin en apartan JS-modulon. Movu ĝin en komponanton kaj uzu la generitan funkcion sen plia ekspansio. Reagi aŭ Vue aŭ Angular, kion elekti: https://youtu.be/Nm8GpLCAgwk

React.js Principoj

La tuta filozofio de la JavaScript-biblioteko estas kaŝita en la React-gvidilo. Ŝajnas, ke ĉi tio estas longa kaj ne tiom gravas, tamen multaj uzantoj asertas, ke post legado ĉio enfalis. La dokumentaro estas sufiĉe malnova, sed ankoraŭ de granda valoro kaj graveco –
https://ru.reactjs.org/docs/thinking-in-react.html . React js lernilo https://ru.reactjs.org/tutorial/tutorial.html

Funkcio de la biblioteko React.js

Uzante la JavaScript-bibliotekon, la uzanto ricevas la ŝancon pagi sian tutan atenton rekte al la UI-disvolva procezo kaj la komponantoj de la aplikaĵo, malpli esti distrita de la formado kaj eblaj mankoj de la skriba kodo. La biblioteko permesas vin disvolvi programojn pli rapide, faciligas agordi kaj redakti la komponantojn kaj la procezon de la tuta projekto entute. Tiel, React.js enhavas elementojn respondecajn pri komunikado en la tutmonda reto, UI, programan ŝtatkontrolon kaj la kapablon solvi aliajn kompleksajn problemojn. La biblioteko ankaŭ havas la sekvajn funkciajn ecojn:

1. Praktikeco . React.js haveblas en minimumigita formato. Ĉi tiu kompakta pako ne bezonas esti klare agordita. Ĝi jam inkluzivas funkcion de disigo de kodo, kiu reduktas la tempon necesan por malfermi la retumila versio de la retejo, ĉar ĉi tiu opcio malhelpas komponantojn de bildigo samtempe.
2. Pumpita ekosistemo kaj konformeco . Granda nombro da iloj estas haveblaj en la biblioteko, subtenataj de aliaj retejoj, kio permesas al la uzanto evoluigi novajn kompleksajn programojn por iu ajn celo.
3. Plena funkcieco . La ĉefa avantaĝo de la JavaScript-biblioteko estas, ke ĉiuj novaj versioj de la platformo plenumas la postulojn de la malnovaj, do vi povas uzi kaj la malnovan kaj la ĝisdatigitan version, ĉiuj el ili estas subtenataj kaj rilatas ĝis hodiaŭ. Antaŭe liberigitaj versioj ne malnoviĝas post la plej novaj ĝisdatigoj.

Praktika uzo

Sur la ĉefpaĝo de la biblioteko, en la instrukcioj por uzantoj, estas pluraj ilustraj ekzemploj pri uzado de React en la praktiko. Vi povas mane korekti ilin kaj provi ruli ilin. Eĉ se vi estas nova uzanto kaj ne komprenas la esencon kaj logikon de la biblioteko, ĝustigu la kodon laŭ via plaĉo kaj vidu la rezulton.

Praktika aplikaĵo de React dum verkado de komercaj robotoj en JavaScript

Gravas rimarki, ke programisto ne programas JS, sed skribas skriptojn (skriptoj). tial, uzante la bibliotekon, programisto povas skribi kodon por posta komerca roboto uzata por komercaj celoj, kaj ankaŭ daŭre desegni ĝian aspekton surbaze de ĉi tiu platformo. Fakte, komerca roboto por komercado ankaŭ estas aplikaĵo, el kiu granda nombro estas disvolvita per React.js. Tamen, iuj funkcioj kaj la interna parto de la bot ankoraŭ devos esti faritaj en aliaj retejoj, kiuj provizas ilojn taŭgajn por tio.

GitHub kaj React.js

GitHub estas platformo kiu gastigas ĉiujn versiojn de projektoj. La uzanto konektas gastigadon, trapasas la registran proceduron en la oficiala retejo de GitHub, kaj poste kreas interretan deponejon, kie li transdonas ĉiujn dosierojn de Git.
Git estas la plej populara kaj grava projekta versio-kontrolservo hodiaŭ, kaj GitHub estas fora koda deponejo.

Referenco! Nur tiuj uzantoj, kiuj ricevis la taŭgan ligilon kun permeso, havas aliron al redaktado kaj elŝutado de dosieroj.

Dokumentado

Ĉiuj lerniloj kaj ĝisdataj materialoj pri la JavaScript-biblioteko estas ĝisdatigitaj kun la plej nova ĝisdatigo. Programistoj ankaŭ kompilas kaj afiŝas por ĝenerala legado malnovajn versiojn de la dokumentaro, afiŝitaj sur aparta paĝo de la biblioteko. Sekve, estos pli facile por komencantoj regi la kapablojn de retejo-administrado: kaj malnova kaj nova materialo – ĉio estas ĉi tie, aliro estas senpaga por ĉiuj.

Notu! Ne forgesu legi la manlibrojn. Almenaŭ rigardu – jam la plej granda parto de tio, kio ŝajnis nekomprenebla, enkadriĝos.

La React-biblioteko estas populara kaj grava platformo hodiaŭ. Ĝia ĉiuflankeco permesas al programistoj fari projektojn de pli bona kvalito kaj en malpli da tempo. Krome, koni la platformon kaj havi la kapablojn uzi ĝin faras specialiston pli postulata en la labormerkato.