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 - https://docs.expo.dev/
Офф. документация React Native - https://reactnative.dev/
Скачать Android Studio - https://developer.android.com/studio
MockAPI - https://mockapi.io/
JSON с статьями - https://trycode.pw/c/KFKNW

💊 Плюсы/минусы Expo CLI:
https://qna.habr.com/q/704511
https://habr.com/ru/post/480258/

📚 Исходник приложения: https://t.me/archakov_im/529

🔗 Следите за обновлениями и информацией в:
— Telegram-канале: https://t.me/archakov_im
— VK: https://vk.com/archakov_im
— Личном блоге: https://archakov.im
— GitHub: https://github.com/Archakov06
— Моё резюме: https://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 #реакт #разработка