React.JS vir beginner dummies, met behulp van die biblioteek wanneer jy handel robots skryf

Wat is React JS vir beginner dummies, wat is dit, tutoriale, installasie, dokumentasie – hoe om die React JS-biblioteek te installeer en te gebruik wanneer jy handelsrobotte skryf. Dikwels in posadvertensies vir rekenaarspesialiste kan jy ‘n vereiste vind wat sê dat jy vaardighede in die JavaScript-biblioteek het. Ja, en hulle verwag kennis van React nie net van sagteware-ontwikkelaars nie, maar ook van programmeerders wat betrokke is by die interne ontwikkeling van die webwerf, en nie eksterne ontwerp nie. Watter soort biblioteek is dit, watter geleenthede bied dit in werk, en waar begin ‘n beginner kennis maak? Kom ons vind dit uit in hierdie artikel.

JavaScript-biblioteek – Reageer: wat is dit

React.JS is ‘n biblioteek van die gewilde
JavaScript -programmeertaal , gevorm deur die aanlyn sosiale netwerk Facebook om die proses van die ontwikkeling van die eksterne dop van werwe en toepassings te verbeter en te vereenvoudig – die koppelvlak waarmee die gebruiker interaksie het. Die hoofkenmerk van die biblioteek is komponente en toestande. ‘n Komponent is ‘n deel van ‘n digitale stel wat verantwoordelik is vir die voorkoms van ‘n sekere deel van die stelsel wat ontwerp word.

Let wel! Sulke komponente kan genesteer word.

‘n Toestand is ‘n versameling van alle data oor die besonderhede van ‘n koppelvlak, insluitend die verteenwoordigende weergawe daarvan. Deur voorbeelde te gebruik, sal ons in meer besonderhede en duidelik uitvind wat is wat. Die prent hieronder wys ‘n paar van die groot komponente – plasing na ‘n aanlyn sosiale netwerk, ‘n afdeling met algemene inligting en wys foto’s. Elke deel bevat kleiner komponente, wat die komponente is. Byvoorbeeld, ‘n publikasie bevat teks, foto’s, die naam van die gebruiker wat die inligting publiseer, ens. Die prentafdeling sluit individuele prente in, en die algemene inligtingsafdeling bevat kort inligting.
Elkeen van hierdie komponente (komponente) het ‘n toestand. Dit wil sê, die afdeling met algemene inligting sal anders lyk op verskillende toestelle, die “like”-element verander van kleur wanneer dit gedruk word en die nommer wat verantwoordelik is vir die totale aantal likes; die publikasie kan op sy beurt die teks verkort of volledig versend.

Dus word die buigsaamheid van React.JS uitgedruk – die koppelvlakkomponent word een keer geskryf, en daarna kry dit alle moontlike toestande.

Hoekom is die React-biblioteek nodig?

React.JS is een van die moontlike opsies om JS- of HTML-kode in ‘n gerieflike formaat te skryf, kopieë daarvan te vorm en dit visueel te maak. Die komponente hier is in ‘n spesiale stelseltaal geskryf – JSX, wat elemente van die JavaScript-programmeertaal en die gestandaardiseerde HTML-opmerktaal insluit.
Kode geskryf in JSX is redelik spesifiek. Dit is ook belangrik dat die webblaaier nie hierdie stelseltaal hoef te verstaan ​​nie – die React.JS-kode word na JS oorgedra, wat enige blaaier sonder probleme waarneem. Om dit te doen, word wat in die biblioteek geskep word, deur gespesialiseerde samestellers gestuur (een van die gewildste vandag is Babel js), wat kodes in minder bekende programmeertale omskakel na JavaScript-voorstellings.
Aanvanklik mag dit voorkom asof die gebruikstelsel uiters onlogies is, maar na ‘n rukkie raak jy gewoond daaraan en besef jy hoekom die meganisme so ontwerp is. Die JavaScript-biblioteek het ‘n aantal sterk voordele:

• die stelselprogrammeertaal is makliker om te herken as die bekende JavaScript, en gevolglik sal dit ‘n paar keer minder tyd neem om die kode te ondersteun en foute daarop uit te skakel (die spoed van die skryf van nuwe kodes en programme sal dienooreenkomstig toeneem);
• ‘n gerieflike en praktiese stelsel van samestellende elemente word hier ingebou – herhalende dele van die kode wat op verskillende stadiums van skryf en in verskillende programme gebruik word, en ook verander na gelang van die konteks;
• elke samestellende element is slegs ondergeskik aan sy toestand , daarom is dit makliker om tekortkominge in die kode reg te stel as ‘n fout skielik in sy werk in die praktyk gevind word; verkeerde oomblikke dryf na die oppervlak: ‘n element wat behoorlik funksioneer sal aanhou om stabiel te werk in hierdie modus, tensy natuurlik die verkeerde toestand met betrekking tot dit gebruik word.

Ons kan dus tot die gevolgtrekking kom dat die React.JS-biblioteek baie tyd kan bespaar, die kode meer spesifiek kan maak, die volgorde in die regte volgorde kan organiseer en weer groot blokke kan gebruik. Hierdie voordele maak dit moontlik om die koste van die proses van die skep van gebruikerskoppelvlakke te verminder, asook om die tyd van hierdie einste proses te bespoedig. Met die vaardighede om die JS- en HTML-programmeertaal te gebruik, is dit maklik om die stelsel JSX te leer gebruik – net ‘n paar dae om dit te bemeester.

Let wel! Dit is rasioneel om die biblioteek te gebruik wanneer jy met groot projekte werk, wanneer dit nodig is om ‘n groot aantal dinamiese bladsye te skryf. ‘n Klein besigheidswerf het nie sulke kompleksiteite nodig nie.

Reageer JS fundamentele kursus van A tot Z: https://youtu.be/GNrdg3PzpJQ

Kennismaking vir beginners: basiese konsepte

Hello Wêreld!

By toegang tot die eerste bladsy van die biblioteek, sal die gebruiker ‘n welkome opskrif sien as ‘n klein voorbeeld – “Hallo wêreld!”.

Grondbeginsels van die JSX-stelseltaal

JSX is ‘n stelselprogrammeertaal, ‘n uitbreiding van die bekende JavaScript. Dit bevat ‘n kombinasie van twee tale – JA-programmering en die gestandaardiseerde HTML-opmaaktaal. Ontwikkelaars gebruik dit om die konsep aan te pas om React te wys presies hoe die gebruikerskoppelvlak moet lyk. JSX skep die “dele” van die biblioteek.

Wat is JSX?

Die React-biblioteek hou by die logika dat die essensie van lewering direk verband hou met die logika van die gebruikerskoppelvlak: hoe gebeure verwerk word, hoe toestand in ‘n sekere tydperk verander en hoe inligting voorberei word vir aanbieding. Die JS-biblioteek kan sonder sy stelseltaal gebruik word, maar ‘n groot aantal ontwikkelaars vind dit waardevol vanweë die duidelikheid en konkreetheid daarvan wanneer hulle werk met ‘n gebruikerskoppelvlak wat uit JavaScript-kode gegenereer word. Boonop maak die uitbreiding dit makliker vir React om ongeldige oomblik- en foutkennisgewings te genereer.

Vorming van uitdrukkings in die sisteemtaal

JSX laat jou toe om enige goedgeskrewe JavaScript-uitdrukkings binne krullerige hakies in ‘n proses te gebruik.

JSX is ook ‘n uitdrukking Sodra die bronkode bytekodeer is, verander enige JSX uitdrukking in ‘n standaard JS funksie oproep wat die JavaScript kategorie teiken. Hieruit kan verstaan ​​word dat die stelseluitbreiding van die amptelike programmeertaal binne die if-handleiding en vir periodes gebruik kan word.

JSX is Objects Die voorwerpe wat deur die uitbreiding verteenwoordig word, word React-elemente genoem. Hulle verduidelik die resultaat wat die ontwikkelaar op die skerm wil sien. Die biblioteek herken hierdie voorwerpe en gebruik hulle in die proses om die Dokumentobjekmodel te genereer en in stand te hou.

Detailweergawe

Besonderhede is die baie klein boublokkies waaruit React-programme bestaan.
Besonderhede is die prentjie wat die ontwikkelaar op die ou end op die monitor wil sien. In vergelyking met Document Object Model-elemente, is biblioteekelemente eenvoudig en neem nie baie hulpbronne op nie. Elemente is die bestanddele van komponente.

