React.JS für Anfänger-Dummies, die die Bibliothek beim Schreiben von Handelsrobotern verwenden

Was ist React JS für Anfänger-Dummies, was ist es, Tutorials, Installation, Dokumentation – wie man die React JS-Bibliothek installiert und verwendet, wenn man Handelsroboter schreibt. In Stellenausschreibungen für Fachinformatiker finden Sie häufig eine Anforderung, die besagt, dass Sie Kenntnisse in der JavaScript-Bibliothek haben. Ja, und sie erwarten Kenntnisse über React nicht nur von Softwareentwicklern, sondern auch von Programmierern, die an der internen Entwicklung der Website und nicht an externem Design beteiligt sind. Was ist das für eine Bibliothek, welche Möglichkeiten bietet sie bei der Arbeit und wo fängt ein Anfänger mit dem Kennenlernen an? Lass es uns in diesem Artikel herausfinden.

JavaScript-Bibliothek – Reagieren: was ist das

React.JS ist eine Bibliothek der beliebten
Programmiersprache JavaScript , die vom sozialen Online-Netzwerk Facebook entwickelt wurde, um den Entwicklungsprozess der externen Hülle von Websites und Anwendungen zu verbessern und zu vereinfachen – der Schnittstelle, mit der der Benutzer interagiert. Das Hauptmerkmal der Bibliothek sind Komponenten und Zustände. Eine Komponente ist ein Teil eines digitalen Satzes, der für das Erscheinungsbild eines bestimmten Teils des zu entwerfenden Systems verantwortlich ist.

Beachten Sie! Solche Bauteile können verschachtelt werden.

Ein Zustand ist eine Sammlung aller Daten über die Details einer Schnittstelle, einschließlich ihrer repräsentativen Wiedergabe. Anhand von Beispielen erfahren wir genauer und anschaulicher, was was ist. Das Bild unten zeigt einige der großen Komponenten – das Posten in einem sozialen Online-Netzwerk, einen Abschnitt mit allgemeinen Informationen und das Zeigen von Fotos. Jeder Teil enthält kleinere Komponenten, die die Komponenten sind. Eine Veröffentlichung enthält beispielsweise Texte, Fotos, den Namen des Benutzers, der die Informationen veröffentlicht usw. Der Bildteil enthält einzelne Bilder und der allgemeine Informationsteil enthält Kurzinformationen.
Jede dieser Komponenten (Komponenten) hat einen Zustand. Das heißt, der Abschnitt mit allgemeinen Informationen sieht auf verschiedenen Geräten unterschiedlich aus, das Element „Gefällt mir“ ändert beim Drücken die Farbe und die Zahl ist für die Gesamtzahl der Likes verantwortlich. die Veröffentlichung wiederum kann den Text kürzen oder vollständig übermitteln.

Damit kommt die Flexibilität von React.JS zum Ausdruck – die Interface-Komponente wird einmal geschrieben und bekommt danach alle möglichen Zustände.

Warum wird die React-Bibliothek benötigt?

React.JS ist eine der möglichen Optionen, um JS- oder HTML-Code in einem geeigneten Format zu schreiben, Kopien davon zu erstellen und visuell darzustellen. Die Komponenten sind dabei in einer speziellen Systemsprache – JSX – geschrieben, die Elemente der Programmiersprache JavaScript und der standardisierten Auszeichnungssprache HTML enthält.
In JSX geschriebener Code ist ziemlich spezifisch. Wichtig ist auch, dass der Webbrowser diese Systemsprache nicht verstehen muss – der React.JS-Code wird an JS übertragen, was jeder Browser problemlos wahrnimmt. Dazu wird das, was in der Bibliothek erstellt wird, durch spezialisierte Compiler geleitet (einer der heute populäreren ist Babel js), die Codes in weniger bekannten Programmiersprachen in JavaScript-Darstellungen umwandeln.
Auf den ersten Blick mag das Bedienungssystem extrem unlogisch erscheinen, aber nach einer Weile gewöhnt man sich daran und erkennt, warum der Mechanismus so konzipiert ist. Die JavaScript-Bibliothek hat eine Reihe starker Vorteile:

