Какой стиль именования css использовать в react

Делаем крутой sticky-эффект для слайдера на React

Есть много разных библиотек для реализации слайдера со всеми возможными эффектами. Для React одни из лучших это: ReactSlick и Swiper. Но когда для моего проекта потребовался горизонтальный sticky-эффект, то ничего подходящего не нашлось.

В этой статье мы попробуем поэтапно создать такой слайдер, возможно он вам тоже понадобится!

Установка необходимых пакетов

Для создания проекта будем использовать Create React App

Слайдер мы будем делать не с нуля, а возьмем библиотеку Swiper, там наиболее подходящие события, к которым нужно будет подвязаться (об этом позже). Тогда нам нужно будет установить следующие пакеты:

И последний пакет (по желанию), чтобы использовать предпроцессор sass:

Получился такой package.json:

Отлично, теперь приступаем к реализации слайдера.

Создаем простой слайдер

Начнем с того, что создадим небольшой файлик с нашими слайдами.

После этого слелаем обычный слайдер с эффектами по умолчанию.

И соответственно создаем индексный файл для компонента.

Единственный параметр, который мы описали – это slidesPerView (количество видимых слайдов). Нам больше ничего не понадовится, но все возможные параметры свайпера можно посмотреть здесь.

Создадим отдельно компонет Slide, чтобы внешний вид слайдера уже был готов.

Стили для слайда.

И соответственно индексный файл:

И немного обновим StickySlider.

Теперь вставим этот слайдер в App.jsx , заодно заложим минимальную структуру страницы.

И в соответствующем scss-файле напишем немного стилей.

Пока у нас получился такой слайдер:

Круто, начало положено, дальше будем делать из этого слайдера то, что нам нужно.

Добавляем sticky-эффект

У свайпера есть два нужных нам события setTranslate и setTransition .

Свойство Когда срабатывает Что возвращает
setTranslate срабатывает когда мы двигаем слайдер и в тот момент, когда опускаем его возвращает значение, на которое слайдер сдвинут в текущий момент, а в случае когда отпускаем — значение, до которого он будет автоматически доведен
setTransition срабатывает когда мы начинаем двигать слайдер, когда мы отпускаем его и когда слайдер доводится на нужную позицию возвращает значание transition в милисикундах

Добавим это в наш компонент StickySlider и сразу пробросим в Slider , там нам это пригодится:

Советую подвигать слайдер и посмотреть деталенее что выводится в этом моменте:

Я для хранения состояния использую хуки. Если вы с ними мало знакомы, то советую почитать документацию (на русском).

Далее все самое сложное будет происходить в компоненте Slide .

Нам потребуются состояния отступа от левой границы слайдера и ширина текущего слайда:

Они добаляются один раз при инициализации элемента и не изменяются. Поэтому используем useEffect с пустым массивом. При этом достаем параметры не самого слайда а его техническую обертку через parentElement , так как текущую обертку будем преобразовывать при помощи свойства transform .

Самый главный момент. Считаем все это дело и прокидываем в стили:

Свойство translate приходит нам от родителя и оно одинаковое для всех слайдов. Поэтому чтобы найти индивидуальный translate для одного слайда, вычитаем из него offsetLeft .

Переменная k это значение от 0 до 1. С помощью этого значения мы будем делать анимацию. Это ключевая переменная, так как по ней можно делать любые эффекты.

Теперь вычисляем стили. Условие x >= -1 выполняется когда слайд находится в зоне анимации, поэтому при его выполнении навешиваем стили на сайд. Значения scale и opacity пожно подобрать по своему усмотрению. Мне показались наиболее подходящими такие интервалы: [0.8 : 1] для scale и [0.5 : 1] для opacity .

5 способов стилизовать компоненты React в 2019

Evgeny Vladimirovich

Компоненты React — это строительные блоки, из которых мы создаём интерфейсы для приложений. То, как мы стилизуем визуальные элементы, во многом определяет впечатления пользователей о нашем бренде и продукте.

Не существует одного правильного способа стилизации компонентов. Способ стилизации нужно выбирать исходя из конкретного случая и личных предпочтений; но прежде всего, выбор зависит от архитектурных особенностей проекта, например: глобального пространства имён, зависимостей, повторного использования, масштабируемости, устранение «мёртвого кода» и т.д.

В статье мы рассмотрим актуальные в 2019 году способы стилизации компонентов React, и попытаемся понять, что их отличает. Выбор остаётся за вами.

1. Inline CSS

React поз в оляет добавлять CSS непосредственно в код в качестве атрибутов, и передавать его элементам.

В React, inline стили записываются, как объект. Ключ такого объекта является именем стиля; имя объекта записывается в стиле camelCase; значения стиля записываются внутри объекта, обычно строкой.

Для атрибута style , объект JavaScript и его свойства имеют больший приоритет, чем строка CSS. Это согласовано со свойством JavaScript в DOM style , это более эффективно и предотвращает дыры в безопасности XSS. Пример:

Вы можете передать стили напрямую или создать переменную, которая будет хранить свойства стилей и предавать их элементу. Используя inline стили, вы можете комбинировать CSS синтаксис и JSX код (JSX — это препроцессор, который добавляет XML синтаксис в JavaScript).

Такой подход облегчает назначение стилей в компонентах и понимание того, какие стили уже есть у каждого компонента. Использование возможностей JS облегчает работу с комплексной стилизацией, когда это необходимо.

2. CSS in JS

Ещё один интересный способ использовать CSS в коде JS для абстракции CSS на уровне компонентов — это использование JavaScript для описания стилей, декларативным и пригодным для дальнейшей поддержки способом. Благодаря релизу проекта styled-components (автор Max Stoiber), этот способ стал более популярен, чем когда либо (далее подробней).

