Тёмный

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

Archakov Blog
Подписаться 69 тыс.
Просмотров 144 тыс.
50% 1

В данном курсе ты научишься создавать реальное мобильное приложение с помощью 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 #реакт #разработка

Опубликовано:

 

5 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 333   
@Viktorres1
@Viktorres1 Год назад
Супер-профессиональное и творческое вступление! Высший пилотаж. Спасибо!
@user-fd1np4pt7y
@user-fd1np4pt7y Год назад
Привет. Скачал твой видос, что бы смотреть на работе. Вот почти досмотрел. И хочу сказать что ты красавчик. Объясняешь прям ппц как круто. Нравится то, что ты когда что-то делаешь, то объясняешь и потом опять объясняешь что к чему. Усвоение материала намного лучше. Спасибо за труды.
@evilinarm
@evilinarm Год назад
Спасибо за труд! И великолепные вставки 😉
@swipeshark5311
@swipeshark5311 Год назад
Не забрасывай эту тему, делай курсы так же как с реактом, полноценные приложения, было бы очень интересно
@user-mz7jm5ez9y
@user-mz7jm5ez9y Год назад
Нужно видео, где показываешь, как делать deploy в play market. Думаю, все поддержат =)
@arthgame1
@arthgame1 Год назад
идея огонь 😱
@dochPidji
@dochPidji Год назад
Как его себе на андроид загрузить
@arthgame1
@arthgame1 Год назад
​@@dochPidji если имееш введу как запустить то используй expo go из плаймаркета
@pahakush
@pahakush Год назад
@@dochPidji Очень просто. npx react-native run-android. С включенной отладкой по usb или wifi. То же и для релизной сборки, только с ключом --release
@eweles
@eweles 9 месяцев назад
25$ стоит
@user-zb4vg7iv8x
@user-zb4vg7iv8x Год назад
Я давно ждал от тебя видео про натив, как и писал раньше, продолжай в том же духе и повышай планку💕👍
@c4973
@c4973 Год назад
Спасибо большое за этот труд! Очень легко и просто объясняешь! Подписан на тебя давно и на обновления!
@user-sy9gi3vg2e
@user-sy9gi3vg2e Год назад
Спасибо большое за проделанную работу, она не останется незамеченной Продолжай в том же духе👍
@perevoznikovalexey1420
@perevoznikovalexey1420 7 месяцев назад
очень нравится подача материала, вставка видосов и мемов - это лучшее))
@ps.efimov
@ps.efimov Год назад
Вот твой контент прям вообще заходит, спасибо! Объясняешь доступно и круто!
@TheAlexChannelClub
@TheAlexChannelClub Год назад
Новый курс. Это просто отличная новость!
@JavaScriptcher
@JavaScriptcher Год назад
На первых минутах столько позитива, что сразу понял, что боль, страдания и слезы мне обеспечены!! Значит правильно зашел
@azamatdzagoev2749
@azamatdzagoev2749 Год назад
Ждем продолжения по Reаct Native)) очень загорелся выучить это фреймворк, благодаря тебе))
@Antioss_A
@Antioss_A Год назад
Вот что за волшебный человек - только подумала, что хочу изучать React Native и стала искать курсы, как здесь появился классное видео. Спасибо огромное!!
@progra2mer-developer
@progra2mer-developer Год назад
Хотелось бы и дальше видеть развитие данной темы на канале! Отличная идея попробовать NAtive
@nikolassmakovsky4032
@nikolassmakovsky4032 Год назад
Видео огонь, всё по полочкам, приятно слушать, отличный видеоряд!
@pe4all361
@pe4all361 Год назад
Классный видос, надеюсь снимешь продолжение по разработке мобильного приложения на React Native с реализацией нового функционала!
@user-hu4fy4ce1f
@user-hu4fy4ce1f Год назад
Спасибо большое, за новые видео, ты просто очень подробно и понятно все объясняешь. Спокойно можешь выпускать свои курсы на udemy или другом ресурсе
@l7l7l7lful
@l7l7l7lful Год назад
очень плотно, понятно, лучше многих платных курсов
@user-hd3lx8qc7s
@user-hd3lx8qc7s Год назад
годнота, как мобильный разработчик скажу, что для начинания очень много плезной инфы. Автор хорошо понимает о чем речь.
@lazys7151
@lazys7151 Год назад
Классный ролик. Для того, чтобы вкатиться в технологию - самое то. Спасибо!
@vladislavivanchikov6622
@vladislavivanchikov6622 Год назад
Как всегда топ контент !!! Все что мне нужно для моего тестового, пошел клипать)))
@dmitriidmitriev7435
@dmitriidmitriev7435 Год назад
Огонь!!!@!!!@@@@@@!!!!!! Лучший курс для первых шагов по React native!!!!@!
@ksushakiseleva2644
@ksushakiseleva2644 Год назад
Лайк, подписка! 🔥 Видео огонь. Спасибо!
@velichkoivan
@velichkoivan Год назад
Супер! Все доходчиво и понятно.
@vladgafarov794
@vladgafarov794 Год назад
Спасибо за контент! Давно хотел попробовать RN, вот отличный пинок)
@VladimirOnokhov
@VladimirOnokhov 2 месяца назад
Спасибо большое! Хотелось бы увидеть продолжение:)
@user-jo3bo4xp3v
@user-jo3bo4xp3v Год назад
Как всегда топ, еще и повеселил, спасибо)
@oj6868
@oj6868 Год назад
Братан, хорош. Давай-давай, вперёд! Контент - кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще? Давайте пока.
@user-rd8uh2ym3c
@user-rd8uh2ym3c Год назад
Отличное видео!!! Автор просто молодец👍
@user-hb4vr5gq4u
@user-hb4vr5gq4u Год назад
Привет Ден. Ты и RN подарили мне первую работу. После RN на фронте просто отдыхаешь и спокойно пишешь а не вот это всё. Он закаляет. Это своего рода фетиш
@user-tv5zz
@user-tv5zz Год назад
я еще прошлый курс не прошёл, а уже новый)
@murrmax1466
@murrmax1466 7 месяцев назад
Братан, харош, контент в кайф!! Можно вот этого вот еще?? Вообще красавчик!!!!
@AlexanderKrysvetnyy
@AlexanderKrysvetnyy Год назад
Дождались!)
@brigadir5830
@brigadir5830 Год назад
Спасибо огромное за отличный урок 👍👍👍
@user-zq5iy8dr4j
@user-zq5iy8dr4j Год назад
Хорошая подача материала!
@kupuelel1827
@kupuelel1827 Год назад
Планируете ли видео по react native с более продвинутыми технологиями ? P.s видео очень крутое !
@hazanant9722
@hazanant9722 Год назад
поддерживаю!
@DmitryA
@DmitryA Год назад
Спасибо. Для старта самое то. ps: У кого в Metro Bundler не видно пункта Developer tools: Их убрали в конце июля. Нажмите [d] и вылезет подсказка.
@tech_nurgaliyev
@tech_nurgaliyev Год назад
не могу понять где нажать? кнопку D
@user-yg5tz3ow4z
@user-yg5tz3ow4z Год назад
Аналогично, встрял на этом месте. Хорошо что хоть знаю теперь, что проблема не конкретно на моей стороне, но где нажать d тоже не понял))
@e_viskhan
@e_viskhan Год назад
@@user-yg5tz3ow4z в консоли, где ты вводил yarn start или npm start
@zavalishin.6315
@zavalishin.6315 Год назад
@@e_viskhan так после того как написал npm start не получается ничего уже нажимать пока не остановишь работу приложения, от того что d нажал ничего не всплывает
@user-fq4pc7fm2z
@user-fq4pc7fm2z Год назад
Отлично! спасибо! я просил в коментах неоднократно хоть что-то по RN...
@rikmorti4072
@rikmorti4072 Год назад
Ты большой молодец. Продолжай в том же духе
@igorlutsenko8004
@igorlutsenko8004 Год назад
Спасибо за ВИДЕО !!!! Очень помогло !!!
@Lerogorn
@Lerogorn Год назад
Спасибо, хороший контент!
@user-nb7cv5px1v
@user-nb7cv5px1v Год назад
Мне понравилось, для ознакомления с технологией очень даже ничего! Спасибо. Буду двигаться дальше в этом направлении
@kri4evskiy
@kri4evskiy Год назад
Появилась идея и нужно срочно запилить мобильный MVP проект. Вот и смотрю) Спасибо за труд)
@xlain8717
@xlain8717 Год назад
такая же фигня
@user-be6pz9eq1p
@user-be6pz9eq1p 5 месяцев назад
Не знаю,чё сказать. Я только начал изучать JS,клёво, что есть,что посмотреть, где поучиться,лайк
@user-sq8lh5en3z
@user-sq8lh5en3z Год назад
Ещё не смотрел но лайк подписка коммент, спасибо тебе
@goodvinsk8
@goodvinsk8 Год назад
Спасибо! Ждём пиццу V3 на react-native ))
@balexfox
@balexfox Год назад
новичок, будем учиться лайк автору доходчиво
@user-yy1zv1op2m
@user-yy1zv1op2m Год назад
Спасибо за труд😄.Ты был прав, та еще боль с react native. Видео 6 месяцев, а уже все поменялось при создании приложения. Не получалось запустить на телефоне через expo. Я решил проблему npx create-expo-app my-app или npx create-expo-app my-app --template дает выбор шаблонов. И запустил npx expo start --tunnel. По-другому никак не смог.
@kuzinpeter3365
@kuzinpeter3365 Год назад
отличный урок!
@vasiliyilyuhin8793
@vasiliyilyuhin8793 Год назад
В случае если не появляется выбор шаблона при создании проекта, пишем в терминале expo init project-name --template blank или более короткая запись expo init project-name -t blank
@Al_gre
@Al_gre 11 месяцев назад
Хороший тутор👍. Единственное, осталась за кадром проблема со съехавшей вставкой Загрузки.
@user-nj7fr7sv1o
@user-nj7fr7sv1o Год назад
Какой же ты нужный
@vasisafronov
@vasisafronov 4 месяца назад
Пишу из 2024. Андроид студио под линуксом запустило реакт нейтив проект, созданный с помощью yarn create expo-app вообще без каких-то плясок с бубном. В эмуляторе все запустилось с первого раза без ошибок. Все очень ровно работает,
@serjdenisov2114
@serjdenisov2114 Год назад
Спасибо за ознакомление!!!!!!!!
@valhallagarage4055
@valhallagarage4055 Год назад
Archakov красавчик все отлично рассказываешь
@user-gw4df2de3k
@user-gw4df2de3k Год назад
спаасибо большое тебе, жалко что не встретил жто видео когда впервые запускал... столько намучался а ты все щас разжевал
@pseudonim510
@pseudonim510 9 месяцев назад
А вообще нормальная практика программировать и смотреть результат на экране телефона на Android через приложение Expo? В крупных конторах так делается или все таки исползают Android Studio? Мне как новичку что лучше использовать Expo Go или что-то другое?
@user-qs7yt7dd6w
@user-qs7yt7dd6w 2 месяца назад
От души душевно в душу
@user-pu1gt3kj1j
@user-pu1gt3kj1j Год назад
Привет! Можешь, пожалуйста, написать в каком порядке лучше смотреть разработку проектов, начиная с React-sneakers?
@boburmustafo8868
@boburmustafo8868 Год назад
Спасибо за замечательное видео. и сделайте видео что такое fabric react native please
@user-kr7fe3xm8o
@user-kr7fe3xm8o Год назад
Лайк, не глядя!!!!!!!!!!!
@oberlordan6373
@oberlordan6373 Месяц назад
Спасибо, понятноо объясняешь👍
@Decurion
@Decurion Год назад
Потрясающий контент, спасибо!!!
@user-dj1lf3vw7r
@user-dj1lf3vw7r Год назад
вот мой комментарий, выражающий огромную благодарность и высокой степени уважение!
@vitalex9383
@vitalex9383 Год назад
Спасибо за курс, хоть уже пару месяцев изучаю RN, но пару вещей для себя новых открыл). Еще на TypeScript писал бы, цены не было бы))
@user-ph5iz4qb3t
@user-ph5iz4qb3t 4 месяца назад
Очень крутой и полезный урок
@micoberss5579
@micoberss5579 Год назад
В реакт нативе у flex-direction дефолтное направление "column" , а не "row" как y флексбокса для вэба.
@haibova_irisha
@haibova_irisha Год назад
Спасибо .можно еще такого контента ?
@vladimirmartynov4747
@vladimirmartynov4747 Год назад
Спасибо!!!
@krepkovmeste
@krepkovmeste Год назад
Подскажи пожалуйста, а GPS трекер реально сделать, чтобы стабильно передавались координаты в фоне и в случае перезагрузки автоматически сервисы запускались?
@yusupyedyyew2945
@yusupyedyyew2945 Год назад
Можешь пожалуйста следующие видео про PostgreSql сделать?
@raff_m_d6971
@raff_m_d6971 Год назад
от души дружище
@alexles5003
@alexles5003 3 месяца назад
Круто. Для того, чтобы попробовать само то.Вы не станете профи в ReactNative, но на собесе уже можно будет сказать, мол технологию пощупал с большего в курсе.
@evilinarm
@evilinarm Год назад
Все круто, после просмотра один вопрос, как это деплоить чтобы получить .apk?
@micoberss5579
@micoberss5579 Год назад
Про недостатки Expo ты прикрепил очень старые статьи. Сейчас экспо другой. И многие недостатки уже исправлены. 90 процентов приложений , которые можно написать на реакт натив, можно написать используя только экспо. A если что, можно и eject сделать и использовать React Native CLI
@karoche-tv
@karoche-tv Год назад
На Java я хотел написать написал приложение и изучал язык. Но до этого я был опыт рнр. Java очень сложный язык и там все вложенные и длинные коды. И скорость разработки очень медленно. А ещё не говоря Svift. А на Реакт Натив легче писать если все правильно настроить в начале. Все эти npm, node.js, android studio, path,и.т.д. Если установил библиотеку какую нибудь ant design и если будет ошибка в консоли удалите npm и установить версию npm 6. Node js version
@BodyJoi
@BodyJoi Год назад
Видео крутое, но когда устанавливаешь какие-то библиотеки то нужно перезапускать проект, это не react-native забагованый, это нормально А так контент хороший запиши видос как ты настраиваешь запуск приложения через CLI react-native
@yessimovaindira8016
@yessimovaindira8016 Год назад
супер, подача топ
@ismailbenoevski
@ismailbenoevski 3 месяца назад
Спасибо за видос
@TheTimur123
@TheTimur123 Год назад
Добрый день. Дэннис не мог бы ты сделать курс как делать игры на Cocos Creator, там используется язык программирования typescript. Я так, понимаю, ты специалист именно по этому языку. Мне хочется научиться делать игры и выкладывать их на Яндекс Игры.
@user-bh4ce6ly6l
@user-bh4ce6ly6l Год назад
Мы программисты мазахисты!! Мы любим баги и ошибки
@MrEgorlo
@MrEgorlo 9 месяцев назад
Лайк подъехал )
@shevdev
@shevdev Год назад
кайф братик
@dosya4950
@dosya4950 Год назад
У кого такие же проблемы как и у меня с map items значение по умолчанию не является массивом, вам просто нужно установить пустой массив по умолчанию. const [items, setItems] = React.useState([]);
@qweasd-xv6px
@qweasd-xv6px Год назад
Привет! Все ровно, почему-то ничего не отображается, то есть items все еще пустой. Как ты дальше исправил? Не мог бы отправить код useEffect?
@qweasd-xv6px
@qweasd-xv6px Год назад
Отвеееть пожалуйста
@lolyadop
@lolyadop Год назад
Спасибо, добрый человек
@andreygoose8606
@andreygoose8606 Год назад
Хочется про Flutter в твоем авторстве узнать
@lordodam8235
@lordodam8235 Год назад
Спасибо тебе брата мой
@lukovkin8
@lukovkin8 6 месяцев назад
Хотелось пострадать, но к сожалению запустилось со второй попытки на native cli... Обещали же что будет трудно )
@edwarddeveloper6088
@edwarddeveloper6088 Год назад
Скажу одно программирования оно даёт свободу , если что-то писать ты должен сидеть часами , и одно так сидеть много это плохо для здоровья. Нужно всегда двигаться
@mishura9885
@mishura9885 Год назад
А по flutter будет такое же видео?
@user-dq9oy9gx3m
@user-dq9oy9gx3m Год назад
Этот парень настолько хорош, что попутно смотря как делается джава код я все понял ахахахаха, он гений
@nuradilmataraimov7122
@nuradilmataraimov7122 Год назад
Денис: делает контент, старается. Субтитры: Привет, ты на канале шлакоблок...))
@ilovecameltoe
@ilovecameltoe Год назад
чат, смотреть стоит? проект законченный или как обычно в его стиле как и со стомат. приложением на реактнатвие
@fitter2boss72
@fitter2boss72 Год назад
А что там с TypeScript и тестированием(написанием тестов)? Слышал, что основной минус Апп на найтив, это нестабильность кода. А то кроссплатформиность и JS дико подкупает, но чем-то за это придется заплатить, хорошо , если только производительностью.
@user-bo6qy8jm1q
@user-bo6qy8jm1q 6 месяцев назад
как у вас работает emmet в обратных кавычках?
@user-ps2ge3cc5r
@user-ps2ge3cc5r Год назад
nice presentation
@user-tg3bj1vu9i
@user-tg3bj1vu9i 6 месяцев назад
По Курсу я выполнять последовательно, при нажатии npm start нету localhost.
@user-mw4jj6vj4r
@user-mw4jj6vj4r Год назад
Дэн, скажи что сейчас более приорететно: css, scss, modules или styled components? Не могу определиться с помощью каких технологий стилизовать. Буду рад если ответит кто-нибудь другой)
@ArchakovBlog
@ArchakovBlog Год назад
Модули предпочтительней, чем SC Но стоит изучить и то и другое
@user-mw4jj6vj4r
@user-mw4jj6vj4r Год назад
@@ArchakovBlog Да блин, я не могу уже определиться с помощью какой технологии стилизовать. Одни говорят стилизуй на styled components другие говорят что на модулях лучше. И теперь хз чё делать)
@user-mw4jj6vj4r
@user-mw4jj6vj4r Год назад
Ну я уже на SC привык
@KOWEY
@KOWEY 2 месяца назад
ну что, начинается новая ступень эволюции)
@BarcikMinusPTS
@BarcikMinusPTS 9 месяцев назад
Если я пишу на винде в VS Code, то смогу ли я запустить приложение на ios?
Далее
How to bring sweets anywhere 😋🍰🍫
00:32
Просмотров 6 млн
Что не так с Марсом?
26:13
Просмотров 32 тыс.