Es gibt bereits viele Artikel über ReactJS. Um jedoch mit dem Studium eines Programmieranfängers zu beginnen, müssen Sie den Anfang finden, an dem sich die Grundlagen seiner Erstellung befinden. Ich wollte zeigen, dass es nicht kompliziert ist, die Prinzipien der Entwicklung eines Frontends für dieses Framework zu verstehen.
Mit einer Methode konnte ich die Struktur vieler komplexer Softwaresysteme verstehen, und es kommt darauf an, dass Sie das zu untersuchende Projekt neu schreiben müssen, damit Sie eine Art unbekanntes Biest erhalten, das sich zumindest ein wenig bewegt und dem Prototyp etwas ähnelt.
Ich muss zugeben, dass ich ein Back-End bin und nicht einmal weiß, was mich dazu motiviert hat, ein Mikroframework in JavaScript zu schreiben. Aber ehrlich gesagt ist dies ein Wunsch, JS zu lernen.
Tatsächlich gibt es eine gute Motivation, Projekte in Form von Modulen / Komponenten zu erstellen. Aus Sicht von Backend-Programmierern sehen Daten bestenfalls wie JSON-Objekte aus. Sie sollten in die gewünschte Struktur geformt und bei Bedarf gesendet werden und dann mit ihnen tun, was Sie wollen. Am Frontend müssen Sie in der primitivsten Version die erforderlichen HTML-Elemente nach ID auswählen und ihre Attribute aktualisieren sowie die Textknoten ändern. Machen Sie JavaScript-Frameworks das Leben leichter.
Einmal habe ich mein PHP-Slim-Framework geschrieben, das weit vom Original entfernt ist, aber es hilft mir wirklich bei PHP-Projekten. Heute möchte ich darüber sprechen, wie ich die Ursprünge der ReactJS-Entwicklung dargestellt habe. Ich habe eine Datei in 135 Codezeilen geschrieben, die bots.js heißt, und wenn Sie sie verbinden und eine Komponente wie in React schreiben, können Sie sogar etwas im Browser sehen. Ich habe ihn ReactKids genannt.
Die Idee ist, das Projekt in Komponenten aufzuteilen, Komponenten mit Javascript hinzuzufügen und sicherzustellen, dass keine Abhängigkeiten zwischen den Komponenten bestehen.
HTML-Standardstruktur:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>HelloReactKids</title> <link href="style.css" rel="stylesheet"> </head> <body> <div id="root"></div> <script src="js/bots.js"></script> <script src="js/pict.js"></script> <script src="js/navbar.js"></script> <script src="js/label.js"></script> <script src="js/button.js"></script> <script src="js/app.js"></script> </body> </html>
Geben Sie für die Anwendung id = root an und verbinden Sie bots.js, verbinden Sie die Komponenten (oder schreiben Sie sie selbst) und führen Sie sie in app.js aus.
Die Komponente in ReactKids sieht folgendermaßen aus:
function Button(attr) {
Die Komponente kann in unserem Fall nur eine Funktion sein, in der params als attr bezeichnet wird.
Hier sollten Sie darauf achten, warum dieses Attribut nützlich sein kann. Nun, zuallererst wissen diejenigen, die mit der Reaktion vertraut sind, dass es möglich ist, die Daten auf ihre Tochterkomponenten zu "senken". Das heißt, eine Komponente gibt eine Komponente zurück, die eine Komponente zurückgibt, und so weiter, bis eine Komponente ohne untergeordnete Elemente vorhanden ist. Sie werden jedoch auch als Pakete für Daten verwendet, die vom Server stammen. Anforderungen für das Backend werden zum größten Teil von Funktionen gesendet, die Ereignisse im Zusammenhang mit der Interaktion mit der Benutzeroberfläche verarbeiten.
Wenn der Server JSON zurücksendet (normalerweise in Textform), muss er in ein JS-Objekt umgewandelt und irgendwo ausgeführt werden. Dies ist, wofür params in React und attr in unserer Kinderimplementierung sind.
In attr können Sie das gesamte vom Server empfangene JSON-Objekt komprimieren oder Sie können nur die
besten Daten abrufen, die Sie benötigen, und möglicherweise mit anderen erforderlichen Daten ergänzen.
Als nächstes folgen wir der Logik der erwachsenen Reaktion - zu Beginn der Funktion verarbeiten wir das attr-Objekt und führen andere geschäftliche Angelegenheiten aus. Dann müssen Sie das Ergebnis des Aufrufs der Funktion elem () zurückgeben, deren Implementierung sich in bots.js befindet. Folgende Parameter werden an die Aufrufparameter übergeben:
- Der Name des Tags.
- Objekt mit Stilen (im JS-Format)
- Attribute für das Tag.
- Text, ein anderes Tag oder eine andere Komponente (Kind) oder nichts wird übergeben.
Schauen Sie sich app.js an:
var attr = { labelContent: "Hello React Kids", labelButton: "This button", } rend(document.getElementById("root"), App(attr)) function App(attr) { return elem( "div", { fontFamily: "segoe ui", color: "gray", textAlign: "center", }, { id: "app", }, [ Navbar(attr), Pict(attr), Label(attr), Button(attr), ] ) }
Auch hier nichts Ungewöhnliches. Hier ist das selbe komplizierter:
function App(attr) { var cpic1 = CirclePict({id: "img1", src: "./img/img1.jpg", height: "200px"}) var cpic2 = CirclePict({id: "img1", src: "./img/img2.jpg", height: "200px"}) var cpic3 = CirclePict({id: "img1", src: "./img/img3.jpg", height: "200px"}) var txt1 = " . ."; var txt2 = " , ."; return elem( "div", { fontFamily: "segoe ui", color: "gray", }, { id: "app", }, [ Pict({id: "logo", src: "./img/logo.png", height: "90%"}), Text({id: "info", text: "you number", direction: "right"}), Label(attr), Outer({id: "outer1", content: [cpic1, cpic2, cpic3]}), Text({id: "txt1", text: txt1, width: "450px"}), Button(attr), Label({id: "lbl2", labelContent: " "}), Text({id: "txt2", text: txt2, width: "650px", direction: "center"}), RoundPict({id: "well", src: "./img/well.jpg", height: "280px", width: "550"}) ] ) }
Wie Sie sehen, haben wir die CirclePict-Komponente in die Outer 3-Komponente eingebettet.
Kinder bemerkten natürlich den Mangel an JSX. Tatsächlich wurde es von faulen Programmierern erfunden und erleichtert einfach das, was wir schreiben. Daher werden JSX-Tags immer noch zu JavaScript.
Jetzt müssen Sie sehen, wie dies jetzt in bots.js implementiert ist. Das Framework besteht aus drei vollständigen Funktionen, nämlich elem () und setAttr (). Die erste erstellt, die zweite aktualisiert den Status der Komponente und rend () wird in app.js angezeigt.
function elem(elt, style, attr, item) { if(elt) {
Die Funktion verarbeitet die übergebenen Parameter in der gleichen Reihenfolge:
- Erstellen Sie eine Komponente in der Dokumentstruktur.
- Stile hinzufügen.
- Attribute.
- Hinzufügen eines untergeordneten Elements als Text oder anderes Element.
Bei der Verarbeitung von Attributen überprüfen wir auch deren Typ. Wenn eine Funktion als Wert empfangen wird, wird angenommen, dass dies ein Ereignis ist, und wir hängen ein Abhören daran. Es bleibt daher nur die als Ereignis angegebene Funktion zu deklarieren und zu implementieren.
In dieser Ereignisbehandlungsfunktion rufen wir setAttr () auf und übergeben das Objekt selbst mit dem aktualisierten attr an das Objekt. Es gibt eine Sache, aber - für jedes Element, das in attr erstellt werden soll, müssen Sie id angeben, sonst wird es nicht über setAttr aktualisiert. Sie findet es im DOM.
Bei setAttr () ist alles schlechter als bei React, obwohl es für das Verständnis der Prinzipien ausreicht (na ja, oder fast genug).
function setAttr(update, slow) { if(slow) { var replace = document.getElementById(update.id) var opamax = 0.99 var opaint = 0.01 var outslow = setInterval(function() { opamax = opamax - opaint if(opamax <= 0) { clearInterval(outslow) update.style.opacity = opamax replace.parentNode.replaceChild(update, replace) var inslow = setInterval(function() { opamax = opamax + opaint update.style.opacity = opamax if(opamax >= 1) { clearInterval(inslow) } }, slow) } replace.style.opacity = opamax }, slow) } else { var replace = document.getElementById(update.id) replace.parentNode.replaceChild(update, replace) } }
Wie Sie hier sehen können, nur Manipulationen mit dem Dokumentenbaum und einem weiteren Fading-Effekt, so dass es zumindest so aussieht und der Code wie eine Funktion aussieht, nicht wie eine helloworld.
Das Coolste an unserem Kinder-Framework ist die Rendering-Funktion:
function rend(root, elem) { root.appendChild(elem) }
Mir ist aufgefallen, dass es für Programmieranfänger schwierig ist, Dinge wie "Rein psychologisch reagieren" zu lernen. Nachdem Sie Hunderte von Megabytes an Bibliotheken und Millionen von Codezeilen gesehen haben, müssen Sie depressiv werden und nach etwas anderem suchen. Insbesondere wechseln sie zu Vue. Natürlich ist dies auch ein guter Rahmen, aber es ist noch besser, beide Ansätze für die Frontend-Entwicklung zu verstehen.
Es stellt sich heraus, dass komplexe Softwareumgebungen aus kleinen, aber effektiven Lösungen entstehen. Deshalb wünsche ich allen, die sich mit React auskennen, viel Glück. Möge Gewalt mit uns kommen!