React Animation Project SCSS

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

Ratings: 5.00 / 5.00




Description

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

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

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

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

Создадим компонент Заставки и будем дергать нужную нам анимацию, определенную в логике AnimatableItem. 

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

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

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

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

  • React

  • Animation SCSS



What You Will Learn!

  • Мы будем использовать анимируемый элемент, модульность и т.д
  • React API Context, Animation SCSS
  • Clean Architecture SCSS
  • Best Practices SCSS & React

Who Should Attend!

  • Начинающие и продвинутые