Установка окружения для разработки — Node.js, npm, установка Android Studio и Xcode (для macOS)

Необходимое программное обеспечение для работы с React Native

Сегодня нас ждет не менее важный шаг: подготовка окружения. Потому что без правильно настроенного окружения ваш React Native-проект далеко не уедет — как будто вы купили машину, но забыли налить бензин.

Перед тем как начать, убедитесь, что у вас есть следующее:

1. Node.js и npm — они помогут вам управлять пакетами и зависимостями.
2. Java Development Kit (JDK) — требуется для разработки под Android.
3. Android Studio — это ключ к созданию приложений под Android.
4. Xcode (только для macOS) — платформа для разработки под iOS.

Установка Node.js и npm

Вы уже наверняка знаете про Node.js, но если нет, это JavaScript-рантайм, который позволяет запускать JavaScript вне браузера. npm, в свою очередь, это менеджер пакетов, который идет в комплекте с Node.js.

Установка:

1. Перейдите на официальный сайт Node.js и скачайте рекомендованную LTS-версию.
2. Установите Node.js, следуя инструкциям на экране.

После установки откройте терминал и убедитесь, что все работает, выполнив команды:

node -v
npm -v

Вы должны увидеть версии Node.js и npm соответственно. Если вместо этого терминал шлет вас куда подальше, значит что-то пошло не так (или вы забыли перезапустить терминал).

Установка Java Development Kit (JDK)

Для разработки под Android необходим JDK. React Native требует JDK 17 для правильной работы.

Установка:

1. Загрузите JDK 17 с официального сайта Oracle или используйте OpenJDK.
2. Установите JDK, следуя инструкциям установщика.

Проверка JDK:

После установки снова откройте терминал и выполните:

java -version

Если видите версию, поздравляю, вы почти на вершине успеха. Если нет — проверьте, правильно ли добавлен JDK в PATH.

Установка Android Studio

Теперь переходим к тяжелой артиллерии — Android Studio. Это основной инструмент для разработки Android-приложений.

Установка:

1. Скачайте Android Studio с официального сайта.
2. Установите его, следуя всем предложенным шагам. Установщик предложит установить Android SDK, Android Virtual Device (AVD) и другие элементы. Соглашайтесь, потому что эти инструменты уберегут от лишней работы.

💡 Совет: будьте терпеливы. Установка Android Studio может занять некоторое время, особенно если ваш компьютер предпочитает думать, а не делать.

Настройка Android SDK:

После установки Android Studio необходимо настроить Android SDK.

1. Запустите Android Studio.
2. Перейдите в меню Preferences > Appearance & Behavior > System Settings > Android SDK.
3. Убедитесь, что выбраны следующие элементы:
   • Android SDK Platform 33 (или последняя доступная версия).
   • Android SDK Tools (включая Android SDK Build-Tools).

Настройка PATH:

Чтобы команды React Native могли находить Android SDK, нужно добавить его в PATH.

Добавьте следующую строку в .bash_profile, .zshrc или .bashrc, в зависимости от вашего терминала:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$ANDROID_HOME/emulator:$ANDROID_HOME/tools:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools:$PATH

После этого обновите конфигурацию:

source ~/.bash_profile
# Или
source ~/.zshrc

Проверьте, работает ли всё, выполнив:

adb --version

Если видите версию, вы на коне. Если нет, проверьте PATH, а потом проверьте PATH еще раз (и еще, на всякий случай).

Установка Xcode (на macOS)

Без Xcode разработка под iOS будет невозможна. Но перед тем как бежать на сайт Apple, убедитесь, что у вас есть Mac, потому что iOS-приложения можно создавать только на macOS.

Установка:

1. Скачайте Xcode из Mac App Store.
2. Убедитесь, что у вас достаточно свободного места.
3. После установки откройте Xcode и перейдите в Preferences > Locations. Убедитесь, что Command Line Tools выбраны (обычно выбирается версия Xcode автоматически).

Проверка установки:

Откройте терминал и выполните:

xcode-select -p

Если путь к Xcode отображается, всё готово.

💡 Совет: захватите чай и печенье, пока Xcode устанавливается — это может занять некоторое время.

Конфигурация окружения

Теперь, когда у нас установлены все инструменты, нужно проверить, что всё настроено корректно.

Проверяем установку React Native CLI

С помощью React Native CLI мы будем создавать и управлять проектами. Чтобы установить CLI, выполните в терминале:

npm install -g react-native-cli

Проверьте установку:

react-native --version

Проверка Android-окружения

Создаем виртуальное устройство (AVD) для тестирования Android-приложений:

1. Запустите Android Studio.
2. Перейдите в Tools > AVD Manager.
3. Создайте новое виртуальное устройство, выбрав предпочтительный размер экрана, процессор и версию Android.
4. Запустите виртуальное устройство, чтобы убедиться, что всё работает.

Проверка iOS-окружения

Тут всё проще. Просто откройте iOS Simulator:

open -a Simulator

Если симулятор запустился, вы на шаг ближе к покорению мобильных платформ.

Возможные проблемы и их решения

1. Если при выполнении adb или других команд терминал говорит, что "команда не найдена", проверьте, правильно ли настроен PATH.
2. Если Android Virtual Device не запускается, убедитесь, что включена виртуализация в BIOS (а потом гуглите ваш BIOS, чтобы её активировать).
3. Если Xcode симулятор отказывается работать, не паникуйте — попробуйте перезапустить Xcode или сделать ритуальный танец с перезапуском Mac.

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