Н.Б. Некоторые из файлов, представленных в приведенных ниже списках, имеют расширение .jsx, это сделано намеренно, чтобы обеспечить необходимую подсветку синтаксиса для этой статьи. На самом деле все эти файлы сохраняются в каталоге клиента с расширением .js. Кроме того, в Gists «…» относится к коду, который, по моему мнению, не был уместным или неправильным и намеренно опущен.
Финал моей операции
Да, наконец-то он здесь, после очень насыщенного года для меня я вернулся с новым проектом, и он мой последний для школы Flatiron. Это комбинация Ruby on Rails на серверной части и JS на стороне клиента, в частности React, с использованием React-Router и, что наиболее важно, Redux для управления состоянием приложения. Звучит как много? Ну да, у меня был небольшой перерыв в середине года после окончания учебной программы React/Redux, и мне было довольно трудно собрать все обратно, когда я вернулся и сразу перешел в режим проекта. С серверной частью проблем не было, мне нравится думать, что мои знания Rails на данный момент довольно хороши. Итак, после небольшого пересмотра генераторов и миграций я был готов к хорошему старту. К сожалению, оказалось, что я не сохранил знаний об этой последней главе курса, и мне пришлось потратить довольно много времени на изучение всех аспектов этого последнего раздела, прежде чем я действительно смог приступить к работе. Однако после пары бесед с очень полезной Алисой и использования Slack мне удалось приступить к делу.
Вернуться к серверной части
Итак, как указано выше, первое, что нужно сделать, это создать серверную часть Rails, чтобы у меня была конечная точка API для моего клиента React. Я выбрал галерею изображений специально для изобразительного искусства по теме моего финального проекта. Я остановился на относительно простом API, было бы три модели. Одним из них может быть Живопись, другим Художник и, наконец, Период (например, барокко, импрессионизм и т. д.). Первые два говорят сами за себя, Artist, однако их следует использовать только по таксономическим причинам. Не будет, так сказать, страницы Художника, это будет средство организации Картины. Период должен был стать моделью, объединяющей все вместе, и то, что должно было пройти как представление индекса Period-Artist в приложении Rails от начала до конца, должно было лежать в основе этого. проект. Я также использовал ActiveModel::Serializers, поскольку мне нужно было включить не только список Картинок, но и Картинок в пределах отдельной области. данного Исполнителя.
Назад на передний план
Так или иначе! Время для React-компонента приложения… дошлло? Компонент? Извините, я теперь отец, и мои шутки сразу стали хуже. Итак, давайте начнем с некоторых настроек. Я запустил последнюю версию create-react-app, чтобы начать работу, я просто назвал ее Клиент и поместил в корневой каталог приложения. В целях разработки я использовал Foremangem для синхронизации передней части с задней с помощью Procfile (в рабочей среде я бы развернул их отдельно). Использование Redux для управления состоянием было требованием для проекта (безусловно, самым сложным разделом всего курса, кстати), поэтому, согласно документации, я пошел дальше и обернул готовый компонент ‹App /› с ‹Provider /› в чтобы подключить все приложение к магазину Redux. Использование react-router также было требованием, поэтому архитектурный стиль, на котором я остановился, заключался в том, чтобы поместить то, что я называю ‹AppRouter /›, в ‹App /›, а затем перейти оттуда; ответвление дерева компонентов от прежнего.
Реакция на Redux
Как упоминалось ранее, это был самый сложный аспект этого проекта. Одна проблема, с которой я столкнулся, заключалась в отключении метода жизненного цикла для моей целевой страницы. Особенность React заключается в том, что метод рендеринга срабатывает до того, как сработает любой метод жизненного цикла; в данном случае componentDidMount. Поэтому я счел необходимым разместить это внутри ‹App /›, чтобы оно было доступно для ссылки Периоды на моей целевой странице. Внутри ‹AppRouter /› я поместил, как вы уже догадались, все свои маршруты. Я также импортировал все свои контейнеры (компоненты React, которые знают о Redux). Первым делом нужно было добавить ‹Header/›, компонент без состояния, который будет присутствовать во всем UX, очевидно, это будет относительно простой компонент с заголовком/логотипом со ссылкой на ‹Home/› и на другие места в UX. приложение, влево и вправо. Таким образом, контейнер ‹Главная /› должен был стать моей целевой страницей, я также знал, что мне нужна страница ‹О программе /› и страница ‹NotFound /› для ошибок 404. Оба они будут чисто презентационными и неинтерактивными (за исключением нескольких ссылок и писем).
Главной особенностью ‹Home /› будет фон, который будет случайным образом выбираться API после «выборки» следующим образом: Метод жизненного цикла componentDidMount запускает создателя действия (fetchRandomPainting), который получит запрошенные данные от API, а затем с помощью действия setPainting отправит объект со значением 'type' 'GET_PAINTING_SUCCESS' соответствующему редюсеру (paintingsReducer.js)вместе со значением paintingpayload (то, что было отправлено API). После получения действия Редюсер вернет значение для обновления состояния на основе значения типа ; в данном случае вышеупомянутое. Мне также пришлось установить начальные значения состояния в пустые строки или null, чтобы обойти метод образа жизни, запущенный до рендеринга. Назад в ‹Home /› mapStateToProps запускается для обновления свойств компонента на основе нового состояния. Затем компонент экспортируется с помощью функции Redux connect.
Результат этого в основном гарантирует, что каждый раз, когда пользователь посещает ‹Home /›, будет отображаться другой фон со ссылкой через свойства title и year, которые появляются рядом с ним, к которым я смог получить доступ через реквизиты компонента после жизненного цикла. метод побежал.
Периодически
Итак, как упоминалось выше, я поместил еще один componentDidMount в ‹App /›. На самом деле это было для получения всех периодов из API, чтобы я мог использовать их, когда пользователь перешел к Периодам. Это необычно и не очень красиво, но, безусловно, работает достаточно хорошо. Как только пользователь щелкнет ссылку Periods, ‹PeriodList /› отобразится и ранее извлеченные периоды (выполнено аналогично fetchRandomPainting) заполнит страницу. Я немного похвастался здесь, добавив метод класса randomImagePicker , который для каждого Periodвыбирает другой фон для конкретного текста Period каждый раз, когда он рендеры, а также некоторые CSS-анимации. Таким образом, когда срабатывает функция рендеринга, свойства props.periods (выбранные ранее) обрабатываются с помощью map, и каждый элемент списка передается в ‹Period /› в качестве свойств. ‹Период /› — это контейнер без сохранения состояния, который создает случайный фон, текст, относящийся к названию Периода, и ссылку на конкретный период.
На века
Ну, я мог бы написать тысячу или даже тысячу слов. Я добавил раздел комментариев или «Гостевую книгу» и некоторые другие стили с момента первого черновика этой статьи, поэтому, думаю, я остановлюсь здесь. Я рассмотрел суть технологии, используемой здесь (по крайней мере, в отношении «потоковой» архитектуры React и Redux), но есть гораздо больше, чтобы изучить ее, вы можете перейти по ссылке GitHub вверху и проверить README, если вы хотите клонируйте его локально и посмотрите сами. Я уже какое-то время работаю во Flatiron, и это было довольно увлекательно, и я рад видеть, что ждет меня в будущем после выпуска; пожелайте мне удачи в поиске работы! Я надеюсь, что у вас всех было очень счастливое Рождество, и я надеюсь, что у вас есть счастливый и процветающий Новый год!
