Как создать компонент carousel на ReactJS (видео уроки)

1. Как создать carousel/слайдер на ReactJS с нуля

Это видео - первая часть из серии о том как создать компонент слайдер на React JS. В‌ ‌этом‌ ‌видео‌ создадим компонент carousel (или image slider, карусель, слайдер) на ReactJS, рассмотрим схему html элементов и css классов, а также разберемся в принципах работы компонента carousel. Смотреть на Rutube

2. Компонент carousel и составные компоненты ReactJS

В‌ ‌этом‌ ‌видео‌ создадим компонент carousel (или image slider) на ReactJS при помощи паттерна Составные компоненты (Compound Components). Смотреть на Rutube

3. Как сделать динамическую ширину слайдера на ReactJS

В‌ ‌этом‌ ‌видео‌ реализуем динамическую ширину страниц в компоненте carousel в ReactJS. Смотреть на Rutube

4. Как сделать бесконечный скролл в слайдере ReactJS?

В‌ ‌этом‌ ‌видео‌ добавим бесконечный скролл в компонент carousel (image slider) на ReactJS, а также рассмотрим принцип работы бесконечного скролла. Смотреть на Rutube

Исходный код

Существует много вариантов архитектур для построения веб-приложений. В понятие архитектуры можно включить множество вопросов. Буквально все вопросы, которые появляются перед тем как начинать делать проект, можно отнести к архитектуре. От ответов на эти вопросы будет зависеть архитектура веб приложения. При построении архитектуры нужно исходить из потребностей и требований. Если требования не ясны, то следует исключить все пробелы. Если у приложения есть публичная часть, которая должна индексироваться поисковиками, то следует посмотреть в сторону рендеринга на стороне сервера и соответствующие фреймворки. Это блоги, новостные сайты, интернет магазины, маркетплейсы и т.д.

Если веб-приложение представляет собой приватное приложение, то отличным вариантом может стать решение на основе рендеринга на стороне клиента (CSR). Это решения, основанные на SPA (Single Page Application), написанные с помощью фреймворков React, Angular, Vue, Svelte или PWA (Progressive Web Apps). Примерами таких приложений могут быть приложения для автосалонов, через которые зарегистрированный пользователь может записаться на техобслуживание. С ростом проекта нужно правильно организовать не только проект, но и работу команд. Стоит рассмотреть разделение монолита на микросервисы на бекенде, и на микрофронтенды на фронтенде. В архитектуру приложения также входит устройство бэкэнда и баз данных, наличие балансировщиков нагрузки, CDN, горизонтальное и вертикальное масштабирование и т.д. Также тема архитектуры веб-приложений популярна на собеседовании. Обычно блок вопросов по архитектуре выносят в отдельное интервью по System Design. Также рекомендую ознакомиться с обзором на книгу, которая будет полезна при проектировании высоконагруженных систем. Смотреть на Rutube