React Native

В 2012 году Марк Цукерберг отметил: «Самая крупная ошибка компании заключалась в том, что мы слишком сильно полагались на HTML5, а не на нативные технологии»^[13].^[14] Использование HTML5 в мобильной версии Facebook привело к нестабильности приложения и медленному получению данных^[15]. Цукерберг пообещал, что в ближайшее время Facebook предоставит лучший мобильный опыт.

Внутри Facebook Джордан Уолке разработал ПО, генерирующее элементы пользовательского интерфейса для iOS из фонового потока JavaScript, что стало основой для веб-фреймворка React. Был организован внутренний хакатон, чтобы доработать этот прототип и создать возможность нативной разработки с помощью новой технологии^[16].

В 2015 году после нескольких месяцев работы Facebook выпустила первую версию конфигурации React JavaScript. Во время технической презентации Кристофер Шедо отметил, что Facebook уже использует React Native в продакшене для своих приложений Groups и Ads Manager^[17].

Принципы работы React Native во многом совпадают с React, за исключением того, что React Native не оперирует DOM или Virtual DOM браузера^[18]. Исполняющийся в фоновом процессе (на конечном устройстве) поток JavaScript интерпретирует код приложения и взаимодействует с нативной платформой через сериализованные данные по асинхронному мосту с батч-обработкой^[19].^[20]

Компоненты React оборачивают существующий нативный код и взаимодействуют с нативными API через декларативную парадигму UI и JavaScript^[21]. В современных приложениях на React Native часто применяется TypeScript благодаря статической типизации^[22].

Стилями в React Native управляют похожим на CSS синтаксисом, но без использования HTML или CSS напрямую^[23]. Вместо этого управляющие сообщения передаются из JavaScript-потока для манипуляции view нативного UI. Благодаря плагинам возможна интеграция Tailwind с React Native.

React Native также доступен для Windows и macOS, поддержку которых обеспечивает Microsoft.

Пример программы Hello, World! на React Native:

import { AppRegistry, Text, View, Button } from 'react-native';
import React from 'react';

const HelloWorldApp = () => {
  const [count, setCount] = React.useState(0);

  const incrementCount = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <View>
      <Text>Hello world!</Text>
      <Text>{count}</Text>
      <Button onPress={incrementCount} title="Increase Count" />
    </View>
  );
};

export default HelloWorldApp;

AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);

Пример компонента-счётчика на TypeScript:

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

interface CounterProps {
    title: string; // обязательное свойство
    baseNumber?: number; // опциональное свойство
}

const Counter: React.FC<CounterProps> = ({ title, baseNumber }) => {
    const [count, setCount] = React.useState<number>(baseNumber || 0);

    const incrementCount = (): void => setCount((prevCount) => prevCount + 1);

    return (
        <View>
            <Text>{count}</Text>
            <Button onPress={incrementCount} title={title}></Button>
        </View>
    );
};