Я только что завершил свой первый проект React, успешно создав рабочий интерфейс веб-приложения, похожего на Tindr, для учебы в Academy Xi. Этот проект я решил назвать CompatabL.

Вещи, которые я узнал

За последние несколько недель я перешел из своего безопасного пространства изучения JavaScript в новые воды ReactJS. Библиотека JavaScript с открытым исходным кодом, используемая для создания динамичного пользовательского интерфейса для современных веб-сайтов.
Среди основных тем, которые мы рассмотрели, были следующие: JSX, компоненты (функциональные и классовые), состояние, перехватчики React, контролируемые и неконтролируемые формы, модули CSS, асинхронный React, жизненные циклы компонентов, маршрутизация реагирования и события. обработчики. Это было много, но так полезно, что я с нетерпением ждал каждой лаборатории и каждого нового аспекта, о котором я узнал.

Важнейшим аспектом этого этапа была практика. Я закончил основное обучение за половину времени, отведенного на фазу, и я думал, что намного опередил то, что от меня ожидалось. Остались только учебные лаборатории. Это заняло у меня оставшуюся часть фазы, и они были изнурительными и иногда неумолимыми до такой степени, что я тратил часы и часы на одну и ту же лабораторию только для того, чтобы понять, что я пытался установить состояние, используя 'this.state()', а не 'это.setState()'. .. Это был единственный раз, когда я совершу эту ошибку.

Проэкт

После завершения лабораторных работ пришло время заняться нашими собственными проектами. Для этого мы могли делать все, что хотели. Единственными реальными требованиями, которые у нас были, были следующие:

- Your app should have one HTML page to render your react application
- Your app should use multiple components in a way that keeps your code well organized.
- There should be 3 routes
- The Application must make use of react-router and proper RESTful routing
- Your app must incorporate API data.
- Your app must persist some data using a JSON server as a mock up backend

Эти требования легли в основу идеи моего проекта. Мое приложение случайным образом генерировало пользователей с помощью двух отдельных API, один для случайных фотографий, а другой для случайных пользовательских данных. Затем пользователь после создания учетной записи будет ставить лайки или антипатии другим пользователям в зависимости от того, что они чувствуют после просмотра их фотографий и прочтения их биографий. встретить следующий экран:

Если бы приложение было реальным и имело надлежащий бэкенд, то эта форма была бы создана изображенным пользователем, и им был бы установлен требуемый балл. Если бы мне нужно было правильно ответить на достаточное количество вопросов, чтобы набрать требуемый балл, я бы «сопоставил» их, и они были бы добавлены к моим совпадениям. После сопоставления пользователь будет добавлен на мою страницу «совпадений», где я могу перейти и посмотреть его профиль или выбрать несовпадение с ним.

Каждый отдельный пользователь, с которым я должен был сопоставить, будет иметь свою собственную уникальную маршрутизацию, которая будет создаваться динамически каждый раз, когда я совпадаю с ними (см. URL-адрес следующей фотографии)

Это позволяет моему приложению быть бесконечно динамичным без необходимости жесткого кодирования каждого отдельного маршрута.

Если бы я хотел что-то изменить в своем профиле, это было бы невероятно легко. Я могу изменить всю свою информацию, включая предпочтения по полу, на главной панели профиля. Это обновит мой фиктивный бэкэнд и позволит мне изменить пол, отображаемый мне на главной странице, мое имя, возраст, биографию, любимые занятия и т. д.

Стайлинг

Большая часть моего стиля была сделана с помощью React Bootstrap, которая с тех пор стала одной из моих любимых библиотек. Он был невероятно прост в использовании и даже позволил кому-то, кому не хватало опыта в дизайне, создать что-то несколько профессионально выглядящее.

Проблемы

У меня было много проблем при создании этого, и хотя все они были отличным опытом обучения, самыми трудными проблемами, которые у меня были, были:

  1. Постоянная информация. Многие мои пользовательские данные используются в нескольких различных компонентах. После прохождения сгенерированной пользовательской информации они начинаются на главном экране в качестве опции. После того, как им «понравилось», их информация сохраняется и передается в другой компонент, который отображает викторину и их информацию. После успешного сопоставления они затем сохраняются и перемещаются в другое место, чтобы храниться в совпадениях пользователя, прежде чем щелкнуть и перенести на свою собственную страницу, чтобы продемонстрировать свой «профиль». Эта передача данных вместе с передачей данных основного пользователя временами становилась очень грязной, и где-то глубоко в коде, который я написал несколько дней назад, регулярно были спрятаны ошибки.
  2. Двойной компонентный рендеринг. В какой-то момент я решил, что было бы неплохо использовать один и тот же компонент для двух совершенно разных блоков информации. Один для пользователя, а другой для совпадения. Это избавило бы меня от необходимости создавать еще один компонент, но, в свою очередь, заставило меня настроить несколько различных аспектов исходного компонента, функции надстроек, которые были неуместными или релевантными в зависимости от того, где он рендерился, и просто испортил компонент. Я, конечно, научился не делать этого во время этого проекта.
  3. Асинхронный ответ. Одним из самых неприятных моментов, с которыми я столкнулся, была асинхронная природа состояния. Больше раз, чем я хотел бы сосчитать, я пытался установить состояние, а затем сразу же пытался получить к нему доступ в строке после вызова функции set. Это, очевидно, не сработало, но несколько раз я смотрел на свой экран, просматривая строку за строкой, и рвал на себе волосы, прежде чем осознал свою ошибку, прежде чем использовать useEffect или что-то подобное.

В заключение, я прекрасно провел время, создавая этот проект, и я чувствую, что у меня есть очень прочная основа в React. Я горжусь тем, что преодолел свое знакомство с React и получил новый, очень ценный навык в своем репертуаре.

Если вы хотите ознакомиться с моим проектом, пожалуйста, найдите ссылку здесь:

https://github.com/D-Justice/CompatabL/tree/master/compatabl