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 - docs.expo.dev/
Офф. документация React Native - reactnative.dev/
Скачать Android Studio - developer.android.com/studio
MockAPI - mockapi.io/
JSON с статьями - trycode.pw/c/KFKNW
💊 Плюсы/минусы Expo CLI:
- qna.habr.com/q/704511
- habr.com/ru/post/480258/
📚 Исходник приложения: t.me/archakov_im/529
🔗 Следите за обновлениями и информацией в:
- Telegram-канале: t.me/archakov_im
- VK: archakov_im
- Личном блоге: archakov.im
- GitHub: github.com/Archakov06
- Моё резюме: career.habr.com/archakovim
⏰ Таймкоды:
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:04:55 Создаем файл Post.jsx с кодом статьи
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 #реакт #разработка

[@swipeshark5311]

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

[@evilinarm]

Спасибо за труд! И великолепные вставки 😉

[@Viktorres1]

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

[@user-fd1np4pt7y]

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

[@c4973]

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

[@user-sy9gi3vg2e]

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

[@perevoznikovalexey1420]

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

[@ps.efimov]

Вот твой контент прям вообще заходит, спасибо! Объясняешь доступно и круто!

[@user-zb4vg7iv8x]

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

[@TheAlexChannelClub]

Новый курс. Это просто отличная новость!

[@azamatdzagoev2749]

Ждем продолжения по Reаct Native)) очень загорелся выучить это фреймворк, благодаря тебе))

[@user-mz7jm5ez9y]

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

[@arthgame1]

идея огонь 😱

[@dochPidji]

Как его себе на андроид загрузить

[@arthgame1]

​@@dochPidji если имееш введу как запустить то используй expo go из плаймаркета

[@pahakush]

@@dochPidji Очень просто. npx react-native run-android. С включенной отладкой по usb или wifi. То же и для релизной сборки, только с ключом --release

[@eweles]

25$ стоит

[@progra2mer-developer]

Хотелось бы и дальше видеть развитие данной темы на канале! Отличная идея попробовать NAtive

[@JavaScriptcher]

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

[@nikolassmakovsky4032]

Видео огонь, всё по полочкам, приятно слушать, отличный видеоряд!

[@Antioss_A]

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

[@ksushakiseleva2644]

Лайк, подписка! 🔥 Видео огонь. Спасибо!

[@vladislavivanchikov6622]

Как всегда топ контент !!! Все что мне нужно для моего тестового, пошел клипать)))

[@vladgafarov794]

Спасибо за контент! Давно хотел попробовать RN, вот отличный пинок)

[@l7l7l7lful]

очень плотно, понятно, лучше многих платных курсов

[@user-hu4fy4ce1f]

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

[@pe4all361]

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

[@lazys7151]

Классный ролик. Для того, чтобы вкатиться в технологию - самое то. Спасибо!

[@VladimirOnokhov]

Спасибо большое! Хотелось бы увидеть продолжение:)

[@user-hd3lx8qc7s]

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

[@user-jo3bo4xp3v]

Как всегда топ, еще и повеселил, спасибо)

[@velichkoivan]

Супер! Все доходчиво и понятно.

[@dmitriidmitriev7435]

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

[@user-rd8uh2ym3c]

Отличное видео!!! Автор просто молодец👍

[@oj6868]

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

[@murrmax1466]

Братан, харош, контент в кайф!! Можно вот этого вот еще?? Вообще красавчик!!!!

[@user-tv5zz]

я еще прошлый курс не прошёл, а уже новый)

[@user-zq5iy8dr4j]

Хорошая подача материала!

[@user-hb4vr5gq4u]

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

[@rikmorti4072]

Ты большой молодец. Продолжай в том же духе

[@igorlutsenko8004]

Спасибо за ВИДЕО !!!! Очень помогло !!!

[@Lerogorn]

Спасибо, хороший контент!

[@user-fq4pc7fm2z]

Отлично! спасибо! я просил в коментах неоднократно хоть что-то по RN...

[@brigadir5830]

Спасибо огромное за отличный урок 👍👍👍

[@user-sq8lh5en3z]

Ещё не смотрел но лайк подписка коммент, спасибо тебе

[@user-nb7cv5px1v]

Мне понравилось, для ознакомления с технологией очень даже ничего! Спасибо. Буду двигаться дальше в этом направлении

[@Al_gre]

Хороший тутор👍. Единственное, осталась за кадром проблема со съехавшей вставкой Загрузки.

[@user-yy1zv1op2m]

Спасибо за труд😄.Ты был прав, та еще боль с react native. Видео 6 месяцев, а уже все поменялось при создании приложения. Не получалось запустить на телефоне через expo. Я решил проблему npx create-expo-app my-app или npx create-expo-app my-app --template дает выбор шаблонов. И запустил npx expo start --tunnel. По-другому никак не смог.

[@user-be6pz9eq1p]

Не знаю,чё сказать. Я только начал изучать JS,клёво, что есть,что посмотреть, где поучиться,лайк

[@goodvinsk8]

Спасибо! Ждём пиццу V3 на react-native ))

[@AlexanderKrysvetnyy]

Дождались!)

[@kri4evskiy]

Появилась идея и нужно срочно запилить мобильный MVP проект. Вот и смотрю) Спасибо за труд)

[@xlain8717]

такая же фигня

[@balexfox]

новичок, будем учиться лайк автору доходчиво

[@oberlordan6373]

Спасибо, понятноо объясняешь👍

[@DmitryA]

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

[@user-ld9lb3yl5z]

не могу понять где нажать? кнопку D

[@user-yg5tz3ow4z]

Аналогично, встрял на этом месте. Хорошо что хоть знаю теперь, что проблема не конкретно на моей стороне, но где нажать d тоже не понял))

[@e_viskhan]

@@user-yg5tz3ow4z в консоли, где ты вводил yarn start или npm start

[@zavalishin.6315]

@@e_viskhan так после того как написал npm start не получается ничего уже нажимать пока не остановишь работу приложения, от того что d нажал ничего не всплывает

[@kupuelel1827]

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

[@hazanant9722]

поддерживаю!

[@vasiliyilyuhin8793]

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

[@user-pu1gt3kj1j]

Привет! Можешь, пожалуйста, написать в каком порядке лучше смотреть разработку проектов, начиная с React-sneakers?

[@user-gw4df2de3k]

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

[@pseudonim510]

А вообще нормальная практика программировать и смотреть результат на экране телефона на Android через приложение Expo? В крупных конторах так делается или все таки исползают Android Studio? Мне как новичку что лучше использовать Expo Go или что-то другое?

[@valhallagarage4055]

Archakov красавчик все отлично рассказываешь

[@user-qs7yt7dd6w]

От души душевно в душу

[@MrEgorlo]

Лайк подъехал )

[@serjdenisov2114]

Спасибо за ознакомление!!!!!!!!

[@boburmustafo8868]

Спасибо за замечательное видео. и сделайте видео что такое fabric react native please

[@Decurion]

Потрясающий контент, спасибо!!!

[@user-kr7fe3xm8o]

Лайк, не глядя!!!!!!!!!!!

[@yusupyedyyew2945]

Можешь пожалуйста следующие видео про PostgreSql сделать?

[@evilinarm]

Все круто, после просмотра один вопрос, как это деплоить чтобы получить .apk?

[@haibova_irisha]

Спасибо .можно еще такого контента ?

[@micoberss5579]

В реакт нативе у flex-direction дефолтное направление "column" , а не "row" как y флексбокса для вэба.

[@user-dj1lf3vw7r]

вот мой комментарий, выражающий огромную благодарность и высокой степени уважение!

[@yessimovaindira8016]

супер, подача топ

[@vitalex9383]

Спасибо за курс, хоть уже пару месяцев изучаю RN, но пару вещей для себя новых открыл). Еще на TypeScript писал бы, цены не было бы))

[@ismailbenoevski]

Спасибо за видос

[@micoberss5579]

Про недостатки Expo ты прикрепил очень старые статьи. Сейчас экспо другой. И многие недостатки уже исправлены. 90 процентов приложений , которые можно написать на реакт натив, можно написать используя только экспо. A если что, можно и eject сделать и использовать React Native CLI

[@krepkovmeste]

Подскажи пожалуйста, а GPS трекер реально сделать, чтобы стабильно передавались координаты в фоне и в случае перезагрузки автоматически сервисы запускались?

[@kuzinpeter3365]

отличный урок!

[@TheTimur123]

Добрый день. Дэннис не мог бы ты сделать курс как делать игры на Cocos Creator, там используется язык программирования typescript. Я так, понимаю, ты специалист именно по этому языку. Мне хочется научиться делать игры и выкладывать их на Яндекс Игры.

[@user-nj7fr7sv1o]

Какой же ты нужный

[@alexles5003]

Круто. Для того, чтобы попробовать само то.Вы не станете профи в ReactNative, но на собесе уже можно будет сказать, мол технологию пощупал с большего в курсе.

[@vladimirmartynov4747]

Спасибо!!!

[@vasisafronov]

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

[@fitter2boss72]

А что там с TypeScript и тестированием(написанием тестов)? Слышал, что основной минус Апп на найтив, это нестабильность кода. А то кроссплатформиность и JS дико подкупает, но чем-то за это придется заплатить, хорошо , если только производительностью.

[@nuradilmataraimov7122]

Денис: делает контент, старается. Субтитры: Привет, ты на канале шлакоблок...))

[@BodyJoi]

Видео крутое, но когда устанавливаешь какие-то библиотеки то нужно перезапускать проект, это не react-native забагованый, это нормально А так контент хороший запиши видос как ты настраиваешь запуск приложения через CLI react-native

[@mishura9885]

А по flutter будет такое же видео?

[@lordodam8235]

Спасибо тебе брата мой

[@lukovkin8]

Хотелось пострадать, но к сожалению запустилось со второй попытки на native cli... Обещали же что будет трудно )

[@ilovecameltoe]

чат, смотреть стоит? проект законченный или как обычно в его стиле как и со стомат. приложением на реактнатвие

[@BarcikMinusPTS]

Если я пишу на винде в VS Code, то смогу ли я запустить приложение на ios?

[@Dragonoid_369_4]

Есть ролик о том как с ( react mobile app и ( React Native) одно и тоже? ) готовый сайт сделать в виде приложения

[@user-ph5iz4qb3t]

Очень крутой и полезный урок

[@andreygoose8606]

Хочется про Flutter в твоем авторстве узнать

[@raff_m_d6971]

от души дружище

[@shevdev]

кайф братик

[@user-tg3bj1vu9i]

По Курсу я выполнять последовательно, при нажатии npm start нету localhost.

[@user-bh4ce6ly6l]

Мы программисты мазахисты!! Мы любим баги и ошибки

[@user-tg3bj1vu9i]

Пример const HeaderContainer = styled.View` или const HeaderTitle = styled.Text` при включении import styled from "styled-components/native"; не работает, пустой экран

[@user-dj1lf3vw7r]

node последней версии не работает с expo cli, нужна 12-16 версия

[@min8132]

когда пытаюсь установить библиотеки, всегда ошибки выводит. пишет npm ERR! ERESOLVE unable to resolve dependency tree

[@user-vf6zd8yv9g]

При первом запуске на эмуляторе, expo сам устанавливается на эмулятор.

[@armanbulatovich7341]

Bro sdelai eshe kruche proekty na React Native s TS, Spasibo za etu rabotu. Procvetai. Udachi.

[@user-bo6qy8jm1q]

как у вас работает emmet в обратных кавычках?

[@user-qr9xl1bj1l]

У меня проблема, Expo cli вообще не работает. Пытаюсь запустить его , выбираю w(web), и он кидает ошибку. Памагите решить.