IT технологии: React Native

React Native - что это и как его освоить? Начало работы с библиотекой React Native

Что такое React Native

React Native позволяет создавать мобильные приложения, используя при этом только JavaScript с такой же структурой, что и у React. Это дает возможность составлять многофункциональный мобильный UI с применением декларативных компонентов.

Это такие же приложения, как и нативные приложения для iOS или Android, написанные на языках Swift или Java/Kotlin.

Приложения, которые создается с помощью React Native, не являются мобильными веб-приложениями, потому что React Native использует те же компоненты, что и обычные приложения для iOS и Android. Вместо того чтобы использовать язык Swift, Kotlin или Java, эти компоненты собираются с помощью JavaScript и React.

Итак, получается, что React Native — это фреймворк, в основе которого лежит React.js, что позволяет разрабатывать кроссплатформенные приложения как для Android, так и для iOS.

Почему стоит отказаться от привычного Java и осваивать JavaScript и React.js?

В отличие от старых технологий, с React Native можно сэкономить 30% -35% времени и бюджета на создании приложений для iOS и Android по сравнению со старыми технологиями.

Немного истории

Во времена, когда еще не было технологий для кроссплатформенной разработки (таких, как Apache Cordova и React Native) приходилось изучать язык программирования Java, чтобы написать приложение для Android, и Objective C, чтобы написать приложение для iPhone. Однако понятно, что уйдет много времени на то, чтобы изучить два языка и написать одно и то же приложение два раза: для Android и iPhone.

Так была придумана Apache Cordova. Приложение пишется на HTML, CSS, JavaScript (как сайт), а Cordova запускает его в браузере на телефоне. Такой подход значительно ускорил процесс разработки приложений. Но он имеет некоторые недостатки:

1. существующие плагины для Cordova быстро устаревают и нужно писать свои;
2. так как приложение запускается в браузере, то возникают сложности в получении обратной связи с нативным приложением;
3. нужно постараться над оптимизацией приложения, чтобы оно работало быстро и стабильно.
4. все равно приложения на Apache Cordova выглядят и в использовании не такие приятные, как нативные приложения.

Поэтому Facebook решил реализовать вариант лишенный недостатков Cordova. Так появился React Native.

Особенности

Это универсальный инструмент, который подойдёт для любого проекта. Чтобы понять, решит ли фреймворк нужные задачи, важно знать о его преимуществах и недостатках.

Эта библиотека действительно может упростить жизнь разработчикам:

• С её помощью можно построить интерфейс из отдельных компонентов, которые легко поддерживать.
• Она добавляет удобный слой абстракции, избавляя от необходимости работать с DOM напрямую.
• React — это уже не новая библиотека, за ней стоит крупная компания Facebook и большое сообщество разработчиков. Поэтому она отлично протестирована, регулярно поддерживается и стабильно обновляется, а переход к новым версиям проходит максимально гладко.
• Благодаря сообществу у React хорошо проработанная документация и большой опыт, накопленный в статьях, курсах и конференциях. Это значительно облегчает не только изучение библиотеки новичками, но и поиск ответов на всевозможные вопросы в процессе работы.
• На Гитхабе можно найти готовые React-компоненты почти на все случаи жизни. А если их нет, но есть нужные независимые библиотеки, то можно поискать интеграцию либо сделать её самостоятельно.
• В React-сообществе со временем сформировались определённые подходы и соглашения по организации проекта, кода, решению частых проблем. Для разработчиков это значит, что нужно тратить меньше времени на обсуждение некоторых договорённостей — можно использовать готовые и уже устоявшиеся.
• Хотя в проекте, скорее всего, будет налажен процесс сборки с помощью webpack, parcel, rollup или другого упаковщика, стоит иметь в виду, что это необязательно для использования React. Работая с этой библиотекой, используется чистый JS, и HTML, CSS или JS изучать не нужно. Конечно, с React почти всегда используется JSX, но и это тоже опционально.
• React — это проект с открытым исходным кодом. Благодаря этому его можно безопасно использовать даже в коммерческих приложениях.

Однако при использовании React есть особенности, которые важно учитывать:

• React увеличивает размер приложения, которое нужно загрузить пользователям (~40 kB для пакетов React и React-dom).
• Загруженный код нужно выполнить в браузере: для пользователя это означает, что приложение будет запускаться медленнее. Подробнее про это можно почитать в материале «The cost of JavaScript in 2019» от команды V8 (перевод: «Цена JavaScript в 2019 году»).
• Вместе с виртуальным DOM возникают свои накладные расходы: во-первых, по времени выполнения (сравнение виртуальных деревьев происходит не моментально); во-вторых, по памяти, ведь виртуальные деревья нужно где-то хранить и не в единственном экземпляре. С увеличением количества элементов на странице эти расходы растут, что может стать реальной проблемой на мобильных устройствах. Поэтому при изучении React важно уделить внимание способам оптимизации рендеринга приложения – необходимые инструменты для этого есть в самой библиотеке.
• Средний порог входа в React. Чтобы начать разрабатывать на React, программист должен не только изучить саму библиотеку, но и привыкнуть к используемой парадигме. Про это есть хорошая статья «Философия React» на официальном сайте.

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

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

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

