logo by @sawaratsuki1004

React

Die Bibliothek für webbasierte und native Benutzeroberflächen

Erstelle Benutzeroberflächen von Komponenten.

React lässt dich Benutzeroberflächen aus einzelnen Komponenten erstellen. Erstelle deine eigenen React-Komponenten wie zum Beispiel Thumbnail, LikeButton und Video. Kombiniere sie dann zu ganzen Bildschirmen, Seiten und Apps.

Video.js

function Video({ video }) {
return (
<div>
<Thumbnail video={video} />
<a href={video.url}>
<h3>{video.title}</h3>
<p>{video.description}</p>
</a>
<LikeButton video={video} />
</div>
);
}

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.

Schreibe Komponenten mit Code und Markup

React-Komponenten sind JavaScript-Funktionen. Möchtest du Inhalte bedingt anzeigen? Verwende eine if-Anweisung. Möchtest du eine Liste anzeigen? Probiere es mit map(). Das Erlernen von React ist das Erlernen von programmieren.

VideoList.js

function VideoList({ videos, emptyHeading }) {
const count = videos.length;
let heading = emptyHeading;
if (count > 0) {
const noun = count > 1 ? 'Videos' : 'Video';
heading = count + ' ' + noun;
}
return (
<section>
<h2>{heading}</h2>
{videos.map(video =>
<Video key={video.id} video={video} />
)}
</section>
);
}

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.

Füge Interaktivität hinzu, wo immer du sie brauchst

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.

SearchableVideoList.js

import { useState } from 'react';

function SearchableVideoList({ videos }) {
const [searchText, setSearchText] = useState('');
const foundVideos = filterVideos(videos, searchText);
return (
<>
<SearchInput
value={searchText}
onChange={newText => setSearchText(newText)} />
<VideoList
videos={foundVideos}
emptyHeading={`No matches for “${searchText}”`} />
</>
);
}

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.

Full-Stack Frameworks erhältlich

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 Next.js oder Remix.

confs/[slug].js

import { db } from './database.js';
import { Suspense } from 'react';

async function ConferencePage({ slug }) {
const conf = await db.Confs.find({ slug });
return (
<ConferenceLayout conf={conf}>
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
</ConferenceLayout>
);
}

async function Talks({ confId }) {
const talks = await db.Talks.findAll({ confId });
const videos = talks.map(talk => talk.video);
return <SearchableVideoList videos={videos} />;
}

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.

Benutze das Beste von jeder Plattform

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.

example.com

Bleibe dem Web treu

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.

8:48 PM

Erlebe das wahre Nativ

Benutzer erwarten, dass native Apps wie ihre Plattform aussehen und sich anfühlen. React Native und Expo 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.

Mit React kannst du ein Web- und ein Native-Entwickler sein. Dein Team kann auf viele Plattformen ausliefern, ohne die Benutzererfahrung zu beeinträchtigen.

Aktualisiere wenn die Zukunft bereit ist

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.

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.

Trete einer Community von Millionen bei

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.

People singing karaoke at React Conf
Sunil Pai speaking at React India
A hallway conversation between two people at React Conf
A hallway conversation at React India
Elizabet Oliveira speaking at React Conf
People taking a group selfie at React India
Nat Alison speaking at React Conf
Organizers greeting attendees at React India

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.

logo by @sawaratsuki1004

Willkommen in der React-Community

Lege los