Что такое React Native и чем он отличается от React?

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

Что такое React?

React (или React.js) — это JavaScript-библиотека для построения интерфейсов веб-приложений. Она работает в браузере и используется для создания одностраничных приложений (SPA), где данные динамически обновляются без полной перезагрузки страницы.

Основные характеристики React:

  • Работает в браузере.

  • Использует виртуальный DOM для эффективной перерисовки компонентов.

  • Поддерживает JSX — расширение синтаксиса JavaScript, позволяющее писать HTML-подобный код в JS-файлах.

  • Не привязан к какому-либо фреймворку — можно использовать с Redux, Next.js, Vue (в гибридных проектах), jQuery и т.д.

  • Основная цель — удобная, модульная разработка пользовательских интерфейсов для веба.

Пример React-компонента:

function Welcome(props) {
return <h1>Привет, {props.name}</h1>;
}

Что такое React Native?

React Native — это фреймворк для кроссплатформенной разработки мобильных приложений, использующий JavaScript и React-подобную архитектуру. Он позволяет создавать нативные приложения для iOS и Android, не используя Java/Kotlin или Swift/Objective-C напрямую.

Как это работает:

React Native переводит JSX и React-компоненты не в HTML, как это делает React, а в нативные компоненты платформы (View, Text, Image и др.), которые соответствуют их аналогам в Android и iOS. Для этого используется специальный "bridge" (мост) — механизм, который позволяет JavaScript-коду взаимодействовать с нативными модулями.

Ключевые отличия между React и React Native:

Характеристика React (React.js) React Native
Область применения Веб-приложения Мобильные приложения (Android, iOS)
--- --- ---
Рендеринг HTML, DOM в браузере Нативные UI-компоненты мобильных платформ
--- --- ---
Язык JavaScript + JSX JavaScript + JSX
--- --- ---
Разметка Использует HTML-теги (div, h1, p и т.д.) Использует собственные компоненты (View, Text)
--- --- ---
CSS Подключается напрямую, через классы или модули Использует встроенные JavaScript-стили (StyleSheet)
--- --- ---
Доступ к API Через браузерные API (fetch, DOM, localStorage и т.д.) Через нативные модули (Camera, Geolocation и др.)
--- --- ---
Навигация React Router или другие SPA-решения React Navigation, React Native Navigation и др.
--- --- ---
Сборка проекта Использует Webpack, Babel (или Next.js, Vite) Использует Metro bundler, Gradle, Xcode
--- --- ---
Деплой На веб-сервер В App Store и Google Play
--- --- ---

Общие черты

Хотя React и React Native предназначены для разных платформ, они имеют много общих черт:

  1. Компонентный подход — UI строится из маленьких переиспользуемых компонентов.

  2. JSX-синтаксис — оба используют JSX для описания UI.

  3. Состояние и пропсы (props, state) — одинаковый способ передачи данных и управления изменениями.

  4. Hooks (useState, useEffect и др.) — React Native поддерживает те же хуки, что и React.

  5. Контекст (Context API) — единая система глобального состояния.

  6. Менеджеры состояния — Redux, MobX, Zustand и другие могут использоваться в обоих.

Отличия в UI-компонентах

React работает с обычными HTML-тегами: <div>, <span>, <input>, <form> и так далее.

React Native же не знает, что такое HTML. Он использует:

  • <View> — аналог <div>

  • <Text> — аналог <p>, <h1> и т.д.

  • <Image> — аналог <img>

  • <TextInput> — аналог <input type="text">

  • <ScrollView> — для прокрутки, аналог <div> с overflow

  • <TouchableOpacity>, <Pressable> — для обработки нажатий

Каждый такой компонент трансформируется в нативный UI-элемент Android или iOS.

Стилизация

В React стили применяются через CSS-файлы (или SCSS, CSS Modules, Styled Components и т.д.).

В React Native стили описываются объектами JavaScript:

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Навигация и маршрутизация

  • React (веб) — использует react-router-dom для навигации между страницами.

  • React Native — навигация осуществляется через библиотеки react-navigation, react-native-navigation, которые обеспечивают переключение между экранами, стеками, табами и т.д.

Доступ к платформенным функциям

React Native предоставляет доступ к функциональности устройства:

  • Камера (react-native-camera, expo-camera)

  • Геолокация

  • Уведомления

  • Bluetooth

  • Работа с файлами

  • Акселерометр и гироскоп

  • Биометрия (Face ID, Touch ID)

Это реализуется через bridge — JavaScript взаимодействует с кодом, написанным на Java/Swift.

Инструменты разработки

  • **React:
    **

    • Create React App

    • Vite

    • Next.js

    • Storybook

    • DevTools

  • **React Native:
    **

    • Expo (удобный инструмент для быстрого запуска RN-приложений без настройки Android Studio/Xcode)

    • React Native CLI

    • Flipper (отладчик)

    • Metro (бандлер)

Производительность

React Native работает быстрее, чем гибридные веб-обёртки вроде Cordova или Ionic, потому что компоненты действительно нативные.

Однако он чуть медленнее, чем приложения, написанные полностью на Swift/Java, особенно в графически интенсивных задачах (3D, игры и пр.), где часто используют native modules или интеграцию с C++/Swift.

Вывод по архитектуре

React Native — это не веб-приложение в оболочке, а полноценное нативное приложение, которое управляется через JavaScript. Это ключевое отличие от решений вроде Cordova или Electron.

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

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