React.JS til begynderdukker, der bruger biblioteket, når du skriver handelsrobotter

Hvad er React JS for begyndere dummies, hvad er det, tutorials, installation, dokumentation – hvordan man installerer og bruger React JS-biblioteket, når man skriver handelsrobotter. Ofte kan du i stillingsannoncer for computerspecialister finde et krav, der siger, at du har kompetencer i JavaScript-biblioteket. Ja, og de forventer kendskab til React ikke kun fra softwareudviklere, men også fra programmører, der er engageret i den interne udvikling af siden, og ikke eksternt design. Hvad er det for et bibliotek, hvilke muligheder giver det i arbejdet, og hvor begynder en nybegynder at stifte bekendtskab? Lad os finde ud af det i denne artikel.

JavaScript-bibliotek – React: hvad er det

React.JS er et bibliotek af det populære
JavaScript -programmeringssprog , dannet af det online sociale netværk Facebook for at forbedre og forenkle processen med at udvikle den eksterne skal af websteder og applikationer – grænsefladen, som brugeren interagerer med. Bibliotekets hovedfunktion er komponenter og tilstande. En komponent er en del af et digitalt sæt, der er ansvarlig for udseendet af en bestemt del af systemet, der designes.

Bemærk! Sådanne komponentdele kan indlejres.

En tilstand er en samling af alle data om detaljerne i en grænseflade, inklusive dens repræsentationsgengivelse. Ved hjælp af eksempler finder vi mere detaljeret og tydeligt ud af, hvad der er hvad. Billedet nedenfor viser nogle af de store komponenter – opslag til et online socialt netværk, et afsnit med generel information og visning af fotos. Hver del indeholder mindre komponenter, som er komponenterne. Eksempelvis indeholder en publikation tekst, fotografier, navnet på den bruger, der udgiver oplysningerne osv. Billedafsnittet indeholder individuelle billeder, og det generelle informationsafsnit indeholder kort information.
Hver af disse komponenter (komponenter) har en tilstand. Det vil sige, at sektionen med generel information vil se anderledes ud på forskellige enheder, “like”-elementet skifter farve, når det trykkes, og nummeret er ansvarligt for det samlede antal likes; publikationen kan til gengæld forkorte teksten eller sende den i sin helhed.

Således kommer fleksibiliteten i React.JS til udtryk – grænsefladekomponenten skrives én gang, og derefter får den alle mulige tilstande.

Hvorfor er React-biblioteket nødvendigt?

React.JS er en af ​​de mulige muligheder for at skrive JS- eller HTML-kode i et praktisk format, danne kopier af det og gøre det visuelt. Komponenterne her er skrevet i et særligt systemsprog – JSX, som indeholder elementer af JavaScript programmeringssproget og det standardiserede HTML markup sprog.
Koden skrevet i JSX er ret specifik. Det er også vigtigt, at webbrowseren ikke skal forstå dette systemsprog – React.JS-koden overføres til JS, hvilket enhver browser opfatter uden problemer. For at gøre dette sendes det, der oprettes i biblioteket, gennem specialiserede compilere (en af ​​de mere populære i dag er Babel js), som konverterer koder på mindre kendte programmeringssprog til JavaScript-repræsentationer.
Umiddelbart kan det virke, som om brugssystemet er ekstremt ulogisk, men efter et stykke tid vænner du dig til det, og du indser, hvorfor mekanismen er designet på den måde. JavaScript-biblioteket har en række stærke fordele:

• systemprogrammeringssproget er lettere at genkende end det velkendte JavaScript, og det vil derfor tage flere gange mindre tid at understøtte koden og eliminere fejl på den (hastigheden på at skrive nye koder og programmer vil stige tilsvarende);
• et praktisk og praktisk system af bestanddele er indbygget her – gentagne dele af koden, der bruges på forskellige stadier af skrivning og i forskellige programmer, og som også ændrer sig afhængigt af konteksten;
• hvert bestanddel er kun underordnet dets tilstand , derfor er det lettere at rette mangler i koden, hvis der pludselig findes en fejl i dets arbejde i praksis; forkerte momenter flyder op til overfladen: et element, der fungerer korrekt, vil fortsætte med at arbejde stabilt i denne tilstand, medmindre, selvfølgelig, den forkerte tilstand bruges i forhold til det.