Востребованность

По информации сооснователя npm Inc Лорри Восса (Laurie Voss), доля React на рынке фронтенд-библиотек и фреймворков в конце 2018 года достигла 60 %. Данные о популярности библиотек и фреймворков получены в ходе опроса пользователей системы управления пакетами npm.

По данным исследования The State of JS 2019, в котором приняло участие более 20 000 разработчиков, React лидирует в категории «Фронтенд-фреймворки и библиотеки». 71 % респондентов сказали, что использовали эту библиотеку и будут использовать её в будущем. С 2016 года доля разработчиков, которые используют React и планируют использовать его в будущем, выросла с 48 до 71 %.

Другие популярные библиотеки и фреймворки уступают React. Например, только 40.5 % разработчиков сказали, что использовали Vue.js и планируют использовать его в будущем. Однако популярность Vue тоже растёт — с 2016 года она выросла с 8 до 40 %.

А вот популярность Angular падает. В 2019 году 35.8 % разработчиков сказали, что использовали этот фреймворк, но не будут пользоваться им в будущем.

В ежегодном исследовании предпочтений разработчиков (Developer Survey 2019) 74.5 % пользователей Stack Overflow назвали React самой любимой библиотекой. 21.6 % пользователей Stack Overflow назвали React самой востребованной библиотекой.

Промежуточный итог: React — лидер по популярности среди фронтенд-фреймворков и библиотек. Для студентов и начинающих программистов это особенно важная информация, так как её нужно учитывать при планировании обучения и карьеры.

Анимации в React Native

1. Build a Map with Custom Animated Markers and Region Focus when Content is Scrolled in React Native — обучение по работам с картами и кастомными анимациями в React Native.
2. Horizontal scroll animations in React Native — создание анимации с горизонтальной прокруткой в React Native.
3. Animating React Components with CSS and Styled-Components — создание анимаций при помощи CSS и React Native.
4. Developing Multi-Slider-Switch in React Native — создание функционального компонента с анимацией в 60 fps.

Туториалы

1. Getting Started with Expo React Native and Styled Components using a Netflix Clone example — изучение React Navigation и Expo при помощи создания клона Netflix.
2. ToDo App with React Native — пошаговый гид по созданию базового приложения React Native.
3. React Native Google Map with react-native-maps — туториал по использованию react-native-apps для рендеринга карты Google при помощи React Native.
4. React Native Push Notifications with Firebase — советы и стратегии по созданию пуш-оповещений в React Native.
5. React-Navigation, complete Redux state management, tab-bar, and multiple navigators — детальный разбор использования react-navigation API.
6. React native app with facebook sdk login and firebase storage — интегрирование логина Facebook с Facebook SDK и регистрации нового пользователя в базе данных Firebase.
7. How to build a visual recognition mobile app in 2 days with React-Native and Clarifai — пошаговый урок по созданию одним разработчиком приложения для визуального распознавания за два дня.
8. How I Created a Simple Game with Expo, React Native & Redux — путь одного разработчика по созданию простой игры при помощи Expo, React Native и Redux.
9. 4 Tips for Using the Google Maps API with React Native — четыре совета от разработчиков, которые работали с Google Maps API и React Native.
10. React Native end-to-end testing made easy — изучение end-to-end тестирования и внедрения его в приложение React Native.
11. Making a Login app using React-native and Hasura without Redux — как создать логин для приложения без Redux.
12. Creating a Reddit Reader in React Native with Expo, Styled-Components, and Redux-Saga — создание приложения для Reddit.

Собственные шрифты и значки

Использование собственных шрифтов и значков оказывает огромнейшее влияние на пользовательский интерфейс и на брендирование приложения.

Принцип работы

HTML-код можно писать на JavaScript - именно так работает React.

Создать Dom-узел в React можно через функцию createElement. Например:

React.createElement("div", { className: "red" }, "Children Text"); React.createElement(MyCounter, { count: 3 + 5 });

Синтаксис в HTML-коде очень похож на XML-компоненты. Однако вместо традиционного класса DOM React использует className.

У тегов JSX есть имя, потомки и атрибуты. Кавычки в атрибутах JSX означают строки. Этот элемент похож на JavaScript.

Кроме того, числовые значения и выражения нужно помещать в фигурные скобки.

Приведённый выше пример хорошо иллюстрирует синтаксис в React, поскольку инструмент использует расширение JSX. По сути, это сочетание HTML и JavaScript.

Вот пример React, написанного с использованием JSX:

Children Text

; ; var GameScores = {player1: 2,player2: 5};Scores;

Чтобы разобраться, вот несколько примечаний относительно тегов HTML выше:

• имеет атрибут count, который принимает числовое выражение в качестве значения.
• GameScores – это литерал объекта, который имеет две пары значений и свойств.
• – это блок XML, который рендерится на странице.
• Scores = {GameScores}: атрибут Scores получает значение из объекта GameScores, определённого выше.

Большая часть React написана с использованием JSX (JavaScript XML), а не стандартного JavaScript (JS). Здесь важно отметить, что это делается для того, чтобы максимально упростить процесс создания React-компонентов.

Можно создать компонент React на стандартном JavaScript, однако он будет несколько беспорядочным.

Кроме того, идея JSX в React заключалась в том, что Facebook (как первоначальный разработчик) хотел создать один конкретный тип расширения синтаксиса с чёткой и однозначной конфигурацией.

Компоненты

Всё в React — это компоненты. И обычно они приобретают форму JavaScript-классов. Создаёте компонент путём расширения класса React-Component - например компонент Hello.

Затем определяются методы для компонента. В данном примере используется только один метод render().

Внутри render() помещается описание того, что React должен отобразить на странице. В примере выше должен отобразиться тег h1 с текстом «Hello world!» внутри.

Чтобы отобразить это приложение на экране, нужно использовать ReactDOM.render():

Это то самое место, которое связывает Hello-компонент с отправной точкой (

) этого приложения. Результат будет следующий: HTML-подобный синтаксис, который виден выше — это тот самый JSX-код, который упоминался выше. Это не совсем HTML, хотя то, что пишется там, представляется HTML-тегами в DOM. Следующий шагом приложение научиться работать с данными.

Работы с данными

В React есть два типа данных: props и state. Сначала немного сложно понять разницу между ними, всё станет попроще, как только начнётся практика.

Ключевая особенность в том, что state — это приватный тип данных и может быть изменен изнутри компонента. Props же, наоборот, являются внешними и не могут управляться самим компонентом. Они передаются компонентами, которые находятся выше по иерархии, которые также управляют и данными.

Компоненты могут напрямую менять своё внутреннее состояние (state), но не могут напрямую менять props.

Сначала на рассмотрении props.

Компонент Hello очень статичен и в любом случае выводит одно и то же сообщение. Большой частью React является повторное использование, которое значит, что можно однажды написать компонент, а затем использовать его несколько раз в разных случаях. Например, чтобы отобразить разные сообщения.

Чтобы достичь такого уровня повторного использования, добавляется props. В примере ниже видно, как передаётся props для компонента:

Prop называется message и передаёт значение «my friend». Получить доступ к этому pror внутри Hello-компонента можно написав this.props.messag.

Причина, по которой используется {this.props.message} в фигурных скобках, это, для того чтоб сказать JSX, что добавляется JavaScript-выражение. Это называется экранирование.

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

Если нужно, чтобы компонент мог поменять свои собственные данные - тогда вместо props используется state!

Другой способ хранить данные в React — это внутри состояния (state) компонента. И в отличие от props, state могут быть изменены изнутри компонента.

Поэтому, чтобы данные в приложении менялись, например, в зависимости от действий пользователя, они должны храниться в state компонента.

Для инициализации state просто нужно задать this.state в метод класса constructor(). В этом случае state — это объект, у которого есть только один ключ message.

Перед тем, как задать state, нужно вызвать super() в конструкторе, так как до вызова super() this является неинициализированным.

Чтобы модифицировать state, нужно вызвать this.setState(), передав новый state объекта как аргумент. Это реализуется внутри метода, который именуется updateMessage.

Чтобы заставить это работать, нужно привязать ключевое слово this к методу updateMessage иначе не возможно получить доступ к методу this.

Следующий шаг создать кнопку, при нажатии на которую будет вызван метод updateMessage().

Поэтому добавляется кнопка в метод render():

Привязывается чтение событий (event listener) для кнопки, а именно событие onClick. Когда оно вызвано, вызывается метод updateMessage.

Работа с геотрекингом

В одном из проектов нужно было разработать «мобильное рабочее место» для сотрудников клиента, в частности, обеспечить передачу их географических координат в фоновом режиме.

Для работы с геолокацией в React Native есть несколько инструментов. Например, это пакет от сообщества React Native @react-native-community/geolocation, который покрывает большинство вариантов использования, однако, не работает в фоне.

Для реализации можно использовали несколько решений, в том числе библиотеку с говорящим названием @mauron85/react-native-background-geolocation. Первоначально эта библиотека представляла собой плагин для Cordova, но позднее автор отделил базу и сделал отдельные обертки для React Native. Также есть одноименная платная библиотека от transistorsoft.

Библиотека позволила задать гибкие настройки для отслеживания местоположения. Например, с какой частотой опрашивать системный сервис, как именно работать в фоне, в каком радиусе позиция будет считаться неподвижной. Настройки и методы для отправки этих координат на сервер можно использовать «из коробки», но также и агрегировать полученные координаты в хранилище и отправлять их с большим интервалом. При этом библиотека позволяет запустить приложение как foregroundActivity, избавив от лишних проблем, поскольку на многих Android-устройствах приложения в фоне могут работать только с дополнительными настройками (Huawei, MIUI, Samsung с недавних пор).

После установки можно создать компонент или просто хелпер, который управляет сервисом - использовать компонент, чтобы монтировать его с условиями в роутере и легко подключить к redux. Настроим сервис:

Здесь можно задать и настройки для уведомления, иконку (из нативных asset-ов). Для нормальной работы на iOS в XCode дополнительно нужно включить Background processing и Location updates во вкладке Signing & Capabilities проекта.

Основной метод для сохранения и отправки координат реализуется в событии on('location') в этом же методе. Он будет работать как при активном приложении, так и в свернутом состоянии:

Здесь вызывается action из стора, куда передаем данные координат в кастомном формате, дополнительно сохраняя данные о показаниях аккумулятора, используя библиотеку react-native-device-info. Все это одинаково хорошо работает на Android и iOS, когда приложение активно либо находится в фоне.

Помимо этого, есть методы для получения текущего местоположения (но это работает только тогда, когда запущен сервис), подписка на переходы состояния приложения из активного в фоновое, переход в системные настройки приложения. Однако, по большому счету, самое необходимое приведено в данных примерах.

В итоге получится компонент, который можно монтировать, например, только для авторизованной части:

Если используется react-navigation, можно создать навигацию для авторизованной части следующим образом:

Далее этот навигатор можно использовать обычным образом в корневом навигаторе:

const RootNavigator = createSwitchNavigator( { Auth: AuthNavigator, App: AppNavigator, }, { initialRouteName: 'Auth', }, ); export default createAppContainer(RootNavigator);

Таким образом сервис геолокации и обмена данными будет работать только в авторизованной части приложения.

Для каких проектов подойдёт

Резюмируя, можно выделить несколько типов проектов, которым подойдет React.

1. Если проект планирует расширяться, и над ним работает или будет работать команда разработчиков. Потому что в таком случае использование известной технологии поможет проще договариваться между разработчиками и лучше поддерживать код.
2. Средним и крупным проектам будет полезен компонентный подход, который, в том числе лежит в основах React. Это упростит структурирование и переиспользование кода и даст выигрыш в долгосрочной перспективе.
3. Legacy-проектам, которым предстоит пройти через рефакторинг. Потому что React можно добавлять в уже существующий проект, обновляя кодовую базу постепенно и точечно.

React, возможно, не подойдет для простых приложений (одностраничных и одноразовых сайтов), потому что в этом случае для того, чтобы разобраться с настройкой проекта и окружения, уже понадобится много времени и труда.

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

Как изучить

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

План изучения React может выглядеть так:

1. Основы:
   — способы подключения React к проекту;
   — знакомство с JSX;
   — знакомство с компонентами: стейт, пропсы, жизненный цикл;
   — виды компонентов: классы и функциональные компоненты, их отличия;
   — обработка событий;
   — работа с формами;
   — разработка простого приложения на React.
   — React хуки, кастомные хуки, рефы.
   — Популярные шаблоны: HOCs, render props, глупые/умные компоненты, controlled/uncontrolled components.
2. Управление состоянием приложения:
   — React context;
   — архитектура flux;
   — хук useReducer;
   — сторонние библиотеки (redux, mobx и другие).
3. Диагностика проблем с производительностью, использование профайлера и оптимизация приложений на React.
4. Более продвинутые концепции:
   — проброс рефов;
   — error boundaries;
   — порталы;
   — принципы интеграции с другими js-библиотеками;
   — lazy loading компонентов;
   — SSR;
   — strict mode;
   — suspense;
   — concurrent mode.
5. Изучение работы под капотом:
   — виртуальное дерево и алгоритм reconciliation;
   — понимание концепций и устройства reconciler и renderer;
   — написание своего рендерера.

Почти все эти темы можно изучить на официальном сайте React.

Для тех, кто уже хорошо знаком с React, есть отличная статья «Build your own React» — она поможет глубже разобраться, как работает React изнутри. Ещё можно посмотреть записи выступлений с конференции React Conf.

Кроме этих ресурсов, на рынке много онлайн-курсов разной степени интенсивности и наполнения. Есть комплексные курсы, которые с нуля погрузят студента в экосистему React. Есть и те, которые сосредоточены на очень конкретных вещах, например, на использовании разных шаблонов или менеджеров состояния.

Почему сейчас стоит изучать

Во-первых, React — это популярная библиотека, которая ещё долго будет актуальной. Это значит, что всегда можно найти проект, написанный на React, и поработать на нём. А на людей, которые хорошо разбираются в React, есть спрос на рынке.

Во-вторых, React помогает взглянуть на разработку интерфейсов совершенно по-другому — через призму декларативного программирования. Это полезно для общего развития и расширения кругозора, а полученные знания упростят изучение других подобных библиотек и технологий (Vue.js, Svelte или даже SwiftUI). Кроме этого, многие принятые в сообществе соглашения, шаблоны и подходы сами по себе помогают писать более хороший и поддерживаемый код.

Но также важно понимать, что React — это библиотека на языке JS. И прежде чем изучать React, нужно на хорошем уровне овладеть JS, HTML и CSS. Это ускорит освоение React, а также повысит ценность разработчика на рынке: потому что знание фундаментальных вещей помогает подобрать технологию, лучше всего подходящую для решаемой задачи — будь то React или что-то другое.

Курсы

• The Complete React Native and Redux Course
  Рейтинг — 4,6/5, 56 700 студентов, 17 часов видео
  Изучение iOS и Android-разработки с нуля и создание полных приложений React Native.
• React Native: Advanced Concepts
  Рейтинг — 4,7/5, 16 000 студентов, 17 часов видео
  Более сложные аспекты React Native: анимации, карты, оповещения, навигация и так далее.
• Master React Native Animations
  Рейтинг — 4,8/5, 500 студентов, 7 часов видео
  Простые уроки для каждого типа анимации.

Какие инструменты использовать

Для успешного обучения, как и для успешной работы в целом, огромное значение имеет правильно настроенная среда разработки и тщательно подобранный инструментарий. Вот некоторые вещи, которые могут облегчить задачу:

Expo

Это бесплатный набор инструментов с открытым исходным кодом, позволяющий создавать iOS- и Android-проекты. С ним создание мобильных приложений очень упрощается так как не придется задумываться о свойствах платформы. По умолчанию предоставляется много API (камера, иконки и .т.п), так что не придется устанавливать их отдельно.

React Navigation

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

React Native Elements

Это UI-библиотека для быстрого и простого создания красивых приложений. Ее польза не только в предоставлении распространенных элементов пользовательского интерфейса, но также и в том, что это хороший способ научиться пользоваться React Native, научиться структурировать и создавать собственные UI-компоненты.

Настройка среды разработки

В этом разделе описывается как настроить среду разработки React Native для всех трех основных платформ: Windows, Linux и macOS, как настроить симуляторы для Android и iOS и Expo. Вот общие шаги по настройке среды.

1. установить JDK
2. установить Android Studio или Xcode
3. установить сторож
4. обновить переменную среды
5. установить эмулятор
6. установить узел
7. установить React Native CLI

Далее нужно перейти к разделу, соответствующему конкретной операционной системе. Некоторые шаги — например, настройка Android Studio — в основном одинаковы для каждой операционной системы, поэтому они помещены в отдельный раздел:

• настройка в Windows
• настройка на Linux
• настройка на macOS
• настройка Android Studio
• установить узел
• создание Экспо
• настройка эмуляторов
• установить React Native CLI
• устранение распространенных ошибок

Настройка в Windows

В этом разделе показано, как установить и настроить программное обеспечение, необходимое для создания приложений React Native в Windows. Windows 10 была использована в тестировании для этого.

Установить шоколад

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

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))"&& SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

Теперь можно установить другие нужные инструменты, просто используя Chocolatey.

Python

Python поставляется с инструментами командной строки, необходимыми для React Native:

choco install -y python 2

JDK

JDK позволяет компьютеру понимать и выполнять код Java. Обязательно установить JDK версии 8, поскольку это требуется для React Native:

choco install jdk8

NVM

У узла есть установщик для Windows. Лучше использовать NVM для Windows, так как это позволит установить несколько версий Node, чтобы можно было тестировать новые версии или использовать другую версию в зависимости от проекта, над которым сейчас ведется робота. Для этого можно использовать NVM для Windows - скачать nvm-setup.zip, распаковать его и выполнить nvm-setup.exe, чтобы установить его.

Сторож

Watchman оптимизирует время компиляции приложения React Native. Это необязательная установка, если надо работать над большим проектом.

Обновление переменных сред

Это последний шаг в настройке React Native в Windows. Здесь обновляются переменные среды, чтобы операционная система знала обо всех инструментах, необходимых для React Native. Для этого нужно выполнить следующие действия непосредственно перед установкой React Native CLI.

1. Перейти в Панель управления → Система и безопасность → Система . Далее нажать меню расширенных настроек системы слева.

   

2. Это откроет окно свойств системы. Нажать кнопку Переменные среды:

   

3. В разделе “Пользовательские переменные” выделить переменную Path и нажать кнопку редактирования.
4. На экране редактирования нажать кнопку “Создать” и ввести путь к Android SDK и инструментам платформы. Например C:\users\myUsername\AppData\Local\Android\Sdk и C:\users\myUsername\AppData\Local\Android\Sdk\platform-tools . Здесь также можно добавить путь к JDK, если он еще не добавлен:

   

Настройка в Linux

В этом разделе показано, как установить и настроить инструменты, необходимые для разработки приложений React Native в Linux. Была использована Ubuntu 18.04 для тестирования, но имеется возможность переводить команды в других дистрибутив Linux.

Установка необходимых инструментов

Первым шагом является установка следующих инструментов. Первая строка устанавливает инструменты, необходимые для Node, а вторая строка требуется для Watchman, который мы также установим позже:

sudoapt-getinstall build-essential libssl-dev curlsudoapt-getinstallgit autoconf automake python-dev

NVM

NVM позволяет устанавливать и использовать несколько версий Node. Его можно установить его с помощью следующих команд:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh |bashsource ~/.profile

Примечание. Обязательно нужно проверить последнюю версию на странице выпусков, чтобы убедиться, что устанавливаемая версия NVM обновлена.

JDK

Как было показано ранее, React Native фактически компилирует соответствующий код для каждой из платформ, на которых его разворачивают. JDK позволяет компьютеру понимать и выполнять код Java. Конкретной версией JDK, требуемой для React Native, является версия JDK 8.

sudoapt-getinstall openjdk-8-jre

Сторож

Watchman — это инструмент для отслеживания изменений в файловой системе. Он в основном используется для ускорения процесса компиляции. Если включить предварительный просмотр в разрабатываемом приложении, изменения, внесенные в приложение, будут быстрее отражаться в предварительном просмотре. Следующие шаги требуют, чтобы Git уже был установлен в используемой системе:

git clone https://github.com/facebook/watchman.git cd watchman git checkout v4.9.0 ./autogen.sh ./configure makesudomakeinstall

Возможно появление проблемы, которая выглядит следующим образом:

Следует вместо этого использовать следующую команду:

./configure --without-python --without-pcre --enable-lenient

Обновление переменных среды

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

Чтобы обновить переменные среды, надо открыть файл .bash_profile :

sudonano ~/.bash_profile

Затем добавить в начале следующее и сохранить файл:

Путь выше предполагает, что Android SDK установлен в домашнем каталоге пользователя:

echo$HOME

Настройка на macOS

Наличие Mac позволяет разрабатывать приложения для Android и iOS с помощью React Native. В этом разделе показано как настроить среду разработки для Android и iOS.

Поскольку macOS уже поставляется с Ruby и c URL по умолчанию, нужно установить только один инструмент Homebrew, менеджер пакетов для macOS:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Если он уже установлен, просто обновить его следующим образом:

brew update

Для iOS требуется следующее:

• Последняя версия Xcode : устанавливает инструменты, необходимые для компиляции приложений iOS
• Сторож: для просмотра изменений файлов
• NVM : для установки Node

Установить JDK версии 8 для macOS, как того требует React Native:

brew tap AdoptOpenJDK/openjdk brew cask install adoptopenjdk8

Watchman ускоряет процесс компиляции исходного кода. Установка необходима как для Android, так и для iOS:

brew install watchman

NVM позволяет установить несколько версий Node для тестирования:

brew install nvm echo"source $(brew — prefix nvm)/nvm.sh">> .bash_profile

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

Чтобы обновить его, надо открыть файл .bash_profile:

sudonano ~/.bash_profile

Затем добавить путь к Android SDK и инструментам платформы:

export ANDROID_HOME=/Users/$USER/Library/Android/sdk export PATH=${PATH}:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/emulator

Установка

Есть несколько способов начать работу с React. Рассмотрим CodeSandbox и CodePen. Затем - установка проекта React с помощью Create React App что дает отличную отправную точку для проектов без необходимости тратить время на настройку среды сборки.

React в CodeSandbox

CodeSandBox - это онлайн-редактор кода, который можно использовать для быстрого запуска и запуска проекта React.

Нужно перейти на https://codesandbox.io/s и нажать «React».

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

React в CodePen

Альтернативой CodeSandBox является CodePen. Многие разработчики используют CodePen для демонстрации своей работы, создавая «прототипы» для быстрых демонстраций кода или «проекты», когда задействовано несколько файлов. CodeSandbox, безусловно, более многофункциональный для работы с React, однако CodePen также является хорошим решением.

Практика разработки React-приложений

Node.js

Node.js — это серверная платформа, поддерживающая выполнение JavaScript-кода, возможности которой пригодятся нам для React-разработки. Если эта платформа ещё не установлена — сейчас самое время это сделать.

Подготовка проекта

Здесь для создания основы React-приложения используется пакет create-react-app от Facebook. Вероятно, это самый популярный подход к настройке рабочего окружения, которое позволяет приступить к разработке. Благодаря create-react-app программист получает в своё распоряжение множество нужных инструментов, что избавляет его от необходимости самостоятельно их подбирать.

Для того чтобы глобально установить create-react-app, следует воспользоваться такой командой:

npm i -g create-react-app

Затем, для создания шаблона приложения, выполнить такую команду:

create-react-app react-intro

На этом предварительная подготовка закончена. Для запуска приложения выполнить следующие команды:

cd react-intro npm start

Далее осуществляется переход в папку проекта и запуск сервера разработки, который позволяет открыть новое React-приложение, перейдя в браузере по адресу http://localhost:3000/.

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

Теперь надо разобраться, как устроено React-приложение. Для этого надо открыть только что созданный проект с помощью IDE (например Visual Studio Code).

Файл index.html

Находясь в папке проекта, надо открыть файл, который находится по адресу public/index.html. Вот что получится.

Здесь интересует строка. Именно тут будет находиться React-приложение. Весь этот элемент будет заменён на код приложения, а всё остальное останется неизменным.

Файл index.js

Теперь надо открыть файл src/index.js. Именно этот файл выполняет развёртывание React-приложения. Исходный код приложения будет размещаться в директории src.

Вот строка кода, которая ответственна за вывод того, что называется «React-приложением», на страницу:

ReactDOM.render(, document.getElementById('root'));

Эта строка сообщает React о том, что нужно взять компонент App и поместить его в div-элемент root, который был определён в только что рассмотренном файле index.html.

Конструкция очень похожа на HTML-код, но это — образец JSX-кода, который представляет собой особый синтаксис JavaScript, используемый React. Эта конструкция начинается с заглавной буквы A - так из-за используемого в React соглашения по именованию сущностей. Такой подход позволяет системе различать обычные HTML-теги и компоненты React. Если имена компонентов не будут начинаться с заглавной буквы, React не сможет вывести их на страницу.

Если в некоем js-файле планируется использовать JSX, там необходимо импортировать React, воспользовавшись следующей командой:

import React from 'react';

Файл App.js

Далее рассматривается код первого компонента. Для этого надо открыть файл src/App.js.

Для того чтобы создать компонент React, необходимо сначала создать класс, являющийся наследником React.Component. Именно эту задачу решает строка class App extends Component. Все компоненты React должны содержать реализацию метода render, в котором, как можно догадаться из его названия, выполняется рендеринг компонента, формирование описания его визуального представления. Этот метод должен вернуть HTML-разметку для вывода её на страницу.

Важно, что атрибут className — это эквивалент атрибута class в HTML. Он используется для назначения элементам CSS-классов в целях их стилизации. Ключевое слово class в JavaScript является зарезервированным, его нельзя использовать в качестве имени атрибута.

Пример приложения

Для начала стоит попробовать разработать приложение для извлечения данных из API, чтобы понять, насколько просто работает React Native. Очевидно, что первым шагом является установка React Native. Для этого нужно перейти на официальный сайт. Используется фиктивный API https://jsonplaceholder.typicode.com/photos, который содержит следующие данные:

Стоит сказать, что для Android работа с API с использованием таких библиотек, как Retrofit/OkHttp, — это сложная задача. Однако динамический и итеративный язык JavaScript упрощает эту работу.

Далее следует создание проекта MockApp:

react-native init MockApp

cd MockApp

Нужно запустить его на виртуальном/локальном устройстве, используя:

react-native run-android

На экране появится такое изображение:

Приложение для работы с API, которое создается, будет выглядеть вот так:

Так в результате выглядит приложение.

Теперь нужно открыть проект в текстовом редакторе и скорректировать App.js, как показано ниже:

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

1. componentDidMount. Это часть React Native в жизненном цикле приложения. componentDidMount() запускается сразу после того, как компонент был добавлен в дерево компонентов.
2. fetch. Чтобы работать с сетевыми запросами, в React Native существует API-интерфейс Fetch.
3. Переменные состояния (isLoading, dataSource). isLoading — это переменная типа bool, которая показывает, загружены данные API или нет. dataSource — переменная, которая сохраняет ответ JSON от команды fetch.
4. FlatList. Это эквивалент RecyclerView в React Native, только намного проще. Компонент FlatList отображает скролящийся лист данных, которые могут изменяться, хотя и имеют общую структуру. FlatList отлично подходит для работы с длинными списками, в которых количество элементов может меняться с течением времени.

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

Стили каждого компонента уже определены. Нужно задать значения переменных. Это можно сделать следующим способом:

const styles = StyleSheet.create({ card: { padding: 20, margin: 10, borderColor: '#ff7a00', borderWidth: 2, borderRadius: 10, backgroundColor: '#f3ea68', flex: 1, }, хедер: { fontSize: 40, padding: 10, }, image: { height: 60, width: 60, }, title: { fontSize: 20, color: '#000', }, id: { fontSize: 30, } });

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

Приложения на React Native в 2021 году

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

Instagram

Жизнь без Instagram — представить такое сегодня могут разве что единицы. Для многих площадка стала главным источником новостей. Instagram помогает добыть информацию, в буквальном смысле, по всем фронтам: от спортивных тренировок до горячих скандалов знаменитостей и вегетарианских рецептов.

Instagram — одна из самых популярных платформ в мире. За один месяц приложение посещает 1 миллиард активных пользователей, более 500 миллионов используют его ежедневно. В своем официальном блоге команда Instagram сообщила, что благодаря React Native им удалось за короткое время реализовать функционал одновременно для iOS и Android-версий.

Skype

В начале 2017 года команда Skype сообщила о разработке мобильного приложения на React Native. Android-версия приложения представляла собой полностью обновленную версию Skype. Изменениям подверглась существенная часть продукта: от дизайна до функционала.

Во время разработки мобильной версии команда Skype позаимствовала значительную часть функционала «прежнего» Skype и внедрила новые фичи. Так, например, в приложении появилось дополнение Giphy от Microsoft — с его помощью пользователи могут обмениваться гифками в чате.

Миллионы людей по всему миру все так же используют Skype.

Facebook Ads

Для Facebook, команды представившей миру React Native в 2015, фреймворк является важной частью технологического стека.

Pinterest

Мобильное приложение Pinterest поможет найти вдохновение и идеи для чего угодно — что приготовить на ужин, что подарить коллеге, как украсить дом к празднику и т.д. Их команда решила использовать React Native, чтобы сократить время разработки и добиться нативного внешнего вида приложения.

Bloomberg

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

Используя этот фреймворк, разработчики Bloomberg быстро переписали iOS и Android-версии клиентского приложения, добавили новый функционал. На всю работу ушло всего 5 месяцев, что вдвое меньше разработки с нативными технологиями.

Рекомендации

Однозначно стоит начинать разработку именно с React Native. Особенно это важно для тех, кто не имеет четкого представления о целевой аудитории, востребованных функциях и реальной рыночной нише для своего приложения. В отличие от нативной разработки на React Native можно запустить приложение в продуктив уже через 2 недели, а не через 2 месяца, и получить фидбек от своих пользователей.

Используя React, можно быстрее внести любые доработки и исправления, которые будут актуальны сразу для обеих мобильных платформ — iOS и Android. При этом цена разработки будет ниже, а значение Time-to-Market окажется минимальным. К тому же при необходимости ничто не мешает собрать приложение из модулей, часть из которых может быть выполнена на React Native, а часть — в виде нативных компонентов.

Именно гибкость подхода и возможность оперативно дорабатывать прототип делают React SDK одним из наиболее популярных инструментов для мобильных разработчиков. Но главное, использование React Native помогает снижать издержки и риски для конечных заказчиков.

Вакансии с технологией React Native

Для поиска вакансий на сайте Apeirondb.com вам всего лишь в разделе с вакансиями нужно выбрать город, страну и технологию, которые вас интересуют: Технология React Native. А также, очень легко осуществить поиск при помощи телеграм бота HIRE:bot(t.me/hireIT_bot) @hireIT_bot, который при правильной настройке, будет отправлять вам только вакансии с технологией React Native.

Источники:

• https://www.purrweb.com/services/react-native/ru/
• https://bor64.com/2019/02/08/kak-rabotaet-react-native/
• https://academy.yandex.ru/posts/chto-takoe-react-i-kak-ego-osvoit
• https://ru.hexlet.io/blog/posts/biblioteka-react-review-article
• https://apptractor.ru/develop/cross-platform-development/obuchayushhie-materialyi-i-uroki-po-react-native.html
• https://temofeev.ru/info/articles/zapiski-frilansera-razrabotka-pervogo-react-native-prilozheniya/
• https://www.hostinger.ru/rukovodstva/chto-takoe-react
• https://zen.yandex.ru/media/nuancesprog/reactjs-za-5-minut-5dd2c219fdc2160328be9696
• https://habr.com/ru/company/simbirsoft/blog/493312/
• https://techrocks.ru/2018/02/08/react-native-learning/
• https://coderlessons.com/articles/veb-razrabotka-articles/nachalo-raboty-s-react-native
• https://dev-gang.ru/article/react-ustanovka-i-nastroika-6clr2aovj5/
• https://habr.com/ru/company/ruvds/blog/428077/
• https://habr.com/ru/company/plarium/blog/458118/
• https://www.purrweb.com/blog/ru/top-prilozhenij-na-react-native/
• https://zen.yandex.ru/media/id/59a4312777d0e618c1e85be8/preimuscestva-razrabotki-na-react-native-dlia-zakazchika-5f0ecf44c99b7c2aac59db41

↑