React Animation Project SCSS

В этом курсе мы начнем с создания компонента экрана-заставки, а затем перейдем к разработке компонента анимированного элемента.

Мы определим наш первый набор анимаций с использованием Sass, стремясь сделать его максимально модульным, чтобы мы могли импортировать все созданные анимации или только те, которые нам нужны. После определения анимаций, мы импортируем их в наш проект и внесем изменения в нашу заставку и анимированный элемент, так чтобы заставка исчезала через определенное время.

Далее мы приступим к разработке настраиваемых параметров, начнем с создания нового файла, который будет импортирован во все наши различные анимации и содержать общие настройки.

После определения наших параметров анимации, мы добавим нашу первую анимацию, которая будет отвечать за затухание и появление элемента. Все анимации будут написаны как отдельные миксины, чтобы при необходимости мы могли импортировать их по отдельности.

Мы создадим компонент заставки и активируем нужную нам анимацию, определенную в логике AnimatableItem.

Разумеется, мы начнем с создания нового проекта для нашей работы. Для этого используется create-react-app, а также добавлена простая утилита JavaScript для условного соединения имен классов.

React — самая популярная библиотека для разработки веб-приложений и один из наиболее востребованных навыков для JavaScript-разработчика на сегодняшний день.

Основное внимание в этом курсе уделяется практической разработке приложений на React. Это означает, что мы рассмотрим не только эффективное использование самого React, но и целую экосистему инструментов и библиотек, необходимых для создания полноценного пользовательского интерфейса (UI) приложения.

Разрабатывая реальные приложения, мы изучим самые важные инструменты в экосистеме React:

• React
• Animation
• SCSS