Skip to content
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

Jump to bottom

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

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

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

Changes from all commits
Commits
Show all changes
2 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
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: 112 additions & 94 deletions src/components/Layout/HomeContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,76 +160,78 @@ export function HomeContent() {

<Section background="left-card">
<Center>
<Header>Create user interfaces from components</Header>
<Header>Erstellen von Benutzeroberflächen aus 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>. Dann kombinieren Sie sie zu ganzen Screens,
Seiten, und Anwendungen.
</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>. React lernen ist Programmieren lernen.
</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.
Diese Syntax wird JSX genannt. Sie ist eine
JavaScript-Syntax-Erweiterung, die durch React populär wurde.
Durch die Nähe von JSX-Markup zur zugehörigen Rendering-Logik
lassen sich React-Komponenten einfach erstellen, pflegen und
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.
</Para>
React-Komponenten empfangen Daten und geben zurück, was auf dem
Bildschirm erscheinen soll. Du kannst ihnen neue Daten als
Reaktion auf eine Interaktion übergeben, zum Beispiel, wenn der
Benutzer etwas eingibt. React wird den Bildschirm aktualisieren,
um die neuen Daten anzupassen.
</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>
Expand All @@ -238,14 +240,16 @@ export function HomeContent() {
<Section background="right-card">
<Center>
<Header>
Go full-stack <br className="hidden lg:inline" />
with a framework
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{' '}
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 oder{' '}
<Link href="https://remix.run">Remix</Link>.
</Para>
</Center>
Expand All @@ -254,30 +258,32 @@ export function HomeContent() {
</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
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 +297,17 @@ 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.
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 +385,27 @@ 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
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
</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 <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 +415,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
Erstellen für native Plattformen
</CTA>
</div>
</div>
Expand All @@ -419,31 +432,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>Upgrade, 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 Messlatte, 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 +476,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 +489,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.
timowenz marked this conversation as resolved.
Show resolved Hide resolved
</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 +529,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