Проект 1: Приложение Trivia
Второй проект, который я создал с помощью React, — это простое приложение для викторин, которое дает вопрос с несколькими вариантами ответов различных категорий и сложностей.
Требования:
- Используйте API для отображения данных (или напишите свой собственный!)
- Показать категорию, вопрос и варианты ответа (ДОПОЛНИТЕЛЬНО: показать сложность)
- Показать правильный ответ, даже если пользователь выбрал неправильный ответ
- Отображение прогресса пользователя
Этот проект оказался намного сложнее, чем предыдущий, где мне просто нужно было передавать данные из API на статическую страницу без какого-либо взаимодействия. Самой большой проблемой, с которой я столкнулся, была правильная передача данных. Сначала я получил данные, используя axios, из компонента, в котором размещалась моя категория и вопросы. Затем я изо всех сил пытался понять, как получить те же данные в моем компоненте, который содержал варианты ответов. Благодаря некоторым онлайн-учебникам и старому доброму StackOverflow я переместил вызов API в свой файл app.js и передал данные оттуда всем дочерним компонентам, используя this.props.
Еще одна сложная вещь, которую мне пришлось выяснить, заключалась в том, как выделить конкретные варианты ответов и удалить выделение всего до того, как родительский файл с вызовом API будет повторно отображен для получения следующего вопроса. Я много копался в документации по реакции и познакомился с жизненными циклами компонентов реакции, а также с компонентами с состоянием и без состояния. Мое обходное решение привело к использованию вызова setTimeout() с добавлением и удалением классов для выделения правильных и неправильных ответов перед вызовом API и повторным рендерингом компонента.
В конце концов, делать этот проект было очень весело, и мне нравится использовать его, чтобы освежить свои знания викторин перед вечеринкой викторин на следующей неделе в баре. Я также не только сосредотачиваюсь на изучении среды реагирования, но также пытаюсь отточить свой стиль и написать свой собственный CSS. Еще так многому предстоит научиться!
Вы можете найти мою живую демонстрацию здесь
Вы можете найти мой репозиторий здесь
Вы можете найти API, который я использовал, здесь
До следующего раза — счастливого кодирования!
