93 - paginator, постраничный вывод - Практика ReactJS
HTML-код
- Опубликовано: 10 сен 2019
- it-incubator.io/education/?ut... - человекоориентированное, честное и профессиональное обучение front-end и back-end разработке гарантированно до трудоустройства за фиксированную стоимость.
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_samurai
API: social-network.samuraijs.com/
Друзья, постраничный вывод и алгоритмика и математика, которые в него заложены - очень важны для вашего мышления. Постарайтесь это понять. Просчитать логику в голове, на БУМАГЕ. Paginator, paging, постраничный вывод - это касается не только визуализации на UI, но это вам пригодится в будущем, так как эти расчёты постраничной разбивки будут с вами всю жизнь: от rest api до распределённой обработки данных с помощью hadoop.
Тема акутальная. Вспоминаем, как мы делали первую версию постарничного вывода и запрос данных на сервер, вот видео:
• 55 - React JS практика...
Летим, самураи!!!
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ it.kamasutra.dimych
#tdd #reactJS #тестирование #практика #пример #уроки #курс
Прошлый формат
Мне такой формат видео не очень зашол. Спасибо за урок
Вся твоя фишка это объяснения и пошаговые этапы, важна не скорость а качество
Не....мы теряем Димыча...вообще не заходит такой формат..Все равно ты теряешь время когда готовишься и потом снимаешь...лучше как раньше....поэтапно отслеживать изменения кода и смотреть что за собой тянет то или другое изменение гораздо лучше..я давно сделал уже пейджинатор в другом правда ключе запросами на сервак за актуальной информацией но эта тема очень интересна ...так планирую разбивать туДу задачки на страницы..зашло не ок..несколько раз пересматривать пришлось что бы проследить ход процесса..Дима вернись мы все простим :)))))))))))))
Если кто-то не понял, что происходит в className span'a, в котором содержаться номера страниц, то подскажу: Дима установил библиотеку classnames для того, чтобы удобнее было добавлять сразу несколько классов одному элементу. Мне почему-то казалось, что этот paginator будет очень легко сходу реализовать, особенно после одного лишь взгляда на твою идею в коде, но что-то пошло не так, поэтому все затянулось. В конце концов все реализовано и понятно. Пагинация, pagination, постраничный вывод (называйте, как хотите) - важная тема, так как она будет дальше использоваться на разных страницах. Лучший курс по React JS и JavaScript. Дима, красавчик, летим
спасибо!
Можно добавить ещё:
useEffect(()=>setPortionNumber(Math.ceil(currentPage/portionSize)), [currentPage]);
при уходе со страницы юзеров на другую и при повторном возвращении на неё, пагинация подгоняется под текущую страницу юзеров, которая записана в userReducer, но лучше самим увидеть разницу.
P.S.: Спасибо Димыч, раньше скролл добавлял что бы скрыть эту громадину страниц, но такой подход в разы эффектней, теперь тема пагинации меня вовсе не пугает)
Благодарю, мне пригодился твой код)
нужный код, благодарю!
Плюсик в карму!
Как раз об этом подумал, благодарю 👍🏼
или можно внедрить этот код вот так
const [portionNumber, setPortionNumber] = useState(Math.ceil(props.currentPage/portionSize))
За старый формат!
вот как реашил.
totalUsersCount не нужно менять на totalItemsCount потому что, иначе нужно будет лезть в редюсер, на сколько я понял.
в терминале пишем это: npm i classnames --force.
сверху пишем: import cn from 'classnames'.
а дальше пишем точно такой же код.
cпасибо, что пришлось тратить меньше времени на поиск проблемы)
мне лично совсем не удобно было из за того, что весь код компонента который уже написан не помещается на экране по ширине, нормально ничего не отследить не сверить не получалось. И вот про этот момент ничего не сказал import cn from "classnames";
А так большое спасибо конечно за труд!
Про cn, >>> npm i classnames --save-dev
не обязательно использовать библиотеку для этого, у меня так работает className={`${currentPage === p ? styles.selectedPage : styles.noSelectedPage }`}
@@webdeveloper7690 только без "-dev", если загрузить в дев, то не будет компилироваться. Я так сделала и пришлось удалять пакет, грузить нормально. У того же Димаса в проекте установлено без дев, это можно посмотреть в package.json .
@@webdeveloper7690 спасибо огромнейшее!!!)
у меня одного пагинатор не отобразился вообще?? уже экспериментировал с css, думая, что он где-то спрятался за фоном, но нет, не показывает. Самое интересное, отступ появился, как будто он там, но невидим.. сижу над этой багой, ломаю голову
Уже даже скопипастил код Димыча(пагинатор и его css), не показывает, хоть ты тресни
Прежний формат уроков понятнее, пусть даже и дольше) Спасибо за урок! #tdd #reactJS #тестирование #практика #пример #уроки #курс
Этот формат видео не очень!Когда за тобой повторяешь картинка складывается на ура.Пожалуйста не надо этот формат .В старом формате весь изюм и полезность проекта соц сеть.Спасибо Димыч
+++
Согласен с посылом твоего комента, но изюм говно конечно
согласен на 100%
Согласна на 100000%
Дмитрий, спасибо вам огромное! Вы удивительный человек! Столько силы и ума! Отличные уроки по React - Redux! Благодаря вашим предыдущим урокам получилось самому сделать Paginator, поставив в начале видео на паузу!
Спасибо, Димыч!
Сейчас, в 2022 наверное это не актуально, но предыдущий формат в 100500 раз лучше))
В любом случае, спасибо тебе за труды!!!
Храни тебя Бог!!!
Лучшие уроки по практике ReactJS!
Мое мнение спустя год - Димыч, лучше показывать нативно, в режиме реального времени, ибо так лучше. Например, в Пагинаторе есть строка import cn from 'classnames'; и я то конечно, догадался сделать npm i --save classnames , но вот надо бы озвучивать, а если бы по ходу все было, то мы бы поняли кто такой classnames и зачем его инсталить в проект. Но, ты крут Димыч! Тесты херачишь, настоящий самурай
Так все таки кто он такой и зачем?))
Спасибо с 2022!
Если вы не поняли что такое cn в то Димыч установил библиотеку classname (установить npm i classnames || yarn add classnames)
и стоит прочитать немного документацию этой либы
прошёл ровно месяц с того, как я начала первое видео этого курса. помню, какой была воодушевленной, курс офигенский и показал прям, что делать!.. но сейчас я чувствую усталость... и вот после этого видео, мне показалось, что это твоя усталость отражается на мне). надеюсь, что мой энтузиазм вновь вернётся, потому что без него идти вперед куда сложнее.
Спасибо!
Конечно хочется видеть как ты кодишь и решаешь проблемы в процессе!
React, pagination, testing components.
Спасибо за урок!
paginator,постраничный вывод - React JS
спасибо за всю работы проделанную и которую сделаешь
Более сложные темы лучше по старому формату, а простые, которые легко заходят, можно по новому формату. LIKE! Этот урок хорош, тем, что разбираешь не свой код сам!
🤩paginator, постраничный вывод - Практика ReactJS. Лучше как было! Спасибо за уроки!
Лучше, когда ты все показываешь, но и в таком формате есть свои плюсы. Считаю, что тут больше голову надо включать и самому допирать. Молодец, так держать, экспериментируй дальше! У тебя хорошо получается! Спасибо за урок!
Крутой урок ! Большое спасибо !
Спасибо за урок!!!!
paginator постраничный вывод.
Практика React JS
Блин, Димыч, как у тебя сил и энергии хватает такие уроки делать. Ты мега Чел. 93 выпуска прошли как на одном дыхании. Ты мастер доходчивого объяснения. Лайк всем урокам твоим
Спасибо за практику по реакту!
Спасибо за УРОК, очень круто!!!!!!!!!!!!!!!
Спасибо Димыч! paginator, постраничный вывод - Практика ReactJS #tdd #reactJS #тестирование
Спасибо за react paginator. Всё было понятно, в принципе, но да, старый формат гораздо более поучительный, когда можно следить за ходом твоих мыслей, рассуждениями, как ты приходишь к решениям, с какими проблемами сталкиваешься и как их решаешь. Спасибо за курс! Уже близко к концу... :)
Полезный выпуск. Спасибо!
Спасибо ! Согласен с большинством, похоже на то что я сам скачал гит репозиторий и добавил к проекту и сижу рассуждаю что куда и как сделали)
spasibo za urok - 93 - paginator, постраничный вывод - Практика ReactJS ,
Both formats are good !
Спасибо за урок! Было очень полезно. react, redux, pagination
Спасибо за урок! Старый формат понравился больше :)
React JS от Димыча - лучший курс!
Круто, очень удобно работает!)
@
Прошёл все 92 урока с осознанием каждой мелочи в React.
@
Сломался на сраном пагианторе
PS. сложна
а математичка говорила учи алгебру и геометрию!!! Математичка ликует)))
то чувство когда сделал пагинатор круче еще на 55 выпуске + еще с роутом в URI с параметром за 30 мин, можно в мидлы наверное
@@Max-cu6mc скинь посмотреть. Интересно будет сравнить)
Я тоже сделал его сразу, не такой как у Димыча, мой отображает последнюю страницу и +-5 страниц от выбранной.
let pages = (currentPage, totalPages) => {
let curArr = [];
if (currentPage = totalPages) {
curArr = [1, "...", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages]
} else {
for (let i = currentPage - 2; i
{usersPage.currentPage == n ? {getUsers(n)}}>{n}
: n == "..." ? {n} : {getUsers(n); setCurPage(n)}}>{n}
}
)}
Это хорошо, что про библиотечку classnames не рассказал, самому разобраться было и интересно, и полезно)))
формат круто подойдет для старых тем (по сути это старая тема, мы лишь только ее зарефакторили, мне зашло на ура), но если тема новая, то НЕТ, нужно расжевать все))
react, redux, paginator, спасибо за урок!)
Отличный курс!!!
Подобный формат
Димыч, спасибо) Мне понравился данный формат видео, наглядно)
Доооолго не могла засесть за проблему переключения по страницам (описана в комментах), но тем не менее - решено! Димыч, спасибо! Полезно реализовать пагинатор (paginator) своими руками, без всяких UI библиотек. Прям чувствую, как мозг включается, а после решения проблемы прям пошел дофаминчик.
paginator
спасибо за урок, Дмитрий!
Спасибо за урок,я так же за старый формат)))
Мне зашло, досмотрел, потом все сделал сам, от чего получил большое удовольствие, думаю неплохо было бы разбавлять таким форматом
Урок 93. Пишу свой белорусский социально-экологический проект. Комент как благодарность (:
новый формат кайф!
правильнее будет написать
let [portionNumber, setPortionNumber] = useState(Math.ceil(currentPage / portionSize));
после загрузки страницы или пользователей слетает potionNumber и становится =1. поэтому нужно заменить 1 на
Math.ceil(currentPage / portionSize)
Спасибо за урок. С костылями лучше. Разжёвано не обязательно, а подводные камни очень важны
Советую тут не мудрить и просто использовать material-ui pagination. Предварительно надо установить их core и lab. Пример компоненты:
{ props.onPageChange(page); }}/>
Может знаешь ,как там цвет менять кроме 3 которые дефолтные ?
@@sanpop103 , обернуть . А пример theme:
const theme = createTheme({
palette: {
primary: {
main: deepPurple[900],
light: deepPurple[400],
contrastText: '#fff',
}
},
});
У
Спасибо! 2022! Урок нормальный, код виден, рассказ понятен. Есть минус - автор может упустить чего-нибудь, а у нас не будет компилиться. Так и случилось. Пришлось почитать комментарии и сделать npm i classnames. Иду далльше.
paginator, постраничный вывод - лучший курс по React
Очень сложно для понимания, так большинство ютуберов делают контент для уже бывалых ребят, а мне теперь нужно будет как то понять самому что тут к чему) ну всеравно спасибо за видео)
Этот формат Явно лучше , для простых и средних тем - точно ! для сложных этого будет не достаточно!👌😎😎😎
Мы конкурентные друзья :D Конкурируем но по дружески :)
Спасибо за урок
Хорошо объяснили, норм формат, но иногда лучше с Димычем код писать. Но нужно сделать npm install classnames
spasibo
спасибо
Спасибо Димычь. Бомбим дальше. paginator готов.
Кстати да, Димыч!))) Это философский вопрос 2:10 . Думаю, что пока цели совпадают, то друзья, а когда дело доходит до дележки денег и борьбы за заказчика, то конкуренты
Спасибо Димыч)
Трудновато, но разобрался. Димыч, спасибо!
Очень круто Димыч! Я сначала по своему сделал, потом уже посмотрел видос, до твоего варианта я бы наверное никогда бы не додумался лол, хотя кода получилось столько же)))
Поскольку с видео, честно говоря, почерпнуть что-то сложно, предлагаю тем кто был в неком замешательстве после просмотра как и я, взглянуть на react-paginate. Очень понятная пагинация, легкая + сделаете сами и по-своему
Репозиторий
github.com/it-kamasutra/react-way-of-samurai
Ссылка на коммиты
github.com/it-kamasutra/react-way-of-samurai/commits/master
спасибо, как раз то что искал)
я приготовил для тебя специальную вип-комнату в раю, сынок
спасибо за постраничный вывод=))
Спасибо за поиски новых решений в подаче материала, но предыдущий формат этого курса по React - был лучше. Материал лучше запоминается, когда код набираешь вместе с ментором))
А я еще когда только-только сделали UsersPage сделал пагинатор через slice массива со страницами. Не знаю, насколько это корректно, но оно работает. А этот выпуск просмотрел для общего ознакомления, спасибо, Дим)
что такое: import cn from "classnames" ? нашел ответ в комментах : npm i classnames
спасибо
Спасибо! Выручил!
Прошлый формат был лучше... Спасибо за лучший курс по react.js
Старый формат, но все равно спасибо, Димыч)
Описывать и пересказывать по уроку нечего. Могу разве что добавить ниже чуток отредаченный Димын код пагинатора. Еще от себя добавлю, что код Димыча в общем рабочий, только надо проинсталисть библиотеку classnames. Без понятия что она делает, ибо не инсталил.
mport React, { useState } from 'react'
import s from "./Pagination.module.css";
const Pagination = ({totalItemsCount, pageSize, currentPage, onPageChanged, portionSize = 10}) => {
let pagesCount = Math.ceil(totalItemsCount / pageSize);
let pages = [];
for ( let i=1; i 1
?
{
onPageChanged(pages[0])
setCurrentPortion(1)
}}>toFirst
{
currentPortion !== 1 && setCurrentPortion(currentPortion - 1)
}}> PREV
: null
}{
pages
.filter(p => currentLeftBorder {p}
))
}{
currentPortion < portionCount
?
{
currentPortion !== pagesCount && setCurrentPortion(currentPortion + 1)
}}> NEXT {
onPageChanged(pages[pages.length - 1])
setCurrentPortion(portionCount)
}}>toLast
: null
}
}
export default Pagination;
Сперва я подумал,что этот формат неочень, так как столкнулся с трудностьями в реализации, потмоу тчо до этого повторяешь за Димычем и все идет легко, а тут нужно самостоятельно думать, так вот я столкнулся с проблемой реализации, начал дебажить нашел ошибки и лучше понял материал, так что этот формат сложнее но намного лучше
Не, Димыч, не катит! Думал урок 24 минуты, сейчас все быстро сделаю и отдыхать, но...
Искал баг, перекопал все что связано с Users, перебрал весь reducer, юзал кучу дэбагов везде где только можно...
Ничего не помогло, отыскал коммит, почал по строчке анализировать и вставлять код - заработало!
Ошибка была в hook useState(), где на автомате случайно вместо [] напечатал {} ...
Но еще до момента поиска этого бага было куча проблем с недопониманием что как.
Но, это был один из важнейших уроков, ведь так дэбаг я еще никогда не юзал, такой анализ кода был очень полезен для меня!
В любом случае, спасибо, Димыч, за урок!
Димыч, подскажи, пожалуйста, какую книгу ты советовал почитать про TDD?
Любую!!! Есть на инглише именно на JS (может уже и на русском есть)
А так любую!
То чувство, когда решил сделать сам и получилось как у димыча)) Как-будто взломал пентагон, ей богу XD Спасибо за уроки, друг!
Димыч, спасибо. paginator, постраничный вывод
Дима, спасибо за урок)
возможно кого-то тоже бесит, что после ухода со страницы users пагинатор сбрасывается на 1. исправьте код:
let [portionNumber, setPortionNumber] = useState(Math.ceil(currentPage / portionSize));
#reactJS #тестирование #практика #пример #уроки #курс
Почему после ререндера компоненты значение useState сбрасывается?
@@chaikadxport чтобы понять, как помочь мне нужно немного больше информации.
если вы спрашиваете о кейсе со сбросом номера страницы, то на сколько я помню (а видео я смотрел больше полугода назад) Димыч по умолчанию в useState поставил 1 => вы перерендерили компонент => вы оказались на первой странице.
если вы используете решение, которое я предложил выше, будет вам счастье.
или же вы спрашиваете об ошибке в работе useState вообще, то у этого может быть много причин, например:
Неправильное использование хуков: Убедитесь, что вы используете хуки useState внутри функционального компонента и вызываете их всегда в одном и том же порядке. Не пытайтесь изменять их значение напрямую.
Побочные эффекты: Если вы имеете побочные эффекты, такие как асинхронные запросы или подписки, они могут привести к обновлению компонента, что может привести к повторному вызову функции и сбросу значения состояния. Для управления побочными эффектами используйте хук useEffect.
Перерендер по причине изменения props: Если компонент перерендеривается из-за изменения его пропсов, это также может привести к сбросу значения состояния. Убедитесь, что вы правильно управляете пропсами и используете React.memo или shouldComponentUpdate, чтобы предотвратить ненужные перерисовки.
Использование ключей при маппинге списка компонентов: Если вы отображаете список компонентов с помощью map и каждый элемент не имеет уникального ключа, React может считать, что это новый компонент и создаст его заново, что приведет к сбросу состояния.
Изменение стейта вне React-а: Иногда стейт может казаться сброшенным из-за изменений, произошедших вне React-а, например, при использовании глобальных переменных или неправильном управлении данными из других источников.
Pagination
номера страничек со стрелочками prev, next
Круто Спасибо!
React Redux
Димыч, летим в космос. У меня будут все юзеры сразу, просто буду скролить вниз, но спасибо, было интересно. У меня за окном война, а я бомблю Реакт. Кабзда какая кабзда
Комментарий и лайк!
сначала сделал свой, потом сделал как у Димы (со своими усовершенствованиями)...
Дима, спасибо!
#paginator, #постраничныйвывод - #Практика #ReactJS
Всё-же лень взяла верх и я просто прикрутил плагин для этого, наврядли такие штуки делаются ручками в проектах, но за старания однозначно спасибо Димычу
Такой формат тоже хорош! Тем более нужно учиться писать код самим. Тут посмотрели - сделали у себя по памяти. Тем более уже много разжованных видео было до этого. Думаю золотая середина будет чередовать выпуски, например 2 выпуска в старом формате, 1 в новом (или 3 через 1 и т.д.). Спасибо
Спасибо, хорошая тема
Благодарю!
Сегодня 20.12.21г. Этот формат видео неочень понятен, но заставляет подумать и самому разбирать процесс)))
+ предыдущий формат
Этот формат подходит ( на 93 видео, если бы ты начинал с такого формата, то однозначно не подходит ), пришлось взять лист и ручку прописать формулу, проговорить вслух что бы стало понятно самому себе.
Было бы хорошо, если больше твоих уроков ( объяснений ) с задачами аналогичными этой где нужно,что то решить опираясь на явно математическую логику. Задач с решение по программированию с уклоном на математическую логику на RUclips не хватает, Димыч, а у тебя получатся потрясающие видосы.
Старый формат душевнее. И камера с афйона тоже :)
Такой формат хуже,потому что все слишком гладко,а при разработке обычно есть проблемы и лучше смотреть как их решает человек по опытнее чем Джун)
или недоджун)))
@@user-il4ph3fr6h или недотрэйни))
Привет Димычу и всем самураям. По видео. На мой взгляд изложение получилось "рваным" не упорядоченным. И в голове не сложилась детальная картинка. Хотя основная канва понятна. И это не смотря на то что я свой пагинатор уже написал сам. Я столкнулся с его необходимостью еще на этапе отображения страниц 55 урок. Я изучаю твои видосы и в 2022 году и у меня получилось более 3500 страниц по 10 юзеров!!! Сейчас уже более 4000!!! Лучше топи по прежнему. Так понятней. Если кому будет интересно то я реализовал свой пагинатор в виде массива который заполняется один раз, в самом начале, и состоит из элементов тоже массивов - всех чисел входящих в порцию (по терминологии Дмитрия) и все что мне нужно при навигации это выдернуть нужный массив и отобразить все входящие в него цифры и при этом нет необходимости вычислять начальную страницу порции и конечную. Ибо они уже есть.
shift + f6 - аккуратно!! - чуть с ума не сошла! Видео супер, только жаль, что не было услышано хоть пару слов о класснеймах( . Формат видео paginator, постраничный вывод - Практика ReactJS мне не зашел т к я неуверенно двигаюсь в обучении и было бы здорово повторять первые шаги! спасибо Димыч за труд!
За старый формат, фишка и уникальность данного курса по React Redux в разжевывании,
а ну и тема библиотеки classnames не раскрыта ;)))
Увидел Димыча - поставил лайк!!
Это видео Как самостоятельная практика, лучше конечно когда пишешь код онлайн
Посмотрел урок, потом сам на листе бумаги пытался разобраться и вникнуть в суть происходящего. Вроде разобрался, написал код, но порции выдавались по 5, и параметр размер порции игнорировался. Танцы с листом, ручкой и дебагером показали зависимость между границами порции и размером страницы вместо размера порции. Короче, вебшторм автоподсказкой не ту переменную впихнул, а я не заметил. Было весело разбираться)))
Димыч, я все конечно понимаю!!! Но как твоя компонента меняет setPortionNumber в зависимости от currentPage? Если ты выберешь любую страницу после десятой, при rendere portionNumber = 1 и вся компонента перерисуется в дефолтный вид. Скостим тебе это косяк, на то что ты оставил это нам на закуску) Спасибо за урок!) Мотивируешь!
Если кому интересно я решил это таким костылем:
const [portionNumber , setPortionNumber ] = useState(Math.floor(currentPage/10) + 1)
P.S. Даешь курс на ХУКАХ c правильной архитектурой
мегахорош
С classnames всё просто. Функция cn возвращает либо название одного стиля pageNumber, либо двух selectedPage и pageNumber. В функции cn мы отправляем объект, где название свойства - это название нужного стиля, которое вернётся и пропишется в className, при условии, если значение свойства объекта не равно false.
Для лучшего ранжирования! =)