Komponente en rekwisiete

Komponente maak dit moontlik om die UI in onafhanklike dele te verdeel, wat makliker is om afsonderlik aan te werk. Hulle kan gekombineer word en verskeie kere gebruik word. Die funksionaliteit van die komponente is meestal soortgelyk aan die funksionaliteit van die JavaScript-programmeertaal self. Hulle neem insetinligting, wat rekwisiete genoem word, en gee React-elemente terug wat die ontwikkelingsmodel aandui wat die ontwikkelaar op die monitor wil sien.

Variëteite van komponente: funksioneel en klas

Dit is die maklikste om na ‘n biblioteekkomponent as ‘n funksie te verwys.
Komponente kan ook in ES6-klasformaat voorgestel word.

Interessant! Die React-biblioteek definieer hierdie twee soorte komponente as soortgelyk.

rekwisiete

Rekwisiete is onveranderlike voorwerpe wat leesalleen is. Daarom moet ‘n komponent niks aan sy rekwisiete skryf nie, maak nie saak aan watter soort dit behoort nie.

Toestand en lewensiklus

Laat ons eers uitvind hoe om die staat behoorlik by die werk toe te pas. Daar is drie belangrike dinge om te weet oor komponenttoestand:

1. Moenie die toestand direk verander nie, gebruik die setState-metode. Onthou dat die enigste area waar jy die toestand direk kan verander, die konstruktor is.
2. Staatopdaterings is dalk nie sinchronies nie.
3. Die vloei van inligting het een rigting. In komponentkonstruksie weet nie een van hulle of die staat aan ‘n ander komponent toegewys is nie. Dit maak nie saak hoe hierdie of daardie onafhanklike funksionele element gevorm is nie – met behulp van ‘n funksionele of klassifikasie-instrument. Dit word “stroomaf” datavloei genoem. ‘n Toestand word altyd vir een of ander element gedefinieer, en strukturele assosiasies van hierdie toestand kan slegs dele beïnvloed wat “onder” in die hiërargiese volgorde geleë is.

Tipies word daar na die staat verwys as “plaaslik”, “intern” of verborge. Dit is slegs sigbaar vir die funksionele element self en onsigbaar vir ander dele van React. In biblioteekprogramme, of ‘n onafhanklike funksionele element met ‘n sekere toestand toegerus is of nie, is ‘n interne ontwikkeling van hierdie deel, wat mettertyd kan verander. Dit is ook interessant dat u in die werk komponente met en sonder staat kan kombineer.

Gebeurtenisanalise

Die proses om gebeurtenisse in React-komponente te ontleed is soortgelyk aan die hantering van gebeure in dokumentobjekmodelelemente. Daar is egter verskeie kenmerke wat hulle van mekaar onderskei:

1. Gebeurtenisse in die JavaScript-biblioteek word in ‘n ander styl as die standaard een genoem.
2. Deur die System Extended Programming Language te gebruik, gee die ontwikkelaar ‘n subroetine deur as ‘n gebeurtenishanteerder in plaas van ‘n string.

Voorwaardelike weergawe van elemente

Die JavaScript-biblioteek maak dit moontlik om die logika van die ontwikkeling van elemente in onafhanklike komponente te breek. Hulle kan vertoon word vir algemene vertoning of versteek word, afhangende van watter toestand hulle op die oomblik toegerus is. Voorwaardelike weergawe van elemente werk op dieselfde beginsel as voorwaardelike uitdrukkings gebaseer op die JavaScript-programmeertaal. Soms gebeur dit dat die biblioteek ‘n verduideliking vereis van hoe die staat die verberging of weergawe van sommige elemente beïnvloed. Hier is dit meer logies om ‘n voorwaardelike JS-helper of uitdrukkings soortgelyk aan if te gebruik.

Verandering van komponente

React-biblioteekelemente kan by veranderlikes gevoeg word. Dit is ‘n praktiese oplossing wanneer een of ander voorwaarde aandui of ‘n deel van die komponent geteken moet word, of dit maak nie sin nie, terwyl die res van die deel onveranderd bly.

