Я собираюсь научить вас писать собственное мобильное приложение с помощью React Native и Redux. Давайте нырнем!
Станьте средним участником, чтобы напрямую поддерживать мою работу. Вы также получите полный доступ ко всем историям на Medium. Заранее спасибо!
Что такое React Native?
React Native позволяет создавать мобильные приложения, используя только JavaScript. Он использует тот же дизайн, что и React, что позволяет вам составлять богатый мобильный пользовательский интерфейс из декларативных компонентов.
Почему мы используем React Native вместо Swift, Kotlin, Java или Objective-C?
На самом деле все сводится к предпочтениям. Вот основные сценарии:
- Возможно, вы уже знакомы с React. В этом случае создание приложений React Native будет абсолютным удовольствием. Инструменты RN великолепны.
- Кросс-платформенный. Узнай один раз, пиши где угодно. Вместо того, чтобы писать приложение для Android на Kotlin и приложение для iOS на Swift - вы можете написать их на React Native и сэкономить огромное количество времени и средств.
- Легче перейти к мобильной разработке из веб-фона.
- JavaScript - единый язык для всех.
- Возможность быстро отправлять обновления прямо в опубликованное приложение, минуя процесс проверки и временную шкалу в магазине приложений.
Имейте в виду, что в конце концов имеет значение только одно - то, что лучше всего работает для вас и делает вас счастливым.
Будет справедливо сказать, что React Native к настоящему моменту сформировался. Многие компании адаптировались к RN (включая нативные приложения Facebook) - спрос на рынке труда очень высок.
Что такое Redux?
Redux - это контейнер с предсказуемым состоянием для приложений JavaScript.
Если вы не слишком знакомы с Redux, статья ниже - хороший учебник о том, как применять Redux к приложениям React.
Почему мы используем Redux?
- Redux делает сложные части (управление состоянием) более предсказуемыми и более понятными.
- Отделить состояние от представлений. Что я имею в виду именно под этим, так это позволить React обрабатывать представления, а Redux обрабатывать состояние приложения.
- Чистый код и лучшие практики.
- Отличный инструментарий и промежуточное ПО, делающие разработку более приятной.
Давайте начнем!
Предварительные требования:
- Node.js
- Npm или Пряжа
- Командная строка / терминал Bash . Mac и Linux устанавливают его по умолчанию. Если вы работаете в Windows, следуйте этому руководству по установке bash в Windows.
- Текстовый редактор / IDE
- Xcode (iOS) - это все, что вам нужно для начальной настройки! - Настройка видео
- Android Studio (Android) - Посмотрите это руководство, чтобы правильно настроить симулятор Android!
- По желанию: Expo - рекомендую.
- Также рекомендую приобрести инструментарий Expo CLI.
Прежде чем продолжить, убедитесь, что у вас есть все необходимое.
Установка и настройка нашей собственной среды разработки приложений
Откройте свой терминал и выполните пару команд для установки React Native и запуска предпочитаемого вами симулятора.
$ npm install -g create-react-native-app
$ create-react-native-app react-native-redux-crypto-tracker && cd react-native-redux-crypto-tracker
У вас должно получиться что-то похожее на это:
Мы почти там.
Далее нам нужно просто обслужить наш проект. Введите следующую команду в терминале. Вы можете выбирать между симуляторами iOS или Android. Нажмите I для iOS и a для Android.
Для этого руководства я выбрал iOS, но она работает в обеих операционных системах! Мне лично нравятся телефоны iPhone и Android, и вы можете выбирать по своему усмотрению.
- (симулятор) -
$ npm run ios- iOS - (симулятор) -
$ npm run android- Android - (Физическое устройство) -
$ npm run start- QR-код и варианты. Откройте мобильную камеру и наведите ее на QR-код. Также вам понадобится приложение expo. Экспо для Android - Экспо для iOS
Симулятор iPhone X прекрасно работает в гармонии с RN. Спасибо команде Facebook за отличную реализацию и исполнение! 👍
Как видим, происходит довольно много всего. Сверху мы видим
import { StyleSheet, Text, View } from ‘react-native’;
Что это такое?
Text - это JSX - синтаксис для встраивания XML в JavaScript.
Многие фреймворки используют специальный язык шаблонов, который позволяет встраивать код в язык разметки. В React все наоборот. JSX позволяет вам писать свой язык разметки внутри кода.
Это похоже на HTML в Интернете, за исключением того, что вместо таких веб-вещей, как <div> или <span>, вы используете компоненты React. В этом случае <Text> - это встроенный компонент, который просто отображает некоторый текст.
TL; DR: компонент React для отображения текста.
Самый фундаментальный компонент для создания пользовательского интерфейса. View - это контейнер, который поддерживает макет с элементами управления flexbox, style, некоторая сенсорная обработка и доступность.
View отображается непосредственно на собственное представление, эквивалентное любой платформе, на которой работает React Native - будь то UIView, <div>, android.view или другая.
View предназначен для вложения в другие представления и может иметь от нуля до множества дочерних элементов любого типа.
В этом примере создается View, который обертывает два цветных поля и текстовый компонент в строке с заполнением.
Таблица стилей
Таблица стилей - это абстракция, подобная таблицам стилей CSS.
Создает новую таблицу стилей. Стиль для RN основан на flexbox. Он использует механизм компоновки Yoga. Мы передаем стили элементам через опору style.
Создание приложения
Начните с создания каталога src, в который мы поместим весь наш код.
$ mkdir src && cd src
Внутри src создайте каталог components. Внутри components мы разместим наши представления.
Реализация заголовка
Сделайте два файла внутри src/components - Header.js и index.js.
Header.js предназначен для заголовка приложения, а index.js - для очистки импорта и экспорта.
Внутри Header.js реализуйте компонент без состояния. Попробуйте сделать это сами - самый эффективный способ обучения - это делать.
Далее - импортируйте Header.js в App.js и отобразите его!
Оно работает! Но подождите ... почему заголовок почти скрыт текстом по умолчанию в iPhone? Мы исправим это в следующей главе!
Исходный код
Если вы хотите вывести свой JavaScript на новый уровень, начните с этой книги. Найдите версию kindle здесь.
Спасибо за прочтение!