• Die Systemprogrammiersprache ist leichter zu erkennen als das bekannte JavaScript, und folglich dauert es um ein Vielfaches weniger Zeit, den Code zu unterstützen und Fehler darin zu beseitigen (die Geschwindigkeit beim Schreiben neuer Codes und Programme wird entsprechend zunehmen);
• hier ist ein bequemes und praktisches System konstituierender Elemente eingebaut – sich wiederholende Teile des Codes, die in verschiedenen Phasen des Schreibens und in verschiedenen Programmen verwendet werden und sich auch je nach Kontext ändern;
• jedes konstituierende Element ist nur seinem Zustand untergeordnet , daher ist es einfacher, Mängel im Code zu korrigieren, wenn in der Praxis plötzlich ein Fehler in seiner Arbeit gefunden wird; falsche Momente schwimmen an die Oberfläche: Ein Element, das richtig funktioniert, wird in diesem Modus stabil weiterarbeiten, es sei denn natürlich, es wird der falsche Zustand in Bezug darauf verwendet.

Daraus können wir schließen, dass Sie mit der React.JS-Bibliothek erheblich Zeit sparen, den Code spezifischer gestalten, die Reihenfolge in der richtigen Reihenfolge organisieren und wieder große Blöcke verwenden können. Diese Vorteile ermöglichen es, die Kosten des Prozesses zum Erstellen von Benutzerschnittstellen zu reduzieren und die Zeit dieses Prozesses zu verkürzen. Mit den Fähigkeiten, die JS- und HTML-Programmiersprache zu verwenden, ist das Erlernen der Verwendung des Systems JSX einfach – nur wenige Tage, um es zu beherrschen.

Beachten Sie! Es ist sinnvoll, die Bibliothek bei der Arbeit mit großen Projekten zu verwenden, wenn eine große Anzahl dynamischer Seiten geschrieben werden muss. Eine Website für kleine Unternehmen benötigt solche Komplexitäten nicht.

React JS Grundkurs von A bis Z: https://youtu.be/GNrdg3PzpJQ

Bekanntschaft für Anfänger: Grundbegriffe

Hallo Welt!

Beim Zugriff auf die erste Seite der Bibliothek sieht der Benutzer als kleines Beispiel eine Begrüßungsüberschrift – „Hallo Welt!“.

Grundlagen der JSX-Systemsprache

JSX ist eine Systemprogrammiersprache, eine Erweiterung des bekannten JavaScript. Es beinhaltet eine Kombination aus zwei Sprachen – der JA-Programmierung und der standardisierten Auszeichnungssprache HTML. Entwickler passen damit das Konzept an, um React genau zu zeigen, wie die Benutzeroberfläche aussehen soll. JSX erstellt die „Teile“ der Bibliothek.

Was ist JSX?

Die React-Bibliothek hält sich an die Logik, dass die Essenz des Renderns direkt mit der Logik der Benutzeroberfläche zusammenhängt: wie Ereignisse verarbeitet werden, wie sich der Zustand in einem bestimmten Zeitraum ändert und wie Informationen für die Präsentation vorbereitet werden. Die JS-Bibliothek kann ohne ihre Systemsprache verwendet werden, aber viele Entwickler finden sie aufgrund ihrer Klarheit und Konkretheit wertvoll, wenn sie mit einer aus JavaScript-Code generierten Benutzeroberfläche arbeiten. Darüber hinaus erleichtert die Erweiterung React das Generieren von Benachrichtigungen über ungültige Momente und Fehler.

Bildung von Ausdrücken in der Systemsprache

Mit JSX können Sie alle gut geschriebenen JavaScript-Ausdrücke in geschweiften Klammern in einem Prozess verwenden.

JSX ist auch ein Ausdruck Sobald der Quellcode bytekodiert ist, verwandelt sich jeder JSX-Ausdruck in einen standardmäßigen JS-Funktionsaufruf, der auf die JavaScript-Kategorie abzielt. Daraus ist ersichtlich, dass die Systemerweiterung der offiziellen Programmiersprache innerhalb des if-Handbuchs und für Perioden verwendet werden kann.

JSX ist Objects Die von der Erweiterung repräsentierten Objekte werden als React-Elemente bezeichnet. Sie verdeutlichen das Ergebnis, das der Entwickler auf dem Display sehen möchte. Die Bibliothek erkennt diese Objekte und verwendet sie im Prozess der Generierung und Verwaltung des Dokumentobjektmodells.

Detailwiedergabe

Details sind die vielen kleinen Bausteine, aus denen React-Programme bestehen.
Details sind das Bild, das der Entwickler am Ende auf dem Monitor sehen will. Im Vergleich zu Document Object Model-Elementen sind Bibliothekselemente einfach und nehmen nicht viele Ressourcen in Anspruch. Elemente sind die Bestandteile von Komponenten.

