React.JS for nybegynnere, bruker biblioteket når du skriver handelsroboter

Hva er React JS for nybegynnerdummies, hva er det, veiledninger, installasjon, dokumentasjon – hvordan installere og bruke React JS-biblioteket når du skriver handelsroboter. Ofte i stillingsannonser for dataspesialister kan du finne et krav som sier at du har kompetanse i JavaScript-biblioteket. Ja, og de forventer kunnskap om React ikke bare fra programvareutviklere, men også fra programmerere som er engasjert i den interne utviklingen av nettstedet, og ikke eksternt design. Hva slags bibliotek er dette, hvilke muligheter gir det i jobben, og hvor begynner en nybegynner å bli kjent? La oss finne ut av det i denne artikkelen.

JavaScript-bibliotek – Reager: hva er det

React.JS er et bibliotek med det populære
JavaScript -programmeringsspråket , dannet av det sosiale nettverket Facebook på nett for å forbedre og forenkle prosessen med å utvikle det eksterne skallet av nettsteder og applikasjoner – grensesnittet som brukeren samhandler med. Hovedfunksjonen til biblioteket er komponenter og tilstander. En komponent er en del av et digitalt sett som er ansvarlig for utseendet til en viss del av systemet som designes.

Merk! Slike komponentdeler kan nestes.

En tilstand er en samling av alle data om detaljene i et grensesnitt, inkludert dets representasjonsgjengivelse. Ved hjelp av eksempler vil vi finne ut mer detaljert og tydelig hva som er hva. Bildet nedenfor viser noen av de store komponentene – innlegg til et sosialt nettverk på nett, en seksjon med generell informasjon og visning av bilder. Hver del inkluderer mindre komponenter, som er komponentene. For eksempel inneholder en publikasjon tekst, fotografier, navnet på brukeren som publiserer informasjonen osv. Bildedelen inneholder enkeltbilder, og den generelle informasjonsdelen inneholder kort informasjon.
Hver av disse komponentene (komponentene) har en tilstand. Det vil si at seksjonen med generell informasjon vil se annerledes ut på forskjellige enheter, «like»-elementet endrer farge når det trykkes og nummeret som er ansvarlig for det totale antallet likes; publikasjonen kan på sin side forkorte teksten eller overføre den i sin helhet.

Dermed kommer fleksibiliteten til React.JS til uttrykk – grensesnittkomponenten skrives én gang, og etter det får den alle mulige tilstander.

Hvorfor trengs React-biblioteket?

React.JS er et av de mulige alternativene for å skrive JS- eller HTML-kode i et praktisk format, lage kopier av den og gjøre den visuell. Komponentene her er skrevet på et spesielt systemspråk – JSX, som inkluderer elementer fra programmeringsspråket JavaScript og det standardiserte HTML-markeringsspråket.
Koden skrevet i JSX er ganske spesifikk. Det er også viktig at nettleseren ikke trenger å forstå dette systemspråket – React.JS-koden overføres til JS, som enhver nettleser oppfatter uten problemer. For å gjøre dette sendes det som lages i biblioteket gjennom spesialiserte kompilatorer (en av de mer populære i dag er Babel js), som konverterer koder på mindre kjente programmeringsspråk til JavaScript-representasjoner.
Til å begynne med kan det virke som om brukssystemet er ekstremt ulogisk, men etter en stund blir du vant til det, og du skjønner hvorfor mekanismen er utformet slik. JavaScript-biblioteket har en rekke sterke fordeler:

• systemprogrammeringsspråket er lettere å gjenkjenne enn det velkjente JavaScript, og følgelig vil det ta flere ganger mindre tid å støtte koden og eliminere feil på den (hastigheten på å skrive nye koder og programmer vil øke tilsvarende);
• et praktisk og praktisk system av konstituerende elementer er innebygd her – repeterende deler av koden som brukes på forskjellige stadier av skriving og i forskjellige programmer, og også endres avhengig av konteksten;
• hvert bestanddel er bare underordnet sin tilstand , derfor er det lettere å korrigere mangler i koden hvis en feil plutselig blir funnet i arbeidet i praksis; feil momenter flyter til overflaten: et element som fungerer riktig vil fortsette å fungere stabilt i denne modusen, med mindre selvfølgelig feil tilstand brukes i forhold til det.

Dermed kan vi konkludere med at React.JS-biblioteket lar deg spare tid betydelig, gjøre koden mer spesifikk, organisere sekvensen i riktig rekkefølge og bruke store blokker igjen. Disse fordelene gjør det mulig å redusere kostnadene for prosessen med å lage brukergrensesnitt, samt fremskynde tiden for nettopp denne prosessen. Med ferdighetene til å bruke programmeringsspråket JS og HTML, er det enkelt å lære å bruke systemet JSX – bare noen få dager å mestre det.

