React.JS voor beginnende dummies, gebruik de bibliotheek bij het schrijven van handelsrobots

Wat is React JS voor beginnende dummies, wat is het, tutorials, installatie, documentatie – hoe de React JS-bibliotheek te installeren en te gebruiken bij het schrijven van handelsrobots. Vaak kun je in vacatures voor computerspecialisten een vereiste vinden die zegt dat je vaardigheden hebt in de JavaScript-bibliotheek. Ja, en kennis van React verwachten ze niet alleen van softwareontwikkelaars, maar ook van programmeurs die zich bezighouden met de interne ontwikkeling van de site, en niet van het externe ontwerp. Wat voor soort bibliotheek is dit, welke kansen biedt het in het werk en waar begint een beginner om kennis te maken? Laten we het uitzoeken in dit artikel.

JavaScript-bibliotheek – Reageren: wat is het?

React.JS is een bibliotheek van de populaire
JavaScript -programmeertaal , gevormd door het online sociale netwerk Facebook om het ontwikkelingsproces van de externe schil van sites en applicaties – de interface waarmee de gebruiker communiceert, te verbeteren en te vereenvoudigen. Het belangrijkste kenmerk van de bibliotheek zijn componenten en toestanden. Een component is een onderdeel van een digitale set dat verantwoordelijk is voor het uiterlijk van een bepaald onderdeel van het systeem dat wordt ontworpen.

Opmerking! Dergelijke onderdelen kunnen worden genest.

Een staat is een verzameling van alle gegevens over de details van een interface, inclusief de representatieve weergave. Aan de hand van voorbeelden zullen we meer in detail en duidelijk te weten komen wat wat is. De afbeelding hieronder toont enkele van de belangrijkste componenten – posten op een online sociaal netwerk, een sectie met algemene informatie en het tonen van foto’s. Elk onderdeel bevat kleinere componenten, die de componenten zijn. Een publicatie bevat bijvoorbeeld tekst, foto’s, de naam van de gebruiker die de informatie publiceert, enz. Het beeldgedeelte bevat individuele afbeeldingen en het algemene informatiegedeelte bevat korte informatie.
Elk van deze componenten (componenten) heeft een status. Dat wil zeggen, het gedeelte met algemene informatie zal er op verschillende apparaten anders uitzien, het “vind ik leuk”-element verandert van kleur wanneer erop wordt gedrukt en het aantal dat verantwoordelijk is voor het totale aantal vind-ik-leuks; de publicatie kan op haar beurt de tekst inkorten of in zijn geheel overdragen.

Zo komt de flexibiliteit van React.JS tot uiting – de interfacecomponent wordt één keer geschreven en krijgt daarna alle mogelijke statussen.

Waarom is de React-bibliotheek nodig?

React.JS is een van de mogelijke opties om JS- of HTML-code in een handig formaat te schrijven, er kopieën van te maken en het visueel te maken. De componenten hier zijn geschreven in een speciale systeemtaal – JSX, die elementen van de JavaScript-programmeertaal en de gestandaardiseerde HTML-opmaaktaal bevat.
Code geschreven in JSX is vrij specifiek. Het is ook belangrijk dat de webbrowser deze systeemtaal niet hoeft te begrijpen – de React.JS-code wordt overgebracht naar JS, wat elke browser zonder problemen waarneemt. Om dit te doen, wordt wat in de bibliotheek wordt gemaakt door gespecialiseerde compilers geleid (een van de meest populaire tegenwoordig is Babel js), die codes in minder bekende programmeertalen omzetten in JavaScript-representaties.
In eerste instantie lijkt het gebruikssysteem uiterst onlogisch, maar na een tijdje raak je eraan gewend en realiseer je je waarom het mechanisme zo is ontworpen. De JavaScript-bibliotheek heeft een aantal sterke voordelen:

