{"draftJsState":{"blocks":[{"data":{"image":{"id":"653585584d23de5bc9bcb631"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"2op74"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":22,"offset":10}],"inlineStyleRanges":[],"text":"Источник: Nuances of Programming","type":"unstyled","key":"dim32"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Введение","type":"header-three","key":"3jd6f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В постоянно меняющейся сфере разработки мобильных и веб-приложений React зарекомендовал себя как популярная JavaScript-библиотека, предназначенная для создания пользовательских интерфейсов. Эта библиотека не ограничена одной платформой, она представлена в двух основных вариантах: React.js для создания веб-приложений и React Native для разработки мобильных платформ. Несмотря на общие концепции, они имеют разное назначение и уникальные характеристики. Сравним React.js и React Native, чтобы ответить на вопросы:","type":"unstyled","key":"9jgea"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Есть ли разница между React.js и React Native?","type":"unstyled","key":"bval4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Легко ли веб-разработчику React.js освоить мобильную разработку с React Native?","type":"unstyled","key":"2qukg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть ли разница между React.js и React Native?","type":"header-three","key":"bto7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В демонстрационных целях я создал два проекта:","type":"unstyled","key":"f92bs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для React Native с помощью команды: yarn create expo-app AwesomeProject.","type":"ordered-list-item","key":"e3vhv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для React.js с помощью команды: npx create-next-app reactjs-awesome-project.","type":"ordered-list-item","key":"e45ob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":33,"style":"BOLD"}],"text":"Рассмотрим соответствующие файлы package.json.","type":"unstyled","key":"af8ar"},{"data":{"image":{"id":"6535856ebc23163e1472933e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рис. 1. Файл package.json проекта, созданного для React Native","type":"atomic:image","key":"2voj0"},{"data":{"image":{"id":"6535856eb859dc376ab47326"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рис. 2. Файл package.json проекта, созданного для React.js","type":"atomic:image","key":"cupf2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":158,"style":"BOLD"},{"length":9,"offset":217,"style":"BOLD"}],"text":"Как видите, оба проекта используют одну версию React-библиотеки. Если обратить внимание на строку 15 рис. 1 и строку 21 рис. 2, то можно заметить, что проект React Native основан на зависимости react-native, а проект React.js — на react-dom.","type":"unstyled","key":"5j8gb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Итак, оба проекта используют React-библиотеку, а значит, сравнение React.js и React Native можно свести к сравнению React Dom и React Native.","type":"unstyled","key":"650r5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":1,"offset":38,"style":"BOLD"},{"length":1,"offset":53,"style":"BOLD"},{"length":22,"offset":73,"style":"BOLD"}],"text":"Чтобы выявить различия между React DOM и React Native и понять, легко ли веб-разработчику React перейти к разработке с React Native, изучим сначала три основные библиотеки: React.js, React DOM и React Native. Посмотрим, что они представляет собой и как работают.","type":"unstyled","key":"amvf5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React.js","type":"header-three","key":"8uaqe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Библиотека React DOM управляет DOM в веб-разработке, а библиотека React Native отвечает за нативные компоненты в мобильной разработке. При этом библиотека React.js (также называемая React) является общей для обеих платформ, выполняя одинаковую роль в их функционировании.","type":"unstyled","key":"fvqq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":48,"offset":0,"style":"BOLD"}],"text":"Роль React.js в работе веб- и мобильных платформ:","type":"unstyled","key":"7scok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":55,"offset":0,"style":"BOLD"}],"text":"Компонентно-ориентированный пользовательский интерфейс. React.js предоставляет компонентную архитектуру, которая применяется как в веб-, так и в мобильной разработке. Это позволяет создавать многократно используемые UI-компоненты и моделировать из них сложные пользовательские интерфейсы. Такой компонентно-ориентированный подход повышает модульность и удобство повторного использования кода.","type":"ordered-list-item","key":"fl93u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Виртуальный DOM. React.js использует концепцию виртуального DOM, что характерно как для веб-, так и для мобильных платформ. Виртуальный DOM эффективно управляет обновлениями пользовательского интерфейса, минимизируя ненужные повторные рендеринги и обеспечивая оптимальную производительность.","type":"ordered-list-item","key":"8m2o8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Управление состояниями. React.js предлагает структурированный и предсказуемый способ управления состоянием приложения. В контексте веб- или мобильной разработки компоненты могут иметь собственное состояние, и React.js автоматически обновляет их при изменении состояния. Это упрощает работу с пользовательскими взаимодействиями и потоком данных.","type":"ordered-list-item","key":"frmb7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"Возможность повторного использования кода. В то время как React Native работает с нативными мобильными компонентами, React.js позволяет разработчикам совместно применять определенную логику и компоненты на обеих платформах. Это способствует многократному использованию кода, что упрощает сопровождение и расширение приложений.","type":"ordered-list-item","key":"dofd5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Философия разработки. Основная философия React.js — декларативный и компонентно-ориентированный подход — свойственна как для веб-, так и для мобильной разработки. Это позволяет получить более предсказуемую и поддерживаемую кодовую базу, независимо от платформы.","type":"ordered-list-item","key":"3kbos"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":65,"style":"BOLD"}],"text":"Сравнивая код обоих проектов (приведенный ниже), вы увидите, что useState импортируется из React на обеих платформах и что процессы изменения состояния, передачи значения состояния другим компонентам и, следовательно, работа с состоянием во всем приложении идентичны на обеих платформах.","type":"unstyled","key":"7t8qf"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":12,"offset":39},{"key":2,"length":9,"offset":54}],"inlineStyleRanges":[],"text":"Ссылки на GitHub-репозитории проектов: React Native и React Web.","type":"unstyled","key":"2dk4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Проект React native \nimport { useState } from \"react\";\nimport { Button, StyleSheet, View } from \"react-native\";\n\nexport default function App() {\n const [boxColor, setBoxColor] = useState(\"green\");\n\n return (\n \n \n \n \n\n \n \n setBoxColor(\"green\")}\n />\n setBoxColor(\"blue\")}\n />\n \n \n \n );\n}\n\nconst ColorBoxComponent = ({ color }) => {\n return (\n \n );\n};\n\nconst styles = StyleSheet.create({\n container: {\n flex: 1,\n backgroundColor: \"#fff\",\n alignItems: \"center\",\n justifyContent: \"center\",\n },\n buttonContainer: {\n flexDirection: \"row\",\n gap: 10,\n },\n});","type":"blockquote","key":"5mdq8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"erq45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Проект React Web \n\"use client\";\nimport { useState } from \"react\";\n\nexport default function Home() {\n const [boxColor, setBoxColor] = useState(\"green\");\n\n return (\n

\n \n

\n\n

\n \n \n

\n );\n}\n\nconst ColorBoxComponent = ({ color }: any) => {\n return (\n \n );\n};","type":"blockquote","key":"47n5k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":291,"style":"BOLD"},{"length":13,"offset":333,"style":"BOLD"}],"text":"Роль React.js заключается в том, чтобы обеспечить последовательный и эффективный способ создания пользовательских интерфейсов, управления состоянием, а также модульность и многократное использование кода, независимо от того, для какой платформы он разрабатывается — веб- (с использованием React Dom) или мобильной (с использованием React Native). React.js служит основой для создания динамичных и интерактивных пользовательских интерфейсов в обоих случаях применения.","type":"unstyled","key":"4a7s8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React DOM (для веб-платформ)","type":"header-three","key":"c39st"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":13,"offset":99,"style":"BOLD"},{"length":13,"offset":99,"style":"ITALIC"}],"text":"Назначение. React DOM — это движок рендеринга для React-приложений, предназначенных для работы в веб-браузерах. Он обеспечивает взаимодействие между React-компонентами и объектной моделью документа (DOM) веб-страницы.","type":"unordered-list-item","key":"bbdr8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Рендеринг. Принимает React-компоненты и рендерит их в HTML DOM, обновляя только те части DOM, которые изменились.","type":"unordered-list-item","key":"8no2d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":14,"offset":56,"style":"ITALIC"}],"text":"Платформа. Движок React DOM предназначен специально для веб-приложений, а не для мобильной разработки.","type":"unordered-list-item","key":"bs05b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"},{"length":9,"offset":60,"style":"BOLD"}],"text":"Пользовательский интерфейс. Компоненты, созданные с помощью React DOM, генерируют пользовательские интерфейсы на основе HTML, которые подходят для веб-браузеров.","type":"unordered-list-item","key":"55d9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Стилизация. Для веб-приложений стилизация обычно выполняется с помощью CSS.","type":"unordered-list-item","key":"bd8bm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React Native (для мобильных платформ)","type":"header-three","key":"elgso"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Назначение. React Native — это фреймворк для создания мобильных приложений, работающих на платформах iOS и Android. Он позволяет разработчикам создавать нативные мобильные приложения с помощью React и JavaScript.","type":"unordered-list-item","key":"7of5c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"},{"length":13,"offset":54,"style":"BOLD"}],"text":"Рендеринг. Вместо рендеринга в HTML и DOM, компоненты React Native транслируются в нативные компоненты на каждой платформе. Это обеспечивает более нативный внешний вид и оптимизированную производительность.","type":"unordered-list-item","key":"2iub7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Платформа. React Native создан для мобильной разработки, что позволяет писать единую кодовую базу для приложений как для iOS, так и для Android.","type":"unordered-list-item","key":"5llus"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"},{"length":13,"offset":41,"style":"BOLD"}],"text":"Пользовательский интерфейс. Компоненты в React Native генерируют нативные пользовательские интерфейсы, используя специфические для платформы элементы и стили UI.","type":"unordered-list-item","key":"3opdk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Стилизация. Для стилизации обычно используется комбинация JavaScript и библиотек стилей, специфичных для конкретной платформы, например StyleSheet в React Native.","type":"unordered-list-item","key":"cvogj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React DOM и React Native: основные отличия","type":"header-three","key":"229vd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React DOM предназначен для разработки веб-приложений, а React Native — для создания для мобильных приложений.","type":"unordered-list-item","key":"djf58"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React DOM отображает компоненты в HTML DOM, а React Native — в виде нативных мобильных элементов.","type":"unordered-list-item","key":"9n4ai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":150,"style":"BOLD"},{"length":6,"offset":150,"style":"ITALIC"}],"text":"React DOM основан на HTML и CSS в плане стилизации, в то время как React Native использует подход к стилизации, специфичный для конкретной платформы. Учтите: несмотря на разницу подходов, свойства стилей приложения React Native могут выглядеть так же, как и при веб-разработке, но это не так.","type":"unordered-list-item","key":"fqfut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В отличие от React DOM, React Native предоставляет доступ к функциям и API, специфичным для конкретного устройства, через JavaScript-мосты.","type":"unordered-list-item","key":"1aeuu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы должным образом представить разницу в стилизации веб- и мобильных платформ, достаточно взглянуть на приведенные выше фрагменты кода. В обоих проектах используется как Inline-стилизация, так и подход, основанный на классах.","type":"unstyled","key":"6tlaf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основные выводы","type":"header-three","key":"1e56u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Библиотека React.js используется на обеих платформах (веб- и мобильной). Таким образом, основные концепции React неизменны.","type":"unordered-list-item","key":"4u3g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React DOM — это движок рендеринга, работающий в браузере, в то время как React Native — библиотека, выполняющая эту работу для нативных платформ.","type":"unordered-list-item","key":"d72p3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":19,"style":"ITALIC"},{"length":34,"offset":31,"style":"ITALIC"}],"text":"React Native имеет собственные компоненты предварительной сборки и не может использовать HTML и CSS, в то время как в React.js можно применять HTML и CSS для веб-разработки.","type":"unordered-list-item","key":"a6ot8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стили синтаксиса на обеих платформах могут выглядеть почти одинаково, хотя на самом деле это не одно и то же. Они просто разработаны таким образом, чтобы веб-разработчики могли легко адаптироваться к стилистике в React Native.","type":"unordered-list-item","key":"cllav"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":14,"style":"BOLD"}],"text":"Таким образом, веб-разработчику React будет очень легко перейти к разработке с React Native.","type":"unstyled","key":"bk3u9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-three","key":"fd6cl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В постоянно развивающейся сфере разработки веб- и мобильных приложений React остается путеводной звездой. Выявление уникальных аспектов React.js и React Native позволяет в полной мере раскрыть потенциал этой универсальной библиотеки. Вы легко и успешно преодолеете разрыв между веб- и мобильной разработкой, создавая исключительный пользовательский опыт, выходящий за границы платформ. Предлагая единый подход к созданию привлекательных и интерактивных пользовательских интерфейсов, React остается стержнем современной разработки веб- и мобильных приложений.","type":"unstyled","key":"fkqjf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читайте также:","type":"unstyled","key":"86qro"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":49,"offset":0}],"inlineStyleRanges":[],"text":"Прощайте, useState и useEffect: революция в React","type":"unordered-list-item","key":"bpm5t"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":91,"offset":0}],"inlineStyleRanges":[],"text":"React Native: полное руководство по созданию виджета для домашнего экрана для iOS и Android","type":"unordered-list-item","key":"drhdf"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":56,"offset":0}],"inlineStyleRanges":[],"text":"Cначала Vue, потом React: совет начинающим разработчикам","type":"unordered-list-item","key":"9tju9"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":8,"offset":14},{"key":7,"length":2,"offset":24}],"inlineStyleRanges":[],"text":"Читайте нас в Telegram, VK","type":"unstyled","key":"akg6"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":19,"offset":15},{"key":9,"length":94,"offset":36}],"inlineStyleRanges":[{"length":14,"offset":0,"style":"ITALIC"}],"text":"Перевод статьи Abdur Razzak Rouzex: The core difference between ReactJS and React Native you need to understand — Easy Explanation","type":"unstyled","key":"36fi7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"QAltahoLytmK6FVaYloA"}],"entityMap":{"0":{"data":{"url":"https://nuancesprog.ru/p/19018/"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://github.com/Abdur-Razzak-Rouzex/react-native-awesome-app","url":"https://github.com/Abdur-Razzak-Rouzex/react-native-awesome-app"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://github.com/Abdur-Razzak-Rouzex/reactjs-awesome-project","url":"https://github.com/Abdur-Razzak-Rouzex/reactjs-awesome-project"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://nuancesprog.ru/p/18962/","url":"https://nuancesprog.ru/p/18962/"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://nuancesprog.ru/p/18323/","url":"https://nuancesprog.ru/p/18323/"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://nuancesprog.ru/p/17309/","url":"https://nuancesprog.ru/p/17309/"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://t.me/nuancesprog","url":"https://t.me/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://vk.com/nuancesprog","url":"https://vk.com/nuancesprog"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://medium.com/@abdurrazzak1663","url":"https://medium.com/@abdurrazzak1663"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://medium.com/@abdurrazzak1663/the-core-difference-between-reactjs-and-react-native-you-need-to-understand-easy-explanation-e8b60310e80f","url":"https://medium.com/@abdurrazzak1663/the-core-difference-between-reactjs-and-react-native-you-need-to-understand-easy-explanation-e8b60310e80f"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}