Merk! Det er rasjonelt å bruke biblioteket når man jobber med store prosjekter, når det er nødvendig å skrive et stort antall dynamiske sider. En liten bedriftsside trenger ikke slike kompleksiteter.

React JS grunnleggende kurs fra A til Å: https://youtu.be/GNrdg3PzpJQ

Bekjentskap for nybegynnere: grunnleggende konsepter

Hei Verden!

Når brukeren går inn på den første siden av biblioteket, vil brukeren se en velkomstoverskrift som et lite eksempel – «Hei verden!».

Grunnleggende om JSX-systemspråket

JSX er et systemprogrammeringsspråk, en utvidelse av det velkjente JavaScript. Det inkluderer en kombinasjon av to språk – JA-programmering og det standardiserte HTML-markeringsspråket. Utviklere bruker den til å justere konseptet for å vise React nøyaktig hvordan brukergrensesnittet skal se ut. JSX lager «delene» av biblioteket.

Hva er JSX?

React-biblioteket følger logikken om at essensen av gjengivelse er direkte relatert til logikken i brukergrensesnittet: hvordan hendelser behandles, hvordan tilstand endres i en viss periode, og hvordan informasjon forberedes for presentasjon. JS-biblioteket kan brukes uten systemspråket, men et stort antall utviklere finner det verdifullt på grunn av dets klarhet og konkrethet når de arbeider med et brukergrensesnitt generert fra JavaScript-kode. I tillegg gjør utvidelsen det enklere for React å generere ugyldige øyeblikks- og feilvarsler.

Dannelse av uttrykk i systemspråket

JSX lar deg bruke alle velskrevne JavaScript-uttrykk i krøllete klammeparenteser i en prosess.

JSX er også et uttrykk Når kildekoden er bytekodet, blir ethvert JSX-uttrykk til et standard JS-funksjonskall som retter seg mot JavaScript-kategorien. Fra dette kan det forstås at systemutvidelsen til det offisielle programmeringsspråket kan brukes i if-manualen og i perioder.

JSX er Objekter Objektene representert av utvidelsen kalles React-elementer. De tydeliggjør resultatet som utvikleren ønsker å se på skjermen. Biblioteket gjenkjenner disse objektene og bruker dem i prosessen med å generere og vedlikeholde dokumentobjektmodellen.

Detaljgjengivelse

Detaljer er de mange små byggeklossene som utgjør React-programmene.
Detaljer er bildet som utvikleren ønsker å se til slutt på skjermen. Sammenlignet med Document Object Model-elementer, er bibliotekelementer enkle og tar ikke opp mye ressurser. Elementer er bestanddeler av komponenter.

Komponenter og rekvisitter

Komponenter gjør det mulig å dele opp brukergrensesnittet i uavhengige deler, som er lettere å jobbe med separat. De kan kombineres og brukes flere ganger. For det meste er funksjonaliteten til komponentene lik funksjonaliteten til selve JavaScript-programmeringsspråket. De tar inputinformasjon, som kalles rekvisitter, og returnerer React-elementer som indikerer utviklingsmodellen som utvikleren ønsker å se på skjermen.

Varianter av komponenter: funksjonell og klasse

Det er lettest å referere til en bibliotekkomponent som en funksjon.
Komponenter kan også representeres i ES6 klasseformat.

Interessant! React-biblioteket definerer disse to typene komponenter som like.

Rekvisitter

Rekvisitter er uforanderlige objekter som er skrivebeskyttet. Derfor skal ikke en komponent skrive noe til rekvisittene, uansett hvilken type den tilhører.

Tilstand og livssyklus

Først, la oss finne ut hvordan du bruker staten på jobben riktig. Det er tre viktige ting å vite om komponenttilstand:

1. Ikke endre tilstanden direkte, bruk setState-metoden. Husk at det eneste området hvor du kan endre tilstanden direkte er konstruktøren.
2. Tilstandsoppdateringer er kanskje ikke synkrone.
3. Informasjonsflyten har én retning. I komponentkonstruksjon vet ingen av dem om staten er tildelt en annen komponent. Det spiller ingen rolle hvordan dette eller det uavhengige funksjonelle elementet ble dannet – ved å bruke et funksjonelt eller klassifiseringsverktøy. Dette kalles «nedstrøms» dataflyt. En tilstand er alltid definert for et element, og strukturelle assosiasjoner til denne tilstanden kan bare påvirke deler som er plassert «lavere» i den hierarkiske rekkefølgen.

