Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

ReactJS lernen

Grundlagen zu React.js und ECMAScript 2015

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Erfahren Sie in diesem Video, was React.js ist und was für die Verwendung von React spricht. Sehen Sie außerdem, wie eine minimale React-Komponente aufgebaut ist und wie sie zu HTML gerendert wird.
06:26

Transkript

React.js ist das JavaScript-Frontend- Framework von Facebook. React ist als Open-Source-Bibliothek verfügbar und versucht dem Web-Entwickler auf möglichst einfache Art das Entwickeln zu ermöglichen, während dem Endnutzer maximale Performanz und Dynamik geboten werden soll. Doch welche Beweggründe stehen hinter der Entwicklung eines solchen Frameworks? Zum einen möchte man heutzutage dynamische Websites bereitstellen, mit denen der Benutzer interagieren kann. Dabei sollte sich diese Interaktion mit der Website wie die Benutzung eines herkömmlichen Desktop-Programms anfühlen. Dazu gehört zum einen, Inhalte auf Abruf schnell vom Server nachladen zu können, so zum Beispiel die nächste Seite beim Blättern durch eine Produktliste. Man möchte aber auch vermeiden, dass bei jedem Klick auf einen Link eine neue Seite geladen wird, was weder performant wirkt, noch den Eindruck einer zusammenhängenden Applikation erweckt. An diesen Stellen stößt die klassische Webentwicklung an ihre Grenzen. Einfache HTML-Seiten sind nicht dynamisch. Und wenn die Seiten dynamisch auf dem Server zusammengestellt werden, belastet dies sowohl den Server als auch die Netzwerkbandbreite, da ganze HTML-Seiten an den Browser gesendet werden, anstatt nur die neuen Daten. Um dem Anspruch der Dynamik zu genügen und die genannten Probleme zu beseitigen, kann man also auf eine Architektur zurückgreifen, bei der dem Client, also dem Browser die gesamte Logik zum Abfragen und Darstellen von Daten bekannt ist und der Server für eben diesen Zweck Schnittstellen bereitstellt. Wir benötigen also ein JavaScript-Framework, mit dem wir wiederverwendbare UI-Komponenten schreiben können. An dieser Stelle ist React zu unserer Rettung da. React ermöglicht uns all dies und ist seit 2013 verfügbar. Das Projekt wird von Facebook verwaltet und ist dort auch produktiv im Einsatz. React verfolgt einen stark komponentenorientierten Ansatz. Das heißt, das resultierende User-Interface, das der Benutzer sieht, ist aus einer Komposition vielfacher kleinerer und größerer Komponenten zusammengesetzt, die jeweils einen hohen Grad an Wiederverwendung haben können. Da React primär für Benutzung im Browser gedacht ist, handelt es sich um eine JavaScript-Bibliothek. Nichtsdestotrotz gibt es auch serverseitige Implementierungen, mit deren Hilfe fertig gerenderte Seiten an den Client gesendet werden können. Ein ganz besonderes Feature ist die Syntaxerweiterung JSX. Dabei handelt es sich um eine Syntax, die zwar optisch stark an HTML erinnert, aber im Hintergrund in einfache JavaScript-Befehle übersetzt wird. Das heißt also, dass man bei der Entwicklung mit React zwar grundsätzlich JavaScript schreibt, aber für das Rendern der Komponenten im Grunde genommen auf die bewährte HTML-Syntax zurückgreifen kann. Insgesamt bietet React einen sehr einfachen Einstieg, da man bereits mit wenigen Zeilen Code die ersten Komponenten erstellen kann. Andererseits bietet React ausreichende Flexibilität, um auch komplexe Szenarien wie vollständige Web-Anwendungen umzusetzen. Für mobile Endgeräte liefert React ebenfalls eine Lösung, nämlich React Native. Das ist eine spezielle Bibliothek, mit der React-Anwendungen das Gefühl und die Performance einer nativen App vermitteln sollen. Alles in allem beschreibt sich das Projekt selbst als: "A JavaScript library for building user interfaces". Nun möchte ich kurz auf den Standard ECMAScript 2015, beziehungsweise abgekürzt ES6, zu sprechen kommen. Wenn man heute JavaScript sagt, meint man den mittlerweile älteren Standard ES5. ES6 wurde 2015 offiziell verabschiedet und stellt den neuen JavaScript-Standard dar, der einige neue sprachliche Features verfügbar macht. ES6 wird von aktuellen Browsern bereits teilweise unterstützt. Das heißt, der Browser könnte ein Skript in ES6 bereits zum Großteil wie eine JavaScript-Datei ausführen. Es werden aber meist noch nicht alle Funktionen unterstützt. Hier kommen sogenannte Transpiler zum Einsatz. Ein Beispiel dafür ist Babel.js. Der ES6-Code wird einfach mithilfe von Babel in klassischen JavaScript-Code übersetzt. Und auf diese Art können wir bereits jetzt alle Vorteil von ES6 nutzen, müssen aber nicht darauf warten, dass die Browser alle Funktionen implementieren. Zu diesen Neuerungen von ES6 zählen Module. Das heißt, dass wir unsere Anwendungen in verschiedene Dateien zerlegen können, die jeweils nur bestimmte Teile exportieren und für andere Module verfügbar machen. Weitere Beispiele für Neuerungen in ES6 sind die Unterstützung von Objektorientierung mit Klassen und Vererbung, sowie die Einführung von Arrow-Functions. Das ist eine neue Syntax für Funktionen. Falls Sie mit ES6 noch nicht vertraut sind, ist das Problem. Wir werden in diesem Training ES6 gleich von Anfang verwenden, damit Sie sich daran sofort gewöhnen können. Jetzt können wir einen Blick auf unsere erste React-Komponente werfen. Um eine minimale Komponente schreiben zu können, müssen wir diese nur von React.Component ableiten und sie mit einer Methode render() versehen, die den entsprechenden JSX-Code enthält. Sehen wir uns einmal das Beispiel an. Wir erkennen bereits die neue ES6-Syntax. Wir deklarieren eine Klasse mit dem Namen HelloTitle und diese erbt von React.Component. Diese Klasse besitzt nur eine Methode render(), welche eine Überschrift zurückgibt. Dabei sieht man auch schon die JSX-Syntax. Dieses Return-Statement sieht aus wie HTML. Dadurch wird die Entwicklung sehr intuitiv. Wenn wir uns dieses Beispiel einmal mit klassischem JavaScript ansehen, sehen wir auch nur einen Unterschied. Dadurch dass wir keine Klassen erstellen können, erben wir nicht von React.Component, sondern verwenden React.CreateClass mit einem Object als Eingabe, das die render-Methode enthält. Welche Eigenschaften zeichnen eine Komponente ansonsten noch aus? Eine Komponente kann Parameter empfangen. Diese werden props genannt. Eine Komponente kann einen Zustand haben. Dieser wird im state-Objekt gespeichert. Schließlich unterliegt eine Komponente einem gewissen Lebenszyklus. Das heißt, es gibt einen wohldefinierten Ablauf, wie eine Komponente erstmalig gerendert, aktualisiert, oder zerstört wird. In diesem Video haben Sie gelernt, dass React ein JavaScript-Frontend-Framework ist, mit dessen Hilfe Sie auf einfach Art komponentenorientierte Web-Anwendungen erstellen können, die im Browser ablaufen. Sie haben gesehen, dass Sie mithilfe der JSX-Syntax gefühlt HTML-Code in Ihre JavaScript-Anwendung einbetten können, was den Entwicklungsvorgang sehr intuitiv macht. Dabei bleiben Sie stets im JavaScript-Umfeld und können von der vollen Mächtigkeit der Sprache profitieren.

ReactJS lernen

Sehen Sie, wie Ihre Anwendung mit der Hilfe von ReactJS von einem virtuellen DOM (Document Object Model) profitiert.

2 Std. 20 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:05.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!