JavaScript

25 понятных туториалов для изучения React Native

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

Основная информация

React Native – насколько вы “нативны”

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

React Native vs настоящие нативные приложения

Этот пост предназначен для освещения теоретических и практических аспектов использования React Native по сравнению со Swift. Сравнение происходит на почти одинаковых приложениях в обоих фреймворках. В статье приведен подробный анализ использования процессора, видео и памяти при работе двух тестовых приложений.

Распутываем разработку в React Native

Автор этой статьи объясняет понятным языком, для чего нужен фреймворк React Native, и какие у него преимущества. Использование React Native дает возможность:

использовать одностороннюю привязку данных к React;
привязывать сторонние библиотеки управления, такие как Redux;
применять стили и макеты экрана, как в CSS.

Также рассматривается пример простого приложения на React Native с применением ExpoSDK API.

Странности React Native

При переходе из веб-разработки в экосистему React Native может показаться, что тут все как-то странно. В этом посте разбираются некоторые причуды в поведении и особенностях разработки в данном фреймворке. Автор начинает с установки React под Linux, а потом проводит сравнение в работе простых приложений в Android и iOS. Рассматривается 8 проблем и предлагается вариант их решения.

Встроенные инструменты для отладки

Для новичка в мире React на начальных этапах очень сложно производить отладку своего кода. Среды разработки Xcode/Android Studio не поддерживают дебаг кода на JS. Именно поэтому данная статья очень полезна: в ней рассматриваются варианты отладки при помощи Developer Tools в Хроме, плагина nuclide от разработчиков Facebook и с использованием console.log.

Установка React Native + GraphQL + Relay Modern

Автор статьи объясняет по шагам, как установить окружение для разработки, основанное на Relay and GraphQL. GraphQL – это новый подход к написанию API, в котором больше не нужна масса микро-сервисов, а требуется только один. В нем можно запросить то, что необходимо, и он вернет все запрошенные данные без вероятности лишних частей. Relay – это клиент, который общается с GraphQL и имеет собственное хранилище, кеш и указатели.

Производительность

6 способов ускорить приложение на React Native

Очень важно иметь не только хорошо управляемое приложение, которое отвечает возложенным на него задачам, но и оптимизированное для отличного отклика. Что нужно сделать, чтобы поднять FPS вашего приложения? Данная статья ответит на этот вопрос. Автор предлагает шесть способов и инструментов улучшения рендеринга и производительности в целом.

Быстрое сравнение производительности стилизованных компонентов и встроенных стилей в действии

Очень распространенный вопрос – каковы различия в производительности между стилизованными компонентами и встроенными стилями, когда дело доходит до React. Автор поста сравнивает их с несколькими тестовыми примерами. Используется ScrollView, который отобразит 10 000 элементов. В конце приведены результаты тестирования и некоторые выводы.

Визуальное руководство по React Native: проблемы и их решение

Еще один туториал для тех, кто пришел в React из других систем и фреймворков. React не только снижает нагрузку разработчиков (поскольку Java/Objective трудно освоить), но также сокращает время от концепции до развертывания. Чтобы лучше все проиллюстрировать, в статье приведены тесты проблем производительности на 20+ React, которые вы должны знать.

Анимация

Строим карту при помощи Custom Animated Markers

Работа с картами может быть очень сложной, однако при добавлении дополнительного контента и анимированных взаимодействий они становятся более мощными и дружелюбными. Статья расскажет, как создать интерактивную карту с изменением фокуса на том участке, который просматривает пользователь. При прокрутке карты объекты в фокусе будут меняться и подсвечиваться – это удобно.

Горизонтальная скролл-анимация в React Native

Автор поста показывает, как создать интересный и необычный эффект скролла-перелистывания экранов приложения без использования сторонних библиотек. Основную работу выполняют импортируемые объекты Animated и ScrollView. Такая анимация может быть использована для небольшого списка элементов. Если список будет большим, целесообразнее выбрать FlatList вместо ScrollView.

Анимирование React-компонентов при помощи CSS и Styled-Components

Есть много ресурсов о том, как создать анимацию при помощи CSS, и о том, как пользоваться стилями в React Native, но о том, как использовать это все вместе, упоминаний мало. Для создания анимации выбор пал на CSS, потому что анимация CSS часто проще и эффективнее большинства JS-библиотек. Библиотеки анимации JS имеют разные API, а анимация CSS – это стандарт, который был с нами с CSS3.

Создание Multi-Slider-Switch на React Native

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

React Stateless функциональными компонентами;
API анимации;
PanResponder;
высококачественным UI, имеющим 60 fps.

Туториалы

Знакомство с Expo React Native и Styled Components на примере Netflix Clone

В этом уроке автор раскрывает такие темы:

использование React-навигации (комбинация Drawer Navigation and Stack Navigator);
применение Expo (больше информации по expo тут);
стилизованные компоненты для React.

Сначала производится установка и настройка, а потом уже приступаем к созданию приложения. Для этого понадобится установить npm-плагин babel-plugin-module-alias, чтобы не использовать относительные пути в проекте.

Создаем ToDo приложение на React Native

Автор руководства описывает процесс установки окружения и всего, что требуется для javascript-магии. Разработка будет проходить под iOS, поэтому понадобится скачать и установить XCode из AppStore. Далее много картинок и кода для понимания процесса.

React Native Google-карты на react-native-maps

Автора поста побудила к написанию борьба с кодом, react-native-maps и дебагом во время разработки приложения. Как обычно, все начинается с установки необходимых компонентов и библиотек для создания проекта. Разработка будет происходить для iOS и Android с установкой всего необходимого.

React Native Push-уведомления с помощью Firebase

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

React-Navigation, полное управление состояниями Redux

Для работы понадобится Redux, который вместе с остальными пакетами автор ставит при помощи менеджера npm-install. Далее рассматривается настройка tab-bar и Stack Navigator + очень много скринов с кодом.

React Native приложение на Facebook SDK Login c хранением в Firebase

Автор статьи разрабатывает приложение под Android с установкой react-native-cli. Установка react-native-firebase и react-native-facebook-login не должна занять много времени и отнять много сил. Ну а дальше понятные картинки с настройками помогут войти в колею.

Как построить приложение видео-распознавания за два дня на React Native и Clarifai

У автора туториала очень интересная и амбициозная цель. Калькуляторов, ToDo-списков и приложений погоды огромное множество, а приложения распознавания при помощи видео сложно найти. Разбирается почти каждая строка кода. Все разбито на логические и понятные части.

Как создать простую игру на Expo, React Native и Redux

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

4 совета по использованию Google Maps API с React Native

В статье рассматривается четыре совета на тему, как использовать Google Maps API, и какие подводные камни она скрывает:

Google Maps API очень “криво” работает на iOS, поэтому писать приложения с использованием react-native-maps можно только под Android.
React Native MapView требует ручной регулировки после поиска местоположения.
Для каждого нового просмотра карты требуется кастомное окно.
Компоненты должны быть наследниками MapView.

React Native и сквозное тестирование

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

Написание приложения входа/регистрации на React Native и Hasura без Redux

Автор отказался от Redux в пользу локального состояния, т. к. приложение очень маленькое, а Redux требует много подготовительных манипуляций. Hasura – это API, что используется в реализации простых приложений (работа с данными, авторизация, файловое хранилище) и позволяет легко создавать собственные микросервисы.

Создание Reddit Reader в React Native с помощью Expo, Styled-Component и Redux-Saga

Автор руководства показывает, как он создал реддит-ридер при помощи expo, styled-components и redux saga.

Возможности приложения:

просмотр записей на главной;
бесконечная прокрутка записей;
просмотр списка subreddits;
просмотр записей subreddits;
просмотр комментариев к записи.

Курсы по React Native

Полный курс React Native и Redux

На этом курсе вы научитесь:

создавать реальное приложение;
создавать компоненты, которые отлично смотрятся;
понимать терминологию и концепцию Redux;
разворачивать собственные приложения в магазинах Apple и Google Play;
разбираться с принципами и методологиями разработки React;
откроете для себя мобильные шаблоны проектирования, используемые опытными инженерами.

React Native: Расширенные концепции