Мобильная разработка

Учебник React Native для начинающих

23 урока · 6 разделов · бесплатно, без регистрации

Начать с первого урока

React Native позволяет писать настоящие нативные мобильные приложения для iOS и Android на одном языке — JavaScript и React. Этот курс — первый в разделе «Мобильная разработка» — рассчитан на тех, кто знаком с React или хотя бы с основами JavaScript. Вы начнёте с самого простого старта через Expo, разберёте базовые компоненты (View вместо div, Text вместо p) и стилизацию через StyleSheet, освоите Flexbox с его мобильной спецификой, состояние и списки через FlatList. Дальше — навигация на React Navigation, доступ к возможностям устройства (камера, геолокация, хранилище, сеть) и финальная практика: мини-проект, отладка и публикация в App Store и Google Play через Expo EAS. На каждом шаге подчёркиваются отличия от веб-разработки.

Курс «React Native» состоит из 6 разделов и 23 уроков: Введение в React Native, Базовые компоненты и стили, Интерактивность и состояние, Навигация, Доступ к возможностям устройства и Практика и публикация. Уроки идут по порядку — от основ к более сложным темам, в каждом есть объяснение с примерами, а в конце — вопросы для самопроверки. К урокам привязаны задачи с автоматической проверкой: прочитали тему — сразу закрепили её кодом.

Программа курса

  1. 1 Введение в React Native

    1. Что такое React Native

      React Native — нативные мобильные приложения на JavaScript и React: один код под iOS и Android, реальные нативные компоненты, а не веб-страница.

    2. RN против нативной и гибридной разработки

      Сравниваем React Native с чистой нативной разработкой (Swift/Kotlin) и гибридными решениями (WebView): производительность, скорость, когда что выбирать.

    3. Настройка окружения и первый проект на Expo

      Создаём первое приложение через Expo и npx create-expo-app: что такое Expo, зачем он нужен и почему это самый простой старт в React Native.

    4. Запуск на устройстве и структура проекта

      Как запустить приложение на телефоне через Expo Go и на эмуляторе, что лежит в папках проекта и за что отвечают App.js, app.json и package.json.

  2. 2 Базовые компоненты и стили

    1. Базовые компоненты: View, Text, Image

      Главные строительные блоки React Native: View вместо div, Text для любого текста, Image для картинок и чем они отличаются от HTML-тегов.

    2. Стилизация через StyleSheet

      Как стилизовать компоненты в React Native: объекты стилей вместо CSS, camelCase-свойства, StyleSheet.create и чем это отличается от веба.

    3. Flexbox в React Native

      Раскладка через Flexbox в React Native: главное отличие от веба — flexDirection по умолчанию column, а также justifyContent, alignItems и flex.

    4. Адаптация под размеры экрана

      Как сделать интерфейс адаптивным в React Native: Dimensions для размеров экрана, проценты, SafeAreaView и гибкие раскладки вместо фиксированных пикселей.

  3. 3 Интерактивность и состояние

    1. Обработка касаний: Pressable, кнопки

      Как реагировать на нажатия в React Native: Button, TouchableOpacity и универсальный Pressable вместо onClick — обработка касаний на сенсорном экране.

    2. Ввод текста: TextInput

      Поле ввода TextInput в React Native: управляемый компонент через value и onChangeText, клавиатуры, плейсхолдеры и отличия от HTML input.

    3. Состояние и эффекты: useState и useEffect

      Хуки useState и useEffect в React Native работают как в React: хранение состояния, перерисовка по setState и запуск побочных эффектов через useEffect.

    4. Списки: FlatList вместо map

      Почему в React Native для списков используют FlatList, а не map: keyExtractor, renderItem и оптимизация рендеринга длинных списков на мобильном.

  4. 4 Навигация

    1. Зачем навигация и установка React Navigation

      Почему в мобильном приложении нужна навигация между экранами, что такое React Navigation и как обернуть приложение в NavigationContainer.

    2. Стековая навигация и передача параметров

      Стек экранов в React Navigation: createNativeStackNavigator, переход через navigation.navigate, передача параметров и чтение их через route.params.

    3. Вкладки: Bottom Tabs

      Нижние вкладки в React Navigation: createBottomTabNavigator, переключение между основными разделами приложения и настройка иконок и подписей.

    4. Заголовки и опции экрана

      Настройка шапки экрана в React Navigation: title, цвета header, кнопки в шапке, скрытие заголовка и динамические опции через navigation.setOptions.

  5. 5 Доступ к возможностям устройства

    1. Разрешения и API устройства через Expo

      Как приложение получает доступ к камере, геолокации и другим возможностям устройства: разрешения (permissions) и обзор Expo-модулей с примерами.

    2. Локальное хранилище: AsyncStorage

      Хранение данных на устройстве через AsyncStorage: сохранение между запусками приложения, асинхронные методы setItem/getItem и сериализация в JSON.

    3. Работа с сетью: загрузка данных через fetch

      Запросы к API в React Native через fetch: загрузка данных в useEffect, индикатор загрузки ActivityIndicator и обработка состояний загрузки и ошибки.

  6. 6 Практика и публикация

    1. Организация экранов и переиспользуемые компоненты

      Как структурировать растущее RN-приложение: папки screens и components, выделение переиспользуемых компонентов и передача данных через пропсы.

    2. Мини-проект: список задач (To-Do)

      Собираем учебное приложение список задач: состояние через useState, добавление через TextInput, отображение FlatList и удаление — всё вместе.

    3. Отладка приложения

      Базовая отладка React Native: console.log и меню разработчика, перезагрузка приложения, частые ошибки и инструменты React DevTools кратко.

    4. Сборка и публикация: EAS, App Store и Google Play

      Как выпустить React Native приложение: сборка через Expo EAS Build, публикация в App Store и Google Play и обзор дальнейшего пути обучения.