Середовище Expo — перший запуск

Навіщо ця стаття

Попередні матеріали відповіли на питання навіщо React Native, як він приблизно влаштований усередині, і якою майстернею (Expo) курс починає роботу. Тут з’являються руки в терміналі: з’являється реальний проєкт на диску, запускається збирач, на екрані телефону або симулятора видно перший інтерфейс.

Після цієї статті має бути зрозуміло:

• що встановити на комп’ютер мінімально;
• як створити проєкт командою create-expo-app;
• що відбувається після npx expo start;
• чим Expo Go відрізняється від симулятора й від «повноцінної» збірки для магазину;
• де лежать перші налаштування імені застосунку;
• як виконати міні-проєкт «Привіт, світе» і покласти фундамент Nomad.

Що саме буде встановлено (картина цілого)

@startuml
skinparam style plain
skinparam backgroundColor #ffffff

rectangle "Комп'ютер розробника" as DEV #e3f2fd {
  component "Node.js\n(запуск JS-інструментів)" as NODE
  component "Термінал" as TERM
  component "Редактор коду" as IDE
  component "Metro\n(збирач проєкту)" as METRO
}

rectangle "Проєкт на диску\n(папка з файлами)" as PROJ #fff3e0

rectangle "Де дивитися результат" as VIEW #e8f5e9 {
  component "Expo Go\nна телефоні" as GO
  component "Симулятор iOS\n(лише macOS)" as IOS
  component "Емулятор Android" as AND
}

DEV --> PROJ
PROJ --> METRO
METRO --> GO
METRO --> IOS
METRO --> AND

@enduml

Коротко по ролях:

Крок 0. Перевірка та встановлення Node.js

Навіщо

Без Node.js команди створення проєкту й установки пакетів не запустяться. Node.js — це середовище, яке виконує JavaScript на комп’ютері (у терміналі), а не в браузері. Через нього працюють npx, установники пакетів і багато інструментів екосистеми React / Expo.

Разом із Node.js зазвичай з’являється npm (Node Package Manager — програма для встановлення бібліотек за списком у package.json).

Як перевірити, чи вже встановлено

У новому вікні терміналу:

node -v
npm -v

Два підходи: «просто поставити» і «керувати версіями»

Нижче — детальні рецепти. Команди інколи змінюються в нових версіях інструментів; якщо щось не збігається, орієнтуйтеся на офіційну документацію відповідного інструменту, але логіка лишається тією самою.

Спосіб A. Офіційний установщик (будь-яка ОС)

1. Відкрити https://nodejs.org.
2. Завантажити кнопку LTS (не обов’язково «Current», якщо потрібна максимальна стабільність для навчання).
3. Пройти майстер установки (на Windows залишити опції за замовчуванням, зокрема додавання до PATH).
4. Повністю закрити термінал / VS Code і відкрити знову.
5. Перевірити node -v і npm -v.

Це найпростіший шлях, якщо немає звички до пакетних менеджерів ОС.

Спосіб B. macOS — Homebrew

Homebrew (brew) — популярний менеджер пакетів для macOS (іноді використовують і на Linux).

Якщо brew ще немає, його ставлять з офіційного сайту https://brew.sh (одна команда з сайту в терміналі). Далі:

brew update
brew install node
node -v
npm -v

Оновлення пізніше:

brew upgrade node

Перевірити, звідки взявся node:

which node

Спосіб C. Windows — winget, Chocolatey, Scoop

На Windows часто користуються менеджерами пакетів, щоб ставити програми з терміналу. Достатньо одного з них (або офіційного .msi з nodejs.org).

winget install OpenJS.NodeJS.LTS

node -v
npm -v

winget search nodejs

choco install nodejs-lts -y

choco upgrade nodejs-lts -y

scoop install nodejs-lts
node -v
npm -v

scoop update nodejs-lts

Спосіб D. Linux — залежно від дистрибутива

На Linux «поставити node з репозиторію дистрибутива» інколи дає застарілу версію (особливо на LTS-релізах Ubuntu/Debian, якщо не підключено актуальне джерело). Для навчання й Expo надійніше:

