` Element irgendwo in einer HTML-Datei:
```html
```
-We call this a "root" DOM node because everything inside it will be managed by React DOM.
+Dieses Element nennen wir "root" DOM Knoten. Alles innerhalb dieses Elements wird von React DOM verwaltet.
-Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
+Anwendungen, die mit React gebaut worden, haben normalerweise nur einen root DOM Knoten. Wenn du React in eine bestehende Anwendung einfügst, kannst du aber soviele DOM Knoten haben, wie du möchtest.
-To render a React element into a root DOM node, pass both to `ReactDOM.render()`:
+Um ein Element in den root DOM Knoten zu rendern, muss du nur beides an `ReactDOM.render()` übergeben:
`embed:rendering-elements/render-an-element.js`
-[](codepen://rendering-elements/render-an-element)
+[Auf CodePen ausprobieren](codepen://rendering-elements/render-an-element)
-It displays "Hello, world" on the page.
+Es wird "Hallo Welt" auf der Seite angezeigt.
-## Updating the Rendered Element {#updating-the-rendered-element}
+## Aktualisieren des gerenderten Elements {#updating-the-rendered-element}
-React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.
+React Elemente sind [immuntable](https://en.wikipedia.org/wiki/Immutable_object) (unveränderbar). Wenn du einmal ein Element erstellt hast, kannst du dessen
+Kind-Elemente oder Attribute nicht mehr verändern. Eine Element kannst du dir vorstellen, wie ein einzelnes Bild eines Filmes: Es repräsentiert die Benutzeroberfläche (UI) zu einem bestimmten Zeitpunkt.
-With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`.
+Mit dem was wir bis jetzt erfahren haben, wissen wir nur, dass der einzige Weg um die Benutzeroberfläche zu Aktualisieren und neue Elemente zu erstellen, das Aufrufen von `ReactDOM.render()` ist.
-Consider this ticking clock example:
+Wir nehmen uns einmal dieses Beispiel einer tickenden Uhr:
`embed:rendering-elements/update-rendered-element.js`
-[](codepen://rendering-elements/update-rendered-element)
+[Auf CodePen ausprobieren](codepen://rendering-elements/update-rendered-element)
-It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
+Jede Sekunden wird `ReactDOM.render()` mit Hilfe einer Callback-Funktion von [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) aufgerufen.
->**Note:**
+>**Hinweis:**
>
->In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html).
+>In der Praxis rufen die meisten React Anwendungen `ReactDOM.render()` nur einmal auf. Im nächsten Abschnitt lernen wir, wie solch ein Code in einzelne [Zustandskomponenten](/docs/state-and-lifecycle.html) gekapselt wird.
>
->We recommend that you don't skip topics because they build on each other.
+>Wir empfehlen dir, Abschnitte nicht zu überspringen, da sie aufeinander aufbauen.
-## React Only Updates What's Necessary {#react-only-updates-whats-necessary}
+## React aktualisiert nur das Nötigste {#react-only-updates-whats-necessary}
-React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
+React DOM vergleicht das vorherige und jetztige Element und dessen Kindelemente miteinander.
+Um das DOM in den gwünschten Zustand zu bringen, werden nur die Elemente im DOM aktualisiert, die wirklich eine Änderung beinhalten.
-You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools:
+Du kannst es nachprüfen, indem du das [letzte Beispiel](codepen://rendering-elements/update-rendered-element) mit den Browser Tools aufrufst:
-
+
-Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM.
+Obwohl wir jede Sekunde ein Element erstellen, das den kompletten UI Baum aktualisiert,
+wird nur der Text-Inhalt durch React DOM aktualisiert, dessen Inhalt sich wirklich geändert hat.
-In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.
+Nach unserer Erfahrung macht es mehr Sinn darüber nachzudenken, wie die Benutzeroberfläche zu einem bestimmten Zeitpunkt aussieht, anstatt
+sich darüber Gedanken zu machen, wie sie sich im Laufe der Zeit verändert. Dieses Denken verhindert eine ganze Reihe von Fehlern.
diff --git a/content/images/docs/granular-dom-updates.gif b/content/images/docs/granular-dom-updates.gif
index 1651b0dae..1754ee081 100644
Binary files a/content/images/docs/granular-dom-updates.gif and b/content/images/docs/granular-dom-updates.gif differ
diff --git a/examples/rendering-elements/render-an-element.js b/examples/rendering-elements/render-an-element.js
index 024b35876..02d7b6a8b 100644
--- a/examples/rendering-elements/render-an-element.js
+++ b/examples/rendering-elements/render-an-element.js
@@ -1,2 +1,2 @@
-const element =
Hello, world
;
+const element =
Hallo Welt
;
ReactDOM.render(element, document.getElementById('root'));
diff --git a/examples/rendering-elements/update-rendered-element.js b/examples/rendering-elements/update-rendered-element.js
index a4dabafc7..b75aab582 100644
--- a/examples/rendering-elements/update-rendered-element.js
+++ b/examples/rendering-elements/update-rendered-element.js
@@ -1,8 +1,8 @@
function tick() {
const element = (
-
Hello, world!
- It is {new Date().toLocaleTimeString()}.
+ Hallo, Welt!
+ Es ist {new Date().toLocaleTimeString()}.
);
// highlight-next-line