55 - React JS практика - pagination, постраничный вывод пользователей
HTML-код
- Опубликовано: 13 май 2019
- 🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
Front-end
it-incubator.io/front-end/?ut...
Back-end
it-incubator.io/back-end/?utm...
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_samurai
API: social-network.samuraijs.com/
Данных на серверах МНОГО. И когда мы говорим серверной API-шке: дай песни, пользователей, транзакции, оплаты... Сервер как правило никогда не вернёт ВСЕ данные за раз. Он раздробит их на порции и ... Вернёт нам какую-то часть данных, называемую в народе СТРАНИЦА!
В этом выпуске мы познакомимся с вами с Pagination, постраничным выводм данных, пейджингом, пагинацией.. Всё синонимы! Полетели ;)
Уроки по React JS: • Курс "React JS - путь ...
* Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
* Мы в соц. сетях:
itkamasutra
/ itkamasutra
telegram.me/itkamasutra
* Мои личные VK и Insta:
d.kuzyuberdin
/ it.kamasutra.dimych
#class #reactjs #практика #примеры #уроки #курс
Это как же нужно любить свое дело, чтобы посреди ночи, когда семья спит, записывать часовое видео для бесплатного курса. Да ещё и с перезаписью 4 раза... Склоняюсь перед твоим упорством, Димыч! Если бы таких людей были ни единицы, мы бы жили в совершенно другом мире...
Сначала говорил тихо, чтобы не будить, а потом пошло поехало))
чтобы мамка не проснулась и не заругала
в конце уже молотил молотком по клаве и стене))
Нужно создать паблик "Цитаты Димыча".
"Если у тебя чистая душа, то и зубы будут тоже чистыми. Хотя не факт - (с) Димыч"
Создал?
Еще одна: "Не стесняйтесь считать на пальцах, я всегда считаю на пальцах и никогда не ошибаюсь, точнее ошибаюсь но гораздо реже потому, что не стесняюсь считать на пальцах"
самая лучшая цитата, "у тебя бл#ть нету выходный, ты учишься!!"
Я вот реально смеюсь с этого)
Димыч лучший
Спеиально нажал на паузу после этой фращы чтобы найти коммент на эту тему))
Ржу над ситуацией))) Один задолбаный чувак посреди ночи, после трудового дня пишет видео и пытается собрать и сформулировать мысли, другой задолбаный чувак посреди ночи, после трудового дня его смотрит и пытается осмыслить😀
Димычу - РЕСПЕКТ за урок! ...И мне РЕСПЕКТ за просмотр, лайк, коммент🤪
Спасибо огромное!!!!!! Не могу представить, как вот так можно отдаваться своему делу!!!Ещё раз спасибо!
Карусель массива номеров страниц, можно сделать через Array.slice():
pages.push(i);
};
let curP = this.props.currentPage;
let curPF = ((curP - 5) < 0) ? 0 : curP - 5 ;
let curPL = curP + 5;
let slicedPages = pages.slice( curPF, curPL);
// И в jsx меняем:
pages.map(*****)
// на
slicedPages.map(*****)
Актуальная тема, учитывая, сколько тысяч страниц сейчас)
спасибо, работает
спасибо тебе добрый человек
спасибо :)))
Спасибо, мил человек !🤝
Большое спасибо за все старания!! Смотрю в 2022) надеюсь не я один такой) и страниц уже 3748
не один)
Уже больше, 4286 страниц)
уже 21688=(
@@chkip1386 это если по одному выводить, а вот если по 5, то 4353 сейчас
21.11.2022 4360 страниц
"Главное,чтобы душа была чистая.Тогда и зубы будут чистые.Хотя не факт"😄 Обожаю эти моменты. Курс в целом бомба! Летим!🚀
Тот самый момент когда у Димыча на видео 11 страниц, а у тебя в 21-ом году 2150 страниц )))))
аааа, та же фигня)))) по-началу даже испугалась)))
уже 2340 )))
28.04.2021 : 2362 страницы по 5 пользователей.
2404 pages already!!! :)
2407!!!!
Было весело, когда 3 часа потратил на написание пагинации, все подчистил, подготовил к комиту.
Вводишь последнюю команду в git, ожидая что там gitk --all& (графическое дерево комитов, удобно видеть где ты, и что делать дальше).
А вместо этого вбиваешь git reset --hard main (сам же использовал ее для очистки до ближайшего комита).
После этого лупал глазами на собственноручно удаленную работу за сегодня. Поискал в интернете, как отменить git reset --hard. Ничего не нашел.
Поздравил себя с успехом.
Сделал перерыв.
Все написал заново.
Процесс идет
Спасибо огромное этому святому человеку - бесплатно с нами возится как с детьми и все разжевывает с большим энтузиазмом! Дмитрий! Спасибо! Эта лекция была самой сложной из 55 просмотренных. Для меня вот так. Все законспектировала. Сейчас попробую, не подглядывая, все сама порефакторить.
дааа, жестко! я пересмотрел 4 раза прежде, чем понял и усвоил сделанное.
У Димыча на обоях логотипы Java xD.
Ахахах))
У Димыча еще советского ковра не хватает на заднем фоне)
Приятель это coffe script)) Синтаксический сахар.
на кухне
Я тоже хотел отметить, что он тайный фанат Java )))
50:45 Для тех кому трудно понять почему нужно передавать pageNumber в качестве части аргумента вызова axios.get() вместо this.props.currentPage. Дима слегка сумбурно это пояснил. В компоненту Users прилетят пропсы и значение this.props.currentPage cтанет зафиксированным примитивом (например число 2). В момент клика на номер странички запустится метод onPageChanged который установит новый номер текущей страницы в редакс стейте ( в BLL ) , но значение полученное this.props.currentPage на этот момент останется двойкой, магического апдейта не произойдёт. Поэтому кидаем динамическое значение из pageNumber в аякс запрос. Гхмм не уверен, что я объяснил вменяемо, но я чут-чуть постарался
Спасибо за пояснение!!!
Вы пишите "магического апдейта не произойдёт" - можете объяснить почему не происходит , state ведь изменился
все равно не понятно )
Постараюсь добавить:
За активную страницу в BLL отвечает currentPage которая вырисовывается при получении всех данных. Для того чтобы страница менялась при нажатии мы добавляем onClick которая по каждому нажатию на страницы будет заново отправлять запрос (а то он останется как и был с самого начала) и менять страницу...........208 страниц получилось (по 100 элементов на каждом).....ничего себе людей уже прошло
я не знаю почему магического апдейта не происходит, потому что у меня он происходит.
Найкращий 👑 Дякую за такі круті уроки🙌
Огромное спасибо за твою работу! Сам занимаюсь по ночам, сейчас почти 2 ночи. Понимаю как это не просто, особенно после трудового дня. Но желание что-то изменить не дает пойти спать, уже и не обращаешь внимание на силы. Просто делаешь на вдохновении. Желаю всем вдохновения на этом не простом пути, а тебе, Димыч - большая благодарность! Удачи тебе и успехов в твоем дальнейшем развитии 👍
Ну как устроился ?
То чувство, когда досмотрел видео, а на твоих часах точно такое же время - 2:30)) Спасибо за уроки!
1:45
Благодарен от души за разжевывание до мелочей. React Redux!!!
Прохожу курс в октябре 22 года, на сегодняшний день на сервере 21000 пользователей : )
Чтобы у вас на странице не выводилось по 100500 страниц, просто сделайте условие в цикле.
К примеру:
if (pages.length < 10) {
pages.push(i);
}
Спасибо, Димыч! Отличное видео.
можно еще дополнить математическую операцию c pages например разделить на 100
@@user-ew7yx5qm2h Да тут каждый извращается так, как он хочет, я написал костыли на if else и у меня показывает 3 страницы текущую, предыдущую и следующую ну и разумеется условия для граничных значений, если текущая равна общему числу страниц, то я не получу следующую, а взамен ее еще страничку -2 от текущей, так же и с первой +1 и +2 от текущей
Тоже сделал отображение по три странички через if else💪🏻
@@johnmj750 можно код пж?
@@wakibtz7134
pages.length = 3
if (props.currentPage === 1) {
pages[1] = props.currentPage + 1
pages[2] = props.currentPage + 2
} else if (props.currentPage >= 2) {
pages[0] = props.currentPage - 1
pages[1] = props.currentPage
pages[2] = props.currentPage + 1
} else if (props.currentPage === pages.length) {
pages[0] = props.currentPage - 2
pages[1] = props.currentPage - 1
pages[2] = props.currentPage
}
то чувство, когда в воскресенье, в 23 часа вместо видео с котиками выбрал видео с Димычем, и тебя в этом видео еще и похвалили за твой выбор)
Правильный выбор, бро!
Спасибо за труд) React JS, Redux, Ajax, Axios
Ааааа. Я не верил что у самого получится но мне удалось запилить сюда функцию которая изменяет мой массив pages в зависимости от нашей активной страницы. И выводит всего 20 страничек на экран, 10 слева от и 10 справа от той где мы находимся! Аж крылья выросли)))) Димыч реально учит кодить
Спасибо огромное, у тебя самые лучшие уроки по react js, отлично, понятно, доступно объясняешь все простые и сложные моменты а том числе ajax и pagination!
Спасибо огромное, как всегда со всеми объяснениями!!!
Всё по полочкам React JS, Redux, Ajax, Axios, pagination!!
Димыч, словами не передать, как приятно смотреть твой курс, спасибо! Тороплюсь догнать лайв выпуски на TS
Спасибо за тяжкий труд 24/7! Лучший курс React&Redux! Летим дальше!
Спасибо. Очень круто, что мы раз за разом проходим один и те же вещи. С каждым разом, что-т да становится более понятным. С первого раза порой вообще может не заходить информация. React - огонь!
не ну годнота, понял что компонента умнее меня, несмотря на то что тупая... пошел дальше
Спасибо Дмитрий! Всегда смотрю Ваши видео на 1.5 скорости. Как мне кажется это очень соответствует Вашему характеру. ))) Очень много информации и очень-очень быстро!
Спасибо , как всегда всё качественно и в мелких деталях)!!!
React JS, Redux, Ajax, Axios, pagination!!
Спасибо за отличную подачу материала. React JS, Redux, Ajax, Axios, Pagination
Как мне нравятся вот эти повторения, постоянные проговаривания, что от куда берется, через что прокидывается, куда и как диспатчится. Очень хорошо все запоминается, усваивается
Годнота и уважение - мои эмоции после просмотра видео. Годнота - за подачу материала, уважение - за твое отношение к данным урокам; записывать урок 2:30 ночи, когда завтра на работу, это сильно)
В общем, огромное спасибо и больших успехов тебе! Кто-то уже писал, повторю: половина первой моей зарплаты твоя)
Это лучшие онлайн курсы что я выдел на Ютьюбе, спасибо огромное за твой труд)
Очень полезный ролик!И вот хочу отметить,что только сейчас я более менее начал вникать в всю эту движуху)
Доброго времени суток. Данные пользователей меняются? У меня почему то нет, либо 100 последних пользователей, либо десять последних. Не пойму, почему не происходит постраничный вывод=(
@@theWorldIsMultivariate Ну да,у меня все нормально функционирует
@@theWorldIsMultivariate проблема была с передачей в пропсы на 56 уроке,но сегодня решил проблему
КРАСАВА!!!!
Самые лучшие уроки по React & Redux!
Спасибо 🙏
Огромная благодарность, Димыч, колоссальный труд!
React
Redux
Pagination
К моменту моего просмотра уже 205 страниц при выводе по 10, надо как то решать эту проблему)
Правильно, подача знаний у тебя просто офигенная - не поверхностная, а глубокая, структурная, что бы ты не просто умел делать, а главное еще и понимал, что ты делаешь :)
Парень, тебя в лигу святых надо записывать за такой труд. Без этих уроков врятли бы въехал в react / redux в течение год, а тут за неделю многое понятно уже. осталось не забыть и без подглядываний научиться.
Главное не забывать, откуда в контейнерные компоненты приходят dispatch и state. И как вообще Димыч к этому подводил. Большая ценность в том, что удалось немного "заглянуть под капот" и увидеть как это все работает без react-redux, что оно все не по щучьему велению появляется) Нужно постоянно освежать данную инфу в памяти. Спасибо еще раз. Курс - супер)
поставил видос на паузу и реализовал переключения между страничками, радостей полные штаны) Пока меня бомбят грады, я бомблю реакт)0) (привет из Украины). Огромное спасибо, Дима, что дал такую возможность отвлечься в трудные времени и извлечь из этого пользу.
а ты заплатил за api?
Спасибо, офигенное объяснение и ещё за то что повторяешь предыдущие основные моменты!
сначала думаешь, что час это много, но Дима, спасибо вам, что объясняешь на пальцах, ибо у начинающих пробелы везде)))
контент и что в любовью это записываешь, это приятно смотреть и учиться! еще раз спасибо!))
Я знаю почему это лучшие курсы по React, Redax - потому что Димыч горит и полон энергии, и заряжает нас ею. Приятно видеть человека который радеет за свое дело. Да и дело максимально полезное для общества!
Как всегда круто. Это хорошо, что мы часто работаем с BLL, таким образом мы его помнить будем всегда.
ньютабельность это хорошо.
Огромнейшее спасибо за курс!! Ты помогаешь реализовать мою цель, быть разработчиком!!
Великолепные уроки! Дмитрий лучший! Очень понятное объяснение! В пол 3 записывать с 4 раза часовой видос- ООГОООНЬ!!!!
18:54
"Ю, типа, а это Б" 😂
Дима, спасибо, максимально наглядно))👍
наткнулся на Ваш курс, очень классно. и большой плюс за подход!
Как же мне нравится ваша простота, это очень подкупает, в будущем очень хотелось бы пообщаться с таким открытым, веселым и интересным человеком)
Внесу горсть опыта. Если пишем так className={this.props.currentPage === p && cl.activeBtn} , то будет показываться ошибка index.js:1 Warning: Received `false` for a non-boolean attribute `className`.
If you want to write it to the DOM, pass a string instead: className="false" or className={value.toString()}. Поэтому надо писать this.props.currentPage === p ? cl.activeBtn : ''
лучше всего использовать classnames
@@user-ql6cs2cy7dугу. Но я styled components использую
Теперь количество страниц более 150, выходит просто чудовищно!:)
Димыч спасибо, запоздало, спустя пол года:)
уже более 3000 пользователей ... o.O
totalCount: 3450
В общем и я решил эту проблемку, с / 100 , и в место 700 , только 7 страничек )
4247 - страничек аццкое кол-во) Надо бы доделать пагинацию под такой случай!!!
6000+ O_O
Огромное Спасибо тебе, Димон! Отличный ночной урок, пришлось немного помучаться, по памяти всё сделать, в итоге получилось.
React для всех и во всех мелочах - круто, крассава! Thanks
Thanks!
The best lessons of React & Redux!!!
React , Redux, State, Store, Dispatch ,Connect, Action, Route, Reducer, Props, Pagination
Димыч в начале видео: потрачу 40 минут, запишу ролик и пойду спать.
Ролик: 1 час 2 минуты 35 секунд
Самурайчики, пересматривая ролик 3 раз: ну да ну да, пошел я нафиг
Димыч, видос react.js pagination супер, но поберегите себя, не пишите видосы так поздно, лучше нормально высыпайтесь))
Спасибо, Сергей! На том свете высплюсь лет через 70:)
Куда высыпаться надо?))
@@ITKAMASUTRA не факт, что на том свете отдыхают )
@@ITKAMASUTRA так конец света через 50 лет и ВСЕМ кердык! ;)
Блин, до 2:30... и на работу еще нужно было вставать, причем не завтра, как ты сказал, а эт уже сегодня получается. Спасибо огроменное за подробное объяснение!!! Будешь в Берлине - пиши, с меня кофе и экскурсия по городу ))))
спасибо)))
Жирнющий лайкос, Дима. Свят-свят, больше 4500+ юзеров, аж страница иногда сбоит)
"totalCount": 7246, летим дальше
пришлось условием резать до 30, чтобы не выходило за рамки обзора :/ костыли наше все
8195 :DDD
@@fenrir4366 this.props.userBase
//.slice(0, showItem) =>to show only some elements
? this.props.userBase.slice(0, 10).map((user, index) => (user ?
8499
"totalCount": 8586
Лайк за пол литровую банку с чаем!)
спасибо за видос, и спасибо, что постоянно повторяешь одно и то же. Реально начинаешь понимать, когда тебе прям вбивают в голову как это работает. Последние видосы уже начал ставить на паузу и пробовать писать сам пока не заработает, а потом смотрю как ты делаешь. Круть, не останавливайся, огромное спасибо! Немного для продвижения канала - React, Redux, props, axios, ajax, javascript
Спасибо!!! Реально, очень сильно помогают твои уроки!!!
Спасибо. Лучший курс React JS.
Redux, Ajax, Axios, pagination.
Бомбим дальше ©
СУПЕР КУРС!React.js Redux react-redux connect axios props pagination js
Дай Бог здоровья тебе всей твоей семье!! Димыч,ты осуществляешь мечты людей!!
ESlint :)) мне тут товарищ в вебпаке eslint по хардкору прикрутил. Все варнинги,вообще все включено. Говорит:"лучше сейчас мучайся,чем потом тебе по рукам бить будут".
Недели две не мог разобраться, постоянно что-то путалось, отваливалось и забывалось. Сегодня наконец-то закончил этот урок, двигаюсь дальше. Димычу респект!
Димыч, огромное спасибо за старания так доступно все изложить! React, Redux, JavaScript
Димыч,сделай потом еще курс по Git. Ну или как там концепция называется.. git flow что ли. Как ветки переключать,какая структура должна быть репозитория,и тд..
А то ведь при трудоустройстве очень важно разбираться в этом
Не важно! Этим заниматься будут Лиды, они скажут, что куда коммитить! Важнее научиться писать код! Не распыляйтесь))
по гиту уже были уроки в начале данного курса и довольно хорошие
Димыч, пусть тебе карма вернет все то добро!!) React JS, Redux, Ajax, Axios можно понять)
2022. Спасибо большое! Невероятно интересно смотреть и повторять, разбираться, добавлять что-то своё!
Спасибо Вам огромное за то что Вы делаете!!! В этом видео я нашла ответ на вопрос, который мне неделю спать не давал!
На текущий момент, 10.03.2020, "totalCount": 2336
Идем дальше !!!
@@MichaelCurze 2986
@@mikesmirnov1976 3033
Да и после 50 обьекта все пустое идет
@@arlenm1472 3653
@@VSsoviet 4149
Дим, а когда уже наших знаний(если смотреть строго по твоему курсу) будет достаточно, чтобы пытаться устроится на работу и идти на собесы?
100 выпусков!!! И гоните ✊
@@ITKAMASUTRA я рискнул и пошёл после 50 урока, по-моему не удовлетворительно)
@@ITKAMASUTRA а если работодатель знание TypeScipt потребует?
@@user-hk1hf5tl5e ruclips.net/video/OvLWWvjoi8s/видео.html
@@user-hk1hf5tl5e блин, TypeScropt просто мего-супер классная вещь. С ним намного интереснее и проще ловить баги. подучи TypeScript . тот же JS, ну почти. Cначало ты будешь зол на него, но потом полюбишь
Ого, сижу, на часах тоже 2:20)) только год уже другой)) спасибо тебе за старания, желаю больше подписчиков, такие учебные каналы должны быть в топе Ютуба!
такой Димыч уже молодец. тут не просто лайвкодинг, а продумывание материала, создание презентации для лучшего понимания и только потом уже написание кода. Спасибо тебе огромное!
мозг бобо
реакт
постраничный вывод
редакс
редюсер
pagination
А я то ищу, откуда у меня тысячи пользователей, когда в уроке получилось 54... Потом уже глянул на тотал.
я тоже минут 20 ошибку в коде искал )))
кто бы мог подумать , но я получаю удовольствие от этой камасутры!)
Нравится,что темы идут поочередно.После сложной идет полегче,потом снова посложнее.Пагинация топ,Димыч спасибо от души:)
Для тех у кого несколько тысяч страниц))
Конечно можно вынести в отдельные переменные и красивее сделать, но вот так понятнее.
for (let i=Math.max(this.props.currentPage - 5, 1); i
я рекордно ничего не понимаю. на сложные вещи уделяется столько же времени, как на простые
больше всего бесят чуваки, которые что-то поняли и ещё умничают. что они вообще тут забыли, задроты
просто у кого-то склад ума другой и им легче это воспринимать, а не задроты
Спасибо за твою самоотдачу! Смотря уроки видеокурса каждый раз удивляюсь сколько же в них энергетики и мотивации!) Они меня вдохновляют идти дальше)) Когда меня начинает одолевать лень, то я ставлю тебя себе в пример и сажусь за комп, ахахаах) Спасибо тебе!!!
Катя, рад стараться! Мчи вперёд! Ты уже на 55 уроке, молодец
Дуже потужний курс!!Велике дякую!!!
React JS, Redux, Ajax, Axios, лучшие курсы. Спасибо за уроки, объясняешь просто класс!)
Ты просто нереальный человек!!) знай об этом, меняешь не одну думаю даже сотню жизней к лучшему!! спасибо тебе огромное человеческое!!)
Лучший курс по React !
Превзошла саму себя, смотрю на 1.75, даже наперед какие-то вещи делала
Спасибо большое!
Отличное видео! Димыч, талантище доносить сложную информацию простым языком, на пальцах, при этом не опуская упомянуть настоящую терминологию; без напыщенности, характерной задрото-айтишное среде! Это ооочень отличает IT-Kamasutra от аналогичных ресурсов. Димыч, летим!!! The Best React Tutorials Videos! Pagination, Request query params
React
Redux
Практика
JavaScript
курс React
разметка
Спасибо за урок :)
благодарю за твой труд! Ты прекрасный преподаватель! Здравия тебе мужчина
вдохновление и мотивация в каждом ролике! спасибо)))
Дима ты мега крутой, просто альтруизм высшей степени.Все понятно и хочется идти дальше изучать React JS и узнать финал. Трудолюбие и ответственность за качество подачи материала супер класс!!! Дима 100 тыс. раз готова говорить спасибо,что ты у нас есть🔥🔥🔥🔥🔥
За 2 часа ночи отдельный респект! Ну и плюсик для лучшего ранжирования в react-комьюнити =)
Спасибо за урок!) Изучение React, Redux продолжаем
Спасибо за такую самоотдачу еще и в такое время позднее!! Посмотрел полностью видос, теперь попробую сам написать. Еще раз спасибо)
пс. React, Redux, Connect, mapStateToProps, mapDispatchToProps, pagination, React-pagination, лучшие уроки React Redux
Спасибо мужик за свои труды!!! Очень хочу стать таким же экспертом в области React Redux, работать в этой области и приносить пользу всему IT сообществу!
Лучший IT канал, лучший курс по React, Redux, React-Redux
Спасибо огромное за труд. Выпуск огонь!!!
Как всегда увлекательно и понятно !))Разложил по полочкам)) Димыч, просто красавчик)) Респект !!!!