Что такое React Native? Полное руководство по кроссплатформенному программированию мобильных приложений

В этом разделе вы получите наиболее полный обзор React Native: от определения, происхождения, основных принципов работы до его очевидных преимуществ и недостатков. Вы поймёте, почему React Native стал лучшим выбором для разработки мобильных приложений и чем он отличается от других популярных технологий.

Обзор: от ReactJS к React Native

React Native — это фреймворк с открытым исходным кодом, разработанный Facebook (теперь Meta), который позволяет разработчикам создавать мобильные приложения для iOS и Android на основе единой кодовой базы. Основным языком программирования в React Native является JavaScript, а также синтаксис JSX (JavaScript XML) — расширенный синтаксис, позволяющий писать код, похожий на HTML, внутри JavaScript.

Корни React Native восходят к его «родственному брату» ReactJS, библиотеке JavaScript для создания пользовательских интерфейсов (UI) для веб-приложений. Осознавая успех и эффективность компонентной модели разработки ReactJS, Facebook стремился применить ту же философию к разработке мобильных приложений. Результатом стал React Native, привносящий мощь React в мобильный мир. Это означает, что если вы уже знакомы с ReactJS, переход на программирование на React Native будет гораздо проще.

Основной принцип работы: «Учись один раз, пиши где угодно»

Знаменитый слоган React Native — «Учись один раз, пиши где угодно». Это в точности отражает принцип работы. Вместо того, чтобы компилировать JavaScript-код в нативный код для каждой платформы (как некоторые другие фреймворки), React Native работает по принципу «моста».

Во время работы приложения код JavaScript выполняется в отдельном потоке (JS-поток). Когда требуется отрисовать пользовательский интерфейс или получить доступ к функциям устройства (например, камере, GPS), код JavaScript отправляет асинхронные сообщения через мост (Bridge) в нативный поток (Native Thread). Нативный поток интерпретирует эти сообщения и использует нативные компоненты пользовательского интерфейса операционной системы (например, UIView на iOS, View на Android) для их отображения на экране.

Этот механизм обеспечивает два основных преимущества:

1. Удобный пользовательский опыт: поскольку интерфейс визуализируется с использованием настоящих собственных компонентов, пользователи будут чувствовать себя «реальными» и знакомыми, как будто они используют приложение, написанное на родном языке машины.

2. Высокая производительность: задачи с большим объемом логики обрабатываются в потоке JS, не влияя на собственный поток пользовательского интерфейса, что делает приложение более отзывчивым.

Сравнение React Native с другими технологиями

Чтобы лучше понять позицию React Native, важно сравнить его с другими технологиями.

• React Native против ReactJS: это самый часто задаваемый вопрос. ReactJS — это библиотека для создания пользовательских веб-интерфейсов с использованием виртуальных HTML-тегов, таких как

  , . Между тем, React Native используется для создания интерфейсов мобильных приложений с использованием компонентов, сопоставленных с нативным пользовательским интерфейсом, таким как , . Оба используют одинаковый синтаксис JSX, концепцию компонентов, свойств и состояния. Таким образом, можно сказать, что ReactJS и React Native — два брата из одного дома, но служат разным целям.

• React Native против Flutter: Flutter — самый прямой конкурент React Native, разработанный Google.

  • Язык: React Native использует JavaScript/TypeScript, а Flutter использует Dart.

  • Архитектура: React Native использует Bridge для взаимодействия с нативной платформой. Flutter отрисовывает весь свой интерфейс с помощью графического движка Skia, не используя нативные компоненты пользовательского интерфейса операционной системы. Это обеспечивает Flutter очень высокую графическую производительность и абсолютно единообразный интерфейс на всех устройствах, но иногда может создавать «странное» ощущение по сравнению с нативными приложениями.

• React Native и нативное программирование (Swift/Kotlin):

  • Производительность: Нативный подход к программированию всегда наиболее эффективен, поскольку код пишется и оптимизируется непосредственно для операционной системы. React Native, несмотря на свою высокую эффективность, имеет промежуточный уровень, называемый Bridge, поэтому он может работать медленнее при выполнении чрезвычайно сложных или графически требовательных задач.

  • Время и стоимость: это выдающееся преимущество React Native. Вместо того, чтобы создавать и поддерживать две отдельные команды для iOS и Android, вам понадобится только одна команда JavaScript для разработки под обе платформы, что значительно экономит время и деньги.

