** ОБНОВЛЕНИЕ: json-сервер, который я разместил на Heroku для сохранения результатов дуэлей, был закрыт, так как Heroku перестал предлагать freemium. По этой причине функция истории отсутствует на данный момент. Я сейчас подключаю приложение к сервису Google Cloud Firestore, чтобы восстановить его функциональность. КОНЕЦ ОБНОВЛЕНИЯ**
Обзор
React.Js — это мощная библиотека JavaScript, которая использует декларативное программирование и позволяет нам, разработчикам, писать краткий код и уделять больше внимания функциональности, а не императивному объявлению всего. На этапе 2: React в Академии Си я изучил основы React.Js и применил их в своем первом проекте: Волшебная дуэль. Перейдите на его страницу GitHub, если хотите углубиться.
Что такое Волшебная дуэль?
Wizarding Duel — это одностраничное приложение (SPA), которое позволяет пользователю выбрать двух волшебников из доступного списка персонажей вселенной Гарри Поттера, заставить их пройти 3 дуэльных раунда. Каждый раунд дуэли прост: каждому дуэлянту назначается случайное заклинание, и с соответствующим количеством очков заклинаний их общее количество очков накапливается с каждым раундом, и в результате персонаж получает больше очков как победитель, если только в случае ничьей . Пользователь может сохранить исход дуэли, если пожелает. Довольно просто, верно? Давайте прыгнем в это!
Результаты обучения
В Wizarding Duel я практиковал следующее:
- Создание одностраничного приложения React с нуля с помощью create-react-app
- Использование компонентов, реквизита и управление состоянием
- Включение маршрутизации на стороне клиента, включая 3 маршрута и вложенный маршрут
- Использование данных из внешнего API для персонажей и заклинаний Гарри Поттера
- Использование json-сервера для создания бэкэнда для сохраненных результатов дуэли. Компонент контролируемой формы использовался для выполнения запроса POST.
- Использование стилей Styled Components, ThemeProvider и GlobalStyles
Путь жизненного цикла проекта
Крепление (1/4) Компонентная структура
Каждому компоненту была назначена собственная папка внутри папки src. Возьмем, к примеру, папку компонента CharacterCard:
src - CharacterCard ---- CharacterCard.jsx ---- CharacterCard.styled.js ---- index.js . . . - index.js
CharacterCard.jsx содержит логику компонента. Он принимает реквизиты и возвращает jsx. CharacterCard.styled.js содержит стили для нашего компонента благодаря Styled Components. Затем index.js позаботится об экспорте компонента CharacterCard. Что это дает, спросите вы? Следуя одному и тому же соглашению для всех компонентов, index.js (всего на один уровень ниже src) экспортирует все наши компоненты, а затем мы можем просто импортировать все наши компоненты по мере необходимости из одного файла!
Смонтировать (2/4) Маршрутизация на стороне клиента
Для выполнения маршрутизации на стороне клиента, начиная с App.js, использовалась популярная библиотека react-router-dom. Для страниц Home, Duel и History были установлены три клиентских маршрута. Действия пользователя, обеспечивающие навигацию, допустимы через компоненты Link (из react-router-dom), размещенные на панели навигации.
Страница «Дуэль» также перенаправляет пользователя на домашнюю страницу через компонент «Ссылка», если он не выбрал двух персонажей.
Я также включил вложенный маршрут для начала дуэли.
https://wizarding-duel.netlify.app/duel/start
Гора (3/4) Тематика и глобальные стили
Styled Components предоставляет удобную функцию createGlobalStyles для создания глобальных стилей, доступных для всего приложения. Компоненты в App.js внутри компонента ‹GlobalStyles/›.
Еще одним мощным инструментом от Styled Components является компонент ‹ThemeProvider/›, который принимает объект темы в качестве реквизита. Объект темы содержит пары ключ-значение цветовых переменных. Чтобы сделать нашу тему доступной во всем приложении, я обернул все компоненты, включая глобальные стили, внутри ThemeProvider. Теперь есть только один источник правды для цветовой системы.
Mount (4/4) Пользовательский хук для получения данных
Поскольку приложение извлекает данные из трех конечных точек API для заклинаний Гарри Поттера, персонажей Гарри Поттера и сохраненных дуэлей, это указывало на будущий запах кода. Пытаясь сохранить свой код СУХИМ, я создал специальный хук useQuery для своих GET-запросов. Пользовательский хук использует useEffect, который срабатывает каждый раз при изменении переданного URL-адреса и возвращает массив данных.
В разделах «Жизнь» я в основном буду касаться того, что увидит пользователь, и их взаимодействия.
Life (1/3) Функциональность домашней страницы
На главной странице пользователь увидит список символов, отображаемых в формате карты. У каждого персонажа будут некоторые личные данные, а также связанный с ним цвет дома. Пользователю будет предложено выбрать два символа. После выбора появится ссылка для начала дуэли, которая перенаправляет пользователя на страницу дуэли. В противном случае у пользователя есть возможность сделать выбор еще раз.
Жизнь (2/3) Функциональность страницы дуэли
Поединок состоит из 3 раундов. В каждом раунде каждый дуэлянт использует случайное заклинание. Заклинание имеет связанное количество очков. Счетчик очков отображается для обоих дуэлянтов. После раундов станет известен исход дуэли. Пользователь может сохранить результат дуэли вместе с комментарием.
Жизнь (3/3) Функциональность страницы истории
Страница истории просто показывает результаты дуэлей, сохраненные пользователем. Отображается информация о дуэлянтах (имя и изображение), сообщение о победителе/ничье, комментарий, а также дата и время сохранения.
Размонтировать -> Следующие шаги
Поскольку я завершил проект на удовлетворительном уровне, есть несколько изменений/улучшений, которые находятся в стадии разработки, чтобы улучшить общее качество кода. Некоторые из них:
Используйте React Context, чтобы избежать чрезмерного детализации свойств: я заметил, что я передаю множество свойств по дереву компонентов, и большую часть времени я имею в виду одни и те же комбинации свойств. Контекст был бы удобной альтернативой глобальному распространению моего реквизита.
Улучшенное управление файлами. Требуется дополнительное управление файлами, поскольку компоненты находятся на одном уровне в папке src, что замедляет мой рабочий процесс, когда я ищу определенный компонент. Было бы целесообразно классифицировать их в соответствии с компонентами навигации, страниц и пользовательского интерфейса.
