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