Как ни странно, в октябре подразделение React на Генеральной Ассамблее зловеще рухнуло. По мере того, как приближался Хэллоуин и погода перешла от влажных 70 ° к суровым 43 °, задание React приближалось. Как и многие классические ужасы, эта история начинается с наивной невежества молодого оптимиста ...
Вот список того, что я знал о React до 1 октября:
- React - это библиотека, разработанная инженерами Facebook.
- Компоненты составляют более крупное приложение React.
- Он использует как JavaScript, так и HTML.
- Бу! Мне должно быть страшно.
После двух недель умопомрачительных лекций нам было поручено создать собственное приложение React. Когда инструкторы объясняли задание, вы чувствовали запах страха, разносящийся по комнате. Рекомендации были четкими, но безжалостными и содержали что-то вроде: «Если вы хотите выжить в этой программе, не теряя души, вы должны заполнить одностраничное приложение React, используя несколько компонентов, маршрутизатор реакции и выборку данных из API ... или иначе ».
Ага ... Я почти уверен, что они так и сказали.
Поэтому, когда запаникованные студенты отправились определять свою судьбу, мы изо всех сил старались придумать какой-нибудь дьявольский план по спасению наших находящихся в опасности душ. Как будто я был под заклинанием ведьмы, меня осенило (из мертвых), что я могу убить двух зайцев одним выстрелом ... это была прекрасная возможность создать свое собственное портфолио. Я бы не только продемонстрировал свою работу по веб-разработке, но и нашел способ привлечь еще одну страсть - искусство - мой план был безупречным. Это задание начинало ощущаться не столько как проклятие, сколько как благословение.
Угрожающие каркасы
Используя магию Sketch, я начал с разработки своего веб-сайта. Он будет состоять из четырех основных компонентов; домашняя страница, портфолио веб-разработки, художественное портфолио и страница с информацией / контактами. Каждая страница будет иметь определенный дизайн, который поможет очаровать зрителя. Как паук, плетущий сеть, мои каркасы и архитектура приложения обрели форму ...
Причудливое управление задачами
Как только я понял, как я хочу, чтобы моя драгоценность собралась вместе, я оценил время для выполнения гигантских задач. Разделение проекта на более мелкие части уменьшило мое растущее беспокойство.
Важнейшие задачи (MVP):
M1 - Создайте HTML и CSS для всех страниц.
M2 - Разбивайте страницы на компоненты.
M3 - Жесткий код художественного портфолио.
M4 - Маршрут между страницами.
M6 - Вытяните API портфолио с помощью D3.
M7 - Разбейте подстраницы на более мелкие компоненты.
Менее важные задачи (публикация MVP):
P1 - Извлечь API данных веб-портфолио с помощью D3.
P2 - Создание компонентов для всех ‹divs›.
P3 - Получите форму для отправки на мою электронную почту.
P4 - Создать случайную выборку из Artsy API.
Демоны на пути
Чтобы избежать мрачной судьбы, нужно было совершить пять чудовищных подвигов. Подобно доктору Франкенштейну Мэри Шелли, я кропотливо работал, чтобы сшить все вместе, пока оно не превратилось в чудовищное существо, которого мир никогда не видел.
Сначала мне нужно было импортировать React Router, чтобы сплести воедино мое творение. Импортируя response-router-dom, я смог это сделать. Соединив все воедино, архитектура моего приложения обрела форму cob-web.
Для страницы моего художественного портфолио мне нужно было заполнить миниатюры всеми изображениями, которые я собрал. Чтобы решить эту проблему, я создал свой собственный API на листе CSV. Разбив URL-адрес изображения, заголовок и описание, я наконец получил всю необходимую информацию в одном месте. Как колдунья, читающая заклинание, я извлекал данные из своего зачарованного CSV с помощью D3, библиотеки для визуализации данных.
Теперь я получил все, что мне было нужно для моего злого зелья, у меня были данные, и теперь мне просто нужно было сшить их воедино. Используя метод .map (), я смог вытащить каждый объект данных в отдельный элемент на странице моего художественного портфолио. Но теперь на моем пути стоял новый монстр. Как зарегистрировать событие щелчка на изображении эскиза и отобразить его в компоненте функции?
Состояние было тем ответом, который я искал. Добавление нового состояния с именем «current», которое было обновлено onClick и захватило соответствующий идентификатор изображения, позволило мне передать эту информацию в компонент функции и отобразить ее на странице. Мой монстр оживал.
Мое творение с живой функциональностью было гротескным гоблином, лишенным какой-либо эстетики. Мне еще предстояло реализовать сверхъестественные эффекты CSS. Помимо основ выбора цветовой схемы и шрифта, мне нужно было добавить что-то особенное. Макет кладки, ставший популярным благодаря небольшому сайту под названием Pinterest, был идеальным способом показать мои эскизы изображений. Используя столбцы, я смог превратить скучную прокрутку в один столбец в динамический лоскутный узор из трех столбцов, и в этот момент я влюбился в свое чудовищное творение.
Оно живое!
И на этом заканчивается история о том, как я использовал силу React, чтобы оживить свое творение и тем самым выжить в моем втором подразделении на генеральной ассамблее.
