React Native

Что это

React Native — это фреймворк с открытым исходным кодом, созданный в Meta, для разработки нативных мобильных приложений с помощью React и JavaScript (или TypeScript). Вы пишете компоненты так же, как для веба, но они отрисовываются в виде настоящих нативных UI-виджетов iOS и Android, а не в виде веб-представления. Большая часть кода используется совместно на обеих платформах, при этом вы по-прежнему можете спускаться до платформенно-специфичного нативного кода, когда это нужно.

Сильные стороны

• Одна кодовая база, две платформы — большая часть логики и UI общая для iOS и Android.
• Использует React, поэтому веб-разработчики быстро становятся продуктивными, а экосистема огромна.
• Отрисовывает настоящие нативные компоненты, а не веб-представление, обеспечивая по-настоящему нативные ощущения.
• Fast Refresh даёт почти мгновенную обратную связь во время редактирования.
• Запасной выход: пишите нативные модули на Swift/Kotlin, когда упираетесь в ограничения.

Компромиссы

• Мост между JavaScript и нативным кодом может усложнить работу, критичную к производительности или насыщенную анимацией.
• Нативные зависимости и инструменты сборки могут быть хрупкими и чувствительными к версиям.
• Для сложных частей вам всё равно нужны знания платформы (и Mac для сборок iOS).
• Некоторые новые возможности ОС появляются с задержкой, пока их не обернёт сообщество или вы сами.

Когда использовать

Обращайтесь к React Native, когда хотите силами одной команды и одной кодовой базы выпустить нативное приложение и на iOS, и на Android, особенно если ваша команда уже знает React. Это отличный выбор для контентных, коммерческих и CRUD-подобных приложений.

Подходит для vibe coding

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

import { Text, Button, View } from "react-native";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Text>Count: {count}</Text>
      <Button title="Add" onPress={() => setCount(count + 1)} />
    </View>
  );
}