Vanligvis blir staten referert til som «lokal», «intern» eller skjult. Den er kun synlig for det funksjonelle elementet selv og usynlig for andre deler av React. I bibliotekprogrammer er om et uavhengig funksjonelt element er utstyrt med en bestemt tilstand eller ikke en intern utvikling av den delen, som kan endre seg over tid. Det er også interessant at du i arbeidet kan kombinere komponenter med og uten stat.

Hendelsesanalyse

Prosessen med å analysere hendelser i React-komponenter ligner på håndtering av hendelser i dokumentobjektmodellelementer. Imidlertid er det flere funksjoner som skiller dem fra hverandre:

1. Hendelser i JavaScript-biblioteket er navngitt i en annen stil enn standarden.
2. Ved å bruke System Extended Programming Language sender utvikleren en subrutine som hendelsesbehandler i stedet for en streng.

Betinget gjengivelse av elementer

JavaScript-biblioteket gjør det mulig å bryte logikken i å utvikle elementer til uavhengige komponenter. De kan vises for generell visning eller skjules, avhengig av hvilken tilstand de er utstyrt med for øyeblikket. Betinget gjengivelse av elementer fungerer etter samme prinsipp som betingede uttrykk basert på programmeringsspråket JavaScript. Noen ganger hender det at biblioteket krever en forklaring på hvordan staten påvirker skjule eller gjengivelse av enkelte elementer. Her er det mer logisk å bruke en betinget JS-hjelper eller uttrykk som ligner på if.

Endre komponenter

React-bibliotekselementer kan legges til variabler. Dette er en praktisk løsning når en betingelse indikerer om en del av komponenten skal tegnes, eller det ikke gir mening, mens resten av delen forblir uendret.

Lister og nøkler

Denne delen inneholder flere komponenter:

1. Tegning av flere elementer . Brukeren kan danne et sett med elementer og bygge det inn i systemets programmeringsspråk ved å bruke krøllete klammeparenteser.
2. Elementær liste over elementer . Ofte justerer brukere og utviklere lister direkte i en komponentdel.

Nøkler

En nøkkel i React JavaScript-biblioteket angir et spesialisert verktøy som må angis når du genererer en liste over komponenter. Taster hjelper JavaScript-biblioteket med å identifisere hvilke elementer som har blitt justert, lagt til eller fjernet. Det er viktig å merke dem slik at React kan korrelere komponentene i strukturdataene etter at det har gått en viss tid.

Skjemaer

I JS-biblioteket fungerer standardiserte markup-språkelementer litt annerledes enn komponenter i dokumentobjektmodellen, fordi skjemaelementer i utgangspunktet har en skjult tilstand.

Administrerte elementer

I et standardisert markup-språk har skjemaer som input , select , textarea en tendens til å administrere tilstanden selv og oppdatere den når utvikleren legger inn ny informasjon. React.js-tilstand definerer alltid verdien av inndatafelt i et administrert komposisjonselement. Selv om dette indikerer at brukeren må skrive litt mer enn den opprinnelige gitte koden, er det nå mulig å overføre denne verdien til andre deler av brukergrensesnittet.

Statens fremvekst

Statsløfting er en standardisert mal som enhver utvikler bør være klar over og kunne bruke i arbeidet. Å bruke det vil eliminere komplekse og vanligvis ubrukelige statsstyringsmønstre.

Hvorfor er det så nødvendig å kontrollere fremveksten av staten?

Å heve staten til nivået av tidligere komponenter for de delene som krever det, er nødvendig slik at alle elementer kan delta i staten. Et stabilt tilstandsnivå vil gjøre det lettere å fordele det blant alle komponentene som er avhengige av det.

Sammensetning vs arv

React.js inkluderer en sterk komposisjonsmodell, så det anbefales å bruke prosessen med å bygge en helhet fra deler i stedet for arv for å gjenbruke tidligere skrevet kode mellom elementer. Dermed gir rekvisitter og muligheten til å lage en enkelt hel komposisjon fra komponentdeler utvikleren den fleksibiliteten som trengs for å lage skallet og oppførselen til elementet på en spesifikk og sikker måte.

Påminnelse! Komponentdeler kan ha urelaterte rekvisitter, inkludert elementære deler som utgjør biblioteker eller funksjoner.

Dersom du trenger å bruke en utseendefri funksjon for å arbeide med komponenter for andre eller tredje gang, trekk den ut i en egen JS-modul. Flytt den inn i en komponent og bruk den genererte funksjonen uten ytterligere utvidelse. React eller Vue eller Angular, hva du skal velge: https://youtu.be/Nm8GpLCAgwk