1. або менеджер версій (nvm / fnm / mise) — рекомендовано;
2. або офіційні інструкції NodeSource / пакети з nodejs.org;
3. або пакети дистрибутива — лише якщо версія достатньо нова (перевірити node -v після установки).

sudo apt update
apt-cache policy nodejs

sudo apt update
sudo apt install -y nodejs npm
node -v
npm -v

sudo dnf install nodejs npm
node -v
npm -v

sudo pacman -S nodejs npm
node -v

sudo zypper install nodejs npm
node -v

Спосіб E. Менеджери версій лише для Node: nvm і подібні

Ідея: на диску лежать кілька версій Node; команда на кшталт nvm use 22 перемикає активну. У каталозі проєкту часто тримають файл .nvmrc з номером версії, щоб усі в команді працювали однаково.

nvm (Node Version Manager) — macOS / Linux / WSL

nvm не підтримує «рідний» Windows напряму; на Windows або WSL (Linux-підсистема), або nvm-windows (окремий проєкт нижче).

Встановлення nvm — за офіційною інструкцією (скрипт install.sh). Після цього в zsh/bash:

# підтягнути nvm у поточну сесію (після свіжої установки)
# зазвичай рядок уже додається в ~/.bashrc або ~/.zshrc

nvm install --lts
nvm use --lts
node -v
npm -v

Корисні команди:

nvm ls                 # що встановлено локально
nvm ls-remote --lts    # які LTS доступні
nvm install 22         # конкретна major-версія (приклад)
nvm alias default 22   # версія за замовчуванням для нових терміналів

Файл у корені проєкту:

.nvmrc

Вміст — один рядок, наприклад:

22

Тоді в каталозі проєкту:

nvm use

fnm (Fast Node Manager) — macOS / Linux / Windows

fnm — швидша сучасна альтернатива nvm, кросплатформена. Встановлення — з репозиторію fnm (brew, winget, скрипт тощо). Після ініціалізації в shell:

fnm install --lts
fnm use lts-latest
node -v

Підтримка .node-version / .nvmrc залежить від налаштування; digуйтесь README fnm.

nvm-windows — «класика» на Windows без WSL

Окремий проєкт nvm-windows (не той самий код, що nvm-sh). Зазвичай:

1. За потреби прибрати попередній Node з «Програм і компонентів», щоб не дублювати PATH.
2. Установити nvm-windows з релізів GitHub проєкту.
3. У новому cmd/PowerShell:

nvm install lts
nvm use lts
node -v

(Точний синтаксис lts / номера версії перевірте в README вашої версії nvm-windows — він інколи відрізняється від unix-nvm.)

Спосіб F. Універсальні менеджери середовищ: mise, asdf, volta

Окрім «тільки Node», існують інструменти, які керують багатьма мовами й утилітами (Node, Python, Terraform, jq…). Це зручно, якщо вже так налаштований робочий ноутбук.

mise

mise (раніше часто згадували як rtx) — сучасний менеджер версій і середовищ. Одна конфігурація може задавати Node для проєкту.

Встановлення — з офіційної документації mise (є варіанти для macOS, Linux, Windows). Типовий сценарій після установки:

# увімкнути активацію в shell (команда з docs mise для bash/zsh/fish)
# далі:
mise use --global node@lts
node -v
npm -v

У каталозі проєкту:

mise use node@22

З’явиться файл на кшталт mise.toml (або використовуються вже існуючі .node-version / .nvmrc — залежить від конфігурації). Команда mise install поставить потрібні версії.

asdf

asdf — старший універсальний менеджер плагінів (asdf plugin add nodejs, потім asdf install nodejs <version>). Логіка та сама: версія на проєкт у .tool-versions. Синтаксис і плагіни — у документації asdf. На нових машинах часто обирають mise як швидший/простіший наступник за відчуттями, але asdf лишається поширеним у командах.

volta

Volta — менеджер інструментів JS-екосистеми: вміє фіксувати версію Node для проєкту і підхоплювати її автоматично. Встановлення — з https://volta.sh. Ідея:

volta install node@lts
volta pin node@22

volta pin записує версію в package.json, щоб інші з Volta отримали ту саму.

Коротке порівняння «менеджерів»

Після будь-якого способу: фінальна перевірка

