React.JS aloittelijoille, jotka käyttävät kirjastoa kaupparobottien kirjoittamiseen

Mikä on React JS aloittelijoille, mitä se on, opetusohjelmat, asennus, dokumentaatio – kuinka asentaa ja käyttää React JS -kirjastoa kaupparobotteja kirjoitettaessa. Usein tietotekniikan asiantuntijoiden työilmoituksista löytyy vaatimus, jonka mukaan sinulla on JavaScript-kirjaston taidot. Kyllä, ja he odottavat tietoa Reactista ohjelmistokehittäjien lisäksi myös ohjelmoijilta, jotka osallistuvat sivuston sisäiseen kehittämiseen, eivät ulkoiseen suunnitteluun. Millainen kirjasto tämä on, mitä mahdollisuuksia se antaa työssä ja mistä aloittelija aloittaa tutustumisen? Selvitetään se tässä artikkelissa.

JavaScript-kirjasto – React: mikä se on

React.JS on suositun
JavaScript -ohjelmointikielen kirjasto , jonka online-sosiaalinen verkosto Facebook muodostaa parantaakseen ja yksinkertaistaakseen sivustojen ja sovellusten ulkoisen kuoren – käyttöliittymän, jonka kanssa käyttäjä on vuorovaikutuksessa – kehitysprosessia. Kirjaston pääominaisuus ovat komponentit ja tilat. Komponentti on osa digitaalista sarjaa, joka vastaa suunniteltavan järjestelmän tietyn osan ulkonäöstä.

Merkintä! Tällaiset komponentit voidaan laittaa sisäkkäin.

Tila on kokoelma kaikkia tietoja käyttöliittymän yksityiskohdista, mukaan lukien sen esitysmuodosta. Esimerkkien avulla selvitämme tarkemmin ja selkeämmin, mikä on mitä. Alla olevassa kuvassa näkyy joitain suuria osia – julkaiseminen online-sosiaalisessa verkostossa, yleistietoja sisältävä osio ja kuvien näyttäminen. Jokainen osa sisältää pienempiä komponentteja, jotka ovat komponentteja. Julkaisu sisältää esimerkiksi tekstiä, valokuvia, tiedot julkaisevan käyttäjän nimen jne. Kuvaosio sisältää yksittäisiä kuvia ja yleistieto-osio lyhyttä tietoa.
Jokaisella näistä komponenteista (komponenteista) on tila. Toisin sanoen yleistietoja sisältävä osio näyttää erilaiselta eri laitteilla, ”tykkäys”-elementti muuttaa väriä painettaessa ja numero, joka vastaa tykkäysten kokonaismäärästä; julkaisu puolestaan ​​voi lyhentää tekstiä tai välittää sen kokonaan.

Siten React.JS:n joustavuus ilmaistaan ​​- käyttöliittymäkomponentti kirjoitetaan kerran ja sen jälkeen annetaan kaikki mahdolliset tilat.

Miksi React-kirjastoa tarvitaan?

React.JS on yksi mahdollisista vaihtoehdoista kirjoittaa JS- tai HTML-koodi kätevään muotoon, muodostaa siitä kopioita ja tehdä siitä visuaalinen. Tässä olevat komponentit on kirjoitettu erityisellä järjestelmäkielellä – JSX, joka sisältää JavaScript-ohjelmointikielen ja standardoidun HTML-kuvauskielen elementtejä.
JSX:llä kirjoitettu koodi on melko tarkka. Tärkeää on myös se, että verkkoselaimen ei tarvitse ymmärtää tätä järjestelmän kieltä – React.JS-koodi siirretään JS:lle, jonka mikä tahansa selain havaitsee ongelmitta. Tätä varten kirjastossa luotu kulkee erikoistuneiden kääntäjien kautta (yksi suosituimmista nykyään on Babel js), jotka muuntavat koodit vähemmän tunnetuilla ohjelmointikielillä JavaScript-esityksiksi.
Aluksi saattaa tuntua, että käyttöjärjestelmä on äärimmäisen epäloogista, mutta jonkin ajan kuluttua siihen tottuu ja huomaa miksi mekanismi on suunniteltu juuri sellaiseksi. JavaScript-kirjastolla on useita vahvoja etuja:

• järjestelmän ohjelmointikieli on helpompi tunnistaa kuin tunnettu JavaScript, ja siksi koodin tukemiseen ja virheiden poistamiseen kuluu useita kertoja vähemmän aikaa (uusien koodien ja ohjelmien kirjoitusnopeus kasvaa vastaavasti);
• tähän on rakennettu kätevä ja käytännöllinen osaelementtien järjestelmä – koodin toistuvia osia, joita käytetään kirjoittamisen eri vaiheissa ja eri ohjelmissa ja jotka myös muuttuvat kontekstin mukaan;
• jokainen osaelementti on alisteinen vain tilalleen , joten koodin puutteet on helpompi korjata, jos sen toiminnassa havaitaan yllättäen virhe käytännössä; virheelliset hetket kelluvat pintaan: oikein toimiva elementti jatkaa toimintaansa vakaasti tässä tilassa, ellei tietenkään käytetä väärää tilaa sen suhteen.

Siten voimme päätellä, että React.JS-kirjaston avulla voit säästää huomattavasti aikaa, tehdä koodista tarkemman, järjestää sekvenssin oikeaan järjestykseen ja käyttää uudelleen suuria lohkoja. Nämä edut mahdollistavat käyttöliittymien luomisprosessin kustannusten alentamisen sekä nopeuttavat juuri tämän prosessin aikaa. JS- ja HTML-ohjelmointikielten taitojen ansiosta JSX-järjestelmän käytön oppiminen on helppoa – vain muutama päivä sen hallitsemiseen.

Merkintä! Kirjastoa on järkevää käyttää suurten projektien kanssa työskenneltäessä, kun on tarpeen kirjoittaa suuri määrä dynaamisia sivuja. Pienyrityssivusto ei tarvitse tällaista monimutkaisuutta.

Reagoi JS-peruskurssi pisteestä Z: https://youtu.be/GNrdg3PzpJQ

Tutustuminen aloittelijoille: peruskäsitteet

Hei maailma!

Kirjaston ensimmäiselle sivulle siirtyessään käyttäjä näkee pienenä esimerkkinä tervetulootsikon – ”Hei maailma!”.

JSX-järjestelmäkielen perusteet

JSX on järjestelmän ohjelmointikieli, tunnetun JavaScriptin laajennus. Se sisältää kahden kielen yhdistelmän – JA-ohjelmoinnin ja standardoidun HTML-kuvauskielen. Kehittäjät käyttävät sitä säätämään konseptia näyttämään Reactille tarkalleen, miltä käyttöliittymän pitäisi näyttää. JSX luo kirjaston ”osat”.

Mikä on JSX?

React-kirjasto noudattaa logiikkaa, jonka mukaan renderöinnin olemus liittyy suoraan käyttöliittymän logiikkaan: miten tapahtumia käsitellään, miten tila muuttuu tietyssä jaksossa ja miten tiedot valmistellaan esitettäväksi. JS-kirjastoa voidaan käyttää ilman sen järjestelmäkieltä, mutta monet kehittäjät pitävät sitä arvokkaana sen selkeyden ja konkreettisuuden vuoksi, kun käytetään JavaScript-koodista luotua käyttöliittymää. Lisäksi laajennus helpottaa Reactin luomaan virheellisiä hetkiä ja virheilmoituksia.

Lausekkeiden muodostaminen järjestelmän kielellä

JSX:n avulla voit käyttää mitä tahansa hyvin kirjoitettuja JavaScript-lausekkeita kiharahakasulkeissa prosessissa.

JSX on myös lauseke Kun lähdekoodi on tavukoodattu, mikä tahansa JSX-lauseke muuttuu tavalliseksi JS-funktiokutsuksi, joka kohdistaa JavaScript-luokkaan. Tästä voidaan ymmärtää, että virallisen ohjelmointikielen järjestelmälaajennusta voidaan käyttää if-manuaalin sisällä ja jaksoittain.

JSX on Objects Laajennuksen edustamia objekteja kutsutaan React-elementeiksi. Ne selventävät tulosta, jonka kehittäjä haluaa nähdä näytössä. Kirjasto tunnistaa nämä objektit ja käyttää niitä dokumenttiobjektimallin luomiseen ja ylläpitoon.

Yksityiskohtien renderöinti

Yksityiskohdat ovat monia pieniä rakennuspalikoita, jotka muodostavat React-ohjelmat.
Yksityiskohdat ovat kuva, jonka kehittäjä haluaa nähdä lopulta näytöllä. Document Object Model -elementteihin verrattuna kirjastoelementit ovat yksinkertaisia ​​eivätkä vie paljon resursseja. Elementit ovat komponenttien ainesosia.

