Разница между React и React Native: синтаксис и формат

Сравнение вкратце

**Основное назначение**:
- **React Native**: Построение мобильных приложений для iOS и Android.
- **React**: Разработка интерфейсов для веб-страниц.

**UI-компоненты**: 
- **React Native**: `View`, `Text` – специфичны для мобильных платформ.
- **React**: `div`, `span` – стандартные веб-элементы.

**Стилизация**:
- **React Native**: Применяет JavaScript объекты для стилей с помощью `StyleSheet`.
- **React**: Использует CSS или инструменты CSS-in-JS.

**Навигация**:
- **React Native**: Реализуется, например, с помощью библиотеки `react-navigation`.
- **React**: Для маршрутизации страниц использует `react-router`.

// Пример простого UI-компонента

/* В React Native для отображения приветствия необходимо учесть мобильный контекст. 
P.S.: Здесь никто не считает сообщения 😄 */

**React Native**: 
<Text>Привет, мобильный мир!</Text>

/* В React для создания веб-интерфейсов используются HTML-элементы. 
P.S.: И здесь вам тёплое приветствие без ограничений! 😉 */

**React**: 
<p>Привет, веб-мир!</p>

Разложение основной архитектуры

Разработчики технологий

Facebook представил React и React Native, каждый с разными целями: React — это JavaScript библиотека для веб-интерфейсов, которая использует виртуальный DOM для быстрого обновления и отрисовки компонентов. React Native — это фреймворк для мобильных приложений, который компилирует компоненты в элементы нативных платформ, предоставляя функциональность полноценного мобильного приложения.

Подробнее об этом расскажет наш спикер на видео

Мощь JSX

Оба технологических решения используют JSX — синтаксис для внедрения HTML в JavaScript. Он позволяет описывать структуры интерфейса прямо в коде, делая его элегантным и понятным.

Дополнительные достоинства React Native и hot reloading

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

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

Горячая перезагрузка

Функциональность горячей перезагрузки позволяет видеть результаты изменений в коде в реальном времени без обязательности полной повторной компиляции и запуска, что значительно экономит время разработки.

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

Производительность и виртуальный DOM

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

Визуализация

Сравнение React и React Native можно представить как двух художников:

Художник 1 (🎨 React):
Рисует фееричные картины для веб-галерей (🌐 браузеры).

Художник 2 (🔨 React Native):
Создаёт яркие муралы для мобильных выставок (📱 iOS/Android приложения).

Оба обладают одинаковым набором инструментов (компоненты, JSX, управление состоянием), но рабочие пространства у них разные.

Общие компоненты и экономия времени разработки

Переиспользование компонентов и кода

Большую часть кода (до 85%) в React и React Native можно использовать как в мобильной, так и в веб-разработке, что экономит время и облегчает работу команды.

Консистентность кода при интеграции

Универсальные компоненты позволяют разработчикам использовать одни и те же компоненты в веб- и мобильной разработке, обеспечивая единообразный дизайн на всех платформах.

Навигация по экосистеме

Специализированные библиотеки

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

Переход с JavaScript и React на React Native

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

Полезные ресурсы

1. Введение в React Native — официальная документация React Native.
2. React – официальный сайт – информационная база о создании пользовательских интерфейсов.
3. Производительность приложений React Native: проблемы и решения – руководство по оптимизации приложений на React Native.