React Native для начинающих за 2 часа [2022] ! Мобильное приложение на JavaScript

В данном курсе ты научишься создавать реальное мобильное приложение с помощью React Native (JavaScript + ReactJS)

Курс идеально подойдёт для фронтенд-разработчиков, которые уже знакомы с ReactJS.

👨🏻‍💻 Что необходимо знать перед началом?
1. useState, useEffect, JSX, Props
2. Уметь работать с HTTP-запросами (axios/fetch)
3. Знать ReactJS не менее 3-5 месяцев
4. Знать JS не менее 5-6 месяцев

👀 Чему ты научишься?
1. Создавать мобильное приложение на Android / iOS
2. Запускать приложение на реальном устройстве / эмуляторе
3. Шарить экран с мобильного устройства на ПК
4. Работать с React Native
5. Подключать роутинг для моб. приложения
6. Запрашивать данные с сервера и выводить в приложении
7. Создавать несколько страниц / экранов в приложении
8. Делать перезагрузку контента по свайпу
9. Рендерить список записей
10. Работать с библиотекой styled-components

🔗 Ссылки по материалу:

💊 Плюсы/минусы Expo CLI:

🔗 Следите за обновлениями и информацией в:

⏰ Таймкоды:
00:00:00 Введение
00:10:00 Начинаем изучение документации
00:12:05 Про Expo CLI / React Native CLI
00:16:26 Создаем проект с помощью expo-cli
00:19:45 Изучаем структуру проекта
00:21:30 Запуск проекта
00:23:50 Про Metro Bundler
00:24:37 Скачиваем Android Studio и настраиваем
00:35:45 Запускаем на реальном устройстве приложение
00:36:40 Скачиваем scrcpy для шаринга экрана устройства на ПК
00:38:35 Запускаем Expo в устройстве и открываем наше приложение
00:41:23 Приступаем к разработке приложения
00:45:37 Про стандартную стилизацию в React Native
00:48:07 Устанавливаем styled-components для стилизации компонентов
00:51:04 Пробуем создать компонент с помощью styled-components
00:54:25 Начинаем верстать статью
01:07:21 Используем сайт MockAPI для хранения статей
01:09:02 Устанавливаем Axios и делаем запрос на получение статей
01:14:21 Как правильно рендерить список с возможностью скролла (FlatList)
01:18:30 Делаем рендер иконки загрузки контента (ActivityIndicator)
01:22:30 Перезагрузка контента по свайпу (RefreshController)
01:26:51 Делаем статью кликабельной (TouchableOpacity)
01:28:20 Переносим код отображения статьей в HomeScreen
01:31:00 Создаем экран отображения полной статьи FullPostScreen
01:39:40 Подключаем роутинг с помощью React Navigation
01:48:12 Делаем переход на экран полной записи при клике на статью
01:52:15 Обрезаем заголовки статей для корректного отображения списка

#react #reactnative #expo #expocli #reactnativecli #mobile #android #ios #junior #реакт #разработка

[mzjmezy]

Нужно видео, где показываешь, как делать deploy в play market. Думаю, все поддержат =)

[swipeshark]

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

[fdnppty]

Привет. Скачал твой видос, что бы смотреть на работе. Вот почти досмотрел.
И хочу сказать что ты красавчик. Объясняешь прям ппц как круто. Нравится то, что ты когда что-то делаешь, то объясняешь и потом опять объясняешь что к чему. Усвоение материала намного лучше.
Спасибо за труды.

[hdlxqcs]

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

[DmitryA]

Спасибо. Для старта самое то.

ps: У кого в Metro Bundler не видно пункта Developer tools: Их убрали в конце июля. Нажмите [d] и вылезет подсказка.

[Viktorres]

Супер-профессиональное и творческое вступление! Высший пилотаж. Спасибо!

[JavaScriptcher]

На первых минутах столько позитива, что сразу понял, что боль, страдания и слезы мне обеспечены!! Значит правильно зашел

[hbvrgqu]

Привет Ден. Ты и RN подарили мне первую работу. После RN на фронте просто отдыхаешь и спокойно пишешь а не вот это всё. Он закаляет. Это своего рода фетиш

[kupuelel]

Планируете ли видео по react native с более продвинутыми технологиями ? P.s видео очень крутое !

[Shved_.]

Спасибо большое за проделанную работу, она не останется незамеченной
Продолжай в том же духе👍

[vasisafronov]

Пишу из 2024. Андроид студио под линуксом запустило реакт нейтив проект, созданный с помощью yarn create expo-app вообще без каких-то плясок с бубном. В эмуляторе все запустилось с первого раза без ошибок. Все очень ровно работает,

[yyzvopm]

Спасибо за труд😄.Ты был прав, та еще боль с react native. Видео 6 месяцев, а уже все поменялось при создании приложения. Не получалось запустить на телефоне через expo.

Я решил проблему npx create-expo-app my-app или npx create-expo-app my-app --template дает выбор шаблонов. И запустил npx expo start --tunnel. По-другому никак не смог.

[Antioss_A]

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

[oj]

Братан, хорош. Давай-давай, вперёд! Контент — кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще? Давайте пока.

[c]

Спасибо большое за этот труд! Очень легко и просто объясняешь! Подписан на тебя давно и на обновления!

[perevoznikovalexey]

очень нравится подача материала, вставка видосов и мемов - это лучшее))

[vasiliyilyuhin]

В случае если не появляется выбор шаблона при создании проекта, пишем в терминале expo init project-name --template blank или более короткая запись expo init project-name -t blank

[dmitriidmitriev]

Лучший курс для первых шагов по React native!!!!@!

[peall]

Классный видос, надеюсь снимешь продолжение по разработке мобильного приложения на React Native с реализацией нового функционала!

[zbvgivx]

Я давно ждал от тебя видео про натив, как и писал раньше, продолжай в том же духе и повышай планку💕👍