Komponentit ja varusteet

Komponentit mahdollistavat käyttöliittymän jakamisen itsenäisiin osiin, joita on helpompi työstää erikseen. Niitä voidaan yhdistää ja käyttää useita kertoja. Komponenttien toiminnallisuus on suurimmaksi osaksi samanlainen kuin itse JavaScript-ohjelmointikielen toiminnallisuus. Ne ottavat syötetietoa, jota kutsutaan rekvisiittaksi, ja palauttavat React-elementtejä, jotka osoittavat kehitysmallin, jonka kehittäjä haluaa nähdä näytöllä.

Komponenttien lajikkeet: toiminnallinen ja luokka

On helpointa viitata kirjastokomponenttiin funktiona.
Komponentit voidaan esittää myös ES6-luokkamuodossa.

Mielenkiintoista! React-kirjasto määrittelee nämä kaksi komponenttityyppiä samanlaisiksi.

rekvisiitta

Props ovat muuttumattomia objekteja, jotka ovat vain luku -tilassa. Siksi komponentin ei pitäisi kirjoittaa mitään rekvisiittaansa, riippumatta siitä, mihin lajiin se kuuluu.

Tila ja elinkaari

Ensin selvitetään, kuinka tilaa sovelletaan oikein työssä. Komponenttien tilasta on tiedettävä kolme tärkeää asiaa:

1. Älä muuta tilaa suoraan, käytä setState-menetelmää. Muista, että ainoa alue, jolla voit muuttaa tilaa suoraan, on rakentaja.
2. Tilapäivitykset eivät välttämättä ole synkronisia.
3. Tiedonvirralla on yksi suunta. Komponenttirakenteessa kukaan heistä ei tiedä, onko tila osoitettu toiselle komponentille. Sillä ei ole väliä, kuinka tämä tai toinen itsenäinen toiminnallinen elementti muodostettiin – käyttämällä toiminnallista tai luokittelutyökalua. Tätä kutsutaan ”alavirran” tietovirraksi. Jollekin elementille on aina määritelty tila, ja tämän tilan rakenteelliset assosiaatiot voivat vaikuttaa vain hierarkkisessa järjestyksessä ”alemmalla” sijaitseviin osiin.

Tyypillisesti tilaa kutsutaan ”paikalliseksi”, ”sisäiseksi” tai piilotetuksi. Se näkyy vain itse toiminnalliselle elementille ja näkymätön Reactin muille osille. Kirjastoohjelmissa se, onko riippumaton toiminnallinen elementti tietyllä tilassa vai ei, on kyseisen osan sisäistä kehitystä, joka voi muuttua ajan myötä. Mielenkiintoista on myös se, että työssä voi yhdistää komponentteja tilalla ja ilman.

Tapahtuma-analyysi

React-komponenttien tapahtumien jäsennysprosessi on samanlainen kuin tapahtumien käsittely dokumenttiobjektimallin elementeissä. On kuitenkin useita ominaisuuksia, jotka erottavat ne toisistaan:

1. JavaScript-kirjaston tapahtumat on nimetty eri tyylillä kuin tavallinen.
2. Käyttämällä System Extended Programming Language -kieltä, kehittäjä välittää aliohjelman tapahtumakäsittelijänä merkkijonon sijaan.

Elementtien ehdollinen renderöinti

JavaScript-kirjasto mahdollistaa elementtien kehittämislogiikan murtamisen itsenäisiksi komponenteiksi. Ne voidaan näyttää yleisnäyttöä varten tai piilottaa sen mukaan, mikä tila niillä on tällä hetkellä. Elementtien ehdollinen renderöinti toimii samalla periaatteella kuin JavaScript-ohjelmointikieleen perustuvat ehdolliset lausekkeet. Joskus käy niin, että kirjasto vaatii selitystä siitä, miten tila vaikuttaa joidenkin elementtien piilottamiseen tai hahmontamiseen. Tässä on loogisempaa käyttää ehdollista JS-apuohjelmaa tai samanlaisia ​​lausekkeita kuin if.

Komponenttien vaihtaminen

React-kirjastoelementtejä voidaan lisätä muuttujiin. Tämä on käytännöllinen ratkaisu, kun jokin ehto osoittaa, pitäisikö jokin osa komponentista piirtää tai se ei ole järkevää, kun taas muu osa pysyy muuttumattomana.

Listat ja avaimet

Tämä osio sisältää useita osia:

1. Useiden elementtien piirtäminen . Käyttäjä voi muodostaa joukon elementtejä ja upottaa sen järjestelmän ohjelmointikieleen käyttämällä kiharoita.
2. Alkuperäinen luettelo elementeistä . Usein käyttäjät ja kehittäjät muokkaavat luetteloita suoraan komponenttiosan sisällä.

Avaimet

React JavaScript -kirjaston avain tarkoittaa erikoistyökalua, joka on syötettävä komponenttiluetteloa luotaessa. Avaimet auttavat JavaScript-kirjastoa tunnistamaan, mitkä kohteet on säädetty, lisätty tai poistettu. On tärkeää merkitä ne, jotta React pystyy korreloimaan rakennetietojen komponentit tietyn ajan kuluttua.

Lomakkeet

JS-kirjastossa standardoidut merkintäkielielementit toimivat hieman eri tavalla kuin dokumenttiobjektimallin komponentit, koska lomakeelementeillä on alun perin piilotettu tila.

Hallitut kohteet

Standardoidussa merkintäkielessä lomakkeet, kuten input , select , textarea, yleensä hallitsevat tilaansa itse ja päivittävät sen, kun kehittäjä syöttää uusia tietoja. React.js-tila määrittää aina syöttökenttien arvon hallitussa kirjoituselementissä. Vaikka tämä tarkoittaa, että käyttäjän on kirjoitettava hieman enemmän kuin alkuperäinen annettu koodi, on nyt mahdollista välittää tämä arvo käyttöliittymän muihin osiin.

Valtion nousu

State lifting on standardoitu malli, joka jokaisen kehittäjän tulee olla tietoinen ja osattava soveltaa sitä työssään. Sen käyttäminen poistaa monimutkaiset ja yleensä hyödyttömät tilanhallintamallit.

Miksi on niin tarpeellista hallita valtion nousua?

Tilan nostaminen menneiden komponenttien tasolle niille osille, jotka sitä vaativat, on välttämätöntä, jotta kaikki elementit voivat osallistua tilaan. Vakaa tilataso helpottaa sen jakamista kaikkien siihen tukevien komponenttien kesken.

Koostumus vs perintö

React.js sisältää vahvan kokoonpanomallin, joten on suositeltavaa käyttää prosessia, jossa kokonaisuus rakennetaan osista periytymisen sijaan, jotta voidaan käyttää aiemmin kirjoitettua koodia elementtien välillä. Siten rekvisiitta ja kyky luoda yksi kokonaisuus komponenteista antavat kehittäjälle joustavuutta, jota tarvitaan elementin kuoren ja käyttäytymisen luomiseen tietyllä ja turvallisella tavalla.

Muistutus! Komponenttiosat voivat sisältää toisiinsa liittymättömiä rekvisiitta, mukaan lukien perusosat, jotka muodostavat kirjastoja tai toimintoja.

Jos joudut käyttämään ulkoasutonta toimintoa komponenttien kanssa työskentelyyn toisen tai kolmannen kerran, vedä se ulos erilliseen JS-moduuliin. Siirrä se komponenttiin ja käytä luotua funktiota ilman lisälaajennusta. React, Vue tai Angular, mitä valita: https://youtu.be/Nm8GpLCAgwk

React.js-periaatteet

JavaScript-kirjaston koko filosofia on piilotettu React-oppaassa. Näyttää siltä, ​​​​että tämä on pitkä eikä sillä ole niin suurta merkitystä, mutta monet käyttäjät väittävät, että lukemisen jälkeen kaikki loksahti paikoilleen. Dokumentaatio on melko vanha, mutta silti erittäin arvokas ja merkityksellinen –
https://ru.reactjs.org/docs/thinking-in-react.html . React js -opetusohjelma https://ru.reactjs.org/tutorial/tutorial.html

React.js-kirjaston toiminnallisuus

JavaScript-kirjastoa käyttämällä käyttäjä saa mahdollisuuden kiinnittää kaiken huomionsa suoraan käyttöliittymän kehitysprosessiin ja sovelluksen komponentteihin, vähiten kirjoitetun koodin muodostuminen ja mahdolliset puutteet häiritsevät häntä. Kirjaston avulla voit kehittää ohjelmia nopeammin, helpottaa komponenttien ja koko projektin prosessin konfigurointia ja muokkaamista. Siten React.js sisältää elementtejä, jotka vastaavat viestinnästä globaalissa verkossa, käyttöliittymästä, ohjelman tilan ohjauksesta ja kyvystä ratkaista muita monimutkaisia ​​​​ongelmia. Kirjastossa on myös seuraavat toiminnalliset ominaisuudet:

1. Käytännöllisyys . React.js on saatavilla pienennetyssä muodossa. Tätä kompaktia pakettia ei tarvitse määrittää selkeästi. Se sisältää jo koodinjakoominaisuuden, joka vähentää sivuston selainversion avaamiseen kuluvaa aikaa, koska tämä vaihtoehto estää komponenttien hahmontamisen samanaikaisesti.
2. Pumpattu ekosysteemi ja noudattaminen . Kirjastossa on saatavilla suuri määrä työkaluja muiden sivustojen tukemana, minkä ansiosta käyttäjä voi kehittää uusia monimutkaisia ​​ohjelmia mihin tahansa tarkoitukseen.
3. Täysi toiminnallisuus . JavaScript-kirjaston tärkein etu on, että alustan kaikki uudet versiot täyttävät vanhojen vaatimukset, joten voit käyttää sekä vanhaa että päivitettyä versiota, ne kaikki ovat tuettuja ja ovat ajankohtaisia ​​tähän päivään asti. Aiemmin julkaistut versiot eivät vanhene uusimpien päivitysten jälkeen.

Käytännöllinen käyttö

Kirjaston etusivulla, ohjeissa käyttäjille, on useita havainnollistavia esimerkkejä Reactin käytöstä käytännössä. Voit korjata ne manuaalisesti ja yrittää suorittaa ne. Vaikka olisit uusi käyttäjä etkä ymmärrä kirjaston olemusta ja logiikkaa, säädä koodi mieleiseksesi ja katso tulos.

Reactin käytännöllinen sovellus kirjoitettaessa kaupparobotteja JavaScriptiin

On tärkeää ymmärtää, että kehittäjä ei ohjelmoi JS:ää, vaan kirjoittaa skriptejä (skriptejä). Siksi kirjastoa käyttämällä kehittäjä voi kirjoittaa koodia myöhemmälle kaupankäyntitarkoituksessa käytettävälle kaupparobotille ja jatkaa myös sen ulkonäön suunnittelua tämän alustan perusteella. Itse asiassa kaupankäyntirobotti kaupankäyntiä varten on myös sovellus, josta suurta osaa kehitetään React.js:n avulla. Jotkut toiminnot ja botin sisäinen osa on kuitenkin vielä tehtävä muilla sivustoilla, jotka tarjoavat tähän sopivia työkaluja.

GitHub ja React.js

GitHub on alusta, joka isännöi projektien kaikkia versioita. Käyttäjä yhdistää isännöinnin, käy läpi rekisteröintimenettelyn virallisella GitHub-verkkosivustolla ja luo sitten online-arkiston, johon hän siirtää kaikki tiedostot Gitistä.
Git on tämän hetken suosituin ja merkityksellisin projektiversionhallintapalvelu, ja GitHub on etäkoodivarasto.

Viite! Vain niillä käyttäjillä, jotka ovat saaneet asianmukaisen linkin luvalla, on pääsy tiedostojen muokkaamiseen ja lataamiseen.

Dokumentointi

Kaikki JavaScript-kirjastoa koskevat opetusohjelmat ja ajantasaiset materiaalit ovat ajan tasalla uusimman päivityksen kanssa. Kehittäjät myös kokoavat ja julkaisevat yleistä luettavaa varten dokumentaation vanhoja versioita, jotka on julkaistu kirjaston erillisellä sivulla. Siksi aloittelijoiden on helpompi hallita sivuston hallinnan taitoja: sekä vanhaa että uutta materiaalia – kaikki on täällä, pääsy on ilmainen kaikille.

Merkintä! Älä unohda lukea käyttöohjeita. Ainakin katsokaa – suurin osa käsittämättömältä tuntuneesta loksahtaa paikoilleen.

React-kirjasto on suosittu ja relevantti alusta nykyään. Sen monipuolisuuden ansiosta kehittäjät voivat tehdä projekteja laadukkaammin ja lyhyemmässä ajassa. Lisäksi alustan tunteminen ja sen käyttötaidot lisäävät asiantuntijan kysyntää työmarkkinoilla.