Установка и первый проект

Для работы нужны Node.js на компьютере и приложение Expo Go на телефоне. Проект создаётся одной командой, а стартовый шаблон затем очищается, чтобы начать с пустого экрана.

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

Программа	Где взять	Зачем
Node.js 20 или новее (LTS)	nodejs.org	Запускает инструменты Expo
Редактор кода	например, VS Code	Писать код
Expo Go	App Store или Google Play	Открывать проект на телефоне

Проверьте Node.js в терминале:

node -v
npm -v

Обе команды должны вывести номера версий. Xcode и Android Studio на первых порах не нужны.

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

Создайте проект списка задач:

npx create-expo-app@latest todo
cd todo

npx скачивает и запускает свежую версию утилиты create-expo-app. Она создаёт папку todo со стартовым шаблоном: двумя вкладками, примерами компонентов и уже установленными зависимостями.

Очистка шаблона

Примеры шаблона мешают разобраться, поэтому их убирают встроенным скриптом:

npm run reset-project

Скрипт спросит, перенести ли старые файлы в папку app-example или удалить; ответ Y переносит их — туда можно подсмотреть позже. В папке app останутся два файла. Главный экран — app/index.tsx:

// app/index.tsx
import { Text, View } from 'react-native';
 
export default function Index() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Edit app/index.tsx to edit this screen.</Text>
    </View>
  );
}

Это обычный компонент React. Он показывает надпись по центру экрана; как его запустить, разобрано в следующем уроке.

Структура проекта

todo/
├── app/              экраны: каждый файл — отдельный экран
│   ├── _layout.tsx   общая обёртка всех экранов
│   └── index.tsx     главный экран
├── assets/images/    иконка, заставка, картинки
├── app.json          настройки приложения: название, иконка
├── package.json      зависимости и команды npm
└── tsconfig.json     настройки TypeScript

Файл или папка	Что внутри
`app/`	Экраны приложения для Expo Router
`app/_layout.tsx`	Макет: навигация, общая шапка
`assets/`	Картинки и шрифты
`app.json`	Конфигурация Expo
`node_modules/`	Установленные пакеты, не редактируется

Свои компоненты, не являющиеся экранами, кладут в папку components/ в корне проекта — её создают вручную.

Установка пакетов

Пакеты для Expo ставят не через npm install, а так:

npx expo install expo-image-picker

Команда подбирает версию пакета, совместимую с вашей версией Expo SDK.

Частая ошибка

Класть в папку app/ вспомогательные компоненты, например app/TaskItem.tsx. Expo Router считает каждый файл в app/ экраном, и у приложения появится лишний маршрут /TaskItem. Компоненты держите в components/, а в app/ — только экраны и файлы _layout.tsx.

Спасибо, что читаете!