Путь обучения React Native от базового до продвинутого для начинающих

Вы получите подробную пошаговую дорожную карту для освоения React Native. Этот научно разработанный путь обучения React Native начинается с базовых знаний и заканчивается уверенной разработкой, управлением состоянием, оптимизацией и выпуском готового приложения на рынок.

Этап 1: Основы Javascript и ReactJS для освоения

Это самый важный шаг, который многие часто упускают из виду. React Native — это не отдельная технология, а нечто большее, чем JavaScript и React. Если вы попытаетесь изучить React Native без прочной базы, вам придётся нелегко.

• JavaScript (ES6+): Вам необходимо иметь четкое представление о современных концепциях JavaScript, включая:

  • Переменные и область действия: let , const , var .

  • Типы данных: Массив, Объект.

  • Функция: Стрелочные функции ( => ).

  • Асинхронное программирование: Promises, async/await.

  • Операторы деструктуризации, распространения/отдыха.

  • Модули: импорт, экспорт.

• ReactJS: После освоения JavaScript вам необходимо изучить основные концепции React. Вот наиболее эффективная схема изучения React:

  • JSX: Синтаксис для написания пользовательского интерфейса.

  • Компоненты: функциональные компоненты и компоненты классов (в настоящее время более популярны функциональные компоненты).

  • Реквизит: Как передать данные из родительского компонента в дочерний.

  • Состояние: как управлять внутренним состоянием компонента.

  • Методы жизненного цикла (в компонентах класса) и хуки React (в функциональных компонентах), такие как useState, useEffect, useContext.

Этап 2: Начало работы с React Native — среда и инструменты

Как только у вас появится основа, вы сможете начать погружаться в мир React Native.

• Понимание сред разработки: изучите различия между двумя основными подходами:

  • React Native CLI (интерфейс командной строки): обеспечивает полный контроль над проектом, позволяя писать собственный нативный код. Подходит для сложных проектов.

  • Expo: набор инструментов и сервисов, созданных на основе React Native, которые упрощают разработку. Не требуется устанавливать Android Studio или Xcode. Отлично подходит для новичков и проектов, не требующих глубокой интеграции с нативным кодом.

• Настройка среды: В зависимости от вашего выбора вручную настройте среду, следуя подробным инструкциям, и создайте свой первый проект.

Этап 3: Создание интерфейса и взаимодействия с пользователем

На этом этапе вы научитесь воплощать свои идеи в реальные интерфейсы на вашем телефоне.

• Основные компоненты: ознакомьтесь с самыми базовыми компонентами, такими как , , , , .

• Стилизация: узнайте, как стилизовать компоненты с помощью API StyleSheet, аналогичного CSS, но с синтаксисом JavaScript. Освойте Flexbox для создания гибких и адаптивных макетов для экранов разных размеров.

• Списки: узнайте, как эффективно отображать списки данных с помощью и .

• Навигация: это неотъемлемая часть любого приложения. Узнайте, как использовать самую популярную библиотеку React Navigation для создания навигационных потоков между экранами, включая Stack Navigator, Tab Navigator (createMaterialTopTabNavigator) и Drawer Navigator.

Этап 4: Управление данными и состоянием приложения

По мере усложнения приложений управление состоянием и данными становится все более сложной задачей.

• Управление государством: изучите глобальные решения по управлению государством, такие как:

  • React Context: встроенное решение React, подходящее для небольших и средних приложений.

  • Redux / Redux Toolkit: самая популярная и мощная библиотека управления состоянием, подходящая для больших приложений.

  • Другие решения, такие как MobX, Zustand.

• Работа с API: узнайте, как вызывать API с сервера, используя API-интерфейс fetch или библиотеки, такие как axios, для извлечения и отправки данных.

• Локальное хранилище: освойте хранение данных на пользовательских устройствах с помощью AsyncStorage — простого и эффективного решения для хранения пар «ключ-значение».

Этап 5: Оптимизация и развертывание приложения

После того как вы создали приложение, последний шаг — убедиться, что оно работает без сбоев, и передать его в руки пользователей.

