Skip to content

Fix typos and superfluous use of commas #412

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ChrisB9 merged 1 commit into from
Feb 5, 2025
Merged

Fix typos and superfluous use of commas #412

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/content/learn/thinking-in-react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,9 +61,9 @@ Auf diesem Bildschirm gibt es fünf Komponenten:

</FullWidth>

Wenn du dir `ProductTable` (lavender) ansehen, wirst du feststellen, dass der Tabellenkopf (der die Bezeichnungen "Name" und "Preis" enthält) keine eigene Komponente ist. Dies ist eine Frage der Vorliebe, du kannst so oder so vorgehen. In diesem Beispiel ist sie ein Teil von "ProductTable", weil sie innerhalb der Liste von `ProductTable` erscheint. Wenn diese Kopfzeile jedoch zu komplex wird (z.B. wenn du eine Sortierung hinzufügst), kannst du sie in eine eigene Komponente `ProductTableHeader` verschieben.
Wenn du dir `ProductTable` (lavender) ansiehst, wirst du feststellen, dass der Tabellenkopf (der die Bezeichnungen "Name" und "Preis" enthält) keine eigene Komponente ist. Dies ist eine Frage der Vorliebe, du kannst so oder so vorgehen. In diesem Beispiel ist sie ein Teil von "ProductTable", weil sie innerhalb der Liste von `ProductTable` erscheint. Wenn diese Kopfzeile jedoch zu komplex wird (z.B. wenn du eine Sortierung hinzufügst), kannst du sie in eine eigene Komponente `ProductTableHeader` verschieben.

Nachdem du nun die Komponenten im Mockup identifiziert hast, ordnen sie in einer Hierarchie an. Komponenten, die innerhalb einer anderen Komponente im Mockup erscheinen, sollten in der Hierarchie als untergeordnete Komponenten erscheinen:
Nachdem du die Komponenten im Mockup identifiziert hast, ordne sie nun in einer Hierarchie an. Komponenten, die innerhalb einer anderen Komponente im Mockup erscheinen, sollten in der Hierarchie als untergeordnete Komponenten erscheinen:

* `FilterableProductTable`
* `SearchBar`
Expand All @@ -73,11 +73,11 @@ Nachdem du nun die Komponenten im Mockup identifiziert hast, ordnen sie in einer

## Schritt 2: Erstellen einer statischen Version in React {/*step-2-build-a-static-version-in-react*/}

Nun, da du deine Komponentenhierarchie hast, ist es an der Zeit, deine Anwendung zu implementieren. Der einfachste Ansatz besteht darin, eine Version zu erstellen, die die Benutzeroberfläche aus deinem Datenmodell wiedergibt, ohne Interaktivität hinzuzufügen... noch nicht! Oft ist es einfacher, zuerst die statische Version zu erstellen und die Interaktivität später hinzuzufügen. Die Erstellung einer statischen Version erfordert viel Tipparbeit und kein Nachdenken, aber das Hinzufügen von Interaktivität erfordert viel Nachdenken und nicht viel Tipparbeit.
Nun, da du deine Komponentenhierarchie hast, ist es an der Zeit deine Anwendung zu implementieren. Der einfachste Ansatz besteht darin eine Version zu erstellen, die die Benutzeroberfläche aus deinem Datenmodell wiedergibt ohne Interaktivität hinzuzufügen... noch nicht! Oft ist es einfacher zuerst die statische Version zu erstellen und die Interaktivität später hinzuzufügen. Die Erstellung einer statischen Version erfordert viel Tipparbeit und kein Nachdenken, aber das Hinzufügen von Interaktivität erfordert viel Nachdenken und nicht viel Tipparbeit.

Um eine statische Version deiner Anwendung zu erstellen, die dein Datenmodell wiedergibt, solltest du [Komponenten](/learn/your-first-component) erstellen, die andere Komponenten wiederverwenden und Daten mithilfe von [props.](/learn/passing-props-to-a-component) weitergeben. (Wenn du mit dem Konzept von [state](/learn/state-a-components-memory) vertraut bist, verwende für die Erstellung dieser statischen Version überhaupt keinen State. State ist nur für Interaktivität reserviert, d.h. für Daten, die sich mit der Zeit ändern. Da es sich um eine statische Version der Anwendung handelt, brauchst du es nicht).

Man kann entweder "von oben nach unten" bauen, indem man mit den Komponenten beginnt, die in der Hierarchie weiter oben stehen (wie `FilterableProductTable`), oder "von unten nach oben", indem man mit Komponenten arbeitet, die weiter unten stehen (wie `ProductRow`). Bei einfacheren Beispielen ist es in der Regel einfacher, von oben nach unten vorzugehen, und bei größeren Projekten ist es einfacher, von unten nach oben vorzugehen.
Man kann entweder "von oben nach unten" bauen, indem man mit den Komponenten beginnt, die in der Hierarchie weiter oben stehen (wie `FilterableProductTable`), oder "von unten nach oben", indem man mit Komponenten arbeitet, die weiter unten stehen (wie `ProductRow`). Bei einfacheren Beispielen ist es in der Regel einfacher von oben nach unten vorzugehen, und bei größeren Projekten ist es einfacher von unten nach oben vorzugehen.

<Sandpack>

Expand Down Expand Up @@ -664,4 +664,4 @@ Alles über den Umgang mit Ereignissen und die Aktualisierung des States erfähr

## Wo gehts weiter? {/*where-to-go-from-here*/}

Dies war eine sehr kurze Einführung in die Erstellung von Komponenten und Anwendungen mit React. Du kannst [gleich ein React-Projekt starten](/learn/installation) oder [tiefer in den Syntax eintauchen](/learn/describing-the-ui), die in diesem Tutorial verwendet wurde.
Dies war eine sehr kurze Einführung in die Erstellung von Komponenten und Anwendungen mit React. Du kannst [gleich ein React-Projekt starten](/learn/installation) oder [tiefer in die Syntax eintauchen](/learn/describing-the-ui), die in diesem Tutorial verwendet wurde.