react native с чего начать
Руководство по React Native для начинающих Android-разработчиков (с примером приложения)
Представляем вам перевод статьи Nikhil Sachdeva, опубликованной на hackernoon.com. Автор делится опытом разработки мобильных приложений с помощью React Native и предлагает создать свое приложение, используя этот фреймворк.
Я был Android-разработчиком и довольно длительное время использовал в работе Java. Лишь недавно я попробовал свои силы в создании мобильных приложений с помощью React Native. Это заставило меня взглянуть на процесс разработки по-новому, если не сказать больше. Цель моей статьи — показать, какие различия я заметил, используя эти два фреймворка в разработке приложений.
Что такое React Native
«React Native позволяет создавать мобильные приложения, используя при этом только JavaScript с такой же структурой, что и у React. Это дает возможность составлять многофункциональный мобильный UI с применением декларативных компонентов».
«Приложения, которые вы создаете с помощью React Native, не являются мобильными веб-приложениями, потому что React Native использует те же компоненты, что и обычные приложения для iOS и Android. Вместо того чтобы использовать язык Swift, Kotlin или Java, вы собираете эти компоненты с помощью JavaScript и React».
Итак, получается, что React Native — это фреймворк, в основе которого лежит React.js, что позволяет разрабатывать кроссплатформенные приложения как для Android, так и для iOS.
Вы спросите, зачем уходить от привычного Java и осваивать JavaScript и React.js? Вот несколько плюсов использования этих языков.
Плюсы: в чем вы выиграете
1. Кроссплатформенная разработка
Основная цель разработчиков — предоставить клиентам сервисы. Никто не хотел бы, чтобы его пользователи были ограничены лишь одной какой-то платформой только потому, что разработчик не может создавать приложения для других платформ. Следовательно, и сам разработчик не должен ограничивать свои способности только потому, что ему или ей комфортно работать с конкретным инструментом разработки.
Фреймворк React Native является портативным, то есть его единая кодовая база, написанная в JavaScript, создаст модули как для Android, так и для iOS.
2. Освоение React
Освоив React Native и JavaScript, вы откроете для себя новый мир front-end разработки применительно, например, к веб-сайтам. Фреймворк React Native основан на тех же компонентах, что и React, поэтому полученные здесь навыки не ограничиваются только разработкой мобильных приложений.
3. Время сборки быстрее, чем в Android Studio
Вы когда-нибудь тратили больше 2–3 минут на сборку, чтобы протестировать/пофиксить базовую функцию, и при этом багфикс растягивался на долгие часы? Решением проблемы станет React Native. С ним на сборку уходит значительно меньше времени. С такой функцией, как «Горячая перезагрузка» (Hot Reloading), разработка и тестирование пользовательского интерфейса — это легко. Благодаря этой функции приложение перезагружается каждый раз, когда JS-файл сохраняется!
4. JavaScript удобен для передачи данных по сети
В React Native вызов API, рендеринг изображений по URL и другие процессы очень просты. Больше не нужно использовать Retrofit, OkHttp, Picasso и т. д. Намного меньше времени тратится на настройку. Когда данные поступают из API на платформе Android, они сначала преобразуются в POJO-модель и лишь затем используются в элементах UI. А вот данные JSON, полученные в React Native, удобны для JavaScript и могут напрямую использоваться для предпросмотра UI. Это позволяет облегчить веб-интерфейс для GET или POST-запросов от REST API.
5. Разработка UI
В React Native в качестве разметки UI выступает модуль flexbox, серьезный конкурент XML-разметки на Android. Flexbox очень популярен в сообществе веб-разработчиков. В React Native UI-элементы в основном должны разрабатываться с нуля, тогда как в нативной разработке для Android библиотека поддержки Google Design Support Library уже подключена. Это дает разработчику свободу в плане интерактивного и адаптивного дизайна.
Минусы: в чем вы, быть может, проиграете
1. Возможно, вы ненавидите JavaScript
Многие люди не любят JavaScript просто за то, что этот язык не похож на традиционные языки, такие как Java, C++ и другие. Подробные негативные отзывы вы можете найти здесь и здесь.
2. Не так уж много сторонних библиотек
Сообщество React Native по-прежнему находится в стадии становления и поддерживает сторонние библиотеки, не такие популярные, как нативная библиотека Android (кстати, оцените слайд-шоу моей библиотеки для Android ).
Пример приложения
Для начала давайте попробуем разработать приложение для извлечения данных из API, чтобы понять, насколько просто работает React Native. Очевидно, что первым шагом является установка React Native. Для этого перейдите на официальный сайт. Также вы найдете там замечательную инструкцию для начинающих — прочтите ее. Мы будем использовать фиктивный API https://jsonplaceholder.typicode.com/photos, который содержит следующие данные:
Обратите внимание, что для Android работа с API с использованием таких библиотек, как Retrofit/OkHttp, — это сложная задача. Однако мы видим, что динамический и итеративный язык JavaScript упрощает эту работу.
Перейдем к созданию проекта MockApp:
react-native init MockApp
cd MockApp
Далее запустите его на вашем виртуальном/локальном устройстве, используя:
На экране появится такое изображение:
Стартовый экран приложения
Приложение для работы с 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. Тип переменной определяется в реальном времени, поэтому работа даже с большими объемами данных остается простой задачей.
Как мы видим, стили каждого компонента уже определены. Нам нужно задать значения переменных. Это можно сделать следующим способом:
На этом наша работа заканчивается. Нам удалось создать приложение, компоненты которого могут предварительно просматриваться благодаря использованию API.
Как начать работать на React Native, чтобы не было мучительно больно
Если бы я записывала ролик на Youtube, то начала бы его так: “Привет всем! На связи Веб Секрет. И сегодня я расскажу, как писать кроссплатформенные приложения на React Native и не страдать от этого…”
Но это не Youtube, и вы меня вряд ли знаете. Тем не менее, про React Native, с которого началась моя работа в студии Web Secret, мне правда есть что рассказать новичкам. Во-первых, в него я окунулась после того, как меня реально начало тошнить от верстки в вебе. И я ни разу не пожалела, что сделала это. С тех пор прошло немало бессонных ночей, чашек кофе и. не важно. Главное, я ни разу ни о чем не пожалела. Даже о том, что началось мое знакомство с кроссплатформенными приложениями с использования Expo. Да-да, у меня не было мака. Зато было дикое желание делать красиво, аккуратно и удобно. И знаете, мне это удалось. Знакомые разрабы-нативщики уже не могут отличить, как было написано приложение.
Поэтому, если вы, как и я когда-то, находитесь в начале своего пути, прочитайте мои напоминалки. Они сделают так, чтобы путь был не такой тернистый, как у Элли из Изумрудного города.
Первое и очень важное – это документация. Многие ее не читают на старте и предпочитают разбираться по ходу, что и становится самой большой ошибкой. Забегая вперед, скажу, что я сама ее допустила, поэтому с высоты своего опыта хочу вас предупредить.
Без знакомства с документацией, скорее всего, вы начнете плодить какую-то чушь и изобретать велосипед. В ней же давно уже все хорошо и красиво прописано. По крайней мере, основы основ.
*Документация к тому, с чем планируете работать. Если с React Native, то к нему. Если еще с Expo и React Navigation, то и их документацию стоит прочитать еще на старте.
Документация обычно структурированная и хорошо написанная, поэтому нужно хотя бы пробежаться по ней, чтобы иметь в виду, какие решения уже есть и в сложных ситуациях понимать, где искать ответ.
Документация написана только на английском, поэтому, если вы им владеете не особо хорошо, можете быть уверены, что в скором времени ваш уровень несомненно улучшится. Ведь туториалы и любые другие полезные материалы тоже преимущественно выходят на иностранном языке.
И не верьте, что Google всему голова и спасет от чтения документации. Порой возникают ситуации, когда даже не знаешь, что нужно гуглить.
Дальше – начинать писать. Хотя нет. Сначала вступить в русскоязычное сообщество React Native. Оно большое, доброе и очень отзывчивое. Там можно задавать вопросы, спрашивать совета, читать специализированные новости или чужие дебаты. Не важно, какой у вас скилл в разработке, вас никто не будет высмеивать или троллить. Здесь реально все как-то приятнее. А мне есть с чем сравнивать – например, с чатом фронтов на React.
Тем, кто вообще ни разу не трогал ни React, ни React Native, будет полезно посмотреть пару видео-уроков или курсов. Они стоят по 8-10$, но. тоже на английском.
Но забыл про анимации. Анимации. что это вообще такое? Оказывается, это то, без чего ваши труды будут похожи на рисунок первоклашки. Вроде все передано, но явно до оригинала не дотягивает, смотрится топорно и не вызывает никакого желания его юзать.
Да, данные вывел, данные отправил, – все работает, по экранам ходит. Но души в нем нет.
Про анимации надо помнить. Надо обращать на них внимание, когда пользуешься другими приложениями. Тренировать насмотренность. Я вот вдохновение черпаю здесь.
Однако, есть и обратная сторона работы с анимациями. Особенно для новичков. Ты можешь влюбиться в какой-то пример, дизайнер может задумать какую-то ультрамодную штуку. А вот с реализацией начнутся проблемы. Да, конечно, сделать можно практически все. Но вопрос: “Какой ценой?” Может, вы времени потратите больше отведенного срока. Может, придется таких костылей наворотить, что мама дорогая. Поэтому иногда, отталкиваясь от контекста, стоит учиться упрощать.
Еще стоит помнить, что, делая кроссплатформенное приложение, вы будете сталкиваться с невысокой производительностью Android, поэтому опять же возникнут проблемы с реализацией анимаций. Сейчас, конечно, разрабатывают новый движок — Germes. Но он пока никак не зарекомендовал себя.
Иногда бывает так, ты делаешь что-то айфоне, потом смотришь, как это получилось на Android, и хочется обнять и плакать.
В идеале сразу чекать то, что ты делаешь и там, и там. Плюс есть несколько хороших ресурсов по производительности на React Native. Там можно посмотреть, как сделать лучше, про что не стоит забывать. Например.
Мне лично многие анимации придумывать удобнее самой, потому что я знаю, что можно повторить. Так, делая Fashion House, я скачала приложения ТОП-10 из этой сферы и досконально их изучила, чтобы позаимствовать лучшие идеи.
Надо помнить о том, что не помнит клиент. Mobile развивается быстро, но уже есть какие-то нормы и привычки, которые продиктованы популярными приложениями типа Instagram, Telegram, Aliexpress и т.д. На первый взгляд — это всякие мелочи, но если клиент не прописал их в ТЗ заранее, а потом, когда вы уже половину кода написали, он вдруг что-то захочет внедрить, начнутся проблемы, седые волосы и т.п.
Попробую сделать своеобразный чеклист вопросов, которые стоит задать на самом старте, чтобы потом не было мучительно больно. Кстати, вот тут Макс Бонцевич, СЕО Веб Секрет уже писал про подобные моменты.
Эти способы оплат уже давно стали не фишкой приложения, а необходимостью. Однако некоторые клиенты вспоминают о них лишь на финише. Уточните, и, если они необходимы, обратитесь к документации. Там расписано, как что делать.
Что нужно заказчику? Достаточно ли нативной камеры телефона или есть потребность в собственных фишках и стилизации.
Неоднократно происходило, что клиент начинал “желать” уведомления не на старте, а в середине работы, когда ты уже сделал всю навигацию в приложении. Такие вещи лучше продумывать сразу, иначе придется “костылять”.
Вообще, продумать архитектуру, а лучше — хорошо продумать архитектуру — это самое важное. Остальное — дело наживное.
Если вы приходите в React Native из фронта, вам будут горы по колено, как пел Корж. Ведь тут нет адаптивки, как таковой, верстка очень легкая.
Нужно ли клиенту, чтобы в отсутствии интернета был доступ к уже просмотренной информации? Если да, то это тоже лучше предусмотреть заранее. Мы, например, складываем большую часть данных в локальное хранилище телефона. Например, сейчас для приложения LiveXP, которое служит частью образовательного онлайн-процесса, необходимо было сделать, чтобы расписание сохранялось и подгружалось вне зависимости от работы сети. Прикрутить такую функцию в конце было бы очень нелегко.
Это работает не так, что сегодня релизнулась 14 ось, и твои приложения все покрашились. Тебе всегда дадут время, чтобы поправить все. и было все окей.
На самом деле, всеми нелюбимый Expo очень сильно выручает при работе с обновлениями. Они происходят “по воздуху”, это называется ОТА. Да, где-то Expo урезает возможности, но в то же время он позволяет поменять код JS и не париться о сборке и перезаливании приложения в сторы — все происходит на серверах Expo и подгружается автоматически пользователю в телефон. Это идеально для фиксы мелких багов. Плюс ты можешь собрать нативный код, если у тебя нет Macbook. Помимо этого, в Expo есть уже какой-то набор модулей, и тебе не придется их собирать вручную, как если бы вы писали на чистом React Native.
Использовать Expo или нет — зависит от проектов. В моей практике большинство создавалось именно с его помощью. И лишь пара была таких, где Expo все руинил, не хватало его возможностей, нужно было что-то нативное, а вес готового приложения слишком смущал клиентов. Например, в проекте Plasma Messenger.
Обмен сообщениями — по сути не сложная вещь. Но чаты еще должны быть функциональными, красивыми, быстрыми. И тут один совет, ориентироваться на то, к чему люди привыкли. И предлагать клиенту делать то же самое. Поэтому главное — еще на старте хорошо продумать все вопросы, связанные с UI. Помимо этого стоит вспомнить и про документацию, т.к. поведение клавиатуры у айфона и андроида разные, но они уже давно прописаны. А вот вам, пожалуй, останется предусмотреть ситуацию, в которой пользователь пользуется другой, особой клавиатурой.
Жесты, они же свайпы. Все больше клиентов хочет, чтобы много действий в их приложении можно было совершить с их помощью. И тут вопрос не только в красоте, плавности хода или уместности. А еще в нативности — пользователи должны быстро понять и привыкнуть ко всем жестам, иначе они начнут их бесить. Это первая часть вопроса. Вторая — еще на стадии переговоров с клиентом обсудить, где ему нужны эти жесты. А то ты сделал чат. И только потом тебе говорят: “Хочу, чтобы одним взмахом пальца все удалялось”. Так вот, если вы не хотите потом ради 1 пальца переписывать код, уточните все сразу.
Конечно, все всегда зависит от проекта, но вот еще парочка более ли менее универсальных:
Да, с Expo всегда можно переехать на чистый React Native, но закладывайте на это трое суток, много кофе, а под конец вискарь)))
Вообще в React Native приходят по-разному: кто-то с фронта, а кто-то уже имея опыт написания приложений и под Android, и под iOs. И это, кстати, самое крутое, т.к. ты всегда сможешь дописать какую-то часть кода на языке оригинала. Плюс удобнее добавлять библиотеки с использованием нативных модулей, т.к. на Expo такой возможности нет.
Конечно, нельзя предугадать заранее, почему вы выбрали React Native, но всегда можно подстелить себе соломки, чтобы первое время было не так тяжело в бою.
Если у вас есть время, то рекомендую заранее изучить, как работают те или иные must have штуки: карты, камеры, QR-код. При постановке соответствующей задачи в процессе разработки вам уже будет легче. А с практикой вы уже прекрасно будете представлять, сколько времени нужно на то или иное действие.
Как разработать своё первое приложение на React Native
технический директор Secreate
Привет я Никита, занимаюсь разработкой на React/React Native и на всяких других штуках в Secreate. Хочу немного поговорить о том, что же всё-таки такое React Native, почему он сейчас важен и популярен, а также вместе с вами попробую написать небольшой проект для демонстрации основ.
Что такое React Native?
Сначала нужно разобраться, что есть React. React — это инструмент для создания пользовательских интерфейсов. Его основная задача — обеспечить отображение на экране того, что можно увидеть на веб-страницах. React позволяет легко создавать интерфейсы, разделяя каждую страницу на небольшие фрагменты и компоненты. Он очень удобен для создания веб-приложений и не требует большого порога вхождения. Так вот, ребята из Facebook подумали, что было бы круто, если бы React можно было бы использовать для создания кросс-платформенных мобильных приложений, и в 2015 году React Native был представлен публике и появился на GitHub, где уже каждый мог внести свой вклад. React популярен по нескольким причинам. Он компактен и отличается высокой производительностью, в особенности при работе с быстро меняющимися данными. За счет своей компонентной структуры, React поощряет вас писать модульный и многократно используемый код.
В мире кроссплатформенной мобильной разработки уже были свои решения, к примеру Apache Cordova — технология, которая позволяла использовать HTML + CSS + JavaScript + нативный функционал платформы, на которой приложение было запущено, для его работы. Однако, технология имеет большую проблему — быстродействие. Так же на данный момент существуют и другие, такие как Xamarin, Flutter, QT и так далее.
В React Native код пишется на JavaScript, и исполняется при помощи JavaScriptCore — движка, который использует Safari. Так же можно использовать нативные модули платформы, к примеру камеру или Bluetooth. Для этого пишется код, реализующий функциональность на языке, который предназначается для разработки под конкретную платформу (Java/Swift/Objective C) и сообщается со средой JavaScript посредством bridge.
Если сравнивать с типовой разработкой для iOS и Android, React Native предлагает много других возможностей. Так как ваше приложение в основном состоит из JavaScript, можно воспользоваться многими преимуществами. Например, для того чтобы увидеть добавленные в код изменения, вы можете немедленно «обновить» приложение, не дожидаясь завершения билда.
Для большинства стандартных элементов UI есть компоненты в RN, к примеру View = UIView в iOS, так что реализовывать изыски интерфейса должно быть несложно, если есть знания React.
Почему же RN стал таким популярным?
Первое приложение
Давайте попробуем написать своё первое приложение и понять что для этого нужно. Пусть это будет, к примеру, приложение для отображения и поиска разных пользователей.
Нам понадобится cli утилита npx, которая поставляется вместе с Node.js, Android Studio — если мы хотим протестировать приложение на Android, либо Xcode — если на iPhone. Как установить указанные инструменты подробнее можно почитать здесь.
Спустя какое-то время у нас создалась такая структура папок
В index.js написано:
import
Начнем с создания роутера. В браузере, когда пользователь кликает по ссылке, URL добавляется в стек истории переходов, а когда он жмет кнопку назад — браузер удаляет последний посещенный адрес из стека. В RN по умолчанию такого понятия нет, для этого и нужен React Navigation. В приложении может быть несколько стеков. К примеру у каждого таба внутри приложения может быть собственная история посещений, но может быть и один.
Что здесь происходит? Создаётся новый стек навигации, в котором указывается список экранов, находящихся в нем. А также указывается стартовый экран стека. Т. к. у нас будет всего один стек, то по сути это и будет стартовый экран приложения.
Там разместим такой код:
Сборка и запуск
Когда проект запустится, то на экране должно появиться, что-то вроде этого.
Для отладки приложения можно использовать react-native-debugger, либо браузер. Включается дебаггер комбинацией клавиш ctrl(cmd) + M для Android, cmd + D для iOS. Там же можно включить live reload.
Сверху к import из react-native добавим импорт модуля StyleSheet
Вниз этого же файла добавим
При подтяжке экрана вниз — список обновляется, при скролле — догружается. Добавим возможность перехода в карточку юзера.
Это переход в экран с названием info с передачей выбранного юзера как параметра. В дальнейшем его можно будет получить из компонента экрана. Теперь добавим этот экран в навигатор RootNavigator.js и напишем для него код.
Так же создадим файл src/screens/PersonInfoScreen.js и добавим туда следующий код.
Вот что у нас получилось.
Таким образом мы сделали приложение для вывода и просмотра некоторой информации по разным людям.
Ресурсы
Для изучения RN можно найти много ресурсов, вот небольшой список:
В итоге
React Native — это мощная платформа, используемая предприятиями любого размера для создания мобильных приложений. Это быстрый, эффективный и относительно простой способ для создания приложений на JavaScript. Главным его преимуществом является то, что он позволяет быстро создавать приложение под несколько платформ одновременно, а также имеет невысокий порог вхождения. React Native широко используется крупными брендами, поэтому не стоит беспокоиться о том, что он куда-то денется в ближайшие пару лет.
# 1 React Native — уроки для начинающих
В этом курсе по React Native для начинающих, мы с вами разработаем мобильное приложение, суть которого получение данных с сервера и отрисовка этих данных на одном экране
Можете учиться по курсу с Экспо или через эмулятор Андроид или через любой другой стартер. В этом курсе базовые темы, которые работают везде.
0. Введение
1. React Native init vs Expo
На начальном этапе необходимо использовать какой-нибудь из стартеров. Основные конкурирующие стартеры React Native CLI и Expo, имеющие преимущество одно над другим. Схема с бейнчмаркетингом этих технологий здесь.
2. Инициализация
Для инициализации React Native приложения на вашей машине, необходимо воспользоваться CLI. Надеюсь в этом уроке вы увидите надпись “BUILD SUCCEEDED” свидетельствующее о запуске приложения.
3. ESLint
Плагин ES Lint — https://eslint.org писать ваш код более чистым, подсказывает, где вы совершаете ошибки и вообще это хорошая практика для работе в команде, чтобы у всех всё было в одном стиле — ES Lint будет подсказывать какие переменные вы не используете, где и какие компоненты не задействуйте, показывает синтаксические ошибки и где не правильно ставите пробелы, где ставите точки с запятыми и т.д. То есть это уже стандарт дефекте, который нужно использовать в написании своего кода и этот плагин вас избавит от многих глупых ошибок, которые вы допускаете при разработке своего приложения.
4. Hello world
Открываем проект App.js и выпиливаем из него всё не нужное, подсвеченные запятые, точки с запятой. Пишем знаменитый текст “Hello World”, сохраняем и готово!
5. Точка входа
Файл, который первый загружается в нашем приложении называется index.js с ним мы и познакомимся в этом уроке.
6. AppRegistry
AppRegistry — это точка входа JavaScript для запуска всех приложений React Native. Корневые компоненты приложения должны зарегистрироваться с помощью AppRegistry.registerComponent (), затем собственная система может загрузить пакет для приложения и затем запустить приложение, когда оно будет готово, вызвав AppRegistry.runApplication ().
7. React vs React Native
React против React Native — это, конечно же, условности, но факт остаётся фактом. Многие из вас может быть заметили, что при создании компонентов мы импортируем часть чего то, пока для вас не понятного из библиотеки React и что-то импортируем из библиотеки React Native. В этом мы и разберёмся.
8. Live Reload
Если сделаем какое-нибудь изменение в нашем приложении, например удалим восклицательные знаки и сохраним, то изменения не проявят себя. Для автоматической перезагрузки того, что мы делаем, после сохранения, необходимо включить функцию, которая называется “Live Reload”.
9. Теги
Если мы проведём параллель тегов React Native с тегами HTML, то получится таблица, посмотреть которую можно в этом уроке.
10. JSX
Для наглядно понимания, как всё устроено под капотом, мы возьмём из нашего приложения скопируем JSX синтаксис, вьюшку куда завёрнуто текстовое поле. Далее открываем сайт Babel — http://babeljs.io нажимаем “Try it out” вставляем в первое поле и видим справа результат с большим кодом. Согласитесь левая сторона выглядит гораздо изящнее, поэтому как справа никто не пишет и вам не рекомендую. Это изобретение Facebook, которое позволяет HTML разработчикам, у которых богатый бекграунд, позволяет легче перейти на компонентный подход. Для меня этот синтаксис стал родным, что готовя этот урок, я даже забыл, что когда-то люди программировали иначе.
11. MVC
Благодаря пониманию этого паттерна, складывается всё по полочкам и смотря на приложение вы понимаете для чего существует один блок, для чего нужен один блок и для чего нужен третий блок. Когда всё складывается по полочкам смотря на приложение через эту концепцию легче создавать приложение. Поэтому понимание сути этого паттерна позволит легче войти в тему React Native, да и вообще этот патерн применим ко многим библиотекам.
12. Стили(StyleSheet)
В этом уроке мы познакомимся со стилями React Native. Шпаргалка по стилям
13. Ширина и Высота
Подробнее о ширине и высоте экрана в мобильном приложении React Native.
14. Flexbox
Flexbox предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS.
15. Стилизация Header
Закрепляем знания о Flexbox на практике.
16. Отладка(Debug)
Знакомимся с инструментами отладки.
17. Жизненный цикл React компонента
В процессе работы компонент проходит через ряд этапов жизненного цикла. На каждом из этапов вызывается определенная функция, в которой мы можем определить какие-либо действия.
18. State(Состояние)
State компонента — это его внутренне состояние и в этом уроке мы с ним познакомимся.
19. Умные и глупые компоненты(Function vs Class Component)
Если концептуально разобраться в этом вопросе и по простому, то функциональные компоненты в основном используются в отрисовке вашего UI Kit, то есть это формочки, кнопочки, тайтлы, инпуты и это больше про дизайн. Class Component имеют свои состояния, в них идут запросы к серверу и они оборачивают умные и глупые компоненты в себе, это как бы такие компоненты родители, они имеют свой стейт. Update: Правда так было, пока не появились Hooks 🤷🏼♂️
20. State vs Props
Многие начинающие, да что скрывать я сам был одним из таких и путал что такое State, что такое Props, так как по сути они очень похожи и в то же время они имеют существенное отличие. Для того, чтобы разобраться с этим и не путать одно с другим делан этот урок.
21. fetch()
Будем получать данные с сервера, для отрисовки списка фильмов.
22. try…catch
Программирование нас учит быть так называемыми реалистами или немного песимистами. Например мы с вами запросили данные и хорошо что они пришли! А вдруг будет какая-нибудь ошибка? Либо с интернет что-нибудь не так. Либо битая ссылка, ещё могут произойти какие-нибудь непредвиденные ошибки. Необходимо как-то знать, как-то отрабатывать эти ошибки, работать сними, вот и для этого придумана конструкция “try…catch”, которая очень просто создает запросы, если успех, то выполняется один блок, если ошибка выполняется другой блок.
23. Деструктурирование
Деструктурирующее присваивание — это фича пришла к нам вместе с ES6.
24. Dimensions
Dimensions — это компонент, точнее сказать это API React Native, которая необходима нам определить размеры экрана для того, чтобы делать responsive design, потому что у Android свои размеры, у iOS свои размеры нам надо как то привязываться и вёрстка, чтобы не ехала для этого к нам на помощь приходит нативный API Dimensions. Для того, чтобы его подключить необходимо обратиться к его методу Get Window и получить высоту и ширину экрана и всё.
25. ImageCard
Мы с вами сверстаем карточку в нашем приложении с текстовым полем, с тенюшечкой, с округлыми краями.
26. Список
Здесь мы научимся работать со списком.
27. Репозиторий проекта
Место, где лежит исходный код проекта, репозиторий, к которому вы всегда можете обратиться в случае ошибок в вашем коде и продолжить изучать этот курс.
28. C чего начать учить React Native?
Для того, чтобы ответить на этот вопрос, я создал репозиторий — репозиторий на нашем аккаунте. Там есть ссылка на наш курс, ссылка на официальную документацию, ссылка на английский словарик React разработчиков, также интересный проект 30 дней с React Native, на мотивационные видео, на бесплатные видеокурсы, авторизация, платные курсы, примеры по навигации и отечественный schowase приложений на React Native. Если есть чем дополнить, пожалуйста присылайте, с удовольствием размещу, будем мотивировать всех писать на React Native, чтобы этих приложений было больше, потому что это крутая технология, я в ней уверен, мне нравится сообщество и Facebook постоянно его развивают, все довольны, все счастливы!
29. Английский для программистов (React и React Native)
Как говориться у каждой профессии свой словарный запас, как у React программистов свой, так и у React Native программистов свой, поэтому хорошо было бы знать слова из всей официальной документации, уметь читать её, так как письменно с ним вы будете постоянно работать и без знания слов из этой библиотеки становиться сложно понимать о чём вообще там говорят и пишут, поэтому я взял все слова из библиотеки React и React Native, скопировал их, отрефактарил, создал на базе них частичный словарик и создал курс, который состоит из 2229 слов.
30. SafeAreaView
Если мы посмотрим на наше приложение и запустим его в iPhone 5 либо под Android, то мы увидим, что у нас хедер очень большой такой, не красивый и надо что-то с этим делать, и для этого используется как раз SafeAreaView. SafeAreaView — это компонент из API React Native, который используется под iPhone Х и мы понимаем, что нужно делать приложение и для этой целевой аудитории и важно стилизовать свои приложения используя этот компонент.
31. React Children
Так как этот курс является началом следующего, то необходимо вынести вёрстку из умного компонента в глупый. С помощью утилиты React Children, здесь мы будем возвращаем любой переданный через props компонент.