====== React Native: Mobilní aplikace pomocí JS ====== **React Native** mění pravidla hry ve vývoji mobilních aplikací. Namísto psaní dvou samostatných kódů (v Swiftu pro iOS a v Kotlinu pro Android) píšete jeden kód v JavaScriptu, který běží na obou platformách, aniž byste obětovali výkon nebo uživatelský zážitek. ===== 1. Jak React Native funguje? ===== Na rozdíl od hybridních aplikací (jako PhoneGap nebo Cordova), které webovou stránku pouze "zabalí" do mobilního okna, React Native používá **nativní komponenty**. * **JavaScript Thread:** Zde běží vaše logika v Reactu. * **The Bridge (Most):** Speciální komunikační vrstva, která posílá instrukce z JavaScriptu do nativní části telefonu. * **Native Elements:** Pokud v kódu napíšete ``, React Native jej na iPhonu vykreslí jako `UIView` a na Androidu jako `ViewGroup`. --- ===== 2. Hlavní výhody ===== * **Sdílený kód:** Až 90 % kódu může být společných pro obě platformy, což drasticky snižuje náklady a čas na vývoj. * **Hot Reloading:** Vývojáři vidí změny v kódu okamžitě na simulátoru nebo reálném telefonu bez nutnosti zdlouhavé kompilace. * **Nativní výkon:** Protože výsledkem jsou skutečné nativní prvky, aplikace je plynulá a reaguje stejně rychle jako aplikace psané přímo pro daný systém. * **Silný ekosystém:** Přístup k obrovskému množství knihoven z prostředí [[it:sw:javascript|JavaScriptu]] i nativních modulů. --- ===== 3. Komponenty a stylování ===== React Native nepoužívá HTML tagy (jako `div` nebo `h1`), ale vlastní sadu základních komponent: ^ Komponenta ^ Ekvivalent v HTML ^ Popis ^ | **** | `
` | Základní kontejner pro rozvržení. | | **** | `` / `

` | Jediný prvek, který může obsahovat text. | | **** | `` | Zobrazení obrázků. | | **** | --- | Kontejner, který umožňuje posouvání obsahu. | | **** | --- | Optimalizovaný seznam pro velké množství dat. | Stylování probíhá pomocí objektů podobných **CSS**, ale využívá se výhradně **Flexbox** pro rozvržení prvků. --- ===== 4. Expo vs. CLI ===== Při startu projektu mají vývojáři dvě hlavní cesty: * **Expo:** Sada nástrojů, která extrémně usnadňuje začátek. Nemusíte instalovat Xcode nebo Android Studio, stačí vám mobilní aplikace Expo Go. Ideální pro začátečníky a rychlé prototypy. * **React Native CLI:** Vyžaduje plné nastavení vývojového prostředí. Poskytuje však neomezenou kontrolu nad nativním kódem a je nezbytný pro komplexní projekty vyžadující specifické HW úpravy. --- ===== 5. Kdo používá React Native? ===== Díky své stabilitě a výkonu na něj spoléhají giganti jako: **Facebook, Instagram, Shopify, Pinterest, Skype, Uber Eats** nebo **Tesla**. ---- //Související články:// * [[it:sw:react|Framework React a komponenty]] * [[it:sw:javascript|Základy JavaScriptu]] * [[it:sw:typescript|TypeScript v mobilním vývoji]] //Tagy: {{tag>programming react-native mobile-development ios android javascript}}//