• Производительность: изучите методы оптимизации, такие как useMemo, useCallback, React.memo, чтобы избежать ненужной повторной отрисовки, оптимизируйте производительность FlatList и отлаживайте проблемы производительности с помощью Flipper.

• Развертывание: изучите процесс создания приложения в формате .apk (Android) и .ipa (iOS), а также шаги по размещению вашего приложения в Google Play Store и Apple App Store.

Руководство по настройке среды и созданию первого проекта React Native

Краткое содержание: Этот раздел представляет собой подробное практическое руководство, которое поможет вам настроить собственную среду разработки и успешно запустить свой первый проект «Hello World». Мы подробно проанализируем два популярных метода: Expo и React Native CLI, чтобы помочь вам сделать оптимальный выбор и начать свой путь в программировании.

Выбор среды: React Native CLI или Expo — что выбрать?

Прежде чем начать, вам необходимо принять важное решение: что использовать: Expo или React Native CLI. Это два основных пути разработки приложений React Native, каждый из которых имеет свои плюсы и минусы.

• Expo (рекомендуется для новичков):

  • Преимущество:

    • Быстрая настройка: вам нужно установить только Node.js и Expo CLI. Не нужно устанавливать Android Studio или Xcode (который очень большой).

    • Простота разработки: вы можете запустить приложение прямо на реальном телефоне, отсканировав QR-код через приложение Expo Go.

    • Встроенные API: Expo предоставляет набор оптимизированных и протестированных библиотек (SDK), упрощающих доступ к камерам, датчикам, push-уведомлениям...

  • Недостатки:

    • Ограничения: невозможно использовать библиотеки React Native, требующие нативной компоновки и не входящие в Expo SDK. Хотя для Expo теперь доступен клиент разработки Expo, который может быть полезен, определённые ограничения всё ещё существуют.

    • Больший размер приложения: приложения, созданные с помощью Expo, часто имеют немного больший начальный размер.

• React Native CLI (для профессиональных и сложных проектов):

  • Преимущество:

    • Максимальная гибкость: вы имеете полный контроль над проектом, можете интегрировать любую нативную библиотеку и писать собственные нативные модули при необходимости.

    • Оптимизируйте размер приложения: вы упаковываете только самое необходимое, делая конечное приложение легче.

  • Недостатки:

    • Сложная настройка: требуется установка и настройка Android Studio (для Android) и Xcode (для iOS), что является трудоемким и подверженным ошибкам процессом.

    • Зависит от виртуальной машины/реального устройства: необходимо запустить виртуальную машину (эмулятор/симулятор) или подключить реальное устройство с помощью кабеля для разработки.

Вывод: Если вы новичок в React Native или работаете над несложным проектом, начните с Expo. Это поможет вам сосредоточиться на изучении логики React Native, не отвлекаясь на вопросы настройки среды.

Подробные инструкции по Expo (Expo Go, Expo Dev Client)

Запрос:

1. Установить Node.js (LTS-версию).

2. Установите приложение Expo Go на свой телефон Android или iOS.

Шаги, которым необходимо следовать:

1. Установите Expo CLI: откройте Терминал (в macOS/Linux) или Командную строку/PowerShell (в Windows) и выполните следующую команду:

   npm install -g expo-cli

2. Создать новый проект:

   expo init MyFirstApp

   При появлении запроса выберите шаблон «пустой» (для пустого проекта) или «вкладки» (для проекта с панелью навигации по вкладкам). Затем перейдите в папку проекта:

   cd MyFirstApp

3. Запустить проект:

   запуск npm

   Эта команда запустит Metro Bundler и отобразит QR-код в терминале.

4. Откройте приложение на телефоне: откройте приложение Expo Go на телефоне, выберите «Сканировать QR-код» и отсканируйте QR-код в терминале. Ваше приложение загрузится и запустится на вашем телефоне. Всё очень просто!

Подробные инструкции по использованию React Native CLI (Android Studio, Xcode)

Этот процесс более сложен и требует настройки для каждой операционной системы.

Общие требования:

1. Установить Node.js (LTS-версию).

2. Установите Watchman (рекомендуется для macOS).

Установка для Android (на Windows/macOS/Linux):

1. Установить комплект разработки Java (JDK).

