Создание первого проекта на React Native с помощью команды `npx react-native init`

Начало работы с React Native CLI

Мы уже прошлись по процессу настройки окружения: установили Node.js, npm, Android Studio, Xcode и все необходимые инструменты. Это подготовило нас к главному шагу — созданию нашего первого React Native проекта!

Теперь переходим к практике, потому что читать теорию — это, конечно, здорово, но "Hello, World" сам себя не напишет.

Зачем нам npx react-native init?

С помощью React Native CLI (Command Line Interface) мы можем быстро развернуть базовый проект. Это инструмент, который избавляет нас от рутины настройки окружения для каждого нового проекта. Он автоматически создаёт структуру файлов, конфигурацию и подготовленные скрипты для разработки.

Если вы вспомните, как создавали первый проект на React с помощью npx create-react-app, процесс будет похожим. Только вместо работы с компонентами веб-домена мы будем разрабатывать для мобильных устройств.

Установим React Native CLI

Благодаря инструменту npx, вы можете использовать CLI без установки на глобальном уровне. Для этого нужно всего лишь запустить команду, и да, это будет ваше первое знакомство с React Native CLI:

npx react-native init MyFirstApp

Здесь:

• init — это команда, которая указывает CLI создать новый проект.
• MyFirstApp — имя проекта (вы можете назвать его как угодно, например, "SuperCoolApp", но для примера оставим это имя).

Когда вы запустите эту команду, CLI сделает несколько магических вещей:

1. Скачает шаблон React Native.
2. Установит все зависимости.
3. Создаст основные файлы проекта.
4. Настроит скрипты для запуска и сборки приложения.

Это займет пару минут, так что можно ненадолго пойти попить кофе или проверить LinkedIn.

Проверка успешной генерации проекта

После завершения команды npx react-native init MyFirstApp, вы увидите новую директорию с названием вашего проекта MyFirstApp. Зайдём в неё:

cd MyFirstApp

И выполним команду ls (или dir для пользователей Windows), чтобы увидеть содержимое. Там будут следующие файлы и папки:

MyFirstApp
│
├── android/            # Код и настройки для Android
├── ios/                # Код и настройки для iOS
├── node_modules/       # Все зависимости (спасибо, npm!)
├── src/                # Место для вашего исходного кода (мы его создадим позже)
├── App.js              # Главный компонент приложения
├── index.js            # Точка входа в приложение
├── package.json        # Файл с зависимостями и скриптами проекта
└── ...

У вас появилось всё необходимое для начала работы над мобильным приложением!

Разбираем структуру проекта

Давайте посмотрим чуть глубже на ключевые файлы и папки, которые React Native CLI создал для нас:

1. android/ (Android-магия)

Эта директория содержит весь Android-специфический код. Если вы когда-нибудь работали с Android Studio, то узнаете здесь привычные файлы, такие как MainActivity.java.

Мы почти никогда не будем трогать эту папку — React Native берёт всё на себя. Однако, если вы захотите добавить какие-то уникальные Android-фичи (например, уведомления или доступ к камере), то придётся заглянуть сюда.

2. ios/ (iOS-магия)

Здесь хранится весь iOS-специфический код. Основной файл для старта — AppDelegate.m.

Как и с Android, мы не будем часто копаться в этой папке, разве что Apple вдруг попросит что-то намудрить под их экосистему.

3. App.js — основной компонент

Этот файл — сердце нашего приложения. Именно тут мы будем создавать наши первые интерфейсы и писать компоненты. Внутри вы увидите базовый пример:

import React from 'react';
import { SafeAreaView, Text } from 'react-native';

const App = () => {
  return (
    <SafeAreaView>
      <Text>Hello, React Native!</Text>
    </SafeAreaView>
  );
};

export default App;

• SafeAreaView — компонент, который добавляет отступы для избегания наложения интерфейса на элементы (например, "чёлка" на iPhone).
• Text — компонент для отображения текста. Это ваш аналог <p> из HTML.

4. index.js — точка входа

Файл index.js служит точкой входа в ваше приложение. Именно здесь React Native запускает ваше приложение:

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('MyFirstApp', () => App);

Простой, но крайне важный — он говорит React Native: "Эй, загрузи компонент App!"

5. node_modules/

Директория с зависимостями. Вы не должны вносить туда изменения вручную.

Запуск нашего приложения

Android-эмулятор

Если вы уже настроили Android Studio и создали Android Virtual Device (выглядит сложно, но вы это сделали в предыдущей лекции!), запустите его.

Теперь в терминале выполните команду:

npx react-native run-android

CLI запустит приложение на вашем эмуляторе или подключённом реальном устройстве Android.

iOS-симулятор

Для этого вам потребуется macOS и установленный Xcode. Откройте iOS-симулятор через Xcode или нажмите в меню Xcode → Open Developer Tool → Simulator.

В терминале используйте:

npx react-native run-ios

Теперь React Native должен развернуть приложение на симуляторе iOS.

Первое успешное отображение

После успешного запуска вы увидите на экране что-то вроде этого:

Hello, React Native!

Поздравляю, вы только что сделали свой первый шаг в мобильной разработке! Это чувство очень похоже на то, когда вы впервые открыли результат работы console.log('Hello, World!').

Типичные ошибки

1. Если вы столкнулись с ошибками, они, скорее всего, связаны с установкой окружения (например, Android SDK). Проверьте правильность путей в системных переменных или пересмотрите предыдущую лекцию.

2. Иногда эмуляторы упрямо решают не работать. Попробуйте перезапустить эмулятор или подключить реальное устройство.

3. Если всё-таки возникли сложности, в документации React Native есть подробный раздел по устранению ошибок.

Теперь, когда у нас есть готовый проект React Native, настроено окружение и наше первое "Hello, React Native!" уже находится на экране, мы готовы двигаться дальше. В следующей лекции мы углубимся в структуру проекта, поймём, зачем нужны все эти конфигурации, и начнем работать с файлами более детально.