2018-11-20

Что нужно знать, чтобы начать работать с React Native

Нет ничего лучше, чем разработка приложений с помощью JavaScript. Если вы конечно не разрабатываете мобильные приложения ;-) 

JavaScript предназначен для создания веб-приложений и использования его для создания мобильного приложения, не является возможным. Для любого веб-разработчика было трудно погрузиться в создание собственных мобильных приложений. Они должны изучать Java, Objective-С или любой язык программирования, который был использован для этой цели.

Но React Native (RN) от Facebook сломал этот барьер.  С помощью RN вы сможете разрабатывать кросс-платформенных приложений для Android и iOS. До появления RN (и подобных инструментов), вы должны были написать свой код дважды – один для Android и один для iOS. Это уже не так.

React Native

Эта статья является интро к миру React Native, так что будьте готовы 💪

Почему React Native?

Правильно, так зачем нам нужен React Native, а не любой другой инструмент? Это дает нам много решений, которые другие технологии не могут себе позволить.

Вот что вы можете сделать с реакцией Native:

  • Разработка нативных мобильных приложений. React Native позволяет нам писать нативные приложения на JavaScript, как для iOS, так и для Android. Это дает нам возможность использовать все родные компоненты, такие как жесты, Push-уведомления, камера и местоположение. Существуют некоторые другие библиотеки JavaScript для создания мобильных приложений, таких как Ionic или PhoneGap. Но эти библиотеки используют WebView, и приложения, созданные с помощью этих технологий, не являются полностью наивными (WebView на приложение / окно).
  • Разработка кроплатформенных мобильных приложений (iOS, Android, Windows Phone). Да, с React Native вы можете создавать мобильные приложения, которые могут работать на iOS и Android. Это одно из больших преимуществ RN. Прежде чем Facebook создал его, вы должны были разработать ваше приложение дважды и с другим кодом: один для iOS с помощью SWIFT или Objective-C и один для Android с помощью Java или Kotlin. React Native решает эту проблему, так что вы можете разработать свой RN приложение, и оно будет работать в iOS и Android. Замечательно! 💪
  • Возможность написать весь ваш код приложения на JavaScript (или TypeScript) и ReactJS. 

Приступим к работе с React Native

Начало работы с React Native может быть захватывающим, но в тот же момент немного запутанным. Первый шаг состоит в том, чтобы установить его, и есть несколько способов сделать это:

Используем expo-cli

EXPO-CLI является инструментом командной строки. Он загружает и устанавливает RN шаблон для вас, интегрированный с EXPO API. Это простой способ создания приложения реагировать Native, и это рекомендуемый способ, если вы только начинаете работать с React Native.

EXPO-CLI дает вам много вариантов. Вы можете запускать и тестировать приложение на мобильном устройстве без какой-либо конфигурации. Отсканируйте QR-код и ваше приложение откроется в мобильного приложения Expo. Вы можете исследовать другие мобильные приложения, созданные с RN в браузере через веб-интерфейс под названием appertize!

Используем react-native-cli

Инструмент react-native-cli делает тоже самое, что и expo-cli, но с другим подходом и дополнительными преимуществами. Приложения, которые сконфигурированы с помощью react-native-cli могут содержать ваши собственные нативные модули / компоненты. Если вы создали шаблон приложения с помощью expo-cli вы так же можете использовать свои нативные компоненты, но для этого необходимо запустить команду npm run eject, после этого вы потеряете возможность использовать мобильное приложение Expo и ваше приложение будет строиться на форке RN от Expo (можно изменить в package.json)!

Разработка React Native приложений для разных платформах немного отличается . Иногда нам нужна конкретная конфигурация для конкретной платформы. Например, чтобы собрать приложение для Android, вы должны использовать Android SDK, так что давайте рассмотрим, как это работает!

Сборка мобильного приложения для Android

Есть некоторые инструменты, которые необходимо установить, чтобы начать разработку для Android. Во-первых, вы должны скачать и настроить Android SDK и Android Studio. Вы можете скачать перейдя по этой ссылке.

После загрузки и установки Android Studio вам необходимо установить некоторые API SDK. Для этого откройте Android Studio, перейдите в настройки и найдите следующую вкладку:

Android Studio SDK Platforms

Сначала выберите ✔️ платформу, которую ваше приложение будет поддерживать, на вкладке SDK Platforms (например, Android 5.0 Lollipop). Затем переключитесь на средства SDK (SDK Tools).

Android Studio SDK Tools

Выберите Android SDK Build-ToolsAndroid SDK tools, и google play service. Под Android SDK Build-Tools выберите все платформы:

  • Начиная от 19.0.0 до 20.0.0
  • От 22.0.0 до 24.0.0
  • 25.0.2 , 26.0.1 до 26.0.3
  • 27.0.3 и 28.0.1 до 28.0.3

