Was ist React Native und wie funktioniert es?

Question

Accepted Answer

**React Native** ist ein Framework von Meta (Facebook) zum Erstellen von **nativen mobilen Apps** (iOS und Android) mit **React und JavaScript**. Der charakteristische Ansatz besteht darin, **echte native UI-Komponenten** zu rendern (keine Webview), was Web-/React-Entwicklern ermöglicht, native Apps aus weitgehend gemeinsam genutztem Code zu erstellen. ## Was React Native ist ```text React Native = build NATIVE mobile apps with React + JavaScript/TypeScript: → ONE codebase (mostly) for iOS AND Android → uses REACT (components, JSX, hooks, state) — familiar to web React developers → renders REAL NATIVE UI components (not a webview / not HTML) → native look & feel → by Meta; widely used (Instagram, Discord, Shopify, etc.) ``` ## Wie es funktioniert: JavaScript steuert native UI ```text → You write React components in JavaScript → React Native maps them to REAL NATIVE views (a → a native UIView/ViewGroup; → native text) — NOT web/HTML elements → JS runs and communicates with the native side (historically via a "bridge"; the new architecture uses JSI for direct, faster communication) → The result is a genuinely native app, written in React/JS ``` ## Wichtigste Merkmale ```text ✓ NATIVE components → native performance and look/feel (vs webview-based frameworks) ✓ REACT model → components, JSX, hooks, state, props (web React skills transfer) ✓ Cross-platform → share most code across iOS/Android (some platform-specific code) ✓ FAST REFRESH → see changes instantly (like hot reload); large npm ecosystem ✓ Access native features via native modules / Expo ``` ## Warum es wichtig ist Das Verständnis, was React Native ist und wie es funktioniert, ist grundlegend für die React-Native-Entwicklung und wertvoll für das Verständnis der Cross-Platform-Landschaft. React Native ist ein großes Framework zum Erstellen von **nativen mobilen Apps mit React und JavaScript** aus einer weitgehend gemeinsam genutzten Codebasis – es beantwortet das bedeutende Bedürfnis, zu vermeiden, dass separate iOS- und Android-Apps entwickelt werden, und ermöglicht es dem großen Pool von **Web-/React-Entwicklern**, ihre vorhandenen Fähigkeiten (Komponenten, JSX, Hooks, State) auf Mobile anzuwenden, ein Schlüsselvorteil. Das definierende Merkmal – dass React Native **echte native UI-Komponenten** rendert (React-Komponenten zu tatsächlichen nativen Views zuordnet, nicht zu einer Webview oder HTML) – ist wichtig zu verstehen, da es Apps **native Performance und Look/Feel** gibt und React Native damit von Webview-basierten Ansätzen unterscheidet und es zu einer echten Native-App-Lösung macht. Das Verständnis **wie es funktioniert** (JavaScript läuft und steuert native UI, kommuniziert über die Bridge historisch oder das schnellere JSI in der neuen Architektur mit der nativen Seite) verdeutlicht seine Hybrid-Natur. Das Verständnis **wichtiger Merkmale** – native Komponenten (natives Erscheinungsbild/Performance), das vertraute React-Modell (übertragbare Web-Fähigkeiten), Cross-Platform-Code-Sharing, Fast Refresh (sofortige Updates), das große npm-Ökosystem und Zugriff auf native Funktionen – zeigt, warum React Native weit verbreitet ist (verwendet von Instagram, Discord, Shopify und vielen anderen). Da React Native ein großes Cross-Platform-Framework ist (besonders attraktiv für React-/Web-Entwickler) und das Verständnis seiner Natur (React + JS, native Komponenten, Cross-Platform) und wie es funktioniert (echte native UI steuert) grundlegend für React-Native-Arbeit ist und wichtiger Kontext für das Verständnis, wie es sich unter Cross-Platform-Optionen einordnet, ein weit verbreiteter Ansatz, der besonders wertvoll für die Nutzung von React-Fähigkeiten zur Erstellung nativer mobiler Apps ist, ist das Verständnis, was React Native ist und wie es funktioniert, wesentliches, grundlegendes Wissen – der Startpunkt für React-Native-Entwicklung und wichtiger Kontext zum Verständnis, wie es sich in Cross-Platform-Technologien einfügt.