В этом блоге мы увидим, как мы можем создать клон Hulu (приложение для реагирования) с данными, извлеченными из базы данных фильмов через axios. Приложение разработано для обучения, и я буду делиться идеями и выводами. Похоже много терминов :)
Разбейте его на части и упростите то, чего мы хотим достичь, компонент за компонентом!
Краткий обзор:
Функциональность:
- Получить списки фильмов из базы данных фильмов TMDB через API
- Наведите курсор на видеокарту, чтобы получить информацию о фильме.
- Нажав на параметры на панели навигации, вы получите результаты фильма.
- Сделайте так, чтобы опыт учитывался, включив реагирующее переворачивание, которое создает анимированный эффект при переключении параметров панели навигации.
Начнем, 🚀
- Создайте реагирующее приложение. Не буду освещать их, так как есть бесконечные статьи. Основная цель состоит в том, чтобы задокументировать моменты, которые часто упускаются из виду. Для полного стека, такого как сборка MERN, дайте имена таким образом, чтобы они четко отображали разделение интерфейса и сервера.
- Визуализируйте, что вы собираетесь создавать, и разделите приложение на разные компоненты. Сосредоточьтесь на одном компоненте (логической части и CSS) за раз.
- Приложения могут выглядеть простыми, но богатый опыт можно включить, просто поняв, что им нужно с помощью CSS. Ваш мир REACT может быть завален стилизованными компонентами и другими сложными методами стилизации. Просто придерживаясь атак на элементы в соответствующем CSS, вы можете получить приложение с хорошей структурой.
- Именование classNames для CSS: понравилось соглашение об именах BEM ❤
В компьютерных науках есть только две сложные проблемы: инвалидация кеша и присвоение имен — Фил Карлтон
В приведенном выше фрагменте корневым компонентом является VideoCard, заданным className является videoCard (верблюжий корпус), следующему дочернему элементу компонента будет присвоено значение vidoCard__stats.
https://github.com/getbem/getbem.com — Дайте им звезду, если они дисциплинировали вас в нейминге :)
- Содержите структуру в чистоте и управляемости. При добавлении заголовка сохраните компонент реакции и его CSS. Слой данных (редукс) и многое другое можно добавить по мере расширения приложения.
- Для получения результатов фильма через API используется axios. Не настраивайте инициализацию URL-адресов запросов в компоненте реагирования, хотя это всего одна строка кода. Создайте отдельный файл и настройте экземпляр BASE URL. Дальнейшие конечные точки могут быть расширены из созданного экземпляра BASE URL. Этот метод - чистое золото ❤
- Мне нравится импорт ES6. Благодаря этому то, что мы делаем, выглядит просто. Я лично считаю, что javascript такой же простой, когда он есть в ES6. Лично я не люблю использовать
var axios = require(‘axios’) — это просто не имеет прямого отношения к тому, что я делаю с пакетом.
- Наткнулся на этот пакет (React-text-truncate) — замечательный для сайта блогеров и для показа обрезанного контента.
Давайте посмотрим разницу:
Обтекание обзора фильма (тег ‹p› в ‹TextTruncate›)
Просто нажимаю информацию:
‹p›{movie.overview}‹/p›
- Разумное использование стилей CSS при наведении курсора. Простое отображение видеокарты будет отображать всю информацию при загрузке страницы, и пользователь получит слишком много информации. Наведение курсора создаст незначительный пользовательский опыт, чтобы сообщить ему информацию, которую мы предоставляем.
- react-flip-move: это создает очень плавный и плавный процесс, когда мы переключаемся между различными вкладками и когда загружается видеокарта. Без переворота, хотя видеокарта загружается абсолютно нормально, но это будет выглядеть так, как будто веб-сайт пытается получить данные и просто загружается. Умный способ: заставить приложения казаться быстрее, иногда помогает пользователю, чем создавать приложения с более быстрой загрузкой :)
Выше приведены небольшие выводы по созданию вышеупомянутого приложения, надеюсь, вы найдете его полезным! Поймите, что пользователь может воспринять при использовании приложения, немного больше, чем то, что пользователь может увидеть! Главное думать просто!
Попробуйте визуализировать текущий компонент, сложное приложение будет работать вместе с небольшими визуализациями.