Теперь мы закончили с SDK и Android Studio. Следующим шагом является эмулятор. Эмулятор (или симулятор), где мы можем запустить и проверить наше приложение. Есть много различных вариантов.

Genymotion

Genymotion это настольное приложение, которое предоставляет виртуальный эмулятор для тестирования приложения. Я очень люблю использовать именно его, потому что он быстр. 🚀 Это дает вам варианты, чтобы создать настроенный телефон с функциями, которые вы можете найти в любом реальном устройстве. Например, рабочий Wi-Fi, местоположение GPS и камеру. Я настоятельно рекомендую вам использовать Genymotion вместо Android Studio Эмуляторов или любых других. Есть очень большой минус для многих, это цена. Да, Genymotion платный продукт с годовой подпиской в 99€ (минимум).

Использование реальных устройств

Нет ничто лучше, чем использовать реальные устройства для запуска и тестирования вашего приложения. Это потому, что они позволяют вам знать, как ваше приложение выглядит на реальном устройстве. Это заставляет вас чувствовать весомость вашей работы, виртуальное устройство не дает этого. Так что если у вас есть возможность использовать устройство, не стесняйтесь.

До этого момента, мы обсуждали Android — но как насчет iOS?

Сборка мобильного приложения React Native для iOS

Запуск React Native на iOS не сильно отличается от Android. То же самое приложение React Native, которое работает в Android может работать на iOS, но иногда, с некоторыми исключениями.

Например, если вы хотите запускать ваше приложение на устройстве iOS, вы должны иметь Mac OS. Говоря о MacOS и iOS, вам не нужно скачивать какие-либо дополнительные зависимости, такие как SDK для Android, чтобы запустить React Native на iOS.

Что касается эмуляторов, Xcode их уже имеет, которые можно использовать для тестирования вашего приложения. Вы можете прочитать вот эту статью, в которой показываются некоторые трюки для работы с эмуляторами iOS.

Эмулятор iOS

В MacOS можно запускать как iOS, так и Android. Вы определенно можете установить Android Studio и Genymotion на MacOS. Эта возможность не существует на ПК, где можно запускать только эмулятор Android, но не эмулятор iOS. Так что вам повезло 👌, если у вас есть MacOS — Наслаждайтесь 😜.

Так что теперь у нас есть среда для создания React Native приложений, и мы установили все, но как писать код (что он из себя представляет)? Это так просто: вы будете на самом деле писать на ReactJS.

Вы можете прочитать официальное руководство, чтобы получить некоторую практику с React Native. Я рекомендую найти видео уроки на YouTube, так вы сможете шаг за шагом создать свое первое приложение React Native.

Ох! До сих пор мы говорили о том, как же писать код. 🎧 Но вам нужно проверить его и отладить ваши ошибки и увидеть логи вашего приложения. Да логи!! Так что нам нужен отладчик! Как же отлаживать React Native приложения?

Debugging (Отладка)

Отладка кода очень важна не только с React Native и JS, но и с любым другим инструментом и языком программирования. Таким образом, вы должны знать, что происходит в вашем мобильном приложении. Существует множество различных способов отладки React Native, например:

Chrome Devtools

React Native дает вам возможность использовать Chrome Devtools для просмотра логов вашего приложения. Для отладки откройте браузер Chrome и включить режим отладки в эмуляторе (или на реальном устройстве), на клавиатуре просто нажмите Ctrl+m (в выпадающем меню, которое открывается если потрясти реальное устройство).

React Native меню отладки

А затем выберите пункт “Debug Js Remotely“. Откроется вкладка в Google Chrome с этим адресом http://localhost:8081/debugger-ui/.

Это для использования Chrome Devtools, как насчет других вариантов?

Используем react-native-debugger

react-native-debugger

react-native-debugger является отличным инструментом для отладки кода ваших React Native приложений. Это desktop приложение, которое дает вам много преимуществ. Он поставляется с Redux Devtools и React-Devtools. Можно также отладить стили компонентов. Это на самом деле лучший отладчик для React Native, и это тот, который я использую. Обычно он доступен в MacOS, Windows и Linux. Ознакомьтесь с руководством по установке и интеграции.

Я думаю, что это достаточно на данный момент. Это первая часть абсолютного руководства по созданию мобильных приложений на базе React Native. В следующей части мы собираемся погрузиться в более технические советы и вопросы, например, как мы можем использовать родной компоненты, React Native API, интеграция с другими библиотеками, Redux, GraphQL и прочее. Спасибо за ваше время. 😃

Оригинал статьи.

Пишу код 😉

Share

Вам также может понравиться...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *