Что такое 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 предназначены для разных платформ, они имеют много общих черт:
-
Компонентный подход — UI строится из маленьких переиспользуемых компонентов.
-
JSX-синтаксис — оба используют JSX для описания UI.
-
Состояние и пропсы (props, state) — одинаковый способ передачи данных и управления изменениями.
-
Hooks (useState, useEffect и др.) — React Native поддерживает те же хуки, что и React.
-
Контекст (Context API) — единая система глобального состояния.
-
Менеджеры состояния — 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 обслуживают разные платформы и цели, каждый со своими особенностями и ограничениями.