Komponenten und Requisiten

Komponenten ermöglichen es, die Benutzeroberfläche in unabhängige Teile zu unterteilen, die einfacher separat zu bearbeiten sind. Sie können kombiniert und mehrfach verwendet werden. Die Funktionalität der Komponenten ähnelt größtenteils der Funktionalität der Programmiersprache JavaScript selbst. Sie nehmen Eingabeinformationen, die Props genannt werden, und geben React-Elemente zurück, die das Entwicklungsmodell angeben, das der Entwickler auf dem Monitor sehen möchte.

Komponentenvielfalt: Funktional und Klasse

Es ist am einfachsten, auf eine Bibliothekskomponente als Funktion zu verweisen.
Komponenten können auch im ES6-Klassenformat dargestellt werden.

Interessant! Die React-Bibliothek definiert diese beiden Arten von Komponenten als ähnlich.

Requisiten

Requisiten sind unveränderliche Objekte, die schreibgeschützt sind. Daher sollte eine Komponente nichts in ihre Props schreiben, egal zu welcher Art sie gehört.

Zustand und Lebenszyklus

Lassen Sie uns zunächst herausfinden, wie der Zustand bei der Arbeit richtig angewendet wird. Es gibt drei wichtige Dinge, die Sie über den Komponentenstatus wissen sollten:

1. Ändern Sie den Status nicht direkt, sondern verwenden Sie die setState-Methode. Denken Sie daran, dass der einzige Bereich, in dem Sie den Zustand direkt ändern können, der Konstruktor ist.
2. Zustandsaktualisierungen sind möglicherweise nicht synchron.
3. Der Informationsfluss hat eine Richtung. Bei der Komponentenkonstruktion weiß keiner von ihnen, ob der Zustand einer anderen Komponente zugeordnet ist. Dabei spielt es keine Rolle, wie dieses oder jenes eigenständige Funktionselement gebildet wurde – mit Hilfe eines Funktions- oder Klassifikationswerkzeugs. Dies wird als „Downstream“-Datenfluss bezeichnet. Ein Zustand ist immer für irgendein Element definiert, und strukturelle Zuordnungen dieses Zustands können nur Teile betreffen, die in der hierarchischen Ordnung „tiefer“ liegen.

Typischerweise wird der Zustand als „lokal“, „intern“ oder „ausgeblendet“ bezeichnet. Es ist nur für das Funktionselement selbst sichtbar und für andere Teile von React unsichtbar. Ob ein unabhängiges Funktionselement in Bibliotheksprogrammen mit einem bestimmten Zustand ausgestattet ist oder nicht, ist eine interne Entwicklung dieses Teils, die sich im Laufe der Zeit ändern kann. Interessant ist auch, dass man in der Arbeit Komponenten mit und ohne Zustand kombinieren kann.

Ereignisanalyse

Der Vorgang zum Analysieren von Ereignissen in React-Komponenten ähnelt dem Verarbeiten von Ereignissen in Dokumentobjektmodellelementen. Es gibt jedoch mehrere Merkmale, die sie voneinander unterscheiden:

1. Ereignisse in der JavaScript-Bibliothek werden in einem anderen Stil als dem Standardnamen benannt.
2. Unter Verwendung der System Extended Programming Language übergibt der Entwickler anstelle eines Strings eine Subroutine als Event-Handler.

Bedingtes Rendern von Elementen

Die JavaScript-Bibliothek ermöglicht es, die Logik der Entwicklung von Elementen in unabhängige Komponenten zu zerlegen. Sie können zur allgemeinen Anzeige eingeblendet oder ausgeblendet werden, je nachdem mit welchem ​​Zustand sie gerade ausgestattet sind. Die bedingte Darstellung von Elementen funktioniert nach dem gleichen Prinzip wie bedingte Ausdrücke, die auf der Programmiersprache JavaScript basieren. Manchmal kommt es vor, dass die Bibliothek eine Erklärung benötigt, wie sich der Status auf das Ausblenden oder Rendern einiger Elemente auswirkt. Hier ist es logischer, einen bedingten JS-Helfer oder ähnliche Ausdrücke wie if zu verwenden.

Komponenten wechseln

React-Bibliothekselemente können zu Variablen hinzugefügt werden. Dies ist eine praktische Lösung, wenn eine Bedingung angibt, ob ein Teil der Komponente gezeichnet werden soll oder keinen Sinn ergibt, während der Rest des Teils unverändert bleibt.

Listen und Schlüssel

