Как перейти из React.js в React Native?

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

«Базовый курс React Native, если проходить его в интенсивном режиме, можно освоить за неделю»

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

Компании Neti, где я работаю, были нужны мобильные разработчики. А так как у меня был хороший опыт работы с React, мне предложили изучить React Native. Я сразу согласился, потому что сам давно интересовался мобильными технологиями. Мне хотелось развиваться дальше в направлении frontend и попробовать что-то кроме веб-разработки. К тому же я знал, что мобильным разработчикам платят больше.

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

Я даже проматывал некоторые уроки. Потому что это обычная вёрстка, точно такая же, как в веб-разработке. Стили практически ничем не отличаются. React Native в корне тоже React, поэтому компонентный подход и другие принципы были очень привычными. Сложнее было освоить навигацию. В мобильной разработке нет понятия URL: ты нажимаешь кнопку, и у тебя меняется целый экран с разными анимациями при разных условиях. Плюс эти анимации будут разными в зависимости от платформы. Существуют также нюансы кроссплатформенности и в обычных компонентах. Например, YouTube-плеер на Android работает нативно, потому что и то, и другое — продукты компании Google. А на iOS — через кастомное решение.

В тонкости публикации мобильных приложений также пришлось погружаться с нуля.

Сайты и веб-приложения публиковать намного легче: сделал, собрал,  залил на сервер, прикрепил к домену, и всё заработало. В мобильной разработке это не так просто. Существует много требований Google Play и App Store и других подводных камней, о которых разработчик должен знать. Регламентированы даже оформление иконок и максимальный размер приложения, скачивание которого допускается не по Wi-Fi. 

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

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

«Войти в мобильную разработку на React Native проще всего»

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

Мне надоедает долго заниматься одним и тем же. Всегда хочется попробовать что-нибудь новое. Это и личностный рост, и получение нового опыта. Когда объём знаний увеличивается, возможностей становится больше. 

React Native даёт возможность не разрабатывать два разных приложения для Android и iOS, а использовать один и тот же код для обеих платформ.

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

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

В нативную разработку, где мы пишем на родных языках для Android и для iOS, порог вхождений более высокий. Нужно учить новые языки, погружаться в них, изучать, как всё работает, как устроено. А когда у человека есть какой-то опыт с React, и он умеет хотя бы верстать, он уже может приступить к работе с React Native. Можно, например, зайти на официальный сайт RN, оттуда запустить пустой проект. Изучить его, посмотреть документацию и поверстать что-то: оно уже будет работать. На начальных этапах, пока совсем ничего не умеешь, можно просто сверстать страницы, а потом попросить кого-то помочь наложить логику». 

«Верстка приложений в React Native очень похожа на верстку веб-страниц»

«Я работал верстальщиком в компании, которая делала сайты. У нас появился заказчик, который хотел создать мобильное приложение. То, что в команде не было мобильных разработчиков, не помешало руководству компании взять этот заказ. И меня поставили перед фактом, что мобильное приложение буду делать я. Стал изучать фреймворки для кроссплатформенной разработки: React Native, Flutter, Ionic, Xamarin. Понял их плюсы и минусы и в итоге решил писать на React Native. Подумал, что будет полезно заодно выучить и React.  Первый проект был самым сложным. Приходилось постоянно гуглить, смотреть ролики, разбираться с багами. Сейчас, с опытом, я понимаю, где какой баг может вылезти, а тогда терялся. Но прототип приложения всё-таки сдал. На это ушло три месяца. И хотя дальше прототипа дело не пошло, это был интересный опыт». 

Разработка на React Native происходит в модульном режиме путем вёрстки стандартными или кастомизированными компонентами: button, text, view, flatList, scrollView. В интернете много материалов и обучающих курсов. Изучив их, каждый, кто работал с JavaScript, сможет начать верстать на React Native.

Если веб-разработчик решит писать приложения на React Native и освоит React, он быстро разберется с версткой. Она очень похожа на верстку веб-страниц. С навигацией будет сложнее: там есть специфичные компоненты. Также придется повозиться с push-уведомлениями. Например, если требуется их отображение в foreground, когда приложение активно, нужно дополнительно устанавливать библиотеку. Анимация — это ещё одна головоломка для новичка в React Native: создать её при помощи одного CSS, как для веб-страницы, не получится. Придётся всё писать на JS. Делая сайты, ты почти всегда заранее знаешь, как всё будет работать. Мобильная разработка в этом плане увлекательнее: постоянно приходится что-нибудь изобретать, обходить препятствия, придумывать что-то новое». 

***

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

1. Пройти курсы обучения для начинающих. Они есть на русском языке. Например, «Основы React Native» или «Уроки React Native».
2. Вступить в React Native сообщество.
3. Изучить терминологию React Native разработчиков на английском языке.
4. Изучить официальную документацию, чтобы не изобретать велосипед.
5. Посмотреть и послушать:

• Евгений Ртищев: «2 года жизни с React Native»
• React Native изменит существующий мир мобильной разработки
• Дмитрий Пацура: «N подводных камней и горсть советов при разработке на React Native»
• Алексей Андросов: «React Native. Одного JS мало»
• Филипп Шурпик: «Architecting React Native app»
• React Native. Впиливать или выпиливать?