Således kan vi konkludere, at React.JS-biblioteket giver dig mulighed for betydeligt at spare tid, gøre koden mere specifik, organisere sekvensen i den rigtige rækkefølge og bruge store blokke igen. Disse fordele gør det muligt at reducere omkostningerne ved processen med at skabe brugergrænseflader, samt fremskynde tiden for netop denne proces. Når du har færdighederne til at bruge programmeringssproget JS og HTML, er det nemt at lære at bruge systemet JSX – kun et par dage at mestre det.

Bemærk! Det er rationelt at bruge biblioteket, når man arbejder med store projekter, når det er nødvendigt at skrive et stort antal dynamiske sider. En lille virksomhedsside har ikke brug for sådanne kompleksiteter.

React JS grundkursus fra A til Z: https://youtu.be/GNrdg3PzpJQ

Bekendtskab for begyndere: grundlæggende begreber

Hej Verden!

Når brugeren tilgår den første side af biblioteket, vil brugeren se en velkomstoverskrift som et lille eksempel – “Hej verden!”.

Grundlæggende om JSX-systemsproget

JSX er et systemprogrammeringssprog, en udvidelse af det velkendte JavaScript. Det inkluderer en kombination af to sprog – JA-programmering og det standardiserede HTML markup-sprog. Udviklere bruger det til at justere konceptet for at vise React præcis, hvordan brugergrænsefladen skal se ud. JSX opretter “delene” af biblioteket.

Hvad er JSX?

React-biblioteket overholder logikken om, at essensen af ​​gengivelse er direkte relateret til logikken i brugergrænsefladen: hvordan hændelser behandles, hvordan tilstand ændres i en bestemt periode, og hvordan information forberedes til præsentation. JS-biblioteket kan bruges uden dets systemsprog, men et stort antal udviklere finder det værdifuldt på grund af dets klarhed og konkrethed, når de arbejder med en brugergrænseflade genereret ud fra JavaScript-kode. Derudover gør udvidelsen det lettere for React at generere ugyldige øjebliks- og fejlmeddelelser.

Dannelse af udtryk i systemsproget

JSX giver dig mulighed for at bruge alle velskrevne JavaScript-udtryk inde i krøllede seler i en proces.

JSX er også et udtryk Når kildekoden er bytekodet, bliver ethvert JSX-udtryk til et standard JS-funktionskald, der er målrettet mod JavaScript-kategorien. Ud fra dette kan det forstås, at systemudvidelsen af ​​det officielle programmeringssprog kan bruges i if-manualen og i perioder.

JSX er Objekter Objekterne repræsenteret af udvidelsen kaldes React-elementer. De tydeliggør det resultat, som udvikleren ønsker at se på skærmen. Biblioteket genkender disse objekter og bruger dem i processen med at generere og vedligeholde dokumentobjektmodellen.

Detaljegengivelse

Detaljer er de mange små byggeklodser, der udgør React-programmer.
Detaljer er det billede, som udvikleren ønsker at se til sidst på skærmen. Sammenlignet med Document Object Model-elementer er bibliotekselementer enkle og optager ikke mange ressourcer. Elementer er bestanddele af komponenter.

Komponenter og rekvisitter

Komponenter gør det muligt at opdele brugergrænsefladen i selvstændige dele, som er nemmere at arbejde med hver for sig. De kan kombineres og bruges flere gange. For det meste svarer komponenternes funktionalitet til funktionaliteten af ​​selve JavaScript-programmeringssproget. De tager inputoplysninger, som kaldes rekvisitter, og returnerer React-elementer, der angiver den udviklingsmodel, som udvikleren ønsker at se på skærmen.

Varianter af komponenter: funktionel og klasse

Det er nemmest at henvise til en bibliotekskomponent som en funktion.
Komponenter kan også repræsenteres i ES6 klasseformat.

Interessant! React-biblioteket definerer disse to slags komponenter som ens.

rekvisitter

Rekvisitter er uforanderlige objekter, der er skrivebeskyttet. Derfor bør en komponent ikke skrive noget til sine rekvisitter, uanset hvilken slags den tilhører.

Tilstand og livscyklus

Lad os først finde ud af, hvordan man korrekt anvender staten på arbejdspladsen. Der er tre vigtige ting at vide om komponenttilstand:

1. Skift ikke tilstanden direkte, brug setState-metoden. Husk, at det eneste område, hvor du kan ændre tilstanden direkte, er konstruktøren.
2. Statusopdateringer er muligvis ikke synkrone.
3. Informationsstrømmen har én retning. I komponentkonstruktion ved ingen af ​​dem, om staten er tildelt en anden komponent. Det er ligegyldigt, hvordan dette eller hint uafhængige funktionelle element blev dannet – ved hjælp af et funktionelt eller klassifikationsværktøj. Dette kaldes “downstream” dataflow. En tilstand er altid defineret for et eller andet element, og strukturelle associationer af denne tilstand kan kun påvirke dele, der er placeret “lavere” i den hierarkiske rækkefølge.

