DEVSTEAM.mobi interview assignment BASIC interview assignment. Тестовое задание: Реализовать галерею на базе React-Native (не React.js) которая будет отображать фотографии из unsplash. Это приложение должно извлекать ресурс в формате JSON. Приложение должно содержать два экрана(страницы):
- Список
- мини изображение с названием и автором
- когда пользователь нажимает на изображение, открывается экран фотографии
- Фотография
- отображает одну фотографию с максимальной площадью.
Предпочтительнее инициировать приложение через React Native CLI с помощью команды - react-native init TestApp, нежели чем через команду - create-react-native-app, если ресурсы вашего компьютера позволяют.
Внешний вид:
Summary: Задание пришло на почту 29/07/2020 в 13:30. К сожалению приступить к работе получилось лишь на следующий день. Среди перечисленных технологий.
Необходимые к применению технологии:
* React-Native
приложение написано на фреймворке React-Native 0.62.2
* Redux + Async Redux library (redux-thunk, redux-saga, e.g.)
не применял, ознакамливаюсь - будет применено к state данным, а конкретно к получаемому
и передаваемому Array от Get Request.
* es6 (JS)
даже сказал бы ES8 учитывая что повсеместно использую Async/Await. Filter. Классы не использовал,
потому как понял, что конвенция переходит на хуки+функции.
* Flexbox
не использовал для выравнивания картинок по экрану, потму как использовал FlatList, а он FlexWrap
не поддерживает. Учитывая, что в React-Native по умолчанию используется Flex display, на остальной
контент он распространяется (PictureDetails у меня выровнена в флексе).
* React Navigation [facebook github io/react-native/docs/navigation.html#react-navigation]
Использовал для навигации между страницами и передачи props
* fetch [developer mozilla org/en-US/docs/Web/API/Fetch_API/Using_Fetch]
хотелось использовать axios, но использовал fetch для доступа к API
Предлагаемые к применению технологии:
* Hooks
поскольку писал по конвенции функциональных компонентов использовал useState,useEffect повсеместно,
а также Hook компонент, хотя и чую что чуток корявенький.
* компоненты высшего порядка (High Order Components)
не видел смысла, да и опыта маловато в использывании wrappers
* render props
передавать функциональные props и так полуается...было применено в SeearchApi, который передавался со скрина на компонент
* ref
с краткого(очень) ознакомления понимаю, что это callback функция с механикой по типу getters setter,
но пока не разобрался. Разберусь по потребности
Я имел опыт лишь с Flexbox, es6 и ReactJS(тоесть частично React Native). Работа с API не нова, поэтому я сразу знал как это должно делаться(https://github.com/Eakz/codecademy_react - два учебных проекта на ReactJS - один с использованием Классовых компонентов, Другой с использованием функциональных компонентов и хуков).
Итого затрачено:
- 2 дня(неполных) - ознакомление с ReactNative, его синтаксисом и конвенциями
- 2 часа - переход с ExpoCLI+PhysicalDevice на React-Native init APP + AndroidStudioEmulator...Да, было больно
- 2 часа - написание версии без Redux.
Версия с Redux и OAuth2 в разработке.