Skip to content

docs: updated HomeContent.js to German language. #387

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

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

docs: updated HomeContent.js to German language. #387

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6655c47
docs: updated HomeContent.js to German language.
timowenz Jul 18, 2024
6031e53
fix: Requested changes implemented.
timowenz Oct 13, 2024
2ad5031
Apply suggestions from code review
timowenz Feb 4, 2025
7427d61
fix: formatting
timowenz Feb 4, 2025
762d947
Update src/components/Layout/HomeContent.js
timowenz Feb 6, 2025
61ee489
Update src/components/Layout/HomeContent.js
timowenz Mar 9, 2025
afb58e0
Update src/components/Layout/HomeContent.js
timowenz Mar 9, 2025
ebeab58
Update src/components/Layout/HomeContent.js
timowenz Mar 9, 2025
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
206 changes: 109 additions & 97 deletions src/components/Layout/HomeContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,124 +160,126 @@ export function HomeContent() {

<Section background="left-card">
<Center>
<Header>Create user interfaces from components</Header>
<Header>Erstelle Benutzeroberflächen von Komponenten.</Header>
<Para>
React lets you build user interfaces out of individual pieces
called components. Create your own React components like{' '}
<Code>Thumbnail</Code>, <Code>LikeButton</Code>, and{' '}
<Code>Video</Code>. Then combine them into entire screens, pages,
and apps.
React lässt dich Benutzeroberflächen aus einzelnen Komponenten
erstellen. Erstelle deine eigenen React-Komponenten wie zum
Beispiel <Code>Thumbnail</Code>, <Code>LikeButton</Code> und{' '}
<Code>Video</Code>. Kombiniere sie dann zu ganzen Bildschirmen,
Seiten und Apps.
</Para>
</Center>
<FullBleed>
<Example1 />
</FullBleed>
<Center>
<Para>
Whether you work on your own or with thousands of other
developers, using React feels the same. It is designed to let you
seamlessly combine components written by independent people,
teams, and organizations.
Ob du alleine arbeitest oder mit tausenden anderen Entwicklern,
das Arbeiten mit React fühlt sich gleich an. Es ist so konzipiert,
dass du Komponenten, die von unabhängigen Personen, Teams und
Organisationen geschrieben wurden, nahtlos kombinieren kannst.
</Para>
</Center>
</Section>

<Section background="right-card">
<Center>
<Header>Write components with code and markup</Header>
<Header>Schreibe Komponenten mit Code und Markup</Header>
<Para>
React components are JavaScript functions. Want to show some
content conditionally? Use an <Code>if</Code> statement.
Displaying a list? Try array <Code>map()</Code>. Learning React is
learning programming.
React-Komponenten sind JavaScript-Funktionen. Möchtest du Inhalte
bedingt anzeigen? Verwende eine <Code>if</Code>-Anweisung.
Möchtest du eine Liste anzeigen? Probiere es mit{' '}
<Code>map()</Code>. Das Erlernen von React ist das Erlernen von
programmieren.
</Para>
</Center>
<FullBleed>
<Example2 />
</FullBleed>
<Center>
<Para>
This markup syntax is called JSX. It is a JavaScript syntax
extension popularized by React. Putting JSX markup close to
related rendering logic makes React components easy to create,
maintain, and delete.
Die Syntax von JSX ist eine JavaScript-Syntaxerweiterung, die von
React populär gemacht wurde. Das Platzieren von JSX-Markup in der
Nähe der zugehörigen Rendering-Logik macht React-Komponenten
einfach zu erstellen, zu pflegen und zu löschen.
</Para>
</Center>
</Section>

<Section background="left-card">
<Center>
<Header>Add interactivity wherever you need it</Header>
<Header>Füge Interaktivität hinzu, wo immer du sie brauchst</Header>
<Para>
React components receive data and return what should appear on the
screen. You can pass them new data in response to an interaction,
like when the user types into an input. React will then update the
screen to match the new data.
React-Komponenten empfangen Daten und geben zurück, was auf dem
Bildschirm erscheinen soll. Du kannst ihnen neue Daten übergeben
als Reaktion auf eine Interaktion wie wenn der Benutzer in ein
Eingabefeld tippt. React wird den Bildschirm aktualisieren, um den
neuen Daten zu entsprechen.
</Para>
</Center>
<FullBleed>
<Example3 />
</FullBleed>
<Center>
<Para>
You don’t have to build your whole page in React. Add React to
your existing HTML page, and render interactive React components
anywhere on it.
Du musst nicht deine ganze Seite in React erstellen. Füge React zu
deiner vorhandenen HTML-Seite hinzu und rendere interaktive
React-Komponenten überall darauf.
</Para>
<div className="flex justify-start w-full lg:justify-center">
<CTA
color="gray"
icon="code"
href="/learn/add-react-to-an-existing-project">
Add React to your page
Füge React zu deiner Seite hinzu
</CTA>
</div>
</Center>
</Section>

<Section background="right-card">
<Center>
<Header>
Go full-stack <br className="hidden lg:inline" />
with a framework
</Header>
<Header>Full-Stack Frameworks erhältlich</Header>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Header>Full-Stack Frameworks erhältlich</Header>
<Header>
Mache Full-Stack <br className="hidden lg:inline" />
Mit einem Framework
</Header>

<Para>
React is a library. It lets you put components together, but it
doesn’t prescribe how to do routing and data fetching. To build an
entire app with React, we recommend a full-stack React framework
like <Link href="https://nextjs.org">Next.js</Link> or{' '}
<Link href="https://remix.run">Remix</Link>.
React ist eine Bibliothek. Sie ermöglicht es, Komponenten
zusammenzufügen, schreibt aber nicht vor, wie Routing und
Datenabruf implementiert werden sollen. Um eine gesamte App mit
React zu erstellen, empfehlen wir ein Full-Stack React-Framework
wie zum Beispiel <Link href="https://nextjs.org">Next.js</Link>{' '}
oder <Link href="https://remix.run">Remix</Link>.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
React ist eine Bibliothek. Sie ermöglicht es, Komponenten
zusammenzufügen, schreibt aber nicht vor, wie Routing und
Datenabruf implementiert werden sollen. Um eine gesamte App mit
React zu erstellen, empfehlen wir ein Full-Stack React-Framework
wie zum Beispiel <Link href="https://nextjs.org">Next.js</Link>{' '}
oder <Link href="https://remix.run">Remix</Link>.
React ist eine Bibliothek. Sie ermöglicht es, Komponenten
zusammenzufügen, schreibt aber nicht vor, wie Routing und
das Abrufen von Daten implementiert werden sollen. Um eine gesamte App mit
React zu erstellen, empfehlen wir ein Full-Stack React-Framework
wie zum Beispiel <Link href="https://nextjs.org">Next.js</Link> oder{' '}
<Link href="https://remix.run">Remix</Link>.

</Para>
</Center>
<FullBleed>
<Example4 />
</FullBleed>
<Center>
<Para>
React is also an architecture. Frameworks that implement it let
you fetch data in asynchronous components that run on the server
or even during the build. Read data from a file or a database, and
pass it down to your interactive components.
React ist auch eine Architektur. Frameworks, die es
implementieren, ermöglichen es, Daten in asynchronen Komponenten
abzurufen, die auf dem Server oder sogar während des Builds
ausgeführt werden. Lese Daten aus einer Datei oder einer Datenbank
und gib sie an deine interaktiven Komponenten weiter.
</Para>
<div className="flex justify-start w-full lg:justify-center">
<CTA
color="gray"
icon="framework"
href="/learn/start-a-new-react-project">
Get started with a framework
Steige mit einem Framework ein
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Steige mit einem Framework ein
Starte mit einem Framework

</CTA>
</div>
</Center>
</Section>
<Section background="left-card">
<div className="mx-auto flex flex-col w-full">
<div className="mx-auto max-w-4xl lg:text-center items-center px-5 flex flex-col">
<Header>Use the best from every platform</Header>
<Header>Benutze das Beste von jeder Plattform</Header>
<Para>
People love web and native apps for different reasons. React
lets you build both web apps and native apps using the same
skills. It leans upon each platform’s unique strengths to let
your interfaces feel just right on every platform.
Benutzer lieben Web- und Native-Apps aus unterschiedlichen
Gründen. React ermöglicht es, sowohl Web-Apps als auch
Native-Apps mit den gleichen Fähigkeiten zu erstellen. Es stützt
sich auf die einzigartigen Stärken jeder Plattform, um ein
natives Gefühl auf jeder Plattform zu erzeugen.
</Para>
</div>
<div className="max-w-7xl mx-auto flex flex-col lg:flex-row mt-16 mb-20 lg:mb-28 px-5 gap-20 lg:gap-5">
Expand All @@ -291,15 +293,16 @@ export function HomeContent() {
<div className="bg-wash relative h-14 w-full" />
<div className="relative flex items-start justify-center flex-col flex-1 pb-16 pt-5 gap-3 px-5 lg:px-10 lg:pt-8">
<h4 className="leading-tight text-primary font-semibold text-3xl lg:text-4xl">
Stay true to the web
Bleibe dem Web treu
</h4>
<p className="lg:text-xl leading-normal text-secondary">
People expect web app pages to load fast. On the server,
React lets you start streaming HTML while you’re still
fetching data, progressively filling in the remaining
content before any JavaScript code loads. On the client,
React can use standard web APIs to keep your UI
responsive even in the middle of rendering.
Benutzer erwarten, dass Web-App-Seiten schnell laden.
Mit React kannst du auf dem Server HTML streamen,
während noch Daten abgerufen werden, und allmählich den
restlichen Inhalt laden, bevor JavaScript-Code geladen
wird. Auf dem Client kann React Standard-Web-APIs
verwenden, um Benutzeroberfläche auch mitten im Rendern
reaktionsschnell zu halten.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Benutzer erwarten, dass Web-App-Seiten schnell laden.
Mit React kannst du auf dem Server HTML streamen,
während noch Daten abgerufen werden, und allmählich den
restlichen Inhalt laden, bevor JavaScript-Code geladen
wird. Auf dem Client kann React Standard-Web-APIs
verwenden, um Benutzeroberfläche auch mitten im Rendern
reaktionsschnell zu halten.
Menschen erwarten, dass die Seiten von Webanwendungen schnell geladen werden.
Auf dem Server kannst du mit React mit dem Streaming von HTML beginnen,
während du noch Daten abrufen, und den verbleibenden Inhalt nach und nach auffüllen,
bevor JavaScript-Code geladen wird. Auf dem Client kann React Standard-Web-APIs verwenden,
um Ihre Benutzeroberfläche auch während des Renderings reaktionsfähig zu halten.

</p>
</div>
</div>
Expand Down Expand Up @@ -377,21 +380,26 @@ export function HomeContent() {
</div>
<div className="flex flex-col items-start justify-center pt-0 gap-3 px-2.5 lg:pt-8 lg:px-8">
<h4 className="leading-tight text-primary dark:text-primary-dark font-semibold text-3xl lg:text-4xl">
Go truly native
Erlebe das wahre Nativ
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Erlebe das wahre Nativ
Wirklich nativ werden

</h4>
<p className="h-full lg:text-xl text-secondary dark:text-secondary-dark leading-normal">
People expect native apps to look and feel like their
platform.{' '}
Benutzer erwarten, dass native Apps wie ihre Plattform
aussehen und sich anfühlen.{' '}
<Link href="https://reactnative.dev">
React Native
{' '}
React Native{' '}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
{' '}
React Native{' '}
React Native

</Link>{' '}
and{' '}
<Link href="https://github.com/expo/expo">Expo</Link>{' '}
let you build apps in React for Android, iOS, and
more. They look and feel native because their UIs{' '}
<i>are</i> truly native. It’s not a web view—your
React components render real Android and iOS views
provided by the platform.
und{' '}
<Link href="https://github.com/expo/expo">
{' '}
Expo{' '}
</Link>
ermöglichen es, Apps in React für Android, iOS und
mehr zu erstellen. Sie sehen und fühlen sich nativ an,
weil ihre Benutzeroberflächen wirklich nativ sind. Es
ist kein Web-View - Ihre React-Komponenten rendern
echte Android- und iOS-Ansichten, die von der
Plattform bereitgestellt werden.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
und{' '}
<Link href="https://github.com/expo/expo">
{' '}
Expo{' '}
</Link>
ermöglichen es, Apps in React für Android, iOS und
mehr zu erstellen. Sie sehen und fühlen sich nativ an,
weil ihre Benutzeroberflächen wirklich nativ sind. Es
ist kein Web-View - Ihre React-Komponenten rendern
echte Android- und iOS-Ansichten, die von der
Plattform bereitgestellt werden.
und{' '}
<Link href="https://github.com/expo/expo">
{' '}
Expo{' '}
</Link>
ermöglichen es, Apps in React für Android, iOS und
mehr zu erstellen. Sie sehen und fühlen sich nativ an,
weil ihre Benutzeroberflächen <i>wirklich nativ</i> sind. Es
ist keine Web-View - Deine React-Komponenten rendern
echte Android- und iOS-Ansichten, die von der
Plattform bereitgestellt werden.

</p>
</div>
</div>
Expand All @@ -401,14 +409,13 @@ export function HomeContent() {
</div>
<div className="px-5 lg:px-0 max-w-4xl mx-auto lg:text-center text-secondary dark:text-secondary-dark">
<Para>
With React, you can be a web <i>and</i> a native developer. Your
team can ship to many platforms without sacrificing the user
experience. Your organization can bridge the platform silos, and
form teams that own entire features end-to-end.
Mit React kannst du ein Web- und ein Native-Entwickler sein.
Dein Team kann auf viele Plattformen ausliefern, ohne die
Benutzererfahrung zu beeinträchtigen.
</Para>
<div className="flex justify-start w-full lg:justify-center">
<CTA color="gray" icon="native" href="https://reactnative.dev/">
Build for native platforms
Erstelle native Plattformen
</CTA>
</div>
</div>
Expand All @@ -419,31 +426,33 @@ export function HomeContent() {
<div className="max-w-7xl mx-auto flex flex-col lg:flex-row px-5">
<div className="max-w-3xl lg:max-w-7xl gap-5 flex flex-col lg:flex-row lg:px-5">
<div className="w-full lg:w-6/12 max-w-3xl flex flex-col items-start justify-start lg:ps-5 lg:pe-10">
<Header>Upgrade when the future is ready</Header>
<Header>Aktualisiere wenn die Zukunft bereit ist</Header>
<Para>
React approaches changes with care. Every React commit is
tested on business-critical surfaces with over a billion
users. Over 100,000 React components at Meta help validate
every migration strategy.
React geht sorgfältig mit Änderungen um. Jeder React-Commit
wird auf geschäftskritischen Oberflächen mit über einer
Milliarde Benutzern getestet. Über 100.000 React-Komponenten
bei Meta sorgen dafür dass jede Migrationsstrategie validiert
wird.
</Para>
<div className="order-last pt-5">
<Para>
The React team is always researching how to improve React.
Some research takes years to pay off. React has a high bar
for taking a research idea into production. Only proven
approaches become a part of React.
Das React Team forscht immer daran, wie React verbessert
werden kann. Einige Forschungen dauern Jahre, um sich
auszuzahlen. React hat eine hohe Hürde, um eine
Forschungsidee in die Produktion zu übernehmen. Nur bewährte
Ansätze werden Teil von React.
</Para>
<div className="hidden lg:flex justify-start w-full">
<CTA color="gray" icon="news" href="/blog">
Read more React news
Mehr React-Neuigkeiten
</CTA>
</div>
</div>
</div>
<div className="w-full lg:w-6/12">
<p className="uppercase tracking-wide font-bold text-sm text-tertiary dark:text-tertiary-dark flex flex-row gap-2 items-center mt-5 lg:-mt-2 w-full">
<IconChevron />
Latest React News
Aktuelle React-Neuigkeiten
</p>
<div className="flex-col sm:flex-row flex-wrap flex gap-5 text-start my-5">
<div className="flex-1 min-w-[40%] text-start">
Expand All @@ -461,7 +470,7 @@ export function HomeContent() {
</div>
<div className="flex lg:hidden justify-start w-full">
<CTA color="gray" icon="news" href="/blog">
Read more React news
Mehr React-Neuigkeiten
</CTA>
</div>
</div>
Expand All @@ -474,27 +483,30 @@ export function HomeContent() {
<div className="mx-auto flex flex-col max-w-4xl">
<Center>
<Header>
Join a community <br className="hidden lg:inline" />
of millions
Trete einer Community <br className="hidden lg:inline" />
von Millionen bei
</Header>
<Para>
You’re not alone. Two million developers from all over the
world visit the React docs every month. React is something
that people and teams can agree on.
Du bist nicht alleine. Zwei Millionen Entwickler aus der
ganzen Welt besuchen jeden Monat die React-Dokumentation.
React ist etwas, auf das sich Menschen und Teams einigen und
verlassen können.
</Para>
</Center>
</div>
<CommunityGallery />
<div className="mx-auto flex flex-col max-w-4xl">
<Center>
<Para>
This is why React is more than a library, an architecture, or
even an ecosystem. React is a community. It’s a place where
you can ask for help, find opportunities, and meet new
friends. You will meet both developers and designers,
beginners and experts, researchers and artists, teachers and
students. Our backgrounds may be very different, but React
lets us all create user interfaces together.
Das ist der Grund, warum React mehr als eine Bibliothek, eine
Architektur oder sogar ein Ökosystem ist. React ist eine
Community. Es ist ein Ort, an dem du um Hilfe bitten,
Möglichkeiten finden und neue Freunde treffen kannst. Du wirst
sowohl Entwickler als auch Designer, Anfänger und Experten,
Forscher und Künstler, Lehrer und Schüler treffen. Unsere
Hintergründe können sehr unterschiedlich sein, aber React
ermöglicht es uns allen, gemeinsam Benutzeroberflächen zu
erstellen.
</Para>
</Center>
</div>
Expand All @@ -511,15 +523,15 @@ export function HomeContent() {
</div>
<Logo className="uwu-hidden text-brand dark:text-brand-dark w-24 lg:w-28 mb-10 lg:mb-8 mt-12 h-auto mx-auto self-start" />
<Header>
Welcome to the <br className="hidden lg:inline" />
React community
Willkommen in der <br className="hidden lg:inline" />
React-Community
</Header>
<ButtonLink
href={'/learn'}
type="primary"
size="lg"
label="Take the Tutorial">
Get Started
Lege los
</ButtonLink>
</div>
</Section>
Expand Down