ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
React Native для начинающих за 2 часа [2022] ! Мобильное приложение на JavaScript
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- В данном курсе ты научишься создавать реальное мобильное приложение с помощью 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 #реакт #разработка
Привет. Скачал твой видос, что бы смотреть на работе. Вот почти досмотрел.
И хочу сказать что ты красавчик. Объясняешь прям ппц как круто. Нравится то, что ты когда что-то делаешь, то объясняешь и потом опять объясняешь что к чему. Усвоение материала намного лучше.
Спасибо за труды.
Супер-профессиональное и творческое вступление! Высший пилотаж. Спасибо!
Не забрасывай эту тему, делай курсы так же как с реактом, полноценные приложения, было бы очень интересно
Спасибо большое за этот труд! Очень легко и просто объясняешь! Подписан на тебя давно и на обновления!
Спасибо за труд! И великолепные вставки 😉
Нужно видео, где показываешь, как делать deploy в play market. Думаю, все поддержат =)
идея огонь 😱
Как его себе на андроид загрузить
@@dochPidji если имееш введу как запустить то используй expo go из плаймаркета
@@dochPidji Очень просто. npx react-native run-android. С включенной отладкой по usb или wifi. То же и для релизной сборки, только с ключом --release
25$ стоит
Вот твой контент прям вообще заходит, спасибо! Объясняешь доступно и круто!
Спасибо большое за проделанную работу, она не останется незамеченной
Продолжай в том же духе👍
На первых минутах столько позитива, что сразу понял, что боль, страдания и слезы мне обеспечены!! Значит правильно зашел
Вот что за волшебный человек - только подумала, что хочу изучать React Native и стала искать курсы, как здесь появился классное видео. Спасибо огромное!!
Видео огонь, всё по полочкам, приятно слушать, отличный видеоряд!
очень нравится подача материала, вставка видосов и мемов - это лучшее))
Я давно ждал от тебя видео про натив, как и писал раньше, продолжай в том же духе и повышай планку💕👍
Ждем продолжения по Reаct Native)) очень загорелся выучить это фреймворк, благодаря тебе))
Новый курс. Это просто отличная новость!
Классный ролик. Для того, чтобы вкатиться в технологию - самое то. Спасибо!
Спасибо большое, за новые видео, ты просто очень подробно и понятно все объясняешь. Спокойно можешь выпускать свои курсы на udemy или другом ресурсе
Огонь!!!@!!!@@@@@@!!!!!! Лучший курс для первых шагов по React native!!!!@!
очень плотно, понятно, лучше многих платных курсов
годнота, как мобильный разработчик скажу, что для начинания очень много плезной инфы. Автор хорошо понимает о чем речь.
Классный видос, надеюсь снимешь продолжение по разработке мобильного приложения на React Native с реализацией нового функционала!
Как всегда топ контент !!! Все что мне нужно для моего тестового, пошел клипать)))
Хотелось бы и дальше видеть развитие данной темы на канале!
Отличная идея попробовать NAtive
Супер! Все доходчиво и понятно.
Лайк, подписка! 🔥 Видео огонь. Спасибо!
Спасибо за контент! Давно хотел попробовать RN, вот отличный пинок)
Как всегда топ, еще и повеселил, спасибо)
Спасибо большое! Хотелось бы увидеть продолжение:)
Спасибо за твои труды и классную, доходчивую подачу. Посмотрел с удовольствием. пошел смотреть твоим другоие видео)
Братан, хорош. Давай-давай, вперёд! Контент - кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще? Давайте пока.
Отличное видео!!! Автор просто молодец👍
Братан, харош, контент в кайф!! Можно вот этого вот еще?? Вообще красавчик!!!!
Спасибо огромное за отличный урок 👍👍👍
Привет Ден. Ты и RN подарили мне первую работу. После RN на фронте просто отдыхаешь и спокойно пишешь а не вот это всё. Он закаляет. Это своего рода фетиш
Мне понравилось, для ознакомления с технологией очень даже ничего! Спасибо. Буду двигаться дальше в этом направлении
Хорошая подача материала!
я еще прошлый курс не прошёл, а уже новый)
Спасибо за ВИДЕО !!!! Очень помогло !!!
Спасибо, хороший контент!
Ты большой молодец. Продолжай в том же духе
Отлично! спасибо! я просил в коментах неоднократно хоть что-то по RN...
Не знаю,чё сказать. Я только начал изучать JS,клёво, что есть,что посмотреть, где поучиться,лайк
Дождались!)
Лайк, не глядя!!!!!!!!!!!
Ещё не смотрел но лайк подписка коммент, спасибо тебе
новичок, будем учиться лайк автору доходчиво
Спасибо! Ждём пиццу V3 на react-native ))
Хороший тутор👍. Единственное, осталась за кадром проблема со съехавшей вставкой Загрузки.
Появилась идея и нужно срочно запилить мобильный MVP проект. Вот и смотрю)
Спасибо за труд)
такая же фигня
отличный урок!
Спасибо. Для старта самое то.
ps: У кого в Metro Bundler не видно пункта Developer tools: Их убрали в конце июля. Нажмите [d] и вылезет подсказка.
не могу понять где нажать? кнопку D
Аналогично, встрял на этом месте. Хорошо что хоть знаю теперь, что проблема не конкретно на моей стороне, но где нажать d тоже не понял))
@@user-yg5tz3ow4z в консоли, где ты вводил yarn start или npm start
@@e_viskhan так после того как написал npm start не получается ничего уже нажимать пока не остановишь работу приложения, от того что d нажал ничего не всплывает
Спасибо, понятноо объясняешь👍
спаасибо большое тебе, жалко что не встретил жто видео когда впервые запускал... столько намучался а ты все щас разжевал
Планируете ли видео по react native с более продвинутыми технологиями ? P.s видео очень крутое !
поддерживаю!
Спасибо за ознакомление!!!!!!!!
От души душевно в душу
Спасибо за курс, хоть уже пару месяцев изучаю RN, но пару вещей для себя новых открыл). Еще на TypeScript писал бы, цены не было бы))
Какой же ты нужный
Archakov красавчик все отлично рассказываешь
В случае если не появляется выбор шаблона при создании проекта, пишем в терминале expo init project-name --template blank или более короткая запись expo init project-name -t blank
супер, подача топ
кайф братик
Лайк подъехал )
Спасибо за труд😄.Ты был прав, та еще боль с react native. Видео 6 месяцев, а уже все поменялось при создании приложения. Не получалось запустить на телефоне через expo.
Я решил проблему npx create-expo-app my-app или npx create-expo-app my-app --template дает выбор шаблонов. И запустил npx expo start --tunnel. По-другому никак не смог.
А вообще нормальная практика программировать и смотреть результат на экране телефона на Android через приложение Expo? В крупных конторах так делается или все таки исползают Android Studio? Мне как новичку что лучше использовать Expo Go или что-то другое?
Потрясающий контент, спасибо!!!
Привет! Можешь, пожалуйста, написать в каком порядке лучше смотреть разработку проектов, начиная с React-sneakers?
Очень крутой и полезный урок
Спасибо!!!
Спасибо за видос
Спасибо за замечательное видео.
и сделайте видео что такое fabric react native please
от души дружище
Круто. Для того, чтобы попробовать само то.Вы не станете профи в ReactNative, но на собесе уже можно будет сказать, мол технологию пощупал с большего в курсе.
вот мой комментарий, выражающий огромную благодарность и высокой степени уважение!
Подскажи пожалуйста, а GPS трекер реально сделать, чтобы стабильно передавались координаты в фоне и в случае перезагрузки автоматически сервисы запускались?
Можешь пожалуйста следующие видео про PostgreSql сделать?
Спасибо .можно еще такого контента ?
Все круто, после просмотра один вопрос, как это деплоить чтобы получить .apk?
В реакт нативе у flex-direction дефолтное направление "column" , а не "row" как y флексбокса для вэба.
когда пытаюсь установить библиотеки, всегда ошибки выводит. пишет npm ERR! ERESOLVE unable to resolve dependency tree
Мы программисты мазахисты!! Мы любим баги и ошибки
Пишу из 2024. Андроид студио под линуксом запустило реакт нейтив проект, созданный с помощью yarn create expo-app вообще без каких-то плясок с бубном. В эмуляторе все запустилось с первого раза без ошибок. Все очень ровно работает,
Добрый день. Дэннис не мог бы ты сделать курс как делать игры на Cocos Creator, там используется язык программирования typescript. Я так, понимаю, ты специалист именно по этому языку. Мне хочется научиться делать игры и выкладывать их на Яндекс Игры.
Видео крутое, но когда устанавливаешь какие-то библиотеки то нужно перезапускать проект, это не react-native забагованый, это нормально
А так контент хороший
запиши видос как ты настраиваешь запуск приложения через CLI react-native
У меня проблема, Expo cli вообще не работает. Пытаюсь запустить его , выбираю w(web), и он кидает ошибку. Памагите решить.
А что там с TypeScript и тестированием(написанием тестов)? Слышал, что основной минус Апп на найтив, это нестабильность кода.
А то кроссплатформиность и JS дико подкупает, но чем-то за это придется заплатить, хорошо , если только производительностью.
Про недостатки Expo ты прикрепил очень старые статьи. Сейчас экспо другой. И многие недостатки уже исправлены. 90 процентов приложений , которые можно написать на реакт натив, можно написать используя только экспо. A если что, можно и eject сделать и использовать React Native CLI
А по flutter будет такое же видео?
Пример const HeaderContainer = styled.View` или const HeaderTitle = styled.Text` при включении import styled from "styled-components/native"; не работает, пустой экран
Постоянно вылезает предупреждение npm warn detacated на очень многие файлы при создании проекта, плюс в консоли появляется надпись о том, что expo-cli устарела. И соответственно, приложение не запускается ни через телефон, ни через браузер, эмуляторы, т.е. по сути невозможно разрабатывать приложения. Всеми способами пытался как-то что-то обновить, но так и не нашел ответ. Как то можете помочь с этим, или все-таки стоит перейти на Flutter?
лайк не глядя
Денис: делает контент, старается.
Субтитры: Привет, ты на канале шлакоблок...))
Хочется про Flutter в твоем авторстве узнать
Для меня страдания начались сразу при использовании expo: при попытке запустить скрипт "expo start --android" получаю ошибку "ANDROID_HOME is set to a non-existing path". Android SDK находится в папке C:\Android\SDK, и я установил переменную ANDROID_HOME. Проблема в функции assertSdkRoot() в модуле
ode_modules\@expo\cli\build\src\start\platforms\android\AndroidSdk.js:
вызов _fs.default.existsSync(process.env.ANDROID_HOME) возвращает false, но путь передается правильный. Вызов fs.existsSync в отдельном js-файле с этим путем возвращает true. Такое ощущение, что js внутри expo не имеет доступа к корню диска C. Кто-нибудь может подсказать, как исправить эту проблему? Переносить SDK в другое место не желательно.
Если я пишу на винде в VS Code, то смогу ли я запустить приложение на ios?
как у вас работает emmet в обратных кавычках?
чат, смотреть стоит? проект законченный или как обычно в его стиле как и со стомат. приложением на реактнатвие
Хотелось пострадать, но к сожалению запустилось со второй попытки на native cli... Обещали же что будет трудно )
Этот парень настолько хорош, что попутно смотря как делается джава код я все понял ахахахаха, он гений
Спасибо тебе брата мой