Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

ReactJS lernen

Die Schnittstelle zum Document Object Model (DOM) nutzen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Erfahren Sie in diesem Video, wie das Typsystem von React aufgebaut ist und wie React ein Interface zum DOM bereitstellt, das unterschiedliche Implementierungen der Browser abstrahiert.
03:09

Transkript

Um uns genauer mit dem DOM in React auseinandersetzen zu können, sehen wir uns zuerst das Typensystem genauer an. Zum einen gibt es das ReactElement, das vier Attribute entgegennehmen kann. Einerseits type, also um was für ein Element es sich handelt. Andererseits props, sowie key, um das Element in einer Liste identifizieren zu können. Und eventuell ein ref, falls eine Referenz auf das Element noch später benötigt wird. ReactElements können per React.createElement() erstellt werden. Und genau das ist die Funktion, die verwendet wird, wenn Sie in JSX-Schreibweise ein Tag eröffnen. Der Babel JSX Transpiler übersetzt also öffnende JSX Tags in createElement-Aufrufe. Das können Sie gern einmal in der kompilierten Daten training.js im out-Ordner nachvollziehen. ReactElements werden per ReactDOM.render() in das DOM gerendert. Der zweite wichtige, allgemeinere Typ in React heißt ReactNode. Ein ReactNode ist entweder ein ReactElement oder ein ReactText, also ein einfacher, direkt darstellbarer Inhalt wie ein String oder eine Zahl. Ein ReactNode kann aber auch ein ReactFragment sein, das wiederum als Array von ReactNodes definiert ist. Diese Typen bilden die Basis von React. Um aber eine komplexe Anwendung bauen zu können, fehlt noch ein Typ, nämlich ReactComponent. ReactComponent zeichnet sich dadurch aus, dass dieser Typ auch gekapselten Zustand beinhalten kann. Das heißt, gerade mit diesem Typ können wir auf Nutzereingaben reagieren, die Änderungen im Zustand festhalten und entsprechend die Ansicht aktualisieren. Auch das DOM in React unterscheidet sich in einigen Punkten vom DOM im Browser. React verfolgt das Ziel, ein möglichst konsistentes Interface, und zwar unabhängig von konkreten Implementierungen im Browser bereitzustellen. Beispielsweise werden Attribute beziehungsweise Props grundsätzlich camelCased geschrieben, auch wenn sie in HTML klein oder mit Bindestrich geschrieben werden. Selbst bei der Übergabe des style-Attributs werden Keys wie backgroundImage in camelCase statt mit einem Bindestrich geschrieben. Die Ausnahme hiervon bilden data- und aria-Attribute. Diese werden auch in React mit Bindestrich geschrieben. Das Events-System ist in React W3C-konform implementiert und abstrahiert Unterschiede zwischen den Browsern. So werden Event-Handler stets mit einem SyntheticEvent aufgerufen. Das onChange-Event sollte stet genau das tun, was man davon erwartet, nämlich bei der Änderung eines Formularfelds aufgerufen werden und nicht beispielsweise der onBlur-Handler. Auch bei den Parametern der Formularfelder wie input finden sich einige Unterschiede im Vergleich zu normalem HTML. Alles in allem ist festzustellen, dass sich React um konsistente, standardisierte Schnittstellen bemüht und dem Entwickler das Leben mithilfe von Browser-unabhängigen Implementierungen erleichtern möchte. Sie haben gelernt, dass das DOM in React aus den Typen ReactElement, ReactNode, und ReactComponent besteht, wobei ReactComponent auch einen inneren Zustand haben kann. Sie wissen nun ebenfalls, dass die wichtigsten Unterschiede bei der Benutzung des DOM in React bei der camelCase-Schreibweise, dem einheitlichen Events-System und der Benutzung von Formularfeldern liegt.

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!