heinetz: react, node, angular ...

Beitrag lesen

Hello,

Das verlinkte Tutorial ist kein vollständiger Ersatz für die hauseigene Dokumentation von React. Ich würde es als Einstieg nehmen, aber dann auch die Originaldokumentation durcharbeiten.

Damit hatte ich ursprünglich angefangen. Daraufhin habe ich mein Leid hier geklagt, dass ich das Gefühl habe, nur noch Bahnhof zu verstehen. Ich habe die Beispiel-Appplikation erstmal zum Laufen gebracht aber dass ich dazu einen Befehl im Terminal eingeben muss und danach meine "Website" mit http://localhost:3000 erreiche, hat mich verunsichert. Ich bin doch gewohnt eine inde.html in ein Verzeichnis meines lokalen Webservers zu legen und den entsprechenden Pfad dann als http:// localhost/pfad/zu/meiner/index.html dann im Browser einzugeben. Dann werden im head ein paar Skripte bspw. jquery.min.js eingebunden und ich kann danach mit dem jquery-Code loslegen. Da habe ich eine Vorstellung, was passiert. In der jquer.min.js werden irgendwelche Klassen und Objekte erzeugt, mit denen ich später arbeiten kann. Und ich habe auf meinem lokalen Entwicklungssystem auch node.js. Aber das brauchte ich auch nur, um die lokale Entwicklungsumgebung aufzusetzen und ich habe auch dafür nur irgendwelche Tutorials abgearbeitet ohne wirklich zu begreifen, warum ich hier node.js installieren muss und was das überhaupt ist.

JSX wird genausowenig von Browsern verstanden wie TypeScript, wenn du mit Angular arbeiten würdest. Da ist ein Übersetzungsprozess in herkömmliches Javascript notwendig.

Gibts einen einfach Antwort?

Die steht auch im verlinkten Tutorial. Aber nur als Verweis, weil eine Einführung in diese Übersetzungsmechanik nicht Teil des Artikels ist.

Ich habe meinen erste Gehversuch mit react.js auch mittlerweile zum Laufen bekommen, indem ich zwei Dinge angepasst habe:

  1. ich habe zusätzlich eine babel.min.js im head eingebunden.
  2. ich habe meinem <script> ein type="text/babel" hinzugefügt.

Nun habe ich eine ungefähre Ahnung davon, was ich damit gemacht habe. babel.min.js erkennt an dem Type-Attribut, was es zu übersetzen gilt und übersetzt dann den JSX-Code in reines Javascript, das der Browser versteht. So etwas ähnliches habe ich bei LESS kennengelernt. Da gibts auch ein Script, dass im head eingebunden wird, um dann <style type="stylesheet/less"> im Laufzeit zu übersetzen. Was langsam ist und deshalb nur während der Entwicklung Sinn macht. In der produktiven Version der Website macht man dann mit einem Compiler aus der .less eine .css, die statt dessen eingebunden wird.

Aber was passiert hier? ... in einfachen Worten ausgedrückt

danke und gruss, heinetz