React Native для начинающих за 2 часа [2022] ! Мобильное приложение на JavaScript
Vložit
- čas přidán 17. 05. 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)) очень загорелся выучить это фреймворк, благодаря тебе))
Хотелось бы и дальше видеть развитие данной темы на канале!
Отличная идея попробовать NAtive
Новый курс. Это просто отличная новость!
Спасибо большое, за новые видео, ты просто очень подробно и понятно все объясняешь. Спокойно можешь выпускать свои курсы на udemy или другом ресурсе
Вот что за волшебный человек - только подумала, что хочу изучать React Native и стала искать курсы, как здесь появился классное видео. Спасибо огромное!!
Видео огонь, всё по полочкам, приятно слушать, отличный видеоряд!
На первых минутах столько позитива, что сразу понял, что боль, страдания и слезы мне обеспечены!! Значит правильно зашел
Классный видос, надеюсь снимешь продолжение по разработке мобильного приложения на React Native с реализацией нового функционала!
Как всегда топ контент !!! Все что мне нужно для моего тестового, пошел клипать)))
Классный ролик. Для того, чтобы вкатиться в технологию - самое то. Спасибо!
Спасибо за контент! Давно хотел попробовать RN, вот отличный пинок)
очень плотно, понятно, лучше многих платных курсов
Лайк, подписка! 🔥 Видео огонь. Спасибо!
Огонь!!!@!!!@@@@@@!!!!!! Лучший курс для первых шагов по React native!!!!@!
годнота, как мобильный разработчик скажу, что для начинания очень много плезной инфы. Автор хорошо понимает о чем речь.
Супер! Все доходчиво и понятно.
Как всегда топ, еще и повеселил, спасибо)
Спасибо большое! Хотелось бы увидеть продолжение:)
Отличное видео!!! Автор просто молодец👍
Братан, хорош. Давай-давай, вперёд! Контент - кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще? Давайте пока.
Спасибо огромное за отличный урок 👍👍👍
Братан, харош, контент в кайф!! Можно вот этого вот еще?? Вообще красавчик!!!!
я еще прошлый курс не прошёл, а уже новый)
Привет! Можешь, пожалуйста, написать в каком порядке лучше смотреть разработку проектов, начиная с React-sneakers?
Спасибо. Для старта самое то.
ps: У кого в Metro Bundler не видно пункта Developer tools: Их убрали в конце июля. Нажмите [d] и вылезет подсказка.
не могу понять где нажать? кнопку D
Аналогично, встрял на этом месте. Хорошо что хоть знаю теперь, что проблема не конкретно на моей стороне, но где нажать d тоже не понял))
@@user-yg5tz3ow4z в консоли, где ты вводил yarn start или npm start
@@e_viskhan так после того как написал npm start не получается ничего уже нажимать пока не остановишь работу приложения, от того что d нажал ничего не всплывает
Хорошая подача материала!
Привет Ден. Ты и RN подарили мне первую работу. После RN на фронте просто отдыхаешь и спокойно пишешь а не вот это всё. Он закаляет. Это своего рода фетиш
Спасибо за ВИДЕО !!!! Очень помогло !!!
Мне понравилось, для ознакомления с технологией очень даже ничего! Спасибо. Буду двигаться дальше в этом направлении
Дождались!)
Ты большой молодец. Продолжай в том же духе
Спасибо, хороший контент!
Отлично! спасибо! я просил в коментах неоднократно хоть что-то по RN...
Не знаю,чё сказать. Я только начал изучать JS,клёво, что есть,что посмотреть, где поучиться,лайк
А вообще нормальная практика программировать и смотреть результат на экране телефона на Android через приложение Expo? В крупных конторах так делается или все таки исползают Android Studio? Мне как новичку что лучше использовать Expo Go или что-то другое?
Спасибо! Ждём пиццу V3 на react-native ))
Хороший тутор👍. Единственное, осталась за кадром проблема со съехавшей вставкой Загрузки.
Подскажи пожалуйста, а GPS трекер реально сделать, чтобы стабильно передавались координаты в фоне и в случае перезагрузки автоматически сервисы запускались?
новичок, будем учиться лайк автору доходчиво
Ещё не смотрел но лайк подписка коммент, спасибо тебе
Планируете ли видео по react native с более продвинутыми технологиями ? P.s видео очень крутое !
поддерживаю!
Спасибо за труд😄.Ты был прав, та еще боль с react native. Видео 6 месяцев, а уже все поменялось при создании приложения. Не получалось запустить на телефоне через expo.
Я решил проблему npx create-expo-app my-app или npx create-expo-app my-app --template дает выбор шаблонов. И запустил npx expo start --tunnel. По-другому никак не смог.
Спасибо, понятноо объясняешь👍
Все круто, после просмотра один вопрос, как это деплоить чтобы получить .apk?
Появилась идея и нужно срочно запилить мобильный MVP проект. Вот и смотрю)
Спасибо за труд)
такая же фигня
В случае если не появляется выбор шаблона при создании проекта, пишем в терминале expo init project-name --template blank или более короткая запись expo init project-name -t blank
Лайк подъехал )
Лайк, не глядя!!!!!!!!!!!
спаасибо большое тебе, жалко что не встретил жто видео когда впервые запускал... столько намучался а ты все щас разжевал
Пишу из 2024. Андроид студио под линуксом запустило реакт нейтив проект, созданный с помощью yarn create expo-app вообще без каких-то плясок с бубном. В эмуляторе все запустилось с первого раза без ошибок. Все очень ровно работает,
От души душевно в душу
Спасибо за ознакомление!!!!!!!!
Archakov красавчик все отлично рассказываешь
Спасибо за замечательное видео.
и сделайте видео что такое fabric react native please
чат, смотреть стоит? проект законченный или как обычно в его стиле как и со стомат. приложением на реактнатвие
А что там с TypeScript и тестированием(написанием тестов)? Слышал, что основной минус Апп на найтив, это нестабильность кода.
А то кроссплатформиность и JS дико подкупает, но чем-то за это придется заплатить, хорошо , если только производительностью.
Можешь пожалуйста следующие видео про PostgreSql сделать?
отличный урок!
Если я пишу на винде в VS Code, то смогу ли я запустить приложение на ios?
Какой же ты нужный
Спасибо за курс, хоть уже пару месяцев изучаю RN, но пару вещей для себя новых открыл). Еще на TypeScript писал бы, цены не было бы))
В реакт нативе у flex-direction дефолтное направление "column" , а не "row" как y флексбокса для вэба.
Спасибо .можно еще такого контента ?
вот мой комментарий, выражающий огромную благодарность и высокой степени уважение!
Потрясающий контент, спасибо!!!
кайф братик
Про недостатки Expo ты прикрепил очень старые статьи. Сейчас экспо другой. И многие недостатки уже исправлены. 90 процентов приложений , которые можно написать на реакт натив, можно написать используя только экспо. A если что, можно и eject сделать и использовать React Native CLI
Спасибо за видос
А по flutter будет такое же видео?
Круто. Для того, чтобы попробовать само то.Вы не станете профи в ReactNative, но на собесе уже можно будет сказать, мол технологию пощупал с большего в курсе.
Добрый день. Дэннис не мог бы ты сделать курс как делать игры на Cocos Creator, там используется язык программирования typescript. Я так, понимаю, ты специалист именно по этому языку. Мне хочется научиться делать игры и выкладывать их на Яндекс Игры.
Дэн, скажи что сейчас более приорететно: css, scss, modules или styled components? Не могу определиться с помощью каких технологий стилизовать. Буду рад если ответит кто-нибудь другой)
Модули предпочтительней, чем SC
Но стоит изучить и то и другое
@@ArchakovBlog Да блин, я не могу уже определиться с помощью какой технологии стилизовать. Одни говорят стилизуй на styled components другие говорят что на модулях лучше. И теперь хз чё делать)
Ну я уже на SC привык
Спасибо!!!
супер, подача топ
Очень крутой и полезный урок
По Курсу я выполнять последовательно, при нажатии npm start нету localhost.
Хотелось пострадать, но к сожалению запустилось со второй попытки на native cli... Обещали же что будет трудно )
Пример const HeaderContainer = styled.View` или const HeaderTitle = styled.Text` при включении import styled from "styled-components/native"; не работает, пустой экран
Есть ролик о том как с ( react mobile app и ( React Native) одно и тоже? ) готовый сайт сделать в виде приложения
Хочется про Flutter в твоем авторстве узнать
v macbooke ne poluchayetsya ustanoviy navigation native
pomogite pojaluysta
У кого такие же проблемы как и у меня с map
items значение по умолчанию не является массивом, вам просто нужно установить пустой массив по умолчанию.
const [items, setItems] = React.useState([]);
Привет! Все ровно, почему-то ничего не отображается, то есть items все еще пустой. Как ты дальше исправил? Не мог бы отправить код useEffect?
Отвеееть пожалуйста
Спасибо, добрый человек
Видео крутое, но когда устанавливаешь какие-то библиотеки то нужно перезапускать проект, это не react-native забагованый, это нормально
А так контент хороший
запиши видос как ты настраиваешь запуск приложения через CLI react-native
node последней версии не работает с expo cli, нужна 12-16 версия
от души дружище
Денис: делает контент, старается.
Субтитры: Привет, ты на канале шлакоблок...))
У меня проблема, Expo cli вообще не работает. Пытаюсь запустить его , выбираю w(web), и он кидает ошибку. Памагите решить.
когда пытаюсь установить библиотеки, всегда ошибки выводит. пишет npm ERR! ERESOLVE unable to resolve dependency tree
Bro sdelai eshe kruche proekty na React Native s TS, Spasibo za etu rabotu. Procvetai. Udachi.
как у вас работает emmet в обратных кавычках?