Создание заготовки для React Native проекта

После настройки VS Code можно приступить к созданию нашего первого проекта на React Native. В этой статье я опишу разницу между двумя самыми популярными способами создания проекта, которые рекомендует facebook, а также добавлю необходимые по моему мнению dev зависимости для удобного кодинга. В результате получим универсальную заготовку под следующие проекты.

Итак приступим! Идем на официальный tutorial и видим, что в качестве quick start facebook рекомендует установить Create React Native App и уже с помощью его CLI создавать проект. В таком случае нам не придется предварительно устанавливать Xcode или Android Studio. На момент написания статьи скрипт не работает с npm 5, потому не паримся и ставим yarn. Для большинства React Native проектов этого вполне хватит до того момента, пока не понадобится подключать/писать нативные модули. Переходим в папку с проектами и выполняем

create-react-native-app stub

По окончании генерации мы получим следующий набор файлов

Если же нам требуется добавить нативные модули/зависимости, которые не совместимы с Expo, всегда можно сделать

yarn run eject

В предложенном диалоге выбираем React Native: I’d like a regular React Native project, пишем название приложения и получаем отсутствующие ранее папки ios и android и прочие файлы настроек. Отменить данную операцию можно только через систему контроля версий (git).

Если же мы пройдем на вкладку Building Projects with Native Code, то увидим последовательность шагов, которые приходилось проходить до создания CRNA. Также нам придется посетить эту вкладку, если мы сделали eject у проекта, созданного через CRNA, потому будь готов.

Теперь приступим к установке dev зависимостей, сделающих нашу разработку качественнее:

• ESLint - cтатический анализатор кода, имеющий кучу настроек.

yarn add eslint --dev

• babel-eslint - будем использовать Babel parser для eslint, чтобы не заморачиваться с глубокой настройкой правил для различных редакций ECMAScript

yarn add babel-eslint --dev

• eslint-config-airbnb - самый полный набор правил для ESLint от Airbnb

yarn add eslint-config-airbnb --dev

• eslint-plugin-import - плагин, проверяющий секцию импортов на доступность того или иного пакета

yarn add eslint-plugin-import --dev

• eslint-plugin-jsx-a11y - плагин для проверки JSX кода наших компонентов на соответствие правилам accessibility

yarn add eslint-plugin-jsx-a11y --dev

• eslint-plugin-react - плагин, добавляющий правила, специфичные для проектов на React и React Native

yarn add eslint-plugin-react --dev

• Prettier - утилита для форматирования кода по es стандартам

yarn add prettier --dev

• eslint-plugin-prettier - плагин для интеграции prettier с eslint, чтобы не конфликтовали друг с другом

yarn add eslint-plugin-prettier  --dev

• eslint-config-prettier - настройка eslint правил, для исключения конфликтов с prettier

yarn add eslint-config-prettier  --dev

После установки пакетов приступим к файлам конфигурации установленных пакетов. Настройки ESLint описываются в файле .eslintrc или же в package.json в секции eslintConfig. Чтобы отключить ESLint для каких-либо папок и файлов используется файл .eslintignore или же в package.json в секции eslintIgnore. Также можно вынести настройки Babel из файла .babelrc в package.json в секцию babel.

Полный код проекта выложен на GitHub. Для последующих проектов можно использовать данную заготовку, сменив название проекта. Запуск Android версии (предварительно потребуется запустить android эмулятор или подключить девайс) осуществляется с помощью

yarn run android

Если у тебя установлен Xcode, то можно запустить iOS версию

yarn run ios

Written by Alex - android developer,
react-native learning, PS4 gamer, music lover.