Разработчики React, вот что вам нужно знать, приступая к разработке React Native

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

Позвольте мне прояснить ситуацию для любого из вас, Java-разработчиков, которые задавались вопросом, был ли JavaScript своего рода вариацией Java, но в конечном итоге вынуждены были изучать совершенно другой язык, который почти не имеет ничего похожего на Java. Нет, React to React Native не похож на Java to JavaScript!

Учись один раз, пиши где угодно

Это слоган, которым пользуется React Native. Это означает, что он поддерживает кроссплатформенную разработку. А теперь давайте посмотрим на перспективу ...

React - библиотека JavaScript для создания пользовательских интерфейсов.

Фактически, React используется как в веб-приложении, так и в мобильном приложении. Не запутайся сейчас.

То, что мы называем React, на самом деле является базовым кодом, который обрабатывает представление. По сути, основная логика обрабатывается React. React-Dom фактически используется для рендеринга всего, что отображается в браузере в веб-приложении. Аналогичным образом, React Native компилирует компоненты React в собственные компоненты iOS / Android. По сути, он связывает JavaScript и собственный код платформы.

В конечном итоге используется та же библиотека React. Вот почему для существующего разработчика React довольно легко быстро освоить разработку на React Native. Фактически, можно даже совместно использовать код между проектами React и React Native.

И хуки, и компоненты на основе классов могут использоваться для проекта React Native, как и проект React.

Я начал с хуков, потому что уже использовал хуки в своих проектах на React. Итак, единственная разница заключалась в методе render () по сравнению с любым другим проектом React Native. И, конечно же, был добавлен дополнительный импорт.

Я бы посоветовал вам взглянуть на Хуки, если вы использовали компоненты на основе классов в своих проектах React, потому что хуки используются почти в каждом обновленном курсе React Native. Вам будет удобнее следовать инструкциям (или скопировать и вставить любой код 😜)

Просмотры

HTML, CSS не поддерживаются. Просто потому, что никакая родная платформа не может этого понять. Для этой цели потребуется браузер, который замедлит работу. Практически невозможно добиться такой же производительности. JSX (расширенный JavaScript) действительно вступает в игру. Проще говоря, именно поэтому React необходимо импортировать в каждый файл. Обо всем этом позаботится React, как и в веб-приложении.

Основное отличие, которое вы увидите в проекте React Native как разработчик React, заключается в том, что метод рендеринга содержит множество компонентов, которых вы никогда раньше не видели. Но когда вы их читаете, вы должны иметь представление о том, что они будут делать, потому что это в основном прямой английский о том, что будет делать каждый компонент.

Все, что находится внутри ‹View› метода render (), компилируется в собственные компоненты.

Хотя большинство компонентов универсальны как для iOS, так и для Android, есть несколько уникальных компонентов. Это просто для того, чтобы добавить дополнительную функциональность, предлагаемую каждой платформой.

Логика JavaScript

Никакая логика JavaScript не компилируется. Приложение React Native размещает логику JavaScript в отдельном потоке. Это виртуальная машина (виртуальная машина), известная как JavaScriptCore. Затем эта виртуальная машина соединяется с собственными модулями / платформами с помощью «моста». По сути, это похоже на другое мини-приложение, работающее внутри приложения, которое сообщает главному приложению, что делать.

Причина в том, что iOS не позволяет сторонним приложениям генерировать код во время выполнения. Следовательно, обычный движок V8, который работает в веб-приложении React, не может работать в iOS. JavaScriptCore - альтернатива движку V8. Ага! он разработан Apple 😂. Вы можете прочитать об этом в документации Apple здесь, если вам интересно. Но в этом нет необходимости.

Стилизация представлений

Несмотря на то, что стили выглядят как CSS, React Native на самом деле использует JavaScript для стилизации. Здесь вообще нет CSS. Вместо пикселей в CSS стили React Native используют числа для размеров.

Если вы применили встроенные стили с помощью CSS, определенного в константе, в проекте React, это действительно выглядит примерно так, но не совсем то же самое. Существует компонент React Native под названием ‘StyleSheet’, который используется для создания стилей.

Expo против React-Native-CLI

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

Нативный код может быть включен в проект, если вы используете React-Native-CLI. Но вряд ли вам это понадобится для большинства приложений.

Если вы новичок в React Native, просто начните с Expo. Вы можете прыгать с корабля в любой момент.

Использование пакетов NPM в React Native

Практически каждый пакет npm, который можно использовать в проекте веб-приложения React, должен иметь возможность использовать в проекте React Native, кроме пакетов, которые зависят от React-DOM. Я действительно не проверял, верно ли это для каждого отдельного пакета NPM.

Если у вас возникнут проблемы с тем, чтобы заставить пакет NPM работать в вашем проекте React, я наткнулся на этот инструментарий, который может вам помочь. Он позволяет любому пакету Node.js работать как с приложениями для Android, так и с iOS, созданными с использованием React Native.

Другой популярный UI-инструментарий для кроссплатформенной разработки, скомпилированный в собственном коде, Flutter использует Dart в качестве языка программирования. У Flutter есть свои плюсы. Он в основном обещает более быстрые и красивые приложения, и делает это очень хорошо. Но если вы уже являетесь разработчиком React, переход на React Native для кроссплатформенной разработки может быть для вас лучше, потому что переход будет проще.

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

Если вы уже являетесь разработчиком React, я бы посоветовал вам попробовать React Native. Это ответы на большинство вопросов, которые я задавал, когда решал, как мне заняться разработкой React Native. Надеюсь, это сообщение в блоге прояснило ваш ‹View› о том, каким будет ‹div›! 😜

Следующие две ссылки - это то, по чему я перешел, чтобы заняться разработкой React Native.

Чтобы быстро познакомиться с React Native, посетите Ускоренный курс Traversy Media по React Native 2020

React Native - Практическое руководство на Udemy - это то, за чем я следил до сих пор, и, похоже, это неплохо.