Моей первой попыткой было написать сообщение об использовании Mobx, Typescript, NativeBase, Mocking REST API с JSON Server и Faker.JS в React Native. Когда я закончил писать, я изменил свое решение и реорганизовал публикацию, включив в нее лучшие практики, используемые при разработке мобильных приложений на React Native.

Помимо использования предыдущих технических стеков, эта серия публикаций будет включать твердое использование принципа разделения проблем (SoC) (многоуровневую архитектуру), структуру папок, обработку ошибок уровня API, моделирование, методы имитации REST API и использование лучших практик для React Native. разработка мобильных приложений. Итак, я разделил пост следующим образом:

  • Часть I - Установка и настройка
  • Часть II - Архитектура, структура папок, обработка ошибок уровня API
  • Часть III - Моделирование и имитация REST API
  • Часть IV - Разработка приложений

В этой части я собираюсь показать, как настроить и установить зависимости среды разработки, React Native CLI, Mobx, Typescript, Native Base, JSON Server и Faker.JS.

Mobx - это простая, масштабируемая библиотека управления состоянием для React с прозрачным применением функционального реактивного программирования (TFRP).

Typescript используется для статической типизации и повышения производительности, что позволяет находить синтаксические ошибки на ранней стадии разработки.

NativeBase - кроссплатформенные компоненты пользовательского интерфейса с открытым исходным кодом для React Native. Вы можете усовершенствовать свой пользовательский интерфейс с помощью увлекательных компонентов пользовательского интерфейса, предоставляемых NativeBase.

Создание интерфейсных приложений параллельно с серверной разработкой - еще одна проблема, вызывающая недоумение между интерфейсными и серверными командами. Чтобы решить эту проблему, мы будем использовать JSON Server и Faker.JS для имитации REST API для нашей реализации внешнего интерфейса.

А React Native позволяет нам создавать собственные мобильные приложения с использованием JavaScript и React.

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

Для этого следующие разделы помогут вам установить зависимости среды разработки для Windows и macOS.

Установка зависимостей среды разработки

Для Windows вам потребуется Node, Python2, JDK и Android Studio. Android Studio необходима для настройки необходимых параметров для Android. Вы можете установить эти зависимости вручную, загрузив необходимые установочные пакеты с веб-сайта поставщиков, или вы можете использовать диспетчер пакетов Chocolatey для установки Node, Python2 и JDK.

Когда установка Chocolatey будет завершена, откройте командную строку с параметром «Запуск от имени администратора» и вставьте следующий код:

choco install -y nodejs.install python2 jdk8

Вау, вы установили Node.JS, Python2 и JDK с помощью указанной выше команды. Эмулятор может понадобиться при разработке мобильных приложений. Вы можете использовать GenyMotion Emulator, Android Studio Emulator, или вы можете использовать свой физический телефон Android для целей разработки. По ссылке ниже приведены инструкции по настройке Android SDK и виртуального устройства Android для React Native, если вы застряли или видео устарело, перейдите на официальный сайт React Native:

Для macOS вам потребуется Node, Watchman, JDK, Android Studio и Xcode. Вам нужна Android-студия для настройки собственного кода, когда это необходимо, и, следовательно, Xcode для настройки настроек на основе iOS.

Для установки зависимостей официальный сайт React Native рекомендует Homebrew. Установите Homebrew и выполните следующие команды в Терминале:

brew install node
brew install watchman

Установка React Native CLI

Теперь мы установили установки среды разработки и готовы к настройке интерфейса командной строки React Native. Выполните следующую команду в терминале, командной строке или оболочке, чтобы установить React Native CLI:

npm install -g react-native-cli

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

npm install -g yarn

В этом блоге я буду использовать React Native CLI. Вы также можете использовать Expo, но у expo есть ограничения, и вы не можете включать собственные модули в свое приложение. Create-React-Native-App, просто CRNA, - это еще один способ создания проектов, но это устаревшая версия для создания приложений React Native. Поскольку React Native CLI является зрелым, мы будем использовать его в нашем блоге.

Создание проекта с помощью React Native CLI

Мы готовы создать наш первый проект на React Native. Итак, давайте создадим наш замечательный проект с помощью следующей команды:

react-native init ReactNativeTsMobxNativeBase

Подождите, пока установятся все зависимости. Когда создание проекта завершится, смените каталог на каталог проекта следующим образом:

cd ReactNativeTsMobxNativeBase

Установка машинописного текста

Давайте установим Typescript в наш проект. Я использовал Microsoft's Typescript React Native Starter, который рекомендован официальным сайтом React Native. Скопируйте и вставьте следующие команды в Терминал:

yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react
touch rn-cli.config.js
yarn add --dev @types/react @types/react-native

Файл tsconfig.json содержит конфигурации Typescript. При использовании Typescript в React Native вам потребуются некоторые настройки. Первоначальный tsconfig.json содержит минимальную конфигурацию, но если вы хотите увидеть волшебство Typescript в своем проекте, измените файл tsconfig.json следующим образом:

«Rn-cli.config.js» содержит настройки для React Native Typescript Transformer, поэтому скопируйте и вставьте следующий код:

Если вы следуете командам, данным в этом блоге, тогда ваш проект должен содержать App.js, переименуйте его в App.tsx. Файл index.js следует переименовать в index.tsx. Расширение tsx или ts будет использоваться для реализации Typescript.

Автоматизированное тестирование является обязательным условием для приложений. Вот почему мы используем решение для тестирования Jest JavaScript для проектов React. Поскольку мы используем Jest, давайте добавим ts-jest в наш проект с помощью следующей команды:

yarn add --dev ts-jest

Откройте файл package.json и замените поле jest следующим, что настроит Jest для запуска файлов .ts и .tsx с ts-jest:

Чтобы использовать магию машинописного текста, мы установим файлы определения типа для Jest, React, React Native и React Test Renderer с помощью следующей команды:

yarn add --dev @types/jest @types/react @types/react-native @types/react-test-renderer

Чтобы написать тесты моментальных снимков для наших компонентов, нам необходимо установить следующую надстройку для тестов моментальных снимков:

yarn add --dev react-addons-test-utils

Вот и все. Мы настроили Typescript для нашего проекта React Native.

Установка Mobx

Установка Mobx настолько проста, что нам нужны пакеты mobx и mobx-react. Итак, давайте установим необходимый пакет в наш проект. Для простоты скопируйте и вставьте следующие команды в Терминал, и в нашем проекте будут установлены mobx и mobx-react:

npm i mobx mobx-react

Чтобы использовать декораторы ES7, нам понадобится плагин babel. Итак, давайте установим это:

npm install -D @babel/plugin-proposal-decorators

Нам нужна простая конфигурация babel для добавления в файл .babelrc. Итак, давайте изменим файл .babelrc следующим образом:

Установка NativeBase

Мы будем использовать компоненты NativeBase в нашем проекте, поэтому давайте установим его в нашем проекте с помощью следующей команды:

npm install native-base

И установите одноранговые зависимости с помощью следующей команды:

react-native link

Мы успешно установили в наш проект милую библиотеку компонентов пользовательского интерфейса. Теперь давайте посмотрим на имитацию REST API.

Мокинг REST API

Мы будем использовать json-server для имитации конечных точек нашего API и выполнять запросы POST, GET, PUT, PATCH, DELETE так же, как настоящие конечные точки, но с фиктивными данными. Для создания фиктивных данных мы будем использовать Faker.JS.

Давайте установим json-server с помощью следующей команды:

npm install -g json-server

и установите Faker.JS следующим образом:

npm install faker

Мы будем использовать служебные функции, предоставляемые lodash для общих задач программирования. Итак, давайте установим lodash следующим образом:

npm install lodash

Это конец части установки и настройки. Вы можете получить доступ к исходному коду этой части из GitHub с помощью тега Part-I.

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