2. Установить Android Studio.

3. В Android Studio перейдите в SDK Manager и установите необходимую платформу Android SDK.

4. Настройте переменную среды ANDROID_HOME.

5. Создайте и запустите виртуальную машину Android (AVD) из Android Studio.

Установка для iOS (только macOS):

1. Установите Xcode из App Store.

2. Установите инструменты командной строки в Xcode.

3. Установите CocoaPods.

Создайте и запустите проект:

1. Создать новый проект:

   npx react-native init MyFirstCliApp

2. Работает на Android:

   Убедитесь, что виртуальная машина Android запущена или подключено физическое устройство. Затем выполните команду:

   npx react-native run-android

3. Работает на iOS (только macOS):

   Убедитесь, что ваша виртуальная машина iOS запущена. Затем выполните команду:

   npx react-native run-ios

Первая сборка может занять некоторое время. После её успешного завершения вы увидите стандартное приложение React Native, работающее в виртуальной машине.

Основные концепции React Native, которые вы должны знать

Краткое содержание: В этом разделе мы подробно рассмотрим основные элементы каждого приложения React Native. Вы поймёте природу компонентов, свойств и состояний, как они работают вместе, как эффективно оформить интерфейс, а также как обрабатывать пользовательские события и сложную навигацию в приложении.

Компоненты, свойства и состояние: основа каждого приложения

Как и в ReactJS, всё в React Native является компонентом. Компонент — это самостоятельный, многоразовый элемент пользовательского интерфейса. Каждый экран, каждую кнопку, каждое поле ввода можно рассматривать как компонент.

• Компоненты: функции JavaScript (функциональные компоненты) или классы (компоненты классов), которые возвращают элементы React для описания того, как должен выглядеть интерфейс.

• Props (Свойства): способ передачи данных из родительского компонента в дочерний. Props — это объекты, доступные только для чтения, то есть дочерний компонент не может изменять полученные им свойства. В приведённом выше примере title — это свойство.

• Состояние: данные, которыми компонент управляет сам и которые могут изменяться со временем. При изменении состояния компонент автоматически перерисовывается для обновления интерфейса. В функциональных компонентах для управления состоянием используется хук useState.

Стиль: создание красивых и гибких интерфейсов.

В React Native CSS не используется. Вместо этого стили задаются с помощью JavaScript. Наиболее распространённый подход — использовать StyleSheet.create для определения стилей и их применения к свойству style компонента.

• StyleSheet: помогает оптимизировать производительность и создавать более чистый код.

• Flexbox: это основной движок вёрстки в React Native. Если вы знакомы с Flexbox в вебе, то почувствуете себя как дома. Он позволяет гибко компоновать элементы и легко создавать сложные интерфейсы, адаптирующиеся к экранам разных размеров.

Обработка пользовательских событий (ввод текста, касания, BackHandler)

Мобильные приложения должны взаимодействовать с пользователями. React Native предоставляет мощную систему событий.

• Касания: Такие компоненты, как TouchableOpacity, TouchableHighlight, Pressable, позволяют обрабатывать события прикосновения, длительного нажатия и т. д. с помощью таких свойств, как onPress, onLongPress.

• Ввод текста: компонент позволяет пользователю вводить текст. Свойство onChangeText используется для перехвата события изменения текста и соответствующего обновления состояния.

• BackHandler: это API, специфичный для Android, позволяющий отслеживать и настраивать поведение при нажатии пользователем физической кнопки «Назад». Его можно использовать для отображения диалогового окна подтверждения перед выходом из приложения или для возврата к предыдущему экрану в сложной последовательности действий.

Навигация в приложении с помощью React Navigation

Большинство приложений имеют более одного экрана. Управление переходом между экранами называется навигацией. Самая популярная и рекомендуемая библиотека — React Navigation.

• NavigationContainer: корневой компонент, который должен охватывать всю структуру навигации приложения. Он управляет деревом навигации и содержит состояние навигации.

• Навигаторы: React Navigation предоставляет различные типы навигаторов для создания различных потоков:

  • Stack Navigator: экраны располагаются друг над другом. При переходе на новый экран он помещается сверху. При возврате назад он удаляется. Это наиболее распространённый тип.

  • Навигатор вкладок: отображает панель вкладок в нижней или верхней части экрана, позволяя переключаться между различными экранами. createMaterialTopTabNavigator — пример, который создает панель вкладок в верхней части экрана, обычно встречающуюся в приложениях Android.

  • Drawer Navigator: отображает меню, выдвигающееся из края экрана.

