Как создать компонент carousel на ReactJS (видео уроки)
2 года назад·1 мин. на чтение
В этой статье последовательно создаем компонент carousel (или image slider) на ReactJS.
1. Как создать carousel/слайдер на ReactJS с нуля
Это видео - первая часть из серии о том как создать компонент слайдер на React JS. В этом видео создадим компонент carousel (или image slider, карусель, слайдер) на ReactJS, рассмотрим схему html элементов и css классов, а также разберемся в принципах работы компонента carousel. Смотреть на Rutube2. Компонент carousel и составные компоненты ReactJS
В этом видео создадим компонент carousel (или image slider) на ReactJS при помощи паттерна Составные компоненты (Compound Components). Смотреть на Rutube3. Как сделать динамическую ширину слайдера на ReactJS
В этом видео реализуем динамическую ширину страниц в компоненте carousel в ReactJS. Смотреть на Rutube4. Как сделать бесконечный скролл в слайдере ReactJS?
В этом видео добавим бесконечный скролл в компонент carousel (image slider) на ReactJS, а также рассмотрим принцип работы бесконечного скролла. Смотреть на RutubeПолный видео-курс по Sass
2 года назад·3 мин. на чтение
Это полный курс по Sass, он содержит подробное описание всех особенностей работы c Sass: синтаксис, миксины, наследование, функции, модули, ключевые слова и т.д.
Sass это препроцессор. Он переводит sass-код в чистый css, так как браузер понимает только css. Sass просто удобнее использовать за счет того, что он расширяет возможности css, добавляет новый синтаксис.
Sass помогает удобнее организовать стили и сделать их более удобными для восприятия и работы, и в целом сокращает количество кода. Можно выносить общие участки стилей и переиспользовать их с возможностью кастомизации.
7. Наследование в Sass -
В этом видео поговорим о наследовании в Sass (Sass inheritance), рассмотрим примеры использования наследования и ключевое слово extend. Рассмотрим примеры приватных placeholder селекторов.
Смотреть на Rutube
9. Циклы и условия в Sass:
В этом видео говорим об управляющих директивах в Sass для проверки условий и запуска циклов. Управляющие директивы Sass включают такие директивы как
11. Модули Sass:
В этом видео рассматриваем модули Sass и способы их импорта с помощью
16. О типе
В этом видео рассматриваем модуль
17. Списки в Sass - тип
В этом видео рассматриваем модуль
1. Что такое Sass?
В этом видео говорим об особенностях Sass, рассматриваем два вида синтаксиса Sass, компилируем стили с sass watch, а также добавляем комментарии в стили. Смотреть на Rutube2. Все о миксинах в Sass
В этом видео говорим о миксинах (mixin) в Sass, как передавать аргументы в миксины, как передать произвольное количество аргументов в миксины, блок content и т.д. Смотреть на Rutube3. Переменные Sass и Как переключать темы с CSS и JavaScript в React приложении?
В этом видео говорим о Sass переменных, об областях видимости Sass переменных, нюансах их использования, сравниваем переменные Sass и CSS, а также внедряем динамическое переключение тем в React приложение с помощью CSS переменных и JavaScript. Смотреть на Rutube4. Интерполяция в Sass?
В этом видео говорим об интерполяции в Sass, особенностях применения интерполяции в Sass и как создавать классы со значениями переменных в именах. Смотреть на Rutube5. Все секреты вложенности в Sass
В этом видео говорим о вложенности в Sass, рассматриваем вложенность свойств и селекторов, добавляем селектор родителя Sass для имен вложенных классов и создания классов как в методологии BEM. Смотреть на Rutube6. Все директивы Sass
В этом выпуске поговорим о директивах в Sass, рассмотрим группы директив для импорта, генерации стилей, контроля управления и т.д. Смотреть на Rutube7. Наследование в Sass - @extend
В этом видео поговорим о наследовании в Sass (Sass inheritance), рассмотрим примеры использования наследования и ключевое слово extend. Рассмотрим примеры приватных placeholder селекторов.
Смотреть на Rutube
8. Как написать функцию в Sass?
В этом видео поговорим о функциях в Sass, посмотрим как передавать именованные аргументы, пары ключ-значения, значения по умолчанию и произвольное число аргументов. Напишем несколько кастомных функций для возведения числа в степень и конкатенации строк. Смотреть на Rutube9. Циклы и условия в Sass: for, while, each, if
В этом видео говорим об управляющих директивах в Sass для проверки условий и запуска циклов. Управляющие директивы Sass включают такие директивы как @if, @each, @while, @for.
Смотреть на Rutube
10. Что и для чего: миксины, наследование и функции в Sass
В этом видео рассматриваем особенности использования миксинов, наследования и функций в Sass. Смотреть на Rutube11. Модули Sass: use, forward, import
В этом видео рассматриваем модули Sass и способы их импорта с помощью use, import и forward.
Смотреть на Rutube
12. Как запустить JavaScript функцию в Sass?
Смотреть на Rutube13. Как скрыть свойство Sass по условию?
Рассматриваем как скрывать свойства в Sass, ключевое слово null и его особенности; как работать с глобальной функцией if, и как определить вызван ли миксин внутри класса или вне его. Смотреть на Rutube14. Встроенные модули Sass
В этом видео рассматриваем встроенные модули Sass и глобальные функции Sass. Смотреть на Rutube15. Все о математических функциях в Sass
В этом видео рассматриваем математические функции Sass и нюансы работы с ними. Смотреть на Rutube16. О типе map в Sass
В этом видео рассматриваем модуль sass:map.
Смотреть на Rutube
17. Списки в Sass - тип list
В этом видео рассматриваем модуль sass:list.
Смотреть на Rutube
Исходный код проекта