Lyste en sleutels

Hierdie afdeling bevat verskeie komponente:

1. Teken veelvuldige elemente . Die gebruiker kan ‘n stel elemente vorm en dit in die stelselprogrammeertaal insluit met behulp van krullerige hakies.
2. Elementêre lys van elemente . Dikwels pas gebruikers en ontwikkelaars lyste direk binne ‘n komponentdeel aan.

Sleutels

‘n Sleutel in die React JavaScript-biblioteek dui op ‘n gespesialiseerde hulpmiddel wat ingevoer moet word wanneer ‘n lys komponente gegenereer word. Sleutels help die JavaScript-biblioteek om te identifiseer watter items aangepas, bygevoeg of verwyder is. Dit is belangrik om hulle te merk sodat React die komponente van die strukturele data kan korreleer nadat ‘n sekere hoeveelheid tyd verloop het.

Vorms

In die JS-biblioteek werk gestandaardiseerde opmaaktaalelemente ‘n bietjie anders as komponente van die dokumentobjekmodel, omdat vormelemente aanvanklik ‘n versteekte toestand het.

Bestuurde items

In ‘n gestandaardiseerde opmaaktaal is vorms soos invoer , kies , teksarea geneig om hul eie toestand te handhaaf en dit op te dateer wanneer die ontwikkelaar nuwe inligting invoer. React.js-status definieer altyd die waarde van invoervelde in ‘n bestuurde samestellingselement. Alhoewel dit aandui dat die gebruiker ‘n bietjie meer as die oorspronklike gegewe kode moet skryf, is dit nou moontlik om hierdie waarde na ander dele van die gebruikerskoppelvlak deur te gee.

Die opkoms van die staat

Staatsopheffing is ‘n gestandaardiseerde sjabloon waarvan elke ontwikkelaar bewus moet wees en in die proses van werk moet kan toepas. Die gebruik daarvan sal komplekse en gewoonlik nuttelose staatsbestuurspatrone uitskakel.

Hoekom is dit so nodig om die opkoms van die staat te beheer?

Om die staat te verhoog tot die vlak van die vorige komponente vir daardie dele wat dit vereis, is nodig sodat alle elemente aan die staat kan deelneem. ‘n Stabiele vlak van staat sal dit makliker maak om dit te versprei onder al die komponente wat daarop staatmaak.

Samestelling vs oorerwing

React.js bevat ‘n sterk samestellingsmodel, daarom word dit aanbeveel om die proses te gebruik om ‘n geheel uit dele te bou in plaas van oorerwing om kode wat vroeër tussen elemente geskryf is, te hergebruik. Dus, rekwisiete en die vermoë om ‘n enkele hele komposisie uit komponentdele te skep, bied die ontwikkelaar die buigsaamheid wat nodig is om die dop en gedrag van die element op ‘n spesifieke en veilige manier te skep.

Herinnering! Komponente kan nie-verwante rekwisiete neem, insluitend elementêre dele waaruit biblioteke of funksies bestaan.

In die geval dat jy ‘n kykvrye funksie moet gebruik om ‘n tweede of derde keer met komponente te werk, trek dit uit in ‘n aparte JS-module. Skuif dit na ‘n komponent en gebruik die gegenereerde funksie sonder verdere uitbreiding. Reageer of Vue of Angular, wat om te kies: https://youtu.be/Nm8GpLCAgwk

React.js-beginsels

Die hele filosofie van die JavaScript-biblioteek is versteek in die React-gids. Dit blyk dat dit lank is en nie van so groot belang is nie, maar baie gebruikers beweer dat na die lees alles in plek geval het. Die dokumentasie is redelik oud, maar steeds van groot waarde en relevansie –
https://ru.reactjs.org/docs/thinking-in-react.html . Reageer js-tutoriaal https://ru.reactjs.org/tutorial/tutorial.html

Funksionaliteit van die React.js-biblioteek

