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: Расширенные концепции
На этом курсе вы научитесь:
- создавать приложения, используя функции экспертного уровня React Native;
- создавать плавные и эффектные анимации;
- строить приложения на React Native и Expo;
- понимать современные тенденции навигации для новых приложений React Native;
- добавлять логику в Firebase-сервер с помощью функций Google Cloud;
- обновлять пользователей с помощью кросплатформенных Push-уведомлений;
- управлять пользователями с помощью Redux Persist.
React Native: анимация для специалистов
На этом курсе вы узнаете:
- как использовать Animated;
- поймете, как работает Animated;
- как создавать и разбивать сложные анимации.