У цьому курсі ми почнемо зі створення компонента екрану-заставки, а потім перейдемо до розробки компонента анімованого елемента.
Ми визначимо наш перший набір анімацій із використанням Sass, прагнучи зробити його максимально модульним, щоб ми могли імпортувати всі створені анімації або лише ті, які нам потрібні. Після визначення анімацій, ми імпортуємо їх у наш проект і внесемо зміни до нашої заставки та анімованого елементу, так щоб заставка зникала через певний час.
Далі ми приступимо до розробки параметрів, що налаштовуються, почнемо зі створення нового файлу, який буде імпортований у всі наші різні анімації і містити загальні налаштування.
Після визначення наших параметрів анімації, ми додамо нашу першу анімацію, яка буде відповідати за згасання та появу елемента. Усі анімації будуть написані як окремі міксини, щоб за потреби ми могли імпортувати їх окремо.
Ми створимо компонент заставки та активуємо потрібну нам анімацію, визначену у логіці AnimatableItem.
Зрозуміло, ми розпочнемо із створення нового проекту для нашої роботи. Для цього використовується create-react-app, а також додана проста утиліта JavaScript для умовного з’єднання класів імен.
React — найпопулярніша бібліотека для розробки веб-застосунків і одна з найбільш затребуваних навичок для JavaScript-розробника на сьогоднішній день.
Основна увага в цьому курсі приділяється практичній розробці програм на React. Це означає, що ми розглянемо не тільки ефективне використання самого React, але й цілу екосистему інструментів і бібліотек, необхідних для створення повноцінного інтерфейсу користувача (UI) програми.
Розробляючи реальні програми, ми вивчимо найважливіші інструменти в екосистемі React:
React
Animation
SCSS