Основные различия между React.js и React Native

Источник: Nuances of Programming

Введение

В постоянно меняющейся сфере разработки мобильных и веб-приложений 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 остается стержнем современной разработки веб- и мобильных приложений.

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

• Прощайте, useState и useEffect: революция в React
• React Native: полное руководство по созданию виджета для домашнего экрана для iOS и Android
• Cначала Vue, потом React: совет начинающим разработчикам

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

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