node -v
npm -v
which node
# Windows PowerShell:
# where.exe node

Бажано:

1. Версія Node — з поточної LTS-лінійки (або тієї, яку явно вимагає обраний Expo SDK у документації).
2. which / where вказує на очікуваний шлях (nvm, mise, brew, Program Files тощо) — не на випадковий старий бінарник.
3. Новий термінал після зміни PATH / профілю shell.

Крок 0+. Редактор коду: Visual Studio Code

Підійде будь-який редактор із підсвіткою TypeScript. У курсі орієнтир — Visual Studio Code (VS Code): безкоштовний редактор від Microsoft, стандарт де-факто для React / TypeScript / Expo. Сумісні форки (Cursor, VSCodium тощо) зазвичай розуміють ті самі розширення й settings.json; нижче — ідентифікатори й налаштування саме в термінах VS Code.

Офіційна документація VS Code: https://code.visualstudio.com/docs. Рекомендації щодо Expo Tools і дебагу з VS Code — у документації Expo.

Встановлення VS Code

1. Завантажити з https://code.visualstudio.com для macOS / Windows / Linux.
2. Установити як звичайну програму.
3. (Бажано) увімкнути команду code у PATH:
   • macOS: у VS Code — Command Palette (Cmd+Shift+P) → Shell Command: Install 'code' command in PATH.
   • Windows: опція під час установки «Add to PATH» зазвичай уже є.
4. Відкрити папку проєкту (не один файл): File → Open Folder… — тоді працюють workspace-налаштування й TypeScript проєкту.