В чём же разница между двумя способами, CSS-in-JS и Inline? Говоря простым языком, если вы используете способ CSS-in-JS, то вы прикрепляете тег <style> в DOM, а с Inline стилем, вы прикрепляете свойство к DOM узлу.

В React, способ CSS-in-JS подталкивает вас думать и создавать стили, абстрагируя до уровня компонентов. Этот способ делает акцент на принципах модульности и изоляции, юнит тестирования, DRY (Don’t repeat yourself) и так далее. Это головоломка, но зачастую практичная.

В официальной документации сказано: «У команды React нет определённой позиции по тому, как определять стили; если вы сомневаетесь, то начните определять стили в отдельном *.css файле как обычно и подключайте его с помощью className ».

Сравнение CSS-in-JS библиотек для React

Предлагаю несколько полезных ссылок, чтобы сравнить open source библиотеки CSS-in-JS.

Какой стиль именования css использовать в react

Пришло время сделать наше приложение более привлекательным. Для этого давайте научимся работать со стилями в React.js

Для того, чтобы стилизовать React.js приложение существует огромное количество подходов, библиотек, разнообразных стилизованных компонентов. Мы возьмем самый популярный фреймворк — Bootstrap. Даже когда вы принимаете решение использовать Bootstrap, вы можете легко найти в Гугл множество библиотек, которые интегрировали в себя Bootstrap и дают вам возможность использовать уже готовые стилизованные компоненты. Вы можете выбрать для себя любую из них. Этих библиотек огромное количество.

Мы пойдем классическим путем и будем использовать чистый (классический) css от Bootstrap.

Подключение Bootstrap.

Для этого идем в консоль и устанавливаем с помощью npm сам bootstrap

npm — установит нам библиотеку и теперь мы сможем подключать стили. Для того, чтобы не тянуть стили руками в какой-либо html файл, мы можем подключать в наш проект css стили, как модули.

Это нам позволит сделать webpack, у которого для этого есть специальные возможности (модули), которые позволят подключать стили css в наш проект.

Для этого достаточно в файле App.js написать import и какой именно css модуль мы хотим подключить.

В нашем случае это ‘bootstrap’ . Обратите внимание, что подключаем без всяких слешей, потому что webpack и так поймет, что этот модуль стоит искать в папке -> node_modules. Указываем путь к файлу bootstrap.css.

Подключать файл bootstrap.min.css не имеет смысла, поскольку перед продакшн вы будете все равно минимизировать файлы с помощью webpack.

App.js

Теперь мы можем использовать bootstrap в нашем проекте.

Для того, чтобы дать класс какому-либо элементу нам достаточно написать className = "имя класса"

Например, пометить весь код в контейнер — в файле App.js первому тегу div добавили —

Убедиться, что все работает, вы можете открыв браузер и "исследовав элемент"

Класс добавился. И стили bootstrap прменились к нашим элементам.

Теперь давайте оформим каждый элемент.

Завернем наш header в div классом jumbotron , а самому заголовку дадим класс display-3

Теперь, перейдет к оформлению статей.

В файле Article.js мы добавим стили сразу на всю статью в className="card" .

Заголовок поместим в header — div className="card-header" , а сам текст статьи и дату в отдельный div className="card-header" . Тело статьи в div className="card-body" ,

Article.js

Немного изменим тело самой статьи и кнопку.

В файле Article.js

Делаем статью на пол экрана и работаем с инлайновыми стилями.

Для того. чтобы дать инлайновый стиль какому-либо элементу, достаточно прописать property style и в двойных фигурных скобках прописать свойство и значение.

Никакой магии в этом нет. Просто одни фигурные скобки говорят о том, что мы используем javascript переменную (выражение, или что-то еще), а вторые скобки говорят, что внутри обычная литеральная нотация.

Например так: <div className="card" style=<>>

В принципе, мы могли бы вынести это таким вот образом —

а уже в самом теге оставить только <div className="card" style=

Можно писать и так и так.

То, что получилось:

Для того, чтобы позиционировать нашу статью по центру добавим: mx-auto элементу

.card <div className="card mx-auto" style=

Теперь нам остается убрать маркер списка.

Для этого мы напишем в файле ArticleList.js специальный стиль для тега li , а за одно научимся создавать собственные css-модули.

Нам придется создать отдельный css- файл для нашего ArticleList.js и в таких случаях, чтобы не создавать путаницу в общей папке компонентов, лучше создать для такого компонента отдельную папку!

Подключением файла стилей React — компоненту.

В папке components мы создадим отдельную папку -> ArticleList внутри которой мы будем держать реактовский код index.js, так и стили ArticleList.js

В файл index.js мы вставим весь код из нашего ArticleList.js, только поправим пути:

index.js

и здесь же создадим файл style.css -здесь будут стили данного компонента.

Файл ArticleList.js удаляем.

При этом webpack поймет, что в App.js ->ArticleList — это папка, и коль в ней есть файл index.js, то он возьмет именно этот файл. Поэтому файл index.js не нужно отдельно указывать в этом пути (т.е делать так — > import ArticleList from ‘./ArticleList/index.js’ )
App.js

Теперь добавим стили компоненту в файле style.css

Лучше всего себя показала методология БЭМ (сайт в России с vpn — отдельное спасибо РосКомНадзору) Блок Элемент Модификатор от Яндекса. Вы можете с ней ознакомиться. Мы пока что запишем:

style.css

Теперь, для того, чтобы воспользоваться этими стилями. нам необходимо сделать импорт. Мы сделаем это на уровне нашего компонента в файле index.js import ‘./style.css’

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

Нам остается только добавить класс className="article-list__li" к тегу li

Сохраняем, и. Не пугайесь. Ваш компилятор может сломаться и получите такое предупреждение, вместо приложения.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *