React Native — что это и как начать разрабатывать мобильные приложения

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

База React Native

React Native похож на React по мышлению, но отличается деталями интерфейса. Здесь нет div и обычных CSS-файлов, зато есть View, Text, StyleSheet, платформенные ограничения и поведение реального устройства.

Если вы пришли из веб-разработки, этот раздел лучше читать как перевод привычных идей на мобильную платформу. Компоненты и state знакомые, но разметка, стили и взаимодействие с устройством другие.

React Native и обычный React

Пример компонента

import { View, Text, Pressable, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Привет, React Native</Text>
      <Pressable style={styles.button}>
        <Text style={styles.buttonText}>Начать</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  title: { fontSize: 24, fontWeight: '700' },
  button: { marginTop: 16, padding: 12, backgroundColor: '#2563eb' },
  buttonText: { color: 'white' },
});

Как начать: Expo

Для новичка самый простой старт — Expo. Он создаёт React Native проект, даёт dev-сервер, QR-код для Expo Go и многие готовые модули. Официальные React docs тоже указывают Expo как React-фреймворк для нативных приложений.

npx create-expo-app@latest my-mobile-app
cd my-mobile-app
npx expo start

Что нужно знать перед React Native

• JavaScript: функции, массивы, объекты, async/await.
• Основы React: компоненты, props, useState, useEffect.
• Flexbox, потому что layout в React Native строится похожим образом.
• Понимание мобильных платформ: экран, клавиатура, разрешения, навигация.

React Native и Flutter

React Native удобен, если вы уже знаете JavaScript и React. Flutter использует Dart и свой набор виджетов. Оба подхода позволяют делать кроссплатформенные приложения, но вход для React-разработчика в React Native обычно быстрее.

Выбор между ними чаще зависит от команды и будущей поддержки. Если в проекте уже есть React-разработчики, React Native снижает порог входа. Если команда готова жить в экосистеме Dart и Flutter, второй вариант тоже может быть сильным.

Где React Native хорош

• MVP и стартап-приложения.
• Кабинеты, маркетплейсы, сервисные приложения.
• Команды, где уже есть React-разработчики.
• Проекты, которым нужно быстрее закрыть Android и iOS одной командой.

Базовые компоненты, которые нужно знать

Особенности мобильной разработки

В мобильном приложении нужно думать о клавиатуре, safe area, разрешениях, офлайн-состоянии, размере экрана и производительности списков. То, что в браузере кажется мелочью, на телефоне быстро становится проблемой.

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

Учебный маршрут

После первого запуска изучите View, Text и StyleSheet, затем TextInput и FlatList. После этого переходите к навигации, запросам к API и сборке приложения через EAS или нативные инструменты.

Маршрут после первого запуска React Native

После стартового проекта не спешите сразу к публикации в сторах. Сначала нужно привыкнуть к базовым мобильным компонентам и понять, чем мобильный интерфейс отличается от браузерного.

Публикация в сторы — это финальный этап, а не следующий шаг после hello world. Сначала соберите несколько обычных экранов, проверьте ввод, списки, навигацию и запросы к API на реальном устройстве.

Нормальный маршрут

• View, Text, StyleSheet и Flexbox;
• TextInput и обработка клавиатуры;
• FlatList для списков;
• навигация между экранами;
• запросы к API и состояния загрузки;
• сборка через Expo/EAS или нативные инструменты.

Где новички чаще ошибаются

Частая ошибка — переносить веб-привычки один в один: ждать div, CSS-файлы, hover-состояния и поведение браузера. В React Native другой набор компонентов и другие ограничения устройства.

Практическая проверка

Соберите экран профиля, список карточек и форму редактирования. Если вы можете сделать это без постоянного поиска «аналог div в React Native», базовый переход с React уже произошёл.