Version2

Налаштування середовища розробки

Покрокове налаштування середовища для React Native розробки — Node.js, Expo CLI, емулятори iOS/Android, Expo Go на реальному пристрої та VS Code з розширеннями.

Налаштування середовища розробки

Перш ніж писати перший рядок коду

На відміну від веб-розробки, де достатньо браузера та текстового редактора, мобільна розробка вимагає ретельнішого налаштування середовища. Це пов'язано з природою платформи: ваш код має виконуватися на iOS або Android, а не в браузері.

Проте React Native разом з Expo суттєво спростив цю задачу. Якщо раніше початківці витрачали дні на боротьбу з Xcode, Android Studio та нативними залежностями, то сьогодні перший робочий застосунок можна запустити за 15 хвилин — навіть без встановлення Xcode чи Android Studio.

У цій статті ми пройдемо весь шлях: від чистої машини до запущеного застосунку на реальному телефоні.

Що таке Expo? Expo — це фреймворк та платформа над React Native, що надає набір готових інструментів, бібліотек і сервісів. Він суттєво знижує поріг входу та прискорює розробку. У цьому курсі ми починаємо з Expo Managed Workflow, а в окремій статті розглянемо, коли і як перейти на bare workflow з повним доступом до нативного коду.

Крок 1: Node.js та менеджер пакетів

React Native — це JavaScript-екосистема, тому Node.js є обов'язковою передумовою. Expo CLI, npx, всі залежності проєкту — все це працює через Node.js.

Яку версію встановити?

Завжди встановлюйте LTS (Long-Term Support) версію Node.js. На момент написання це Node.js 20.x або 22.x. Уникайте непарних «поточних» версій (наприклад, 21.x, 23.x) — вони не мають статусу LTS і не рекомендовані для production-середовищ.

Рекомендований спосіб — через Homebrew (менеджер пакетів для macOS):

Встановлення Node.js на macOS

# Встановлення Homebrew (якщо ще не встановлено)
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# Встановлення Node.js LTS
$ brew install node@20
🍺  node@20 20.18.0
$ node --version
v20.18.0
$ npm --version
10.9.0

Рекомендований спосіб — через офіційний інсталятор з nodejs.org, або через winget:

Встановлення Node.js на Windows (PowerShell)

# Через winget (Windows Package Manager)
PS> winget install OpenJS.NodeJS.LTS
Successfully installed OpenJS.NodeJS.LTS
PS> node --version
v20.18.0

Встановлення Node.js на Linux (Ubuntu/Debian)

# Через NodeSource repository
$ curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
$ sudo apt-get install -y nodejs
$ node --version
v20.18.0

nvm: управління кількома версіями Node.js

Якщо ви одночасно працюєте над кількома проєктами з різними вимогами до версії Node.js, встановіть nvm (Node Version Manager):

nvm — перемикання між версіями

# Встановлення nvm (macOS/Linux)
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# Встановлення та використання Node 20
$ nvm install 20
$ nvm use 20
Now using node v20.18.0 (npm v10.9.0)

npm чи yarn? Expo офіційно підтримує обидва. У цьому курсі використовується npm — він встановлюється разом з Node.js і не вимагає додаткових кроків. Якщо ви надаєте перевагу yarn, замінюйте npm install на yarn add та npx на yarn.

Крок 2: Expo CLI vs React Native CLI

Перш ніж створити проєкт, розберемось з фундаментальним вибором: Expo чи React Native CLI.

Два шляхи у React Native

Expo Managed Workflow

Рекомендований старт. Expo бере на себе всю нативну конфігурацію: Xcode, Android Studio, Gradle, CocoaPods. Ви пишете лише JavaScript/TypeScript. Доступ до нативних API — через Expo SDK.

Ідеальний для: навчання, прототипів, більшості реальних застосунків, команд без досвіду в iOS/Android розробці.

React Native CLI (bare)

Повний контроль. Ви самостійно управляєте нативними проєктами (ios/ та android/ директорії). Можна підключити будь-яку нативну бібліотеку, змінити нативний код, інтегрувати RN у існуючий нативний застосунок.