Объединение этих навигаторов позволяет создавать сложные навигационные потоки, отвечающие требованиям большинства современных приложений.

Работа с API и расширенными функциями

Узнайте, как расширить возможности вашего приложения. В этом разделе вы узнаете, как эффективно хранить данные локально с помощью AsyncStorage, взаимодействовать с оборудованием устройств через библиотеки, такие как BLEManager, создавать сложные функции, такие как интерфейсы чата, и интегрировать внешние сервисы, такие как платёжный шлюз VNPAY.

Храните данные локально с помощью AsyncStorage

Если вам нужно хранить простые данные и сохранять их даже после закрытия приложения пользователем (например, токены входа, настройки пользователя, состояние приложения), AsyncStorage — это то, что вам нужно. Это незашифрованная асинхронная система хранения данных типа «ключ-значение», работающая как на iOS, так и на Android.

Он работает как localStorage в Интернете, но полностью асинхронен, то есть операции чтения/записи возвращают Promise.

• Параметр:

  npm install @react-native-async-storage/async-storage

• Пример использования:

  import AsyncStorage from '@react-native-async-storage/async-storage' ; // Сохранение данных const storeData = async(value) => { try { await AsyncStorage.setItem( '@storage_Key' , value); } catch (e) { // ошибка сохранения } }; // Чтение данных const getData = async() => { try { const value = await AsyncStorage.getItem( '@storage_Key' ); if (value !== null ) { // ранее сохраненное значение } } catch (e) { // ошибка чтения значения } };

Интеграция оборудования и системного API (BLEManager, камера, геолокация)

Настоящая сила мобильных приложений заключается в их способности взаимодействовать с оборудованием и службами операционной системы. React Native, благодаря богатой экосистеме библиотек, позволяет легко это делать.

• Bluetooth Low Energy (BLE): для работы с устройствами BLE (например, умными часами и медицинскими приборами) можно использовать библиотеки, такие как react-native-ble-manager (BLEManager). Эта библиотека предоставляет функции для сканирования, подключения, чтения и записи данных на устройства BLE.

• Камера и фотобиблиотека: такие библиотеки, как react-native-vision-camera или react-native-image-picker, позволяют получать доступ к камере устройства для съемки фотографий, записи видео или выбора фотографий/видео из библиотеки пользователя.

• Местоположение (геолокация): библиотека react-native-geolocation-service обеспечивает доступ к GPS-местоположению устройства, что полезно для приложений картографирования, доставки или регистрации.

Создавайте чат-интерфейсы с помощью GiftedChat

Создание интерфейса чата с нуля может оказаться непростой задачей. К счастью, сообщество создало GiftedChat — мощную и простую в использовании библиотеку, которая поможет вам создать полнофункциональный интерфейс чата всего за несколько минут.

GiftedChat предоставляет компоненты для:

• Пузырь чата

• Показать аватар

• Автоматическое изменение размера поля ввода

• Отправляйте фотографии, видео

• функция «загрузить больше сообщений»

• ...и многое другое.

Вам просто нужно предоставить данные сообщения в определенном формате, а GiftedChat позаботится обо всем остальном.

Интеграция платежного шлюза (пример: VNPAY)

Интеграция платежей — распространённое требование для приложений электронной коммерции и сервисов. Для интеграции платёжного шлюза, такого как VNPAY, в React Native обычно требуется выполнить следующие шаги:

1. Установка библиотеки: Найдите и установите библиотеку поддержки VNPAY для React Native (если доступно) или используйте WebView для отображения страницы оплаты VNPAY.

2. Создание платежного запроса: Из приложения вы отправляете информацию о заказе (сумма, код заказа,...) на свой сервер.

3. Сервер генерирует URL-адрес платежа: Ваш сервер будет использовать SDK VNPAY для генерации уникального URL-адреса платежа и возврата его в приложение.

4. Показать страницу оплаты: приложение React Native открывает этот URL в WebView. Пользователь вводит платежную информацию в интерфейсе VNPAY.