• de systeemprogrammeertaal is gemakkelijker te herkennen dan het bekende JavaScript, en als gevolg daarvan zal het vele malen minder tijd kosten om de code te ondersteunen en fouten te elimineren (de snelheid van het schrijven van nieuwe codes en programma’s zal dienovereenkomstig toenemen);
• hier is een handig en praktisch systeem van samenstellende elementen ingebouwd – repetitieve delen van de code die worden gebruikt in verschillende stadia van schrijven en in verschillende programma’s, en ook veranderen afhankelijk van de context;
• elk samenstellend element is alleen ondergeschikt aan zijn staat , daarom is het gemakkelijker om tekortkomingen in de code te corrigeren als er in de praktijk plotseling een fout in zijn werk wordt gevonden; verkeerde momenten drijven naar de oppervlakte: een element dat goed functioneert, blijft in deze modus stabiel werken, tenzij er natuurlijk de verkeerde toestand in verband wordt gebruikt.

We kunnen dus concluderen dat je met de React.JS-bibliotheek aanzienlijk tijd kunt besparen, de code specifieker kunt maken, de reeks in de juiste volgorde kunt ordenen en grote blokken opnieuw kunt gebruiken. Deze voordelen maken het mogelijk om de kosten van het proces van het maken van gebruikersinterfaces te verlagen en de tijd van dit proces te versnellen. Met de vaardigheden om de JS- en HTML-programmeertaal te gebruiken, is het gemakkelijk om het systeem JSX te leren gebruiken – slechts een paar dagen om het onder de knie te krijgen.

Opmerking! Het is rationeel om de bibliotheek te gebruiken bij het werken met grote projecten, wanneer het nodig is om een ​​groot aantal dynamische pagina’s te schrijven. Een kleine bedrijfssite heeft dergelijke complexiteit niet nodig.

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

Kennismaking voor beginners: basisconcepten

Hallo Wereld!

Wanneer de gebruiker de eerste pagina van de bibliotheek opent, ziet de gebruiker een welkomstkop als een klein voorbeeld – “Hallo wereld!”.

Grondbeginselen van de JSX-systeemtaal

JSX is een systeemprogrammeertaal, een uitbreiding van het bekende JavaScript. Het bevat een combinatie van twee talen – JA-programmering en de gestandaardiseerde HTML-opmaaktaal. Ontwikkelaars gebruiken het om het concept aan te passen om React precies te laten zien hoe de gebruikersinterface eruit zou moeten zien. JSX maakt de “delen” van de bibliotheek.

Wat is JSX?

De React-bibliotheek houdt vast aan de logica dat de essentie van weergave direct gerelateerd is aan de logica van de gebruikersinterface: hoe gebeurtenissen worden verwerkt, hoe de toestand verandert in een bepaalde periode en hoe informatie wordt voorbereid voor presentatie. De JS-bibliotheek kan worden gebruikt zonder de systeemtaal, maar een groot aantal ontwikkelaars vindt het waardevol vanwege de duidelijkheid en concreetheid bij het werken met een gebruikersinterface die is gegenereerd op basis van JavaScript-code. Bovendien maakt de extensie het voor React gemakkelijker om ongeldige moment- en foutmeldingen te genereren.

Vorming van uitdrukkingen in de systeemtaal

Met JSX kunt u alle goed geschreven JavaScript-expressies binnen accolades in een proces gebruiken.

JSX is ook een uitdrukking Zodra de broncode gebytecodeerd is, verandert elke JSX-uitdrukking in een standaard JS-functieaanroep die gericht is op de JavaScript-categorie. Hieruit kan worden begrepen dat de systeemuitbreiding van de officiële programmeertaal binnen de if-handleiding en voor perioden kan worden gebruikt.

JSX is Objects De objecten die door de extensie worden vertegenwoordigd, worden React-elementen genoemd. Ze verduidelijken het resultaat dat de ontwikkelaar op het scherm wil zien. De bibliotheek herkent deze objecten en gebruikt ze bij het genereren en onderhouden van het Document Object Model.

Detailweergave

Details zijn de vele kleine bouwstenen waaruit React-programma’s bestaan.
Details zijn het beeld dat de ontwikkelaar uiteindelijk op de monitor wil zien. Vergeleken met Document Object Model-elementen zijn bibliotheekelementen eenvoudig en nemen ze niet veel resources in beslag. Elementen zijn de bestanddelen van componenten.

Componenten en rekwisieten

Componenten maken het mogelijk om de UI op te delen in zelfstandige delen, waar afzonderlijk makkelijker aan te werken is. Ze kunnen worden gecombineerd en meerdere keren worden gebruikt. Voor het grootste deel is de functionaliteit van de componenten vergelijkbaar met de functionaliteit van de JavaScript-programmeertaal zelf. Ze nemen invoerinformatie, die rekwisieten worden genoemd, en retourneren React-elementen die het ontwikkelingsmodel aangeven dat de ontwikkelaar op de monitor wil zien.

Soorten componenten: functioneel en klasse

Het is het gemakkelijkst om naar een bibliotheekcomponent te verwijzen als een functie.
Componenten kunnen ook worden weergegeven in het ES6-klassenformaat.

Interessant! De React-bibliotheek definieert deze twee soorten componenten als vergelijkbaar.

rekwisieten

Props zijn onveranderlijke objecten die alleen-lezen zijn. Daarom mag een component niets naar zijn rekwisieten schrijven, ongeacht tot welke soort hij behoort.

Staat en levenscyclus

Laten we eerst eens kijken hoe we de staat op het werk correct kunnen toepassen. Er zijn drie belangrijke dingen die u moet weten over de status van een component:

1. Wijzig de status niet rechtstreeks, maar gebruik de methode setState. Onthoud dat het enige gebied waar u de status rechtstreeks kunt wijzigen, de constructor is.
2. Statusupdates zijn mogelijk niet synchroon.
3. De informatiestroom heeft één richting. In de constructie van componenten weet geen van hen of de status is toegewezen aan een ander onderdeel. Het maakt niet uit hoe dit of dat onafhankelijke functionele element is gevormd – met behulp van een functionele of classificatietool. Dit wordt de “downstream”-gegevensstroom genoemd. Er wordt altijd een toestand gedefinieerd voor een bepaald element, en structurele associaties van deze toestand kunnen alleen van invloed zijn op delen die zich “lager” in de hiërarchische volgorde bevinden.

Meestal wordt de staat “lokaal”, “intern” of verborgen genoemd. Het is alleen zichtbaar voor het functionele element zelf en onzichtbaar voor andere delen van React. In bibliotheekprogramma’s is de interne ontwikkeling van dat onderdeel, of een onafhankelijk functioneel element een bepaalde status heeft of niet, in de loop van de tijd kan veranderen. Het is ook interessant dat je in het werk componenten met en zonder staat kunt combineren.

Evenementanalyse

Het proces van het ontleden van gebeurtenissen in React-componenten is vergelijkbaar met het afhandelen van gebeurtenissen in documentobjectmodelelementen. Er zijn echter verschillende kenmerken die ze van elkaar onderscheiden:

1. Gebeurtenissen in de JavaScript-bibliotheek krijgen een andere naam dan de standaardstijl.
2. Met behulp van de System Extended Programming Language geeft de ontwikkelaar een subroutine door als een gebeurtenisafhandelaar in plaats van een string.

Voorwaardelijke weergave van elementen

De JavaScript-bibliotheek maakt het mogelijk om de logica van het ontwikkelen van elementen in onafhankelijke componenten te breken. Ze kunnen worden weergegeven voor algemene weergave of worden verborgen, afhankelijk van de staat waarin ze zich op dat moment bevinden. Voorwaardelijke weergave van elementen werkt volgens hetzelfde principe als voorwaardelijke expressies op basis van de JavaScript-programmeertaal. Soms komt het voor dat de bibliotheek uitleg nodig heeft over hoe de staat het verbergen of weergeven van sommige elementen beïnvloedt. Hier is het logischer om een ​​voorwaardelijke JS-helper of uitdrukkingen vergelijkbaar met if te gebruiken.

Componenten wijzigen

React-bibliotheekelementen kunnen aan variabelen worden toegevoegd. Dit is een praktische oplossing wanneer een voorwaarde aangeeft of een deel van het onderdeel moet worden getekend, of dat het geen zin heeft, terwijl de rest van het onderdeel ongewijzigd blijft.

Lijsten en sleutels

Dit onderdeel bevat verschillende onderdelen:

1. Meerdere elementen tekenen . De gebruiker kan een set elementen vormen en deze met accolades insluiten in de programmeertaal van het systeem.
2. Elementaire lijst van elementen . Vaak passen gebruikers en ontwikkelaars lijsten direct binnen een onderdeel aan.

Sleutels

Een sleutel in de React JavaScript-bibliotheek geeft een gespecialiseerde tool aan die moet worden ingevoerd bij het genereren van een lijst met componenten. Sleutels helpen de JavaScript-bibliotheek om te identificeren welke items zijn aangepast, toegevoegd of verwijderd. Het is belangrijk om ze te markeren, zodat React na een bepaalde tijd de componenten van de structurele gegevens kan correleren.

Formulieren

In de JS-bibliotheek werken gestandaardiseerde opmaaktaalelementen iets anders dan componenten van het documentobjectmodel, omdat formulierelementen aanvankelijk een verborgen status hebben.

Beheerde items

In een gestandaardiseerde opmaaktaal hebben formulieren zoals input , select , textarea de neiging om hun status zelf te beheren en deze bij te werken wanneer de ontwikkelaar nieuwe informatie invoert. React.js-status definieert altijd de waarde van invoervelden in een beheerd samenstellend element. Hoewel dit aangeeft dat de gebruiker iets meer moet schrijven dan de oorspronkelijk gegeven code, is het nu mogelijk om deze waarde door te geven aan andere delen van de gebruikersinterface.

De opkomst van de staat

State lifting is een gestandaardiseerd sjabloon waarvan elke ontwikkelaar op de hoogte moet zijn en tijdens het werk moet kunnen toepassen. Door het te gebruiken, worden complexe en meestal nutteloze patronen voor staatsbeheer geëlimineerd.

Waarom is het zo noodzakelijk om de opkomst van de staat te beheersen?

Het verhogen van de staat tot het niveau van de vroegere componenten voor die onderdelen die het nodig hebben, is nodig zodat alle elementen kunnen deelnemen aan de staat. Een stabiel statusniveau maakt het gemakkelijker om het te verdelen over alle componenten die erop vertrouwen.

Samenstelling versus overerving

React.js bevat een sterk compositiemodel, dus het wordt aanbevolen om het proces van het bouwen van een geheel uit delen te gebruiken in plaats van overerving om eerder geschreven code tussen elementen te hergebruiken. Zo bieden rekwisieten en de mogelijkheid om een ​​enkele hele compositie te maken uit onderdelen, de ontwikkelaar de flexibiliteit die nodig is om de schaal en het gedrag van het element op een specifieke en veilige manier te creëren.

Herinnering! Componenten kunnen niet-gerelateerde rekwisieten bevatten, inclusief elementaire onderdelen waaruit bibliotheken of functies bestaan.

Mocht je een look-free functie nodig hebben om een ​​tweede of derde keer met componenten te werken, trek deze dan uit in een aparte JS-module. Verplaats het naar een component en gebruik de gegenereerde functie zonder verdere uitbreiding. Reageer of Vue of Angular, wat te kiezen: https://youtu.be/Nm8GpLCAgwk

React.js-principes

De hele filosofie van de JavaScript-bibliotheek is verborgen in de React-gids. Het lijkt erop dat dit lang is en niet van zo’n groot belang, maar veel gebruikers beweren dat na het lezen alles op zijn plaats viel. De documentatie is vrij oud, maar nog steeds van grote waarde en relevantie –
https://ru.reactjs.org/docs/thinking-in-react.html . React js-tutorial https://ru.reactjs.org/tutorial/tutorial.html

Functionaliteit van de React.js-bibliotheek

Met behulp van de JavaScript-bibliotheek krijgt de gebruiker de mogelijkheid om al zijn aandacht direct te besteden aan het UI-ontwikkelingsproces en de componenten van de applicatie, en wordt hij vooral afgeleid door de vorming en eventuele tekortkomingen van de geschreven code. De bibliotheek stelt u in staat om sneller programma’s te ontwikkelen, maakt het gemakkelijker om de componenten en het proces van het hele project als geheel te configureren en te bewerken. React.js bevat dus elementen die verantwoordelijk zijn voor communicatie in het wereldwijde netwerk, gebruikersinterface, programmastatuscontrole en de mogelijkheid om andere complexe problemen op te lossen. De bibliotheek heeft ook de volgende functionele kenmerken:

1. Praktisch . React.js is beschikbaar in verkleind formaat. Dit compacte pakket hoeft niet overzichtelijk te worden geconfigureerd. Het bevat al een functie voor het splitsen van codes die de tijd die nodig is om de browserversie van de site te openen, verkort, omdat deze optie voorkomt dat componenten tegelijkertijd worden weergegeven.
2. Gepompt ecosysteem en compliance . Een groot aantal tools is beschikbaar in de bibliotheek, ondersteund door andere sites, waarmee de gebruiker nieuwe complexe programma’s voor elk doel kan ontwikkelen.
3. Volledige functionaliteit . Het belangrijkste voordeel van de JavaScript-bibliotheek is dat alle nieuwe versies van het platform voldoen aan de vereisten van de oude, zodat u zowel de oude als de bijgewerkte versie kunt gebruiken, ze worden allemaal ondersteund en zijn tot op de dag van vandaag relevant. Eerder uitgebrachte versies raken niet verouderd na de laatste updates.

Praktisch gebruik

Op de hoofdpagina van de bibliotheek, in de instructies voor gebruikers, staan ​​enkele illustratieve voorbeelden van het gebruik van React in de praktijk. U kunt ze handmatig corrigeren en proberen ze uit te voeren. Zelfs als je een nieuwe gebruiker bent en de essentie en logica van de bibliotheek niet begrijpt, pas de code naar wens aan en zie het resultaat.

Praktische toepassing van React bij het schrijven van handelsrobots in JavaScript

Het is belangrijk om te beseffen dat een ontwikkelaar geen JS programmeert, maar scripts (scripts) schrijft. daarom kan een ontwikkelaar met behulp van de bibliotheek code schrijven voor een volgende handelsrobot die voor handelsdoeleinden wordt gebruikt, en ook het uiterlijk blijven ontwerpen op basis van dit platform. In feite is een handelsrobot om te handelen ook een applicatie, waarvan een groot aantal wordt ontwikkeld met behulp van React.js. Sommige functies en het interne deel van de bot zullen echter nog moeten worden gedaan op andere sites die daarvoor geschikte tools bieden.

GitHub en React.js

GitHub is een platform dat alle versies van projecten host. De gebruiker verbindt hosting, doorloopt de registratieprocedure op de officiële GitHub-website en maakt vervolgens een online repository aan waar hij alle bestanden van Git overzet.
Git is tegenwoordig de meest populaire en relevante projectversiebeheerservice en GitHub is een externe coderepository.

Referentie! Alleen die gebruikers die de juiste link met toestemming hebben ontvangen, hebben toegang tot het bewerken en downloaden van bestanden.

Documentatie

Alle tutorials en up-to-date materiaal met betrekking tot de JavaScript-bibliotheek zijn up-to-date met de laatste update. Ontwikkelaars compileren en plaatsen voor algemeen lezen ook oude versies van de documentatie, die op een aparte pagina van de bibliotheek zijn geplaatst. Daarom zal het voor beginners gemakkelijker zijn om de vaardigheden van sitebeheer onder de knie te krijgen: zowel oud als nieuw materiaal – alles is hier, toegang is gratis voor iedereen.

Opmerking! Vergeet niet de handleidingen te lezen. Neem in ieder geval een kijkje – het meeste van wat onbegrijpelijk leek, zal nu al op zijn plaats vallen.

De React-bibliotheek is tegenwoordig een populair en relevant platform. Dankzij de veelzijdigheid kunnen ontwikkelaars projecten van betere kwaliteit en in minder tijd maken. Bovendien maakt het kennen van het platform en het hebben van de vaardigheden om het te gebruiken een specialist meer gevraagd op de arbeidsmarkt.