Ідеальний для: коли потрібні нативні модулі, яких немає в Expo SDK, або коли RN додається до існуючого нативного проєкту.

Важливо: ці два шляхи не є взаємовиключними. Expo Managed Workflow можна «відкрити» (eject) у будь-який момент за допомогою npx expo prebuild, отримавши повний доступ до нативного коду. Це вирішує проблему «я обрав Expo, але тепер потребую нативний модуль». Детально це розглянуто у статті про bare workflow.

Чому ми починаємо з Expo?

Аспект	Expo Managed	React Native CLI
Потрібен Xcode/Android Studio	Ні	Так
Час до першого запуску	~10 хвилин	1–3 години
Перегляд на телефоні (без кабелю)	Так (Expo Go)	Ні
OTA (over-the-air) оновлення	Так	Потрібна конфігурація
Push-сповіщення	Так (Expo)	Ручна конфігурація
Доступ до нативного коду	Обмежений (але є prebuild)	Повний
Підходить для цього курсу	✓	Окрема стаття

Крок 3: Створення першого проєкту

Expo надає утиліту create-expo-app, аналогічну create-react-app у веб-світі. Вам не потрібно встановлювати Expo CLI глобально — достатньо npx:

Створення Expo-проєкту

$ npx create-expo-app@latest my-first-app
✔ Which template would you like to use? › Default
  (A TypeScript app with file-based routing)
✓ Your project is ready!
To get started:
  - cd my-first-app
  - npx expo start

Шаблони create-expo-app:Default (рекомендований — TypeScript + Expo Router + файлова навігація), Blank (мінімальний, без навігації), Blank (TypeScript). Для цього курсу використовуйте Default — він налаштовує Expo Router, який ми вивчаємо у модулі 4.

Структура згенерованого проєкту

Після створення ви отримаєте таку структуру:

Ключові елементи структури:

app/

директорія

Серце проєкту з Expo Router. Кожен файл тут — це маршрут. _layout.tsx визначає спільний layout (навігацію) для вкладених маршрутів. (tabs)/ — група маршрутів з Tab-навігацією. Детально — у статті про Expo Router.

app.json

конфіг

Конфігурація Expo застосунку: назва, іконка, splash screen, орієнтація, дозволи, платформо-специфічні налаштування. Альтернатива — app.config.ts (TypeScript-конфіг з динамічними значеннями).

assets/

директорія

Статичні ресурси: іконки, зображення, шрифти. Expo автоматично обробляє та оптимізує їх під різні density екранів (1x, 2x, 3x).

constants/

директорія

Загальні константи проєкту: кольори, розміри, конфігурація. Конвенція, яка не є обов'язковою, але корисна для організації коду.

hooks/

директорія

Кастомні хуки, зокрема useColorScheme для роботи з темою. Expo генерує кілька готових хуків для роботи з темою та кольорами.

tsconfig.json

конфіг

TypeScript-конфіг. Expo автоматично включає необхідні типи для React Native та Expo. Зверніть увагу на "extends": "expo/tsconfig.base" — це базова конфігурація від Expo з оптимальними налаштуваннями.

Крок 4: Запуск та перший запущений застосунок

Переходьте до директорії проєкту і запустіть Expo Dev Server:

npx expo start

$ cd my-first-app
$ npx expo start
Starting project at /Users/user/my-first-app
✓ Metro waiting on exp://192.168.1.5:8081
  › Press a │ open Android
  › Press i │ open iOS simulator
  › Press w │ open web
  › Press r │ reload app
  › Press j │ open debugger
  › Press ? │ show all commands
  Scan the QR code above with Expo Go (Android)
  or the Camera app (iOS)

Expo Dev Server — це Metro bundler, основний інструмент збірки React Native. Він компілює ваш TypeScript/JSX у JavaScript і обслуговує бандл для клієнтів (телефон, емулятор). Metro підтримує Hot Module Replacement (HMR) — зміни у коді з'являються на екрані майже миттєво без повного перезавантаження.

Спосіб 1: Expo Go — реальний пристрій без кабелю

Expo Go — безкоштовний застосунок, який дозволяє запускати ваш Expo-проєкт на реальному телефоні без будь-якої збірки. Достатньо відсканувати QR-код.