Deur die JavaScript-biblioteek te gebruik, kry die gebruiker die geleentheid om al sy aandag direk aan die UI-ontwikkelingsproses en die komponente van die toepassing te gee, en allermins afgelei deur die vorming en moontlike tekortkominge van die geskrewe kode. Die biblioteek laat jou toe om programme vinniger te ontwikkel, maak dit makliker om die komponente en die proses van die hele projek as geheel te konfigureer en te redigeer. React.js bevat dus elemente wat verantwoordelik is vir kommunikasie in die globale netwerk, UI, programstaatbeheer en die vermoë om ander komplekse kwessies op te los. Die biblioteek het ook die volgende funksionele kenmerke:

1. Prakties . React.js is beskikbaar in verkleinde formaat. Hierdie kompakte pakket hoef nie duidelik gekonfigureer te word nie. Dit bevat reeds ‘n kodeverdelingsfunksie wat die tyd wat dit neem om die blaaierweergawe van die webwerf oop te maak, verminder, aangesien hierdie opsie verhoed dat komponente terselfdertyd weergegee word.
2. Gepompte ekosisteem en voldoening . ‘n Groot aantal hulpmiddels is in die biblioteek beskikbaar, ondersteun deur ander webwerwe, wat die gebruiker in staat stel om nuwe komplekse programme vir enige doel te ontwikkel.
3. Volle funksionaliteit . Die grootste voordeel van die JavaScript-biblioteek is dat alle nuwe weergawes van die platform voldoen aan die vereistes van die oues, sodat jy beide die ou en die opgedateerde weergawe kan gebruik, almal word ondersteun en is tot vandag toe relevant. Voorheen vrygestelde weergawes raak nie verouderd na die jongste opdaterings nie.

Praktiese gebruik

Op die hoofblad van die biblioteek, in die instruksies vir gebruikers, is daar verskeie illustratiewe voorbeelde van die gebruik van React in die praktyk. U kan dit handmatig regstel en probeer om dit uit te voer. Selfs as jy ‘n nuwe gebruiker is en nie die essensie en logika van die biblioteek verstaan ​​nie, pas die kode na jou smaak aan en sien die resultaat.

Praktiese toepassing van React wanneer u handelsrobotte in JavaScript skryf

Dit is belangrik om te besef dat ‘n ontwikkelaar nie JS programmeer nie, maar skrifte (scripts) skryf. daarom, met behulp van die biblioteek, kan ‘n ontwikkelaar kode skryf vir ‘n daaropvolgende handelsrobot wat vir handelsdoeleindes gebruik word, en ook voortgaan om sy voorkoms op grond van hierdie platform te ontwerp. Trouens, ‘n handelsrobot vir verhandeling is ook ‘n toepassing, waarvan ‘n groot aantal met behulp van React.js ontwikkel word. Sommige funksies en die interne deel van die bot sal egter steeds op ander werwe gedoen moet word wat gereedskap verskaf wat geskik is hiervoor.

GitHub en React.js

GitHub is ‘n platform wat alle weergawes van projekte huisves. Die gebruiker verbind hosting, gaan deur die registrasieprosedure op die amptelike GitHub-webwerf, en skep dan ‘n aanlynbewaarplek waar hy alle lêers vanaf Git oordra.
Git is vandag die gewildste en relevante projekweergawebeheerdiens, en GitHub is ‘n afgeleë kodebewaarplek.

Verwysing! Slegs die gebruikers wat die toepaslike skakel met toestemming ontvang het, het toegang om lêers te wysig en af ​​te laai.

Dokumentasie

Alle tutoriale en bygewerkte materiaal rakende die JavaScript-biblioteek is op datum met die jongste opdatering. Ontwikkelaars stel ook ou weergawes van die dokumentasie saam en plaas dit vir algemene lees, op ‘n aparte bladsy van die biblioteek geplaas. Daarom sal dit makliker wees vir beginners om die vaardighede van werfbestuur te bemeester: beide ou en nuwe materiaal – alles is hier, toegang is gratis vir almal.

Let wel! Moenie vergeet om die handleidings te lees nie. Kyk darem – die meeste van wat onverstaanbaar gelyk het, sal reeds in plek val.

Die React-biblioteek is vandag ‘n gewilde en relevante platform. Die veelsydigheid daarvan stel ontwikkelaars in staat om projekte van beter gehalte en in minder tyd te maak. Daarbenewens maak die kennis van die platform en die vaardighede om dit te gebruik ‘n spesialis meer in aanvraag in die arbeidsmark.