Практика 3. Практическая 1 (Windows): Установка и запуск «Hello, world» на Expo + React Native

Что понадобится

• ПК с Windows 10/11
• Интернет + доступ к Microsoft Store (для winget) или альтернативный установщик
• Смартфон (Android/iOS) для Expo Go или Android-эмулятор (Android Studio)
• Права пользователя с установкой ПО (без админских прав может не получиться поставить Android Studio/SDK)

WSL не требуется. Все шаги выполняем в PowerShell (желательно «Запуск от имени администратора» для установки через winget).

---

1) Установка Node.js, Git и (опционально) Expo CLI

Вариант A — через winget (рекомендуется)

Откройте PowerShell (Админ) и выполните:

winget install OpenJS.NodeJS.LTS -s winget
winget install Git.Git -s winget
# Expo CLI глобально не обязателен, но можно:
npm i -g expo

Вариант B — вручную

• Node.js LTS → установщик для Windows с сайта nodejs.org
• Git для Windows → установщик с git-scm.com

Проверьте версии:

node -v
npm -v
git --version

---

2) Создание проекта (Blank)

npx create-expo-app@latest my-first-expo
# В ответах установщика выберите шаблон: Blank (JavaScript)
cd .\my-first-expo\

Примечание: Expo по умолчанию создаёт проект без нативной сборки — это упрощает старт на Windows.

---

3) Запуск Metro/DevTools

npm start
# либо
npx expo start

Откроется Expo DevTools в браузере. Если не открылось — в терминале будет URL.

---

4) Запуск на реальном устройстве (Expo Go)

1. Установите Expo Go:
   • Android: Google Play → “Expo Go”
   • iOS: App Store → “Expo Go”
2. Подключите телефон и ПК в одну Wi‑Fi сеть.
3. В DevTools отсканируйте QR‑код (или используйте ссылку) — проект запустится в Expo Go.

Если в сети есть ограничения/прокси — в DevTools переключите Connection на Tunnel.

---

5) (Опционально) Android‑эмулятор на Windows

Установка Android Studio и AVD

winget install Google.AndroidStudio -s winget

Далее:

1. Откройте Android Studio → More Actions → SDK Manager:
   • Установите Android SDK (API 34/35), Android SDK Platform-Tools (ADB).
2. More Actions → Virtual Device Manager → Create Device → Pixel + рекомендуемый API Level.
3. Запустите созданный AVD (кнопка ▶).

Запуск проекта на эмуляторе

Вернитесь в DevTools и нажмите “Run on Android device/emulator”, либо в терминале:

# В окне, где работает Metro:
a

Expo соберёт и установит клиентское приложение в эмулятор.

Иногда требуется добавить ADB в PATH. Обычно ставится вместе с Android Studio, но если не находит устройство — откройте SDK Manager → SDK Tools и убедитесь, что Platform-Tools установлены.

---

6) Минимальный «Hello, world»

Откройте App.js и замените содержимое на:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello, world 👋 (Expo + React Native)</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
});

Сохраните файл — увидите мгновенное обновление в Expo Go/эмуляторе (Fast Refresh).

---