React Native — быстрый старт и руководство

Иллюстрация: разработка мобильных приложений на Android с использованием React Native

React Native позволяет создавать нативные мобильные приложения с помощью JavaScript и React — библиотеки интерфейса, разработанной Facebook. Это облегчает написание кода одновременно для Android и iOS, без необходимости глубоко изучать Java (Android) или Objective‑C/Swift (iOS).

Пример кода React Native

Ниже — всё, что нужно знать, чтобы быстро запустить React Native‑проект и начать разработку.

Коротко о терминах

React: библиотека для построения интерфейсов. Используйте её компоненты и концепции.
React Native: фреймворк, который рендерит компоненты в нативные элементы Android/iOS.
Expo: набор инструментов и окружение, упрощающее запуск и отладку React Native‑приложений.
Node.js и npm: окружение и менеджер пакетов для установки инструментов и зависимостей.

Требования и подготовка

Если вы уже знакомы с React, старт будет очень быстрым. В минимальный набор входят:

стабильное интернет‑соединение;
компьютер с правами администратора для установки ПО;
Node.js и npm (менеджер пакетов);
телефон с Android или iOS и возможность подключиться к той же сети Wi‑Fi, что и компьютер (при использовании Expo).

Мы рекомендуем также базовые навыки командной строки (Linux/macOS/Windows). Если вы начинающий, прочитайте краткое руководство по работе с терминалом для вашей ОС.

Установка React Native (шаги)

Первым делом установите Node.js: посетите страницу загрузки Node.js и скачайте установщик для Windows или macOS. Для Linux доступны пакеты, но там может потребоваться дополнительная настройка.

Окно установщика Node.js

После установки вы получите Node.js и npm — с их помощью ставятся остальные пакеты.

Самый простой способ начать — использовать create-react-native-app (через npm). Откройте терминал и выполните:

npm install -g create-react-native-app

Установка create-react-native-app через npm

Если при установке возникнут ошибки, часто это связано с правами доступа npm. В таких случаях проверьте настройки npm или воспользуйтесь nvm/npx для управления версиями Node.

Создание простого приложения

Создайте папку для проекта и перейдите в неё в терминале. Для создания приложения выполните:

create-react-native-app FirstAndroidApp

Создание проекта React Native

Перейдите в созданную папку и запустите сервер разработки:

npm start

Работающий сервер разработки React Native

Команда запустит Metro Bundler — локальный сервер разработки. В терминале появится QR‑код и IP‑адрес сервера.

Сервер разработки React Native с QR‑кодом и статусами сборки

Тестирование на реальном устройстве через Expo

Для простоты разработки используйте Expo Client. Установите приложение Expo на телефон из Google Play или App Store. Убедитесь, что телефон и компьютер в одной сети Wi‑Fi.

Экран приложения Expo на телефоне

Закрыть

Откройте Expo, выберите «Сканировать QR‑код» и наведите камеру на QR‑код в терминале. Через несколько секунд приложение загрузится на телефон. В терминале появятся статусы сборки — они сообщают, что приложение собрано и запущено на устройстве.

Разбор простого приложения — Hello, World!

Внутри папки FirstAndroidApp находятся файлы проекта. Откройте App.js в вашем редакторе кода. Пример базового содержимого:

import React from 'react';  
import { StyleSheet, Text, View } from 'react-native';  
  
export default class App extends React.Component {  
    render() {  
        return (  
              
                Open up App.js to start working on your app!  
                Changes you make will automatically reload.  
                Shake your phone to open the developer menu.  
              
        );  
    }  
}  
  
const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        backgroundColor: '#fff',  
        alignItems: 'center',  
        justifyContent: 'center',  
    },  
});

Экран первого приложения React Native

Закрыть

Пояснения по коду:

import React — подключение библиотеки React.
import { StyleSheet, Text, View } from ‘react-native’ — импорт базовых компонентов.
Компонент App — основа приложения; метод render возвращает разметку.
View — контейнер для других компонентов.
Text — компонент для отображения текста (обязательно использовать Text для текста).
styles — объект, похожий на CSS, но оформленный в виде JavaScript‑объекта.

Изменим цвета и текст. В style измените backgroundColor на зелёный:

backgroundColor: '#4caf50',

Добавим стиль text:

 text: {  
    color: '#fff',  
    fontSize: 34,  
    fontWeight: 'bold'  
}

Полный объект styles:

const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        backgroundColor: '#4caf50',  
        alignItems: 'center',  
        justifyContent: 'center',  
    },  
    text: {  
        color: '#fff',  
        fontSize: 34,  
        fontWeight: 'bold',  
    }  
});

И измените текст внутри компонента:

Hello, World!

После сохранения файл автоматически перезагрузится в Expo на телефоне.

Пример Hello World в React Native на устройстве

Закрыть

Частые проблемы и как их решать