5. Обработка результата: После завершения оплаты VNPAY перенаправит пользователя на настроенный вами URL-адрес возврата. Приложение отслеживает изменение URL-адреса в WebView, чтобы определить, была ли транзакция успешной или нет, и соответствующим образом обновляет интерфейс.

Завоевывая работодателей: распространённые вопросы на собеседовании по React Native

Получите необходимые знания и уверенность перед собеседованием. Эта подборка вопросов для собеседования по React Native чётко разделена на категории: от фундаментальных знаний и базовой теории до практических ситуаций и углубленной оптимизации производительности, что поможет вам максимально полно подготовиться.

Группа вопросов по базовым знаниям и теории

Эти вопросы позволят проверить, насколько хорошо вы понимаете основные концепции.

1. Что такое React Native? Как он работает?

   • Предлагаемый ответ: Подчеркните, что это кроссплатформенный фреймворк, использующий JavaScript и React. Объясните механизм Bridge, разницу между JS Thread и Native Thread.

2. Сравнение React Native с Flutter и нативным программированием.

   • Предлагаемый ответ: укажите язык (JS или Dart), архитектуру (Bridge или Skia), производительность и плюсы/минусы с точки зрения времени/стоимости разработки.

3. В чем разница между ReactJS и React Native?

   • Предлагаемый ответ: сосредоточьтесь на предполагаемом использовании (веб или мобильное устройство) и примитивных компонентах (div / span или View / Text).

4. Чем отличаются Props и State в React Native?

   • Предлагаемый ответ: Свойства используются для передачи данных от родительского элемента к дочернему и неизменяемы. Состояние — это внутренние данные компонента, которые могут изменяться, и их изменение приводит к повторной отрисовке.

5. Как работает Flexbox в React Native? Назовите некоторые важные свойства.

   • Предлагаемый ответ: Объясните, что Flexbox — это основной механизм макета. Важные свойства: flexDirection (по умолчанию — column ), justifyContent , alignItems , flex .

6. В чём разница между FlatList и ScrollView? Когда использовать FlatList?

   • Предлагаемый ответ: ScrollView отображает все дочерние элементы одновременно, что подходит для коротких списков. FlatList использует механизм «ленивой загрузки» (отображает только элементы, видимые на экране), что помогает оптимизировать использование памяти и производительность для длинных списков.

Группа вопросов по управлению ситуациями и практическому опыту

Эти вопросы оценивают ваши способности решать проблемы и практический опыт работы.

1. Что бы вы выбрали для нового проекта: Expo или React Native CLI? Почему?

   • Предлагаемый ответ: Анализируйте на основе требований проекта. Если проект должен быть быстрым, простым и не требовать значительного вмешательства со стороны нативных библиотек, выбирайте Expo. Если проект сложный, требует высокой производительности и интегрирует множество нативных библиотек, выбирайте CLI.

2. Как управлять состоянием большого приложения React Native?

   • Вариант ответа: упомяните такие решения, как Redux (Redux Toolkit), MobX или React Context. Объясните плюсы и минусы каждого из них и почему вы выбрали бы именно это решение для крупного проекта.

3. С какими проблемами производительности вы столкнулись в React Native и как вы их решили?

   • Предлагаемый ответ: Приведите конкретные примеры, например, задержка длинных списков (решается оптимизацией FlatList ), ненужная повторная отрисовка (решается useMemo , useCallback , React.memo ) или перегрузка Bridge.

4. Как работать с разными версиями интерфейса для iOS и Android?

   • Предлагаемый ответ: обратитесь к использованию API платформы ( Platform.OS === 'ios' ), созданию отдельных файлов (например, MyComponent.ios.js и MyComponent.android.js ) или использованию библиотек пользовательского интерфейса, которые предоставляют компоненты для обеих платформ.

5. Опишите процесс отладки вашего приложения React Native.

   • Предлагаемый ответ: упомяните такие инструменты, как Chrome DevTools, React Native Debugger, Flipper, а также то, как вы используете console.log для мониторинга потока данных.

Вопросы по оптимизации производительности и архитектуре приложений

Это вопросы для старших должностей, проверяющие глубокие знания.

