Урок 01

Что такое React Native

React Native — фреймворк для создания мобильных приложений на JavaScript и React. В отличие от веба, он рендерит нативные компоненты iOS и Android, а не HTML.

Что такое нативный рендер

В вебе React работает с DOM: <div>, <p>, <button>. В React Native те же компоненты превращаются в нативные элементы платформы: UIView на iOS, android.view.View на Android. Пользователь получает настоящее нативное приложение, а не веб-страницу в обёртке.

Если ты уже знаешь React

Всё, что связано с React, повторяться не будет. Компоненты, пропсы, состояние, хуки, события, списки — это разбирается в треке React. Если что-то из этого забыл — вернись в соответствующий курс.

Здесь мы разбираем только мобильную специфику: нативные компоненты, стили, навигацию, работу с устройством.

Что общего с React

  • Язык — JavaScript или TypeScript
  • Компоненты — функции, возвращающие JSX
  • Хуки — useState, useEffect, useMemo, useCallback
  • Пропсы и состояние
  • Обработка событий
  • Списки через map с key
  • Контекст, useReducer
  • React Query для данных

Что отличается

  • Компоненты: нет <div>, <p>, <button>. Вместо них — <View>, <Text>, <Pressable>
  • Стили: не CSS, а объекты StyleSheet
  • Навигация: не URL и React Router, а React Navigation
  • Платформа: iOS и Android, а не браузер
  • Сборка: не npm run build, а сборка через Xcode и Gradle

Где используется

  • Instagram — часть интерфейса
  • Facebook — мобильное приложение
  • Discord — мобильный клиент
  • Shopify — приложение для мерчантов
  • Microsoft Outlook — мобильная версия
  • Сбер, Тинькофф, ВТБ — частично, для внутренних приложений

Преимущества

  • Один код — iOS и Android из одной кодовой базы
  • Быстрая разработка — горячая перезагрузка через Fast Refresh
  • JS/TS — не нужно учить Swift или Kotlin
  • Экосистема npm — те же библиотеки, что в вебе
  • OTA-обновления — обновление без публикации в сторах (CodePush, EAS Update)

Недостатки

  • Не везде нативно — сложные анимации и жесты требуют нативных модулей
  • Размер приложения — больше, чем у чистого нативного
  • Сборка — требует настройки Xcode и Android Studio
  • Платформенные различия — иногда нужно писать разный код под iOS и Android

Что дальше

В следующих уроках: установка, Expo, структура проекта, первые экраны.

Итоги

  • React Native — мобильные приложения на React
  • Рендерит нативные компоненты
  • Всё про React — в треке React
  • Здесь — только мобильная специфика