React.js-prinsipper

Hele filosofien til JavaScript-biblioteket er skjult i React-guiden. Det ser ut til at dette er langt og ikke av så stor betydning, men mange brukere hevder at etter å ha lest alt falt på plass. Dokumentasjonen er ganske gammel, men fortsatt av stor verdi og relevans –
https://ru.reactjs.org/docs/thinking-in-react.html . React js-opplæringen https://ru.reactjs.org/tutorial/tutorial.html

Funksjonaliteten til React.js-biblioteket

Ved å bruke JavaScript-biblioteket får brukeren muligheten til å gi all oppmerksomhet direkte til UI-utviklingsprosessen og komponentene i applikasjonen, minst av alt å bli distrahert av dannelsen og mulige mangler ved den skrevne koden. Biblioteket lar deg utvikle programmer raskere, gjør det enklere å konfigurere og redigere komponentene og prosessen for hele prosjektet som helhet. Dermed inneholder React.js elementer som er ansvarlige for kommunikasjon i det globale nettverket, UI, programtilstandskontroll og muligheten til å løse andre komplekse problemstillinger. Biblioteket har også følgende funksjonelle funksjoner:

1. Praktisk . React.js er tilgjengelig i minifisert format. Denne kompakte pakken trenger ikke å være tydelig konfigurert. Den inkluderer allerede en kodedelingsfunksjon som reduserer tiden det tar å åpne nettleserversjonen av nettstedet, siden dette alternativet hindrer komponenter i å gjengi samtidig.
2. Pumpet økosystem og samsvar . Et stort antall verktøy er tilgjengelig i biblioteket, støttet av andre nettsteder, som lar brukeren utvikle nye komplekse programmer for ethvert formål.
3. Full funksjonalitet . Hovedfordelen med JavaScript-biblioteket er at alle nye versjoner av plattformen oppfyller kravene til de gamle, slik at du kan bruke både den gamle og den oppdaterte versjonen, alle støttes og er relevante i dag. Tidligere utgitte versjoner blir ikke foreldet etter de siste oppdateringene.

Praktisk bruk

På bibliotekets hovedside, i brukerveiledningen, er det flere illustrative eksempler på bruk av React i praksis. Du kan korrigere dem manuelt og prøve å kjøre dem. Selv om du er en ny bruker og ikke forstår essensen og logikken til biblioteket, juster koden etter eget ønske og se resultatet.

Praktisk bruk av React når du skriver handelsroboter i JavaScript

Det er viktig å innse at en utvikler ikke programmerer JS, men skriver scripts (scripts). derfor, ved å bruke biblioteket, kan en utvikler skrive kode for en påfølgende handelsrobot som brukes til handelsformål, og også fortsette å designe utseendet basert på denne plattformen. Faktisk er en handelsrobot for handel også en applikasjon, hvorav et stort antall utvikles ved hjelp av React.js. Noen funksjoner og den interne delen av boten vil imidlertid fortsatt måtte gjøres på andre nettsteder som tilbyr verktøy som er egnet for dette.

GitHub og React.js

GitHub er en plattform som er vert for alle versjoner av prosjekter. Brukeren kobler til hosting, går gjennom registreringsprosedyren på den offisielle GitHub-nettsiden, og oppretter deretter et online depot hvor han overfører alle filer fra Git.
Git er den mest populære og relevante prosjektversjonskontrolltjenesten i dag, og GitHub er et eksternt kodelager.

Referanse! Bare de brukerne som har mottatt riktig lenke med tillatelse har tilgang til å redigere og laste ned filer.

Dokumentasjon

Alle opplæringsprogrammer og oppdatert materiale angående JavaScript-biblioteket er oppdatert med den siste oppdateringen. Utviklere kompilerer og legger også ut for generell lesing av gamle versjoner av dokumentasjonen, lagt ut på en egen side i biblioteket. Derfor vil det være lettere for nybegynnere å mestre ferdighetene til nettstedsadministrasjon: både gammelt og nytt materiale – alt er her, tilgang er gratis for alle.

Merk! Ikke glem å lese manualene. Ta i det minste en titt – allerede vil det meste av det som virket uforståelig falle på plass.

React-biblioteket er en populær og relevant plattform i dag. Dens allsidighet lar utviklere lage prosjekter av bedre kvalitet og på kortere tid. I tillegg gjør det å kjenne plattformen og ha kompetansen til å bruke den en spesialist mer etterspurt i arbeidsmarkedet.