Typisk omtales staten som “lokal”, “intern” eller skjult. Den er kun synlig for selve det funktionelle element og usynlig for andre dele af React. I biblioteksprogrammer er om et uafhængigt funktionelt element er udstyret med en bestemt tilstand eller ej en intern udvikling af den del, som kan ændre sig over tid. Det er også interessant, at du i arbejdet kan kombinere komponenter med og uden stat.

Hændelsesanalyse

Processen med at parse hændelser i React-komponenter ligner håndtering af hændelser i dokumentobjektmodelelementer. Der er dog flere funktioner, der adskiller dem fra hinanden:

1. Begivenheder i JavaScript-biblioteket er navngivet i en anden stil end standard.
2. Ved at bruge System Extended Programming Language sender udvikleren en subrutine som hændelseshandler i stedet for en streng.

Betinget gengivelse af elementer

JavaScript-biblioteket gør det muligt at bryde logikken i at udvikle elementer til uafhængige komponenter. De kan vises til generel visning eller skjules, afhængigt af hvilken tilstand de er udstyret med i øjeblikket. Betinget gengivelse af elementer fungerer efter samme princip som betingede udtryk baseret på programmeringssproget JavaScript. Nogle gange sker det, at biblioteket kræver en forklaring på, hvordan tilstanden påvirker skjulningen eller gengivelsen af ​​nogle elementer. Her er det mere logisk at bruge en betinget JS-hjælper eller udtryk, der ligner if.

Ændring af komponenter

React-bibliotekselementer kan tilføjes til variabler. Dette er en praktisk løsning, når en betingelse angiver, om en del af komponenten skal tegnes, eller det ikke giver mening, mens resten af ​​delen forbliver uændret.

Lister og nøgler

Dette afsnit indeholder flere komponenter:

1. Tegning af flere elementer . Brugeren kan danne et sæt elementer og indlejre det i systemets programmeringssprog ved hjælp af krøllede klammeparenteser.
2. Elementær liste over elementer . Ofte justerer brugere og udviklere lister direkte i en komponentdel.

Nøgler

En nøgle i React JavaScript-biblioteket angiver et specialiseret værktøj, der skal indtastes, når en liste over komponenter genereres. Taster hjælper JavaScript-biblioteket med at identificere, hvilke elementer der er blevet justeret, tilføjet eller fjernet. Det er vigtigt at markere dem, så React kan korrelere komponenterne i de strukturelle data efter en vis tid er gået.

Former

I JS-biblioteket fungerer standardiserede markup-sprogelementer lidt anderledes end komponenter i dokumentobjektmodellen, fordi formularelementer oprindeligt har en skjult tilstand.

Administrerede varer

I et standardiseret opmærkningssprog har former som input , select , textarea en tendens til selv at administrere deres tilstand og opdatere den, når udvikleren indtaster nye oplysninger. React.js-tilstand definerer altid værdien af ​​inputfelter i et administreret komponerende element. Selvom dette indikerer, at brugeren skal skrive lidt mere end den oprindelige givne kode, er det nu muligt at videregive denne værdi til andre dele af brugergrænsefladen.

Statens opståen

State lifting er en standardiseret skabelon, som enhver udvikler bør være opmærksom på og kunne anvende i arbejdet. Brug af det vil eliminere komplekse og normalt ubrugelige statsforvaltningsmønstre.

Hvorfor er det så nødvendigt at kontrollere statens fremgang?

At hæve staten til niveauet for de tidligere komponenter for de dele, der kræver det, er nødvendigt, så alle elementer kan deltage i staten. Et stabilt tilstandsniveau vil gøre det lettere at fordele det blandt alle de komponenter, der er afhængige af det.

Sammensætning vs arv

React.js inkluderer en stærk kompositionsmodel, så det anbefales at bruge processen med at bygge en helhed fra dele i stedet for arv til at genbruge tidligere skrevet kode mellem elementer. Rekvisitter og evnen til at skabe en enkelt hel komposition fra komponentdele giver således udvikleren den nødvendige fleksibilitet til at skabe elementets skal og opførsel på en specifik og sikker måde.

Påmindelse! Komponentdele kan have ikke-relaterede rekvisitter, inklusive elementære dele, der udgør biblioteker eller funktioner.

