Что такое React Native и Expo
React Native — библиотека для создания мобильных приложений под iOS и Android на React. Вы пишете те же компоненты, хуки и JSX, что и в веб-курсе React, но на экране появляются не HTML-элементы, а настоящие системные элементы интерфейса телефона.
Не веб-страница внутри приложения
Есть два подхода к мобильным приложениям на JavaScript. Первый — показать сайт во встроенном браузере (web view). Второй — подход React Native: JavaScript-код описывает интерфейс, а React Native создаёт для него родные (native) компоненты платформы.
| Вы пишете | На iOS появляется | На Android появляется | Похоже в вебе на |
|---|---|---|---|
View | UIView | android.view.View | div |
Text | UITextView | TextView | p, span |
Image | UIImageView | ImageView | img |
TextInput | UITextField | EditText | input |
Поэтому прокрутка, клавиатура и кнопки ведут себя так, как привык пользователь телефона. HTML и CSS здесь нет: вместо div — View, вместо CSS-файлов — объекты стилей.
Что такое Expo
Expo — набор инструментов поверх React Native. Он официально рекомендуется документацией React Native для новых проектов и даёт:
- команду
npx create-expo-app@latestдля создания проекта; - приложение Expo Go, чтобы открыть свой проект на телефоне по QR-коду без Xcode и Android Studio;
- Expo Router — навигацию между экранами на основе файлов;
- готовые модули для камеры, геолокации, хранилища и других возможностей устройства;
- сервис EAS для сборки и публикации приложения в магазинах.
Версии
Курс написан для Expo SDK 54 и новее — это React Native 0.81 и React 19. SDK (software development kit) — это согласованный набор версий React Native и всех модулей Expo; он обновляется несколько раз в год. Код примеров написан на TypeScript в файлах .tsx, как в стандартном шаблоне Expo, но типы используются минимально.
Что вы уже знаете
Курс опирается на курс React: компоненты, пропсы, useState, useEffect, списки с ключами. Повторно они не объясняются — в уроках разобрано только то, что отличается на телефоне.
Два учебных приложения
Сначала вы сделаете список задач: добавление, отметка о выполнении, сохранение на устройстве. Затем — приложение для чтения блога: список статей и страница статьи с данными из https://jsonplaceholder.typicode.com, вкладки и экран профиля.
Частая ошибка
Ожидать, что в React Native работают HTML-теги и CSS. Код вроде <div className="card"> вызовет ошибку: тега div здесь нет, а атрибута className у компонентов React Native нет. Используйте View, Text и проп style — о них следующие уроки.