Иногда происходит так много, но когда вы отступаете назад и видите конечные результаты, это шедевр. Также вам потребовались недели, и вы даже не уверены, что собираетесь показать это кому -либо. Может быть, это может пойти в портфолио однажды Но вы никогда не заканчиваете с этим. Мой текущий проект станет одним из тех, кто постоянно проходит в процессе. Он также сосредоточен вокруг искусства, поэтому я подумал, что сравнение было в курсе. Мой проект, Decurator, позволяет вам просматривать разнообразные картины современного музея искусств (MOMA для своих друзей) в Нью -Йорке. Вы можете создать номера для хранения ваших любимых картин и просмотра других экспонатов. Проверьте демонстрацию ниже, прежде чем мы получим все технические об этом. Бэкэнд этого проекта был создан с Ruby on Rails. У меня было две модели- живопись и комната- со столом соединения выставки. Фронт был создан с использованием JavaScript, с React в качестве моей структуры и Redux, чтобы дать мне это сладкое, глобальное действие магазина. Бэкэнд, как и мой последний проект JavaScript («квадрат»), работал не так сильно, как на переднем крае. Я использовал его, чтобы генерировать свои API или заселенные комнаты и картины. Благодаря базе данных из 1994 картин я знал, что у моего фронта будет полевой день, пытаясь загрузить столько картин. Чтобы предотвратить это, я настроил свой индексный маршрут так: картины. Это позволило загрузить случайную выборку из 20 картин в то время. На передней части, это позволило мне принести 20 новых случайных картин с нажатием кнопки:
Примечание : Вам может быть интересно, почему у меня были картины, перечисленные по заказу художника, когда все результаты являются случайными. Честно говоря, функция .sample была временной костылем во время разработки. Моим истинным намерением было представление страниц, но даже это означало бы прокрутку 100 страниц картин. Я планирую включить функцию в самом ближайшем будущем, чтобы позволить людям искать по имени художника, национальности, пол и многое другое.
Работать в React была интересной. И так же, как мне это стало комфортно, мы научились включить Redux. Переезд из местного штата в глобальный магазин был полезным, но также сбивающим с толку. Был день или два, где я не был уверен, что было правильным способом достижения цели. (Дополнительное веселье: когда вы работаете над бэкэнд Ruby и продолжаете пытаться установить переменную с помощью «пусть».) Одна вещь, которую я точно знал, это то, что функция Connect довольно крутая.
Connect – это функция, которая является частью семьи Redux. Он живет в экспортной линии каждого компонента, который нуждается в нем, и соединяет этот компонент не только в хранилище Redux (наши глобально хранимые данные), но и функции, необходимые для отправки действий в магазин. Существует два важных аргумента, передаваемых этой функции- MapstateToprops и MapDispatchToprops. Я хочу сосредоточиться на одной из функций MapStateToprops- собственных проходов.
MapStateToProps?: (State, Ownprops?) = > Объект Если указана функция MapStateToProps (AKA ‘StateProps), новый компонент обертки будет подписаться на обновления Redux Store. Это означает, что каждый раз, когда магазин обновляется, будут вызваны MapStateToProps. Результаты MapStateToProps должны быть простым объектом, который будет объединен в реквизит обернутого компонента. Если вы не хотите подписаться на обновления, пропустите нулевые или неопределенные вместо MapStateToProps. Вы можете прочитать больше о них Здесь Анкет
Если вы используете StateProps, первым приведенным параметром является состояние магазина. Если вы используете дополнительный второй параметр, вы можете использовать Собственные процедуры , атрибуты, которые передаются при использовании компонента. Проще говоря, это будет просто называется реквизитом. Взгляните на мой файл singleroom.js ниже:
Если бы я поместил отладчик после строки 9 и наберет «собственные процедуры» и «Currentroom» в консоли, я бы получил большое красное предупреждение о том, что ни один из них не определен. Оба живут в методе StateProps. Тем не менее, я смог манипулировать собственными программами в этом методе, чтобы получить данные, которые мне нужны в константе, называемой текущей комнатой. Уведомление в строке 8 Я могу использовать текущий зал, добавив префикс This.props- это компонент, и реквизит- его собственные реквизиты. Взгляните на журнал консоли: сначала мы нажимаем на функцию StateProps, где мы видим собственную переменную и переменную в текущей комнате. Следуя пути, мы можем получить идентификационный номер комнаты, в которой мы используем Ownprops/Match/Params: {id: “3”}. Превратите это в целое число, используя Parseint, и у нас есть фактический номер 3. Теперь мы можем взять этот идентификатор комнаты и найти не только его название, но и его картины и отобразить их, чтобы увидеть. Yippee Skippy! Обратите внимание, что мне не нужно было вызывать функцию DispatchProps. Поскольку нам не нужно было возвращать новые функции, которые вызовы Dispatch (), диспетчерская передавалась моему компоненту по умолчанию.
Этот проект является моим последним официальным учеником в школе Flatiron. Я заметил, что с каждым проектом я сомневался в своей способности закончить его и заставить его работать должным образом. С этим я подумал, что это будет холм, на котором я умру. Оказывается, я закончил его за меньшее время, чем мои предыдущие проекты. (!!!) Каждая неделя проекта включает в себя много неуверенности в себе, но также были трипфальные моменты: когда эта функция, над которой я работал в течение часа, наконец-то работает правильно, когда я делаю крутую функцию, используя CSS, когда я не получаю красный Предупреждения в консоли. Это все моменты, чтобы дорожить и перезвонить, когда я чувствую себя подавленным. Я призываю любого, кто подвергает сомнению их способности вспомнить, что они чувствовали в эти моменты, и помнить, что был также момент «после этого», который включал сон и, возможно, праздничное пиво.
Кодирование действительно похоже на искусство. Некоторые люди поймут это, некоторые не будут.
Гиббера одного человека – кровь, пот и слезы другого человека.
Но самая большая вещь в вашем шедевре – это то, что это ваш собственный. Ну, твой … и, может быть, некоторые люди публикуют на Переполнение стека
Обложка: «без названия», Сэм Гиллиам (2019)
Оригинал: “https://dev.to/nmhummel/coding-is-like-art-1bbh”