Hvis du skal bruge en look-free funktion til at arbejde med komponenter en anden eller tredje gang, skal du trække den ud i et separat JS-modul. Flyt den til en komponent og brug den genererede funktion uden yderligere udvidelse. React eller Vue eller Angular, hvad skal du vælge: https://youtu.be/Nm8GpLCAgwk

React.js principper

Hele filosofien bag JavaScript-biblioteket er skjult i React-guiden. Det ser ud til, at dette er langt og ikke af så stor betydning, men mange brugere hævder, at efter at have læst alt faldt på plads. Dokumentationen er ret gammel, men stadig af stor værdi og relevans –
https://ru.reactjs.org/docs/thinking-in-react.html . React js tutorial https://ru.reactjs.org/tutorial/tutorial.html

Funktionalitet af React.js-biblioteket

Ved at bruge JavaScript-biblioteket får brugeren mulighed for at være opmærksom direkte på UI-udviklingsprocessen og komponenterne i applikationen, mindst af alt at blive distraheret af dannelsen og mulige mangler i den skrevne kode. Biblioteket giver dig mulighed for at udvikle programmer hurtigere, gør det nemmere at konfigurere og redigere komponenterne og processen for hele projektet som helhed. React.js indeholder således elementer, der er ansvarlige for kommunikation i det globale netværk, UI, programtilstandskontrol og evnen til at løse andre komplekse problemstillinger. Biblioteket har også følgende funktionelle funktioner:

1. Praktisk . React.js er tilgængelig i minificeret format. Denne kompakte pakke behøver ikke at være klart konfigureret. Den indeholder allerede en kodeopdelingsfunktion, der reducerer den tid, det tager at åbne browserversionen af ​​webstedet, da denne mulighed forhindrer komponenter i at gengive på samme tid.
2. Pumpet økosystem og overholdelse . Et stort antal værktøjer er tilgængelige i biblioteket, understøttet af andre websteder, som giver brugeren mulighed for at udvikle nye komplekse programmer til ethvert formål.
3. Fuld funktionalitet . Den største fordel ved JavaScript-biblioteket er, at alle nye versioner af platformen opfylder kravene fra de gamle, så du kan bruge både den gamle og den opdaterede version, alle understøttes og er relevante den dag i dag. Tidligere udgivne versioner bliver ikke forældede efter de seneste opdateringer.

Praktisk brug

På bibliotekets hovedside er der i brugervejledningen flere illustrative eksempler på brug af React i praksis. Du kan manuelt rette dem og prøve at køre dem. Selvom du er ny bruger og ikke forstår essensen og logikken i biblioteket, skal du justere koden efter din smag og se resultatet.

Praktisk anvendelse af React, når du skriver handelsrobotter i JavaScript

Det er vigtigt at indse, at en udvikler ikke programmerer JS, men skriver scripts (scripts). Derfor kan en udvikler ved hjælp af biblioteket skrive kode til en efterfølgende handelsrobot, der bruges til handelsformål, og også fortsætte med at designe dens udseende baseret på denne platform. Faktisk er en handelsrobot til handel også en applikation, hvoraf et stort antal udvikles ved hjælp af React.js. Nogle funktioner og den interne del af botten skal dog stadig udføres på andre websteder, der leverer værktøjer, der er egnede til dette.

GitHub og React.js

GitHub er en platform, der er vært for alle versioner af projekter. Brugeren forbinder hosting, gennemgår registreringsproceduren på det officielle GitHub-websted og opretter derefter et online-depot, hvor han overfører alle filer fra Git.
Git er den mest populære og relevante projektversionskontroltjeneste i dag, og GitHub er et fjernkodelager.

Reference! Kun de brugere, der har modtaget det relevante link med tilladelse, har adgang til at redigere og downloade filer.

Dokumentation

Alle tutorials og opdaterede materialer vedrørende JavaScript-biblioteket er opdateret med den seneste opdatering. Udviklere kompilerer og poster også til generel læsning af gamle versioner af dokumentationen, som er lagt ud på en separat side i biblioteket. Derfor vil det være lettere for begyndere at mestre færdighederne inden for site management: både gammelt og nyt materiale – alt er her, adgang er gratis for alle.

Bemærk! Glem ikke at læse manualerne. Tag i det mindste et kig – allerede vil det meste af det, der virkede uforståeligt, falde på plads.

React-biblioteket er en populær og relevant platform i dag. Dens alsidighed giver udviklere mulighed for at lave projekter af bedre kvalitet og på kortere tid. At kende platformen og have kompetencerne til at bruge den gør desuden en specialist mere efterspurgt på arbejdsmarkedet.