1. Что такое Bridge в React Native и каковы его ограничения? Как новая архитектура (JSI — JavaScript Interface) улучшает это?

   • Предлагаемый ответ: Объясните, что Bridge работает асинхронно и использует сериализацию JSON, что может создавать узкие места. JSI позволяет JavaScript напрямую синхронно вызывать собственные функции, сокращая задержку и значительно повышая производительность.

2. Что такое Hermes? Зачем нам его использовать?

   • Предлагаемый ответ: Hermes — это JavaScript-движок, оптимизированный для React Native. Он помогает сократить время запуска приложения, уменьшить потребление памяти и размер APK-файла.

3. Для чего используются useMemo и useCallback? Когда их лучше использовать?

   • Предлагаемый ответ: useMemo используется для «запоминания» значения сложного вычисления. useCallback используется для «запоминания» функции. Оба метода помогают избежать ненужного пересчёта или создания функции заново при каждом повторном рендеринге, тем самым оптимизируя производительность, особенно при передаче дочерним компонентам, обёрнутым в React.memo .

4. Возможно ли разделение кода в React Native?

   • Предлагаемый ответ: В отличие от веб-приложений, традиционное разделение кода не применяется напрямую. Однако такие приёмы, как «inline require», можно использовать для отсрочки загрузки модулей до тех пор, пока они действительно не понадобятся, что может ускорить запуск.

Качественные курсы и документация по React Native

Чтобы помочь вам стать профессиональным разработчиком React Native, в этом разделе представлен тщательно подобранный список авторитетных ресурсов и авторитетных сообществ, где вы можете учиться и обмениваться опытом, а также рекомендации по качественным онлайн-курсам по React Native, включая как бесплатные, так и платные варианты.

Авторитетные ресурсы и авторитетные сообщества

Это те места, которые вам следует посетить в первую очередь, чтобы получить наиболее точные и актуальные знания.

• Официальная документация React Native: это оригинальный и самый надёжный источник документации. Все концепции, API и инструкции по установке подробны и всегда актуальны. Возьмите за правило читать оригинальную документацию — это важный навык для хорошего программиста.

• Страница документации Expo: Если вы решите пойти по пути Expo, это незаменимый помощник. Здесь представлена подробная документация по Expo SDK, инструментам командной строки и рабочим процессам Expo.

• React Native GitHub: подписка на официальный репозиторий исходного кода на GitHub поможет вам оставаться в курсе предстоящих изменений, обсуждаемых проблем и вкладов сообщества.

• Сообщество Viblo: Viblo — одно из крупнейших сообществ по обмену знаниями в области ИТ во Вьетнаме. Здесь вы найдёте множество статей, обучающих материалов по React Native и подробный анализ React Native от опытных программистов.

• Зарубежные технологические блоги: на таких сайтах, как Dev.to, Medium, LogRocket, регулярно публикуются качественные статьи о новых методах, библиотеках и реальных примерах использования React Native.

Рекомендуемые онлайн-курсы React Native

Если вы предпочитаете структурированное обучение с использованием видеоуроков, онлайн-курсы — отличный вариант.

• Бесплатный курс:

  • Канал YouTube «The Net Ninja»: предоставляет серию обучающих программ по React Native, которые интуитивно понятны и подойдут даже новичкам.

  • Канал YouTube «Code with Mosh»: у Mosh Hamedani есть высококачественные обучающие видео по основам React Native.

  • Платформа F8 (Fullstack.edu.vn): предоставляет бесплатные курсы программирования на вьетнамском языке, включая ReactJS и React Native, со структурированной дорожной картой и мощной поддержкой сообщества.

• Платные курсы (высокого качества):

  • Курсы на Udemy: На этой платформе представлено множество курсов по React Native, от базовых до продвинутых, от известных преподавателей, таких как Стивен Грайдер и Максимилиан Шварцмюллер. Эти курсы, как правило, комплексные, включают множество реальных проектов и регулярно обновляются. Воспользуйтесь скидками, чтобы приобрести курс по разумной цене.

  • Платформы для углубленного изучения, такие как Frontend Masters: предлагают углублённые курсы по продвинутым аспектам React и React Native, которые ведут ведущие эксперты отрасли. Отлично подходит, если у вас есть прочная база знаний и вы хотите улучшить свои навыки.