Введение

В постоянно меняющейся сфере разработки мобильных и веб-приложений React зарекомендовал себя как популярная JavaScript-библиотека, предназначенная для создания пользовательских интерфейсов. Эта библиотека не ограничена одной платформой, она представлена в двух основных вариантах: React.js для создания веб-приложений и React Native для разработки мобильных платформ. Несмотря на общие концепции, они имеют разное назначение и уникальные характеристики. Сравним React.js и React Native, чтобы ответить на вопросы:

1. Есть ли разница между React.js и React Native?

2. Легко ли веб-разработчику React.js освоить мобильную разработку с React Native?

Есть ли разница между React.js и React Native?

В демонстрационных целях я создал два проекта:

  1. Для React Native с помощью команды: yarn create expo-app AwesomeProject.
  2. Для React.js с помощью команды: npx create-next-app reactjs-awesome-project.

Рассмотрим соответствующие файлы package.json.

Рис. 1. Файл package.json проекта, созданного для React Native
Рис. 2. Файл package.json проекта, созданного для React.js

Как видите, оба проекта используют одну версию React-библиотеки. Если обратить внимание на строку 15 рис. 1 и строку 21 рис. 2, то можно заметить, что проект React Native основан на зависимости react-native, а проект React.js  —  на react-dom.

Итак, оба проекта используют React-библиотеку, а значит, сравнение React.js и React Native можно свести к сравнению React Dom и React Native.

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

React.js

Библиотека React DOM управляет DOM в веб-разработке, а библиотека React Native отвечает за нативные компоненты в мобильной разработке. При этом библиотека React.js (также называемая React) является общей для обеих платформ, выполняя одинаковую роль в их функционировании.

Роль React.js в работе веб- и мобильных платформ:

  1. Компонентно-ориентированный пользовательский интерфейс. React.js предоставляет компонентную архитектуру, которая применяется как в веб-, так и в мобильной разработке. Это позволяет создавать многократно используемые UI-компоненты и моделировать из них сложные пользовательские интерфейсы. Такой компонентно-ориентированный подход повышает модульность и удобство повторного использования кода.
  2. Виртуальный DOM. React.js использует концепцию виртуального DOM, что характерно как для веб-, так и для мобильных платформ. Виртуальный DOM эффективно управляет обновлениями пользовательского интерфейса, минимизируя ненужные повторные рендеринги и обеспечивая оптимальную производительность.
  3. Управление состояниями. React.js предлагает структурированный и предсказуемый способ управления состоянием приложения. В контексте веб- или мобильной разработки компоненты могут иметь собственное состояние, и React.js автоматически обновляет их при изменении состояния. Это упрощает работу с пользовательскими взаимодействиями и потоком данных.
  4. Возможность повторного использования кода. В то время как React Native работает с нативными мобильными компонентами, React.js позволяет разработчикам совместно применять определенную логику и компоненты на обеих платформах. Это способствует многократному использованию кода, что упрощает сопровождение и расширение приложений.
  5. Философия разработки. Основная философия React.js  —  декларативный и компонентно-ориентированный подход  —  свойственна как для веб-, так и для мобильной разработки. Это позволяет получить более предсказуемую и поддерживаемую кодовую базу, независимо от платформы.

Сравнивая код обоих проектов (приведенный ниже), вы увидите, что useState импортируется из React на обеих платформах и что процессы изменения состояния, передачи значения состояния другим компонентам и, следовательно, работа с состоянием во всем приложении идентичны на обеих платформах.

Ссылки на GitHub-репозитории проектов: React Native и React Web.

// Проект React native 
import { useState } from "react";
import { Button, StyleSheet, View } from "react-native";

export default function App() {
  const [boxColor, setBoxColor] = useState("green");

  return (
    <View style={styles.container}>
      <View style={styles.boxContainer}>
        <ColorBoxComponent color={boxColor} />
      </View>

      <View>
        <View style={styles.buttonContainer}>
          <Button
            title="Green"
            color={"green"}
            onPress={() => setBoxColor("green")}
          />
          <Button
            title="Blue"
            color={"blue"}
            onPress={() => setBoxColor("blue")}
          />
        </View>
      </View>
    </View>
  );
}

const ColorBoxComponent = ({ color }) => {
  return (
    <View
      style={{
        height: 100,
        width: 100,
        borderWidth: 1,
        borderColor: "#989898",
        borderRadius: 5,
        backgroundColor: color,
        color: "white",
        marginBottom: 10,
      }}
    ></View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  buttonContainer: {
    flexDirection: "row",
    gap: 10,
  },
});
// Проект React Web 
"use client";
import { useState } from "react";

export default function Home() {
  const [boxColor, setBoxColor] = useState<any>("green");

  return (
    <div className="page">
      <div className="container">
        <div className="box-container">
          <ColorBoxComponent color={boxColor} />
        </div>

        <div className="btn-container">
          <button className="green-btn" onClick={() => setBoxColor("green")}>
            Green
          </button>
          <button className="blue-btn" onClick={() => setBoxColor("blue")}>
            Blue
          </button>
        </div>
      </div>
    </div>
  );
}

const ColorBoxComponent = ({ color }: any) => {
  return (
    <div
      style={{
        height: "100px",
        width: "100px",
        border: "1px solid #989898",
        borderRadius: "5px",
        backgroundColor: color,
        color: "white",
      }}
    ></div>
  );
};

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

React DOM (для веб-платформ)

  • Назначение. React DOM  —  это движок рендеринга для React-приложений, предназначенных для работы в веб-браузерах. Он обеспечивает взаимодействие между React-компонентами и объектной моделью документа (DOM) веб-страницы.
  • Рендеринг. Принимает React-компоненты и рендерит их в HTML DOM, обновляя только те части DOM, которые изменились.
  • Платформа. Движок React DOM предназначен специально для веб-приложений, а не для мобильной разработки.
  • Пользовательский интерфейс. Компоненты, созданные с помощью React DOM, генерируют пользовательские интерфейсы на основе HTML, которые подходят для веб-браузеров.
  • Стилизация. Для веб-приложений стилизация обычно выполняется с помощью CSS.

React Native (для мобильных платформ)

  • Назначение. React Native  —  это фреймворк для создания мобильных приложений, работающих на платформах iOS и Android. Он позволяет разработчикам создавать нативные мобильные приложения с помощью React и JavaScript.
  • Рендеринг. Вместо рендеринга в HTML и DOM, компоненты React Native транслируются в нативные компоненты на каждой платформе. Это обеспечивает более нативный внешний вид и оптимизированную производительность.
  • Платформа. React Native создан для мобильной разработки, что позволяет писать единую кодовую базу для приложений как для iOS, так и для Android.
  • Пользовательский интерфейс. Компоненты в React Native генерируют нативные пользовательские интерфейсы, используя специфические для платформы элементы и стили UI.
  • Стилизация. Для стилизации обычно используется комбинация JavaScript и библиотек стилей, специфичных для конкретной платформы, например StyleSheet в React Native.

React DOM и React Native: основные отличия

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

Чтобы должным образом представить разницу в стилизации веб- и мобильных платформ, достаточно взглянуть на приведенные выше фрагменты кода. В обоих проектах используется как Inline-стилизация, так и подход, основанный на классах.

Основные выводы

  • Библиотека React.js используется на обеих платформах (веб- и мобильной). Таким образом, основные концепции React неизменны.
  • React DOM  —  это движок рендеринга, работающий в браузере, в то время как React Native  —  библиотека, выполняющая эту работу для нативных платформ.
  • React Native имеет собственные компоненты предварительной сборки и не может использовать HTML и CSS, в то время как в React.js можно применять HTML и CSS для веб-разработки.
  • Стили синтаксиса на обеих платформах могут выглядеть почти одинаково, хотя на самом деле это не одно и то же. Они просто разработаны таким образом, чтобы веб-разработчики могли легко адаптироваться к стилистике в React Native.

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

Заключение

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

Читайте также:

Читайте нас в Telegram, VK и Дзен

Перевод статьи Abdur Razzak Rouzex: The core difference between ReactJS and React Native you need to understand — Easy Explanation

Предыдущая статьяАтака Activity hopping: угроза безопасности
Следующая статьяRust: безопасный парсинг с нулевым копированием