От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React

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

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

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

Что такое React Native?

React Native - это фреймворк для разработки мобильных приложений, разработанный компанией Facebook. Он позволяет разработчикам использовать React для создания нативных мобильных приложений для iOS и Android.

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

Когда вы создаете приложение React Native, код Javascript компилируется в нативный код для соответствующей платформы.

Например, если вы создаете приложение для iOS, код JavaScript компилируется в код Objective-C или Swift. Аналогично, если вы создаете приложение для Android, код JavaScript компилируется в нативный код Java или Kotlin.

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

Почему стоит использовать React Native для разработки мобильных приложений?

Легкость в освоении: Если вы пришли из бэкенда веб-разработки. React native - это толчок на вашем пути разработки мобильных приложений. Вам не придется изучать новые языки программирования (Java, Kotlin или Swift), что позволит вам использовать свои навыки веб-разработки и применить их в react native.
Кросс-платформенная совместимость: React Native позволяет создавать приложения, работающие на нескольких платформах, таких как iOS и Android, используя единую кодовую базу. Это позволяет сэкономить время и затраты на разработку, поскольку вам не нужно создавать отдельные кодовые базы для каждой платформы.
Ускоренная разработка: React Native имеет большую библиотеку предварительно созданных компонентов, что может ускорить время разработки и уменьшить необходимость в пользовательском кодировании.

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

Настройка React Native?

Чтобы начать работу с React Native, вам необходимо установить Node.js на локальной машине.

Чтобы продолжить, мы будем использовать React Native с Expo.

Expo - это платформа с открытым исходным кодом для легкого создания и развертывания приложений React Native.

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

Интересный факт: Expo позволяет не только создавать мобильные приложения, используя исходный код React Native, но и создавать веб-приложения. Это означает, что вы можете создать Android, iOS и веб-сайт с помощью одного кода.

Потрясающе, правда?

Для разработки приложений с помощью Expo вам понадобятся два инструмента:

инструмент командной строки под названием Expo CLI для обслуживания вашего проекта.
Мобильное клиентское приложение Expo называется Expo Go и позволяет открывать проект на платформах Android и iOS.

Чтобы установить Expo CLI с помощью npm run:

npm i -g expo

Вы можете загрузить Expo Go на свое физическое устройство, зайдя в магазин приложений.

Чтобы создать приложение React Native, откройте терминал и выполните команду

npx create-expo-app my-app

Если он предложит вам установить create-expo-app, просто нажмите y и Enter

После этого запустите приложение:

cd my-app

Чтобы запустить ваше приложение expo, выполните следующие действия.

npx expo start

После запуска сервера приложений на терминале должен появиться QR-код.

Открытие приложения

Существует два способа открыть ваше приложение react native

С помощью физического устройства

Во-первых, убедитесь, что вы загрузили Expo Go из вашего магазина приложений.

Кроме того, убедитесь, что компьютер, на котором запущен сервер приложений, подключен к той же сети (через WiFi или что-то еще).

Откройте Expo Go

Вы должны увидеть раздел, похожий на этот

Нажмите на приложение

Должен появиться экран загрузки приложения.

После его завершения вы получите экран по умолчанию

Использование симулятора/эмулятора

Если вы еще не настроили симулятор, посмотрите эти видео для Windows или Mac .

После того, как вы запустили симулятор

Просто перейдите в терминал, где запущен сервер приложений, и нажмите `i` для ios симулятора или `a` для android

Будет произведен поиск активных симуляторов, и если Expo Go не установлен, то будет предложено нажать Y на терминале, чтобы установить его на симулятор.

Если он уже установлен, откроется приложение.

Вы должны увидеть экран приложения по умолчанию

Поздравляем!!!

Давайте немного заглянем в код

В корневом каталоге вашего приложения откройте файл App.js

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';


export default function App() {
 return (
   <View style = {styles.container}>
     <Text>Open up App.js to start working on your app!</Text>
     <StatusBar style="auto" />
   </View>
 );
}


const styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: '#fff',
   alignItems: 'center',
   justifyContent: 'center',
 },
});

Давайте немного поработаем с кодом.

Измените цвет фона на #24a1fc и сохраните его.

Вы должны заметить, что как только вы изменили его и обновили на указанный вами цвет.

Вы можете продолжить и изменить символ между компонентом <Text>.

Как только вы закончите, сохраните его, и вы увидите, что изменения отразились.

Следующие шаги

Чтобы улучшить свои практические навыки в react native, вот несколько каналов youtube, которые вам стоит посетить

notJust.Dev

Esteban Codes

JS Mastery

Заключение

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

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

Если у вас есть какие-либо комментарии, пожалуйста, оставьте их здесь или отправьте мне сообщение на Twitter для более быстрого ответа.

Спасибо за чтение.