Проблемы с установкой npm пакетов: проверьте права доступа npm, используйте nvm для управления версиями Node, либо выполните установку с sudo (не рекомендуется в долгосрочной перспективе).
Приложение не видит сервер (через QR): убедитесь, что компьютер и телефон в одной сети и что фаервол не блокирует порты. Отключите VPN.
Expo не поддерживает некоторые нативные модули: если требуется нативный код, используйте «eject» и подключайте Android/iOS‑проект вручную.
Медленная сборка: закройте лишние процессы, используйте современный SSD и следите за версией пакетов.

Important: при переходе от разработки в Expo к полноценной нативной сборке (например, для публикации в магазине) потребуется установить Android SDK / Xcode и настроить подпись приложения.

Когда React Native не лучший выбор

Сильно специализированные нативные фичи (низкоуровневый доступ к аппаратуре, кастомные рендереры) — удобнее писать нативно на Kotlin/Java или Swift.
Максимальная производительность в графически‑интенсивных играх — лучше использовать движки (Unity, Unreal) или специализированные SDK.
Очень старые устройства с ограниченными ресурсами — нативная оптимизация даёт больший контроль.

Альтернативы и сравнение (кратко)

Flutter — кроссплатформенный фреймворк от Google, использует язык Dart, рендерит собственные виджеты. Подходит для быстрой отрисовки и согласованного UI.
Native (Kotlin/Java, Swift) — максимум контроля и производительности.
Progressive Web App (PWA) — для простых приложений без требований к нативному API.

Ментальная модель: React Native = React + мост к нативным компонентам. Большая часть логики остаётся в JavaScript, а визуальные элементы отображаются нативно.

Подготовка к публикации в Google Play (в общих чертах)

Убедитесь, что приложение стабильно и протестировано на целевых устройствах.
Если вы используете Expo Managed workflow, следуйте документации Expo для сборки релизов. Если вы «eject» — настройте Android Studio и подпись APK/AAB.
Создайте ключ подписи (keystore), настройте gradle.properties и build.gradle для подписи.
Соберите AAB (рекомендуется) и загрузите в Google Play Console.
Подготовьте описание, скриншоты, политику конфиденциальности.

Для iOS потребуется Xcode и учётная запись Apple Developer.

Безопасность и конфиденциальность

Храните ключи и секреты вне репозитория (в environment variables, секретных хранилищах).
Минимизируйте сбор персональных данных и документируйте, зачем они нужны.
Проверьте зависимости: используйте npm audit и следите за обновлениями.

Privacy: если приложение собирает персональные данные пользователей из ЕС, учтите требования GDPR: минимизация данных, право на удаление, информированное согласие.

Чек‑листы по ролям

Разработчик:

Установил Node.js и npm
Создал проект и проверил запуск в Expo
Написал компонент и протестировал перезагрузку
Подготовил конфигурацию для релиза

QA:

Тесты пользовательских сценариев на реальных устройствах
Проверка производительности и утечек памяти
Тестирование офлайн‑режима и обработка ошибок сети

Product Manager:

Описание функционала и критерии приёмки
Маркетинговые материалы и скриншоты для магазина
Политика конфиденциальности и требования по поддержке платформ

Критерии приёмки

Приложение запускается без критических ошибок на целевой версии Android/iOS.
Основные сценарии (регистрация, вход, ключевой функционал) работают корректно.
Производительность соответствует ожиданиям — отсутствие заметных фризов при обычных операциях.
Собраны тестовые сборки и провёрнут процесс публикации (AAB или IPA).

Мини‑методология разработки (быстрый цикл)

Идея → минимальный прототип.
Реализация ядра в React Native + Expo для быстрого цикла.
Тестирование на реальных устройствах, сбор обратной связи.
Оптимизация и добавление нативных модулей при необходимости.
Сборка релиза и публикация.

Отладка и полезные команды

npm start — запуск Metro Bundler.
npm run android / npm run ios — команды, если вы используете React Native CLI вместо Expo (после eject).
Use remote JS debugging через Chrome или DevTools в Expo.
logcat (Android) и Console (Xcode) для логов нативной части.

Советы по производительности

Минимизируйте обильные ререндеры: используйте PureComponent или React.memo.
Профилируйте JavaScript‑память и время рендера.
Для тяжёлых вычислений используйте native modules или Web Workers‑аналог (например, react‑native‑worker).

Ресурсы и куда идти дальше

Официальная документация React Native — подробная справочная документация по API.
Документация Expo — быстрый старт и инструменты для быстрой итерации.
Качественные туториалы и курсы по React для углубления понимания компонентов и состояния.

Рекомендуем продолжать изучение, переходить к реальным задачам и по мере необходимости подключать нативные модули.

Короткое резюме

React Native — удобный инструмент для быстрой разработки кроссплатформенных мобильных приложений с использованием JavaScript и React. Начать просто: установите Node.js, создайте проект через create-react-native-app или Expo, запустите npm start и тестируйте на телефоне через Expo. При потребности в нативных возможностях вы можете «eject» и подключать Android/iOS проекты напрямую.

В статье содержатся практические советы по установке, отладке, распространённые проблемы и чек‑листы для команд. Удачной разработки!