Вбудований термінал: Ctrl+` (Windows/Linux) або Ctrl+` / Terminal → New Terminal (macOS — Control+`). Завжди запускайте npx expo start з кореня відкритої папки проєкту.

Два рівні налаштувань: User і Workspace

Розширення: must-have

Це набір, без якого щоденна робота з Expo + TypeScript + якістю коду відчутно гірша. У таблиці — ідентифікатор для Marketplace / code --install-extension.

Встановлення з терміналу (приклад):

code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension expo.vscode-expo-tools

Або в UI: бічна панель Extensions (Ctrl+Shift+X / Cmd+Shift+X) → пошук за назвою → Install.

Розширення: рекомендовані (не обов’язкові)

Ставте за смаком і задачами. Для курсу вони корисні, але без них можна жити.

Опційно / обережно:

Рекомендований settings.json (User або Workspace)

Нижче — практичний стартовий набір для TypeScript + Prettier + ESLint, узгоджений із поширеними порадами документації VS Code (editor.formatOnSave, editor.codeActionsOnSave, мовні перевизначення форматера).

Відкрити User JSON: Command Palette → Preferences: Open User Settings (JSON).

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.linkedEditing": true,
  "editor.suggestSelection": "first",
  "editor.inlineSuggest.enabled": true,

  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.expo": true
  },

  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  "typescript.tsserver.maxTsServerMemory": 4096,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "javascript.updateImportsOnFileMove.enabled": "always",

  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.format.enable": false,

  "prettier.requireConfig": false,
  "prettier.useEditorConfig": true,

  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.scrollback": 10000,

  "git.autofetch": true,
  "diffEditor.ignoreTrimWhitespace": false
}

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true
}

Файли в репозиторії Nomad (workspace)

Після створення проєкту можна додати (вручну або командою Extensions: Configure Workspace Recommended Extensions):

Корисні команди VS Code саме для цього курсу

Швидкий чеклист редактора

Крок 1. Створення проєкту

Куди класти папку

Код Nomad — окремий репозиторій (не всередині monorepo матеріалів):

• https://github.com/arakviel/nomad — наскрізний застосунок курсу Nomad;
• hello-expo (локально, за бажанням) — міні-проєкт «Привіт, світе» цієї статті, окремо від Nomad;
• пізніше: окрема пісочниця nomad-bare для React Native CLI (окремий модуль).

Команди для застосунку виконують у клоні https://github.com/arakviel/nomad.

Важливо: не створювати проєкт усередині іншої випадкової node_modules і бажано уникати шляхів із пробілами й кирилицею, якщо ОС інколи з цим «капризує» (рідко, але трапляється на Windows).

Команда створення

Офіційний сучасний спосіб:

npx create-expo-app@latest hello-expo

pnpm create expo-app hello-expo

yarn create expo-app hello-expo

Що відбувається під час виконання (спрощено):

Який шаблон обрати

create-expo-app уміє різні шаблони (templates — заготовки проєкту).

Приклад з явним шаблоном:

npx create-expo-app@latest hello-expo --template blank-typescript

npx create-expo-app@latest nomad -t blank-typescript@sdk-54

Після створення:

cd hello-expo

Крок 2. Що лежить у свіжому проєкті (перший погляд)

Точна структура залежить від шаблону й версії SDK. Нижче — ролі, а не догма «файл має називатися саме так».

Глибоку «архітектуру папок продукту» (features, shared, design tokens) розбирає наступна стаття. Зараз достатньо знайти файл, де написаний видимий текст стартового екрана.

Крок 3. Запуск Metro і меню розробника

У корені проєкту:

npx expo start

pnpm exec expo start
# або, якщо в package.json є script "start":
pnpm start

yarn expo start
# або yarn start — залежно від scripts

Що має з’явитися

1. У терміналі стартує Metro (збирач з попередньої статті).
2. Часто малюється QR-код.
3. Показуються підказки клавіш: відкрити Android, iOS, web тощо (набір залежить від ОС і встановлених інструментів).

Це сервер розробки: комп’ютер віддає зібраний JavaScript телефону або симулятору.

@startuml
skinparam style plain
skinparam backgroundColor #ffffff

rectangle "npx expo start" as START #e3f2fd
rectangle "Metro слухає\nзміни файлів" as METRO #fff3e0
rectangle "Пристрій / симулятор\nзавантажує бандл" as DEV #e8f5e9
rectangle "На екрані UI" as UI #f3e5f5

START --> METRO
METRO --> DEV
DEV --> UI
UI --> METRO : зберегли файл\n→ швидке оновлення

@enduml

Швидке оновлення екрана

Після зміни тексту в компоненті й збереження файлу інтерфейс на пристрої зазвичай оновлюється сам (механізм на кшталт Fast Refresh). Якщо ні — у меню розробника є перезавантаження; інколи допомагає повний перезапуск expo start.

Крок 4. Де дивитися застосунок

Є три поширені шляхи. Вони не взаємовиключні — зручно вміти хоча б один стабільно.

A. Фізичний телефон і Expo Go

Expo Go — безкоштовний застосунок з App Store / Google Play. Він уміє відкривати проєкт розробки з вашого комп’ютера (через QR-код або URL), не змушуючи одразу збирати повний установчий пакет «як для магазину».

B. Емулятор Android

Емулятор — програма на комп’ютері, яка імітує Android-телефон.

Потрібні:

1. Android Studio (велике встановлення від Google).
2. Через SDK Manager — платформа Android і Android Emulator.
3. Створений віртуальний пристрій (AVD).
4. Запущений емулятор, потім у проєкті — відкриття Android з меню Expo (часто клавіша a у терміналі з expo start, якщо середовище налаштоване).

C. Симулятор iOS (лише macOS)

Симулятор iOS входить до Xcode (середовище Apple). На Windows і Linux немає офіційного симулятора iPhone.

На Mac:

1. Установити Xcode з App Store (велике завантаження).
2. Запустити Xcode один раз, прийняти ліцензії, дочекатися додаткових компонентів.
3. У проєкті з expo start відкрити iOS (часто клавіша i), якщо інструменти на місці.

Крок 5. Мінімальні налаштування «паспорта» застосунку

Відкрийте app.json (або app.config.ts / app.config.js, якщо шаблон уже на конфігурації в коді).

Типові поля, які варто зрозуміти одразу:

Приклад фрагмента (у реальному файлі полів більше; не копіюйте сліпо, а знайдіть аналог у своєму шаблоні):

{
  "expo": {
    "name": "Hello Expo",
    "slug": "hello-expo",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "splash": {
      "image": "./assets/images/splash-icon.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    }
  }
}

Глибоке налаштування ідентифікаторів магазинів (ios.bundleIdentifier, android.package), adaptive icon, permissions — у статтях ближче до збірки. Зараз достатньо змінити name і підставити свої навчальні картинки, щоб побачити, що конфіг «живий».

Крок 6. Перша зміна в коді

1. Знайдіть файл стартового екрана (app/index.tsx, App.tsx тощо — залежить від шаблону).
2. Змініть будь-який видимий текст на зрозумілий, наприклад: Привіт, Expo.
3. Збережіть файл.
4. Переконайтеся, що на пристрої/симуляторі текст оновився.

Якщо використовуєте TypeScript (у курсі — так), синтаксис компонентів той самий React, але інші примітиви UI (View, Text замість div / span). Якщо шаблон уже містить імпорти з react-native — повторіть той самий стиль; детальний розбір компонентів — у модулі UI.

Типові проблеми на старті

Міні-проєкт «від А до Я»: Hello Expo

Мета

Окремий маленький проєкт (не обов’язково фінальний Nomad), у якому:

1. Створено застосунок через create-expo-app.
2. Запущено Metro.
3. UI видно хоча б на одному з: Expo Go / Android emulator / iOS simulator.
4. Змінено видимий текст екрана.
5. Змінено name у конфігу й (за бажанням) підкладено власні файли icon/splash з assets.

Кроки

npx create-expo-app@latest hello-expo
cd hello-expo

npx expo start

Критерій «готово»

• Проєкт відкривається повторно наступного дня командою npx expo start без «магії».
• Текст на екрані — ваш, не дефолтний з шаблону.
• Немає відчуття «єдиний раз якось завелось, як — незрозуміло».

Nomad: ініціалізація навчального застосунку

Навіщо користувачу

Потрібен живий застосунок, який відкривається на телефоні — з нього далі ростиме щоденник подорожей. Без стабільного запуску наступні статті (структура, картки, теми, списки) нікуди чіпляти.

Нитка проєкту

Уже є: ідея курсу й рішення йти через Expo (попередні статті).

Додаємо в цій статті:

• Репозиторій Nomad: Expo + TypeScript.
• Стартові app/, package.json, app.json (name / slug).
• Перший коміт історії навчального застосунку.

Повний знімок проєкту після цієї статті

cd ~/Work   # або інший зручний каталог
git clone https://github.com/arakviel/nomad.git
cd nomad
# за потреби відкотитись до init-коміту історії курсу — або одразу latest і читати статті далі
npm install
npx expo start

Перевірка

1. npx expo start відкриває Metro без помилок.
2. Екран видно в Expo Go / симуляторі.
3. У app.json: name ≈ Nomad, slug ≈ nomad.

Коміт

cd /path/to/nomad
git add -A
git commit -m "$(cat <<'EOF'
feat: init expo app with typescript

Material: content/15.react-native/04.expo-setup-and-tooling.md
EOF
)"
git push

У публічному репо цей коміт уже є. Структура features / tokens / теми — наступні статті; тут лише стабільний каркас.

Що свідомо не робимо в цій статті

Підсумок

Наступна стаття: структура production-подібного проєкту на Expo Router, design tokens і перші примітиви інтерфейсу для Nomad.

Практичні завдання

Базовий рівень

1. Виконати міні-проєкт Hello Expo.
2. Записати три файли/папки свіжого проєкту й одним реченням роль кожної.
3. Пояснити різницю між Expo Go і застосунком, який потрапить у магазин (2–3 речення).

Середній рівень

1. Ініціалізувати Nomad і зробити скрін/замітку про успішний старт.
2. Навмисно «зламати» текст (синтаксична помилка) і прочитати повідомлення в терміналі/на червоному екрані — потім виправити. Коротко описати, де з’явилась діагностика.
3. Запустити npx expo start -c і своїми словами пояснити, навіщо інколи очищають кеш.

Професійний рівень

1. Налаштувати два способи перегляду (наприклад, Expo Go + емулятор) і порівняти швидкість/зручність.
2. Прочитати в офіційній документації Expo розділ про режими з’єднання (LAN / localhost / tunnel) і скласти шпаргалку на 5–7 рядків «коли який».
3. Перевірити версії expo, react, react-native у package.json і записати їх у нотатки курсу (для майбутнього pin SDK у index.md).

Часті запитання