Встановіть Expo Go

iOS: App Store → Expo Go
Android: Google Play → Expo Go

Переконайтесь, що телефон та комп'ютер в одній Wi-Fi мережі

Metro bundler обслуговує бандл локально. Телефон має досягти IP-адреси вашого комп'ютера.

Відскануйте QR-код

iOS: відкрийте стандартну Camera app і наведіть на QR-код у терміналі
Android: відкрийте Expo Go → натисніть «Scan QR code»

Застосунок завантажується і запускається

Expo Go завантажує JavaScript-бандл, виконує його і відображає ваш застосунок. Перше завантаження займає 10–30 секунд.

Обмеження Expo Go: Expo Go підтримує лише бібліотеки зі стандартного Expo SDK. Якщо ви додаєте бібліотеку з нативним кодом (наприклад, react-native-maps або кастомний нативний модуль), Expo Go не зможе їх завантажити — потрібна Development Build (власна збірка Expo Go з вашими нативними залежностями). Для більшості завдань цього курсу Expo Go є достатнім.

Спосіб 2: iOS Simulator (тільки macOS)

Якщо у вас macOS та встановлений Xcode — iOS Simulator доступний одразу. Натисніть i у Metro або запустіть з прапорцем:

Запуск на iOS Simulator

$ npx expo start --ios
› Opening on iOS...
› Opening simulator iPhone 16 Pro

Встановлення Xcode: Відкрийте App Store → знайдіть «Xcode» → встановіть. Після встановлення запустіть Xcode один раз — він доінсталює Command Line Tools. Розмір: ~15 ГБ.

Спосіб 3: Android Emulator

Android-емулятор вимагає встановлення Android Studio:

Завантажте Android Studio

developer.android.com/studio → встановіть

Налаштуйте Android Virtual Device (AVD)

Android Studio → More Actions → Virtual Device Manager → Create Device → виберіть Pixel 8 + API 35

Перевірте змінні оточення

Налаштування ANDROID_HOME

# Додайте до ~/.zshrc або ~/.bash_profile
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

Запустіть емулятор і натисніть `a` у Metro

Крок 5: VS Code та розширення

VS Code — де-факто стандартний редактор для React Native розробки. Налаштуйте його правильно від самого початку.

Обов'язкові розширення

Expo Tools

Офіційне розширення від Expo. Підсвічує app.json, автодоповнення для Expo SDK, інтеграція з EAS. ID: expo.vscode-expo-tools

React Native Tools

Офіційне від Microsoft. Налагодження React Native застосунків прямо у VS Code, breakpoints, перегляд стану. ID: msjsdiag.vscode-react-native

ESLint

Статичний аналіз коду. Expo включає .eslintrc.js з базовою конфігурацією. ID: dbaeumer.vscode-eslint

Prettier

Форматування коду. Налаштуйте «Format on Save» для автоматичного форматування при збереженні. ID: esbenp.prettier-vscode

Налаштування VS Code для React Native

Додайте до .vscode/settings.json у корені проєкту:

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.tsdk": "node_modules/typescript/lib",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  }
}

Fast Refresh: гаряче перезавантаження

React Native підтримує Fast Refresh — зміни у коді миттєво відображаються на екрані без перезапуску застосунку та без втрати стану компонента. Це значно прискорює розробку порівняно з традиційним mobile-розробкою.

Як працює Fast Refresh: Metro відстежує зміни у файлах. При зміні компонента він пересилає лише оновлений модуль на пристрій/емулятор. React замінює компонент «гарячо», зберігаючи стан хуків. Якщо змінено файл поза компонентом (утиліта, константа) — відбувається повне перезавантаження.

Практика

Edit this pageorReport an issue

React Native — навіщо він потрібен

Зрозуміле введення в React Native для тих, хто вже знає React — які задачі він вирішує, чим відрізняється від сайту на телефоні, і коли його варто обирати

Expo і класичний React Native — два шляхи одного фреймворку

Зрозуміле порівняння Expo і React Native CLI — що це таке, чим відрізняються, і чому курс спочатку йде через Expo