Skip to content

Commit 6031e53

Browse files
timowenztimowenz
committed
fix: Requested changes implemented.
1 parent 6655c47 commit 6031e53

File tree

1 file changed

+44
-38
lines changed

1 file changed

+44
-38
lines changed

‎src/components/Layout/HomeContent.js‎

Lines changed: 44 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -160,13 +160,13 @@ export function HomeContent() {
160160

161161
<Section background="left-card">
162162
<Center>
163-
<Header>Erstelle Benutzeroberflächen von Komponenten.</Header>
163+
<Header>Erstellen von Benutzeroberflächen aus Komponenten.</Header>
164164
<Para>
165165
React lässt dich Benutzeroberflächen aus einzelnen Komponenten
166166
erstellen. Erstelle deine eigenen React-Komponenten wie zum
167167
Beispiel <Code>Thumbnail</Code>, <Code>LikeButton</Code> und{' '}
168-
<Code>Video</Code>. Kombiniere sie dann zu ganzen Bildschirmen,
169-
Seiten und Apps.
168+
<Code>Video</Code>. Dann kombinieren Sie sie zu ganzen Screens,
169+
Seiten, und Anwendungen.
170170
</Para>
171171
</Center>
172172
<FullBleed>
@@ -189,19 +189,19 @@ export function HomeContent() {
189189
React-Komponenten sind JavaScript-Funktionen. Möchtest du Inhalte
190190
bedingt anzeigen? Verwende eine <Code>if</Code>-Anweisung.
191191
Möchtest du eine Liste anzeigen? Probiere es mit{' '}
192-
<Code>map()</Code>. Das Erlernen von React ist das Erlernen von
193-
programmieren.
192+
<Code>map()</Code>. React lernen ist Programmieren lernen.
194193
</Para>
195194
</Center>
196195
<FullBleed>
197196
<Example2 />
198197
</FullBleed>
199198
<Center>
200199
<Para>
201-
Die Syntax von JSX ist eine JavaScript-Syntaxerweiterung, die von
202-
React populär gemacht wurde. Das Platzieren von JSX-Markup in der
203-
Nähe der zugehörigen Rendering-Logik macht React-Komponenten
204-
einfach zu erstellen, zu pflegen und zu löschen.
200+
Diese Syntax wird JSX genannt. Sie ist eine
201+
JavaScript-Syntax-Erweiterung, die durch React populär wurde.
202+
Durch die Nähe von JSX-Markup zur zugehörigen Rendering-Logik
203+
lassen sich React-Komponenten einfach erstellen, pflegen und
204+
löschen.
205205
</Para>
206206
</Center>
207207
</Section>
@@ -211,11 +211,11 @@ export function HomeContent() {
211211
<Header>Füge Interaktivität hinzu, wo immer du sie brauchst</Header>
212212
<Para>
213213
React-Komponenten empfangen Daten und geben zurück, was auf dem
214-
Bildschirm erscheinen soll. Du kannst ihnen neue Daten übergeben
215-
als Reaktion auf eine Interaktion wie wenn der Benutzer in ein
216-
Eingabefeld tippt. React wird den Bildschirm aktualisieren, um den
217-
neuen Daten zu entsprechen.
218-
</Para>
214+
Bildschirm erscheinen soll. Du kannst ihnen neue Daten als
215+
Reaktion auf eine Interaktion übergeben, zum Beispiel, wenn der
216+
Benutzer etwas eingibt. React wird den Bildschirm aktualisieren,
217+
um die neuen Daten anzupassen.
218+
</Para>{' '}
219219
</Center>
220220
<FullBleed>
221221
<Example3 />
@@ -239,14 +239,18 @@ export function HomeContent() {
239239

240240
<Section background="right-card">
241241
<Center>
242-
<Header>Full-Stack Frameworks erhältlich</Header>
242+
<Header>
243+
Mache Full-Stack <br className="hidden lg:inline" />
244+
Mit einem Framework
245+
</Header>
243246
<Para>
244247
React ist eine Bibliothek. Sie ermöglicht es, Komponenten
245-
zusammenzufügen, schreibt aber nicht vor, wie Routing und
246-
Datenabruf implementiert werden sollen. Um eine gesamte App mit
247-
React zu erstellen, empfehlen wir ein Full-Stack React-Framework
248-
wie zum Beispiel <Link href="https://nextjs.org">Next.js</Link>{' '}
249-
oder <Link href="https://remix.run">Remix</Link>.
248+
zusammenzufügen, schreibt aber nicht vor, wie Routing und das
249+
Abrufen von Daten implementiert werden sollen. Um eine gesamte App
250+
mit React zu erstellen, empfehlen wir ein Full-Stack
251+
React-Framework wie zum Beispiel{' '}
252+
<Link href="https://nextjs.org">Next.js</Link> oder oder{' '}
253+
<Link href="https://remix.run">Remix</Link>.
250254
</Para>
251255
</Center>
252256
<FullBleed>
@@ -265,7 +269,7 @@ export function HomeContent() {
265269
color="gray"
266270
icon="framework"
267271
href="/learn/start-a-new-react-project">
268-
Steige mit einem Framework ein
272+
Starte mit einem Framework
269273
</CTA>
270274
</div>
271275
</Center>
@@ -296,13 +300,14 @@ export function HomeContent() {
296300
Bleibe dem Web treu
297301
</h4>
298302
<p className="lg:text-xl leading-normal text-secondary">
299-
Benutzer erwarten, dass Web-App-Seiten schnell laden.
300-
Mit React kannst du auf dem Server HTML streamen,
301-
während noch Daten abgerufen werden, und allmählich den
302-
restlichen Inhalt laden, bevor JavaScript-Code geladen
303-
wird. Auf dem Client kann React Standard-Web-APIs
304-
verwenden, um Benutzeroberfläche auch mitten im Rendern
305-
reaktionsschnell zu halten.
303+
Menschen erwarten, dass die Seiten von Webanwendungen
304+
schnell geladen werden. Auf dem Server kannst du mit
305+
React mit dem Streaming von HTML beginnen, während du
306+
noch Daten abrufen, und den verbleibenden Inhalt nach
307+
und nach auffüllen, bevor JavaScript-Code geladen wird.
308+
Auf dem Client kann React Standard-Web-APIs verwenden,
309+
um Ihre Benutzeroberfläche auch während des Renderings
310+
reaktionsfähig zu halten.
306311
</p>
307312
</div>
308313
</div>
@@ -380,14 +385,13 @@ export function HomeContent() {
380385
</div>
381386
<div className="flex flex-col items-start justify-center pt-0 gap-3 px-2.5 lg:pt-8 lg:px-8">
382387
<h4 className="leading-tight text-primary dark:text-primary-dark font-semibold text-3xl lg:text-4xl">
383-
Erlebe das wahre Nativ
388+
Wirklich nativ werden
384389
</h4>
385390
<p className="h-full lg:text-xl text-secondary dark:text-secondary-dark leading-normal">
386391
Benutzer erwarten, dass native Apps wie ihre Plattform
387392
aussehen und sich anfühlen.{' '}
388393
<Link href="https://reactnative.dev">
389-
{' '}
390-
React Native{' '}
394+
React Native
391395
</Link>{' '}
392396
und{' '}
393397
<Link href="https://github.com/expo/expo">
@@ -396,9 +400,11 @@ export function HomeContent() {
396400
</Link>
397401
ermöglichen es, Apps in React für Android, iOS und
398402
mehr zu erstellen. Sie sehen und fühlen sich nativ an,
399-
weil ihre Benutzeroberflächen wirklich nativ sind. Es
400-
ist kein Web-View - Ihre React-Komponenten rendern
401-
echte Android- und iOS-Ansichten, die von der
403+
weil ihre Benutzeroberflächen <i>
404+
wirklich nativ
405+
</i>{' '}
406+
sind. Es ist keine Web-View - Deine React-Komponenten
407+
rendern echte Android- und iOS-Ansichten, die von der
402408
Plattform bereitgestellt werden.
403409
</p>
404410
</div>
@@ -415,7 +421,7 @@ export function HomeContent() {
415421
</Para>
416422
<div className="flex justify-start w-full lg:justify-center">
417423
<CTA color="gray" icon="native" href="https://reactnative.dev/">
418-
Erstelle native Plattformen
424+
Erstellen für native Plattformen
419425
</CTA>
420426
</div>
421427
</div>
@@ -426,19 +432,19 @@ export function HomeContent() {
426432
<div className="max-w-7xl mx-auto flex flex-col lg:flex-row px-5">
427433
<div className="max-w-3xl lg:max-w-7xl gap-5 flex flex-col lg:flex-row lg:px-5">
428434
<div className="w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:ps-5 lg:pe-10">
429-
<Header>Aktualisiere wenn die Zukunft bereit ist</Header>
435+
<Header>Upgrade, wenn die Zukunft bereit ist</Header>
430436
<Para>
431437
React geht sorgfältig mit Änderungen um. Jeder React-Commit
432438
wird auf geschäftskritischen Oberflächen mit über einer
433439
Milliarde Benutzern getestet. Über 100.000 React-Komponenten
434-
bei Meta sorgen dafür dass jede Migrationsstrategie validiert
440+
bei Meta sorgen dafür, dass jede Migrationsstrategie validiert
435441
wird.
436442
</Para>
437443
<div className="order-last pt-5">
438444
<Para>
439445
Das React Team forscht immer daran, wie React verbessert
440446
werden kann. Einige Forschungen dauern Jahre, um sich
441-
auszuzahlen. React hat eine hohe Hürde, um eine
447+
auszuzahlen. React hat eine hohe Messlatte, um eine
442448
Forschungsidee in die Produktion zu übernehmen. Nur bewährte
443449
Ansätze werden Teil von React.
444450
</Para>

0 commit comments

Comments
 (0)