Dieser Abschnitt enthält mehrere Komponenten:

1. Mehrere Elemente zeichnen . Der Benutzer kann eine Menge von Elementen bilden und sie mit geschweiften Klammern in die Programmiersprache des Systems einbetten.
2. Elementare Liste von Elementen . Häufig passen Benutzer und Entwickler Listen direkt innerhalb eines Bauteils an.

Schlüssel

Ein Schlüssel in der JavaScript-Bibliothek von React bezeichnet ein spezialisiertes Tool, das beim Generieren einer Liste von Komponenten eingegeben werden muss. Schlüssel helfen der JavaScript-Bibliothek zu erkennen, welche Elemente angepasst, hinzugefügt oder entfernt wurden. Es ist wichtig, sie zu markieren, damit React die Komponenten der Strukturdaten nach Ablauf einer gewissen Zeit korrelieren kann.

Formen

In der JS-Bibliothek funktionieren standardisierte Auszeichnungssprachenelemente etwas anders als Komponenten des Dokumentobjektmodells, da Formularelemente zunächst einen verborgenen Zustand haben.

Verwaltete Elemente

In einer standardisierten Auszeichnungssprache neigen Formulare wie input , select , textarea dazu, ihren Status selbst zu verwalten und ihn zu aktualisieren, wenn der Entwickler neue Informationen eingibt. Der Status von React.js definiert immer den Wert von Eingabefeldern in einem verwalteten Composing-Element. Obwohl dies anzeigt, dass der Benutzer etwas mehr als den ursprünglich angegebenen Code schreiben muss, ist es jetzt möglich, diesen Wert an andere Teile der Benutzeroberfläche zu übergeben.

Der Aufstieg des Staates

State Lifting ist eine standardisierte Vorlage, die jeder Entwickler kennen und im Arbeitsprozess anwenden können sollte. Durch die Verwendung werden komplexe und normalerweise nutzlose Zustandsverwaltungsmuster beseitigt.

Warum ist es so notwendig, den Aufstieg des Staates zu kontrollieren?

Das Anheben des Zustands auf das Niveau der vergangenen Komponenten für die Teile, die es erfordern, ist notwendig, damit alle Elemente am Zustand teilnehmen können. Ein stabiles Zustandsniveau erleichtert die Verteilung auf alle Komponenten, die darauf angewiesen sind.

Zusammensetzung vs. Vererbung

React.js enthält ein starkes Kompositionsmodell, daher wird empfohlen, den Prozess des Erstellens eines Ganzen aus Teilen anstelle von Vererbung zu verwenden, um zuvor geschriebenen Code zwischen Elementen wiederzuverwenden. Requisiten und die Möglichkeit, aus Einzelteilen eine einzige Gesamtkomposition zu erstellen, bieten dem Entwickler die erforderliche Flexibilität, um die Hülle und das Verhalten des Elements auf spezifische und sichere Weise zu erstellen.

Erinnerung! Komponententeile können nicht verwandte Requisiten annehmen, einschließlich elementarer Teile, aus denen Bibliotheken oder Funktionen bestehen.

Für den Fall, dass Sie eine Look-Free-Funktion für die Arbeit mit Komponenten ein zweites oder drittes Mal verwenden müssen, ziehen Sie sie in ein separates JS-Modul. Verschieben Sie es in eine Komponente und verwenden Sie die generierte Funktion ohne weitere Erweiterung. React oder Vue oder Angular, was soll man wählen: https://youtu.be/Nm8GpLCAgwk

React.js-Prinzipien

Die gesamte Philosophie der JavaScript-Bibliothek ist in der React-Anleitung verborgen. Es scheint, dass dies lang und nicht von so großer Bedeutung ist, aber viele Benutzer behaupten, dass nach dem Lesen alles an seinen Platz gepasst hat. Die Dokumentation ist ziemlich alt, aber immer noch von großem Wert und Relevanz –
https://ru.reactjs.org/docs/thinking-in-react.html . React js-Tutorial https://ru.reactjs.org/tutorial/tutorial.html

Funktionalität der React.js-Bibliothek

Mithilfe der JavaScript-Bibliothek erhält der Benutzer die Möglichkeit, seine ganze Aufmerksamkeit direkt auf den UI-Entwicklungsprozess und die Komponenten der Anwendung zu richten, wobei er am wenigsten von der Entstehung und möglichen Mängeln des geschriebenen Codes abgelenkt wird. Die Bibliothek ermöglicht eine schnellere Programmentwicklung, vereinfacht die Konfiguration und Bearbeitung der Komponenten und den Ablauf des gesamten Projekts als Ganzes. Daher enthält React.js Elemente, die für die Kommunikation im globalen Netzwerk, die Benutzeroberfläche, die Programmstatuskontrolle und die Fähigkeit zur Lösung anderer komplexer Probleme verantwortlich sind. Die Bibliothek hat auch die folgenden funktionalen Merkmale:

1. Praktikabilität . React.js ist im minimierten Format verfügbar. Dieses kompakte Paket muss nicht übersichtlich konfiguriert werden. Es enthält bereits eine Code-Splitting-Funktion, die die Zeit reduziert, die zum Öffnen der Browserversion der Website benötigt wird, da diese Option verhindert, dass Komponenten gleichzeitig gerendert werden.
2. Gepumptes Ökosystem und Compliance . In der Bibliothek ist eine große Anzahl von Tools verfügbar, die von anderen Sites unterstützt werden und es dem Benutzer ermöglichen, neue komplexe Programme für jeden Zweck zu entwickeln.
3. Volle Funktionalität . Der Hauptvorteil der JavaScript-Bibliothek besteht darin, dass alle neuen Versionen der Plattform die Anforderungen der alten erfüllen, sodass Sie sowohl die alte als auch die aktualisierte Version verwenden können, alle werden unterstützt und sind bis heute relevant. Zuvor veröffentlichte Versionen sind nach den neuesten Updates nicht veraltet.

Praktischer Nutzen

Auf der Hauptseite der Bibliothek, in den Anweisungen für Benutzer, gibt es mehrere anschauliche Beispiele für die Verwendung von React in der Praxis. Sie können sie manuell korrigieren und versuchen, sie auszuführen. Auch wenn Sie ein neuer Benutzer sind und das Wesen und die Logik der Bibliothek nicht verstehen, passen Sie den Code nach Ihren Wünschen an und sehen Sie sich das Ergebnis an.

Praktische Anwendung von React beim Schreiben von Handelsrobotern in JavaScript

Es ist wichtig zu erkennen, dass ein Entwickler JS nicht programmiert, sondern Skripte (Scripts) schreibt. Daher kann ein Entwickler unter Verwendung der Bibliothek Code für einen nachfolgenden Handelsroboter schreiben, der für Handelszwecke verwendet wird, und auch sein Erscheinungsbild basierend auf dieser Plattform weiter gestalten. Tatsächlich ist ein Handelsroboter für den Handel auch eine Anwendung, von denen eine große Anzahl mit React.js entwickelt wird. Einige Funktionen und der interne Teil des Bots müssen jedoch noch auf anderen Websites ausgeführt werden, die dafür geeignete Tools bereitstellen.

GitHub und React.js

GitHub ist eine Plattform, die alle Versionen von Projekten hostet. Der Benutzer verbindet sich mit dem Hosting, durchläuft das Registrierungsverfahren auf der offiziellen GitHub-Website und erstellt dann ein Online-Repository, in das er alle Dateien von Git überträgt.
Git ist heute der beliebteste und relevanteste Dienst zur Versionskontrolle von Projekten, und GitHub ist ein Remote-Code-Repository.

Bezug! Nur die Benutzer, die den entsprechenden Link mit Genehmigung erhalten haben, haben Zugriff auf das Bearbeiten und Herunterladen von Dateien.

Dokumentation

Alle Tutorials und aktuellen Materialien zur JavaScript-Bibliothek sind mit dem neuesten Update auf dem neuesten Stand. Entwickler kompilieren und veröffentlichen auch alte Versionen der Dokumentation zum allgemeinen Lesen, die auf einer separaten Seite der Bibliothek veröffentlicht werden. Daher wird es Anfängern leichter fallen, die Fähigkeiten des Site-Managements zu beherrschen: Sowohl altes als auch neues Material – alles ist da, der Zugang ist für alle kostenlos.

Beachten Sie! Vergessen Sie nicht, die Handbücher zu lesen. Schauen Sie es sich zumindest an – schon das meiste, was unverständlich schien, wird sich ergeben.

Die React-Bibliothek ist heute eine beliebte und relevante Plattform. Seine Vielseitigkeit ermöglicht es Entwicklern, Projekte von besserer Qualität und in kürzerer Zeit zu erstellen. Darüber hinaus macht die Kenntnis der Plattform und die Fähigkeiten, sie zu nutzen, einen Spezialisten auf dem Arbeitsmarkt gefragter.