React Native для начинающих за 2 часа [2022] ! Мобильное приложение на JavaScript
HTML-код
- Опубликовано: 12 июн 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$ стоит
Не забрасывай эту тему, делай курсы так же как с реактом, полноценные приложения, было бы очень интересно
Супер-профессиональное и творческое вступление! Высший пилотаж. Спасибо!
Привет. Скачал твой видос, что бы смотреть на работе. Вот почти досмотрел.
И хочу сказать что ты красавчик. Объясняешь прям ппц как круто. Нравится то, что ты когда что-то делаешь, то объясняешь и потом опять объясняешь что к чему. Усвоение материала намного лучше.
Спасибо за труды.
Спасибо большое за этот труд! Очень легко и просто объясняешь! Подписан на тебя давно и на обновления!
Спасибо за труд! И великолепные вставки 😉
Спасибо большое за проделанную работу, она не останется незамеченной
Продолжай в том же духе👍
очень нравится подача материала, вставка видосов и мемов - это лучшее))
На первых минутах столько позитива, что сразу понял, что боль, страдания и слезы мне обеспечены!! Значит правильно зашел
Я давно ждал от тебя видео про натив, как и писал раньше, продолжай в том же духе и повышай планку💕👍
Новый курс. Это просто отличная новость!
Вот твой контент прям вообще заходит, спасибо! Объясняешь доступно и круто!
Ждем продолжения по Reаct Native)) очень загорелся выучить это фреймворк, благодаря тебе))
Планируете ли видео по react native с более продвинутыми технологиями ? P.s видео очень крутое !
поддерживаю!
Хотелось бы и дальше видеть развитие данной темы на канале!
Отличная идея попробовать NAtive
Видео огонь, всё по полочкам, приятно слушать, отличный видеоряд!
очень плотно, понятно, лучше многих платных курсов
Классный видос, надеюсь снимешь продолжение по разработке мобильного приложения на React Native с реализацией нового функционала!
Вот что за волшебный человек - только подумала, что хочу изучать React Native и стала искать курсы, как здесь появился классное видео. Спасибо огромное!!
Спасибо большое, за новые видео, ты просто очень подробно и понятно все объясняешь. Спокойно можешь выпускать свои курсы на udemy или другом ресурсе
Классный ролик. Для того, чтобы вкатиться в технологию - самое то. Спасибо!
годнота, как мобильный разработчик скажу, что для начинания очень много плезной инфы. Автор хорошо понимает о чем речь.
Как всегда топ контент !!! Все что мне нужно для моего тестового, пошел клипать)))
Лайк, подписка! 🔥 Видео огонь. Спасибо!
Супер! Все доходчиво и понятно.
Огонь!!!@!!!@@@@@@!!!!!! Лучший курс для первых шагов по React native!!!!@!
Спасибо за контент! Давно хотел попробовать RN, вот отличный пинок)
Спасибо большое! Хотелось бы увидеть продолжение:)
Братан, хорош. Давай-давай, вперёд! Контент - кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще? Давайте пока.
Как всегда топ, еще и повеселил, спасибо)
Привет! Можешь, пожалуйста, написать в каком порядке лучше смотреть разработку проектов, начиная с React-sneakers?
я еще прошлый курс не прошёл, а уже новый)
Спасибо за твои труды и классную, доходчивую подачу. Посмотрел с удовольствием. пошел смотреть твоим другоие видео)
А вообще нормальная практика программировать и смотреть результат на экране телефона на Android через приложение Expo? В крупных конторах так делается или все таки исползают Android Studio? Мне как новичку что лучше использовать Expo Go или что-то другое?
Отличное видео!!! Автор просто молодец👍
Подскажи пожалуйста, а GPS трекер реально сделать, чтобы стабильно передавались координаты в фоне и в случае перезагрузки автоматически сервисы запускались?
Братан, харош, контент в кайф!! Можно вот этого вот еще?? Вообще красавчик!!!!
Привет Ден. Ты и RN подарили мне первую работу. После RN на фронте просто отдыхаешь и спокойно пишешь а не вот это всё. Он закаляет. Это своего рода фетиш
Спасибо огромное за отличный урок 👍👍👍
Все круто, после просмотра один вопрос, как это деплоить чтобы получить .apk?
Спасибо. Для старта самое то.
ps: У кого в Metro Bundler не видно пункта Developer tools: Их убрали в конце июля. Нажмите [d] и вылезет подсказка.
не могу понять где нажать? кнопку D
Аналогично, встрял на этом месте. Хорошо что хоть знаю теперь, что проблема не конкретно на моей стороне, но где нажать d тоже не понял))
@@user-yg5tz3ow4z в консоли, где ты вводил yarn start или npm start
@@e_viskhan так после того как написал npm start не получается ничего уже нажимать пока не остановишь работу приложения, от того что d нажал ничего не всплывает
когда пытаюсь установить библиотеки, всегда ошибки выводит. пишет npm ERR! ERESOLVE unable to resolve dependency tree
В случае если не появляется выбор шаблона при создании проекта, пишем в терминале expo init project-name --template blank или более короткая запись expo init project-name -t blank
Появилась идея и нужно срочно запилить мобильный MVP проект. Вот и смотрю)
Спасибо за труд)
такая же фигня
По Курсу я выполнять последовательно, при нажатии npm start нету localhost.
Дождались!)
Хорошая подача материала!
Мне понравилось, для ознакомления с технологией очень даже ничего! Спасибо. Буду двигаться дальше в этом направлении
У меня проблема, Expo cli вообще не работает. Пытаюсь запустить его , выбираю w(web), и он кидает ошибку. Памагите решить.
Не знаю,чё сказать. Я только начал изучать JS,клёво, что есть,что посмотреть, где поучиться,лайк
Спасибо за ВИДЕО !!!! Очень помогло !!!
Отлично! спасибо! я просил в коментах неоднократно хоть что-то по RN...
Спасибо! Ждём пиццу V3 на react-native ))
как у вас работает emmet в обратных кавычках?
Хороший тутор👍. Единственное, осталась за кадром проблема со съехавшей вставкой Загрузки.
Пример const HeaderContainer = styled.View` или const HeaderTitle = styled.Text` при включении import styled from "styled-components/native"; не работает, пустой экран
Спасибо, хороший контент!
Ты большой молодец. Продолжай в том же духе
А что там с TypeScript и тестированием(написанием тестов)? Слышал, что основной минус Апп на найтив, это нестабильность кода.
А то кроссплатформиность и JS дико подкупает, но чем-то за это придется заплатить, хорошо , если только производительностью.
новичок, будем учиться лайк автору доходчиво
Спасибо за труд😄.Ты был прав, та еще боль с react native. Видео 6 месяцев, а уже все поменялось при создании приложения. Не получалось запустить на телефоне через expo.
Я решил проблему npx create-expo-app my-app или npx create-expo-app my-app --template дает выбор шаблонов. И запустил npx expo start --tunnel. По-другому никак не смог.
node последней версии не работает с expo cli, нужна 12-16 версия
Если я пишу на винде в VS Code, то смогу ли я запустить приложение на ios?
Получается просто рандомно создаем папку www далее test-r-n?
Для меня страдания начались сразу при использовании 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 в другое место не желательно.
В реакт нативе у flex-direction дефолтное направление "column" , а не "row" как y флексбокса для вэба.
А по flutter будет такое же видео?
Хотелось пострадать, но к сожалению запустилось со второй попытки на native cli... Обещали же что будет трудно )
чат, смотреть стоит? проект законченный или как обычно в его стиле как и со стомат. приложением на реактнатвие
Можешь пожалуйста следующие видео про PostgreSql сделать?
При первом запуске на эмуляторе, expo сам устанавливается на эмулятор.
Пишу из 2024. Андроид студио под линуксом запустило реакт нейтив проект, созданный с помощью yarn create expo-app вообще без каких-то плясок с бубном. В эмуляторе все запустилось с первого раза без ошибок. Все очень ровно работает,
Metro Bundler не видно пункта Developer tools. Увидел, что кликают Ctrl + m на Windows, но все также не работает
Спасибо, понятноо объясняешь👍
Ещё не смотрел но лайк подписка коммент, спасибо тебе
Про недостатки Expo ты прикрепил очень старые статьи. Сейчас экспо другой. И многие недостатки уже исправлены. 90 процентов приложений , которые можно написать на реакт натив, можно написать используя только экспо. A если что, можно и eject сделать и использовать React Native CLI
Есть ролик о том как с ( react mobile app и ( React Native) одно и тоже? ) готовый сайт сделать в виде приложения
Народ такой вопрос если нужна нативная разработка почему react а не flutter
Как администрируют мобильные приложения?
Добрый день. Дэннис не мог бы ты сделать курс как делать игры на Cocos Creator, там используется язык программирования typescript. Я так, понимаю, ты специалист именно по этому языку. Мне хочется научиться делать игры и выкладывать их на Яндекс Игры.
На Аппле русским сейчас можно продавать приложения?
v macbooke ne poluchayetsya ustanoviy navigation native
pomogite pojaluysta
спаасибо большое тебе, жалко что не встретил жто видео когда впервые запускал... столько намучался а ты все щас разжевал
Почему это приложение нативное, если под конец код React Native все равно транслируется в Java/Swift код? Ты уверен, что знаешь значение слова "нативный" ?
у меня ошибка с map говорит undefined что делать
Спасибо за замечательное видео.
и сделайте видео что такое fabric react native please
Дэн, скажи что сейчас более приорететно: css, scss, modules или styled components? Не могу определиться с помощью каких технологий стилизовать. Буду рад если ответит кто-нибудь другой)
Модули предпочтительней, чем SC
Но стоит изучить и то и другое
@@ArchakovBlog Да блин, я не могу уже определиться с помощью какой технологии стилизовать. Одни говорят стилизуй на styled components другие говорят что на модулях лучше. И теперь хз чё делать)
Ну я уже на SC привык
Archakov красавчик все отлично рассказываешь
Спасибо за ознакомление!!!!!!!!
Застрял на моменте установки expo-cli, начало выдавать ошибки и предупреждения.
Лайк, не глядя!!!!!!!!!!!
отличный урок!
Хочется про Flutter в твоем авторстве узнать
вот мой комментарий, выражающий огромную благодарность и высокой степени уважение!
Спасибо .можно еще такого контента ?
От души душевно в душу
На стажировке запретили использовать expo. Постараюсь пройти этот курс без expo 😅
Сначало ошибка загрузки npx, потом ошибка загрузки эмулятора, потом vs code (в моем случае github codespaces) не хочет работать и его кидает в вечный фриз. В общем начало прикольное. Осталось только понять как я могу сделать из своего приложения хотя бы apk файл...
Какой же ты нужный
Это только у меня картины на половину показывается или нет