Этот этап был действительно захватывающим, мы научились использовать реакцию! Это было действительно сложно, потому что в течение последних 10 недель мы медленно изучали javascript, HTML и CSS, но когда этот этап начался, я потерялся во всей новой информации, которую мы получали, изучая реакции, но, в конце концов, все встало на свои места. и я понял, что такое мощный фреймворк React.

Этот финальный проект является окончательным доказательством того, что React намного лучше, чем ванильный javascript, потому что приложение, которое я смог создать, получилось намного чище и намного больше, чем мое предыдущее, и я почти уверен, что если бы я собирал то же самое приложение с javascript потребовало бы в три раза больше времени.

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

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

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

Что касается стилей, я использовал bootstrap и реактивный семантический пользовательский интерфейс, но, конечно, большая часть стилей была сделана мной с помощью CSS, и, хотя функциональный аспект был намного важнее, чем стиль, я доволен внешним видом моя страница, которая должна обеспечивать удобство для пользователей, делая любую функцию максимально очевидной для пользователей.

Чтобы сделать мой проект более полным, я также решил создать фиктивный сервер JSON, на котором я сохранил данные о клиентах, такие как имена, адреса электронной почты, общие сведения, пароль, балансы текущих и предыдущих заказов. Большая часть связи между моими 5 маршрутами осуществляется путем выборки, и каждый пользователь может войти в систему и зарегистрироваться с условием, что имя пользователя должно быть уникальным, и изменить свои данные в разделе профиля. Наконец, мои маршруты были основными, где клиенты могли видеть продукты и регистрацию, где клиенты должны были войти в систему или зарегистрироваться, а затем они будут перенаправлены на главную страницу, как только они это сделают. Только после того, как пользователь войдет в систему, он получит доступ к трем другим маршрутам: текущему заказу, предметам в машине, предыдущему заказу и информации профиля, где пользователь может изменить свои данные, и единственный способ вернуться на страницу входа — это выход из системы на странице профиля, которая автоматически скроет три маршрута (текущие и прошлые заказы и сам профиль) и перенаправит для входа в систему.

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