49 - React JS практика - страница пользователей
HTML-код
- Опубликовано: 28 ноя 2024
- 🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
Front-end
it-incubator.i...
Back-end
it-incubator.i...
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Помогайте друг другу вот здесь: t.me/reactjs_s...
Уроки по React JS: • Курс "React JS - путь ...
Сайты:
it-kamasutra.com
it-incubator.eu
samuraijs.com
Мы в соц. сетях:
itkamas...
/ itkamasutra
telegram.me/it...
Мои личные VK и Insta:
d.kuzyu...
/ it.kamasutra.dimych
#reactJS #практика #примеры #уроки #курс
Помогает структурировать все знания создание страницы music. Получился такой roadmap по созданию страницы
1. Route
2. Папка c jsx/css/container
3. Link in navbar
4. Store ветка
5. Reducer -> initialStore
6. Верстка (css, map(with key), userContainer, mapStateToProps)
7. Логика:
7.1. onClick
7.2. mapDispatchToProps
7.3. Reducer
7.3.1. action creator
7.3.2. action type
7.3.3. switch
Прикольно, я тоже решил видео на паузу поставить и сам всё сделать, а потом уже сравнить как делал Димыч, и получилось так, что мне тоже было удобнее идти от обратного. То есть сначала я начал подготавливать UI, а потом из UI (презентационная, из неё в контейнерную) плавно переходить в BLL. А вот Димыч как раз наоборот - BLL --> UI
"Едете в автобусе- думайте о стейте"
Конфуций, 4 век д.н.э.
Димудда, 21 век н.э.
У меня нет слов.Ты лучший препод !!!!!!!!Спасибо тебе большое .
У кого дублируются пользователи, происходит это в редюсере users за счет конкатенации (склеивание - прибавление) массивов users, много ложных вариантов в комментах, типа отрубить React.strict.mode и другие. Это решается в 55 уроке на пагинации перезаписью массива, данными с сервера: строка: return { ...state, users: [...state.users, ...action.users] }, заменится return { ...state, users: action.users }. Все у Димыча под контролем. Let's go 2024
Может точнее return { ...state, users: [...action.users] }?
ty!
Спасибки!
React говорит: "Всё, наговнокодил" 😂😂😂
Ты "хеяряк- хеяряк- хеяряк" и думаеш, что щас заработает, но React так не считает :))
React , Redux, State, Store, Dispatch ,Connect, Action, Route, Provider, Reducer, mapStateToProps, mapDispatchToProps, {...state}, Props
А можно вместо FOLLOW и UNFOLLOW использовать один обработчик допустим TOGGLE_FOLLOW. И при присваивании значения просто делать отрицание
return {...u, followed: !followed}
Огонь!
@@ITKAMASUTRA сижу смотрю первые 23 минуты и не знаю: то ли сразу помучаться и пробовать так сделать, то ли сперва за тобой повторить? Опыт показывает, за самодеятельность потом расплата тяжелая)))
переделал на toggle!
В топ)))
@@StepanVorobiov изначально сделал через toggle, идея разделить на 2 события как-то в голову не пришла вообще))
Прикольно, тут не только React, но и JS становится понятней.!!!
да и сама парадигма функционального программирования
Дима советовал книгу "JavaScript для детей. Самоучитель по программированию" Ника Моргана. Очень легко заходит. Для тех, кто совсем с 0.
@@AleksandrGordeevG Не только для тех кто с нуля, а и для тех кто немного прошаренный:)
Плюс
Абсолютно согласен !
"32 минуты божк мой! Мы только начали"... через 3 секунды "на самом деле делов осталось чуть-чуть" :-D
Обожаю такие выпуски. Когда у тебя копятся вопросы и какие-то не стыковки. Потом смотришь такой урок где объединяется то что проходили. И ВОТ ОНО!!!!))) Приходит озарение и понимание, а за ними и ответы на всё то что недопонимал до этого) и от этого просто душевное удовлетворение)) хех. Это самый лучший к подход к обучению. Спасибо Димыч, ты лучший сенсей)))
React, Redux, functional component, Дима такой заботливый, говорит "записывайте, проговаривайте". Наверное в душе Дима учитель младших классов)) класс!!!
Нашел для себя неплохую методу. Когда Димыч дает названия переменным, функциям и т.д., я их часто делаю с похожими, но другими названиями. Такая штука дает очень хороший подзатыльник, если перестанешь внимательно смотреть и начнешь бездумно повторять. Да, уходит иногда много времени на поиск ошибки, зато по ходу поиска еще 100500 раз всмотришься и вдумаешься в код)
Самый лучший реакт курс на ютубе)
Наконец мы переходим к еще более интересным вещам))
Спасибо за урок!)
Хвала Аллаху за этот курс. Димыч спасибо тебе!
Видос шикарный, позволяет все вспомнить и цифра 50 запоминается т е можно будет при необходимости быстренько пересмотреть.
Самий крутий курс React Redux JS! Дякую!!
React
Redux
курс React
разметка
Спасибо за урок :)
март 2023 React. Димыч спасибо!!!
Лучшие уроки по React & Redux !!!
The BEST!!! lessons of React & Redux!!!
Programming and Coding!!!
Just about information technology =)
коментар заради просування в ютуб. Дякую, крутий курс, react по трохи стає все зрозуміліший)
Мне очень помогает написание конспектов. Даже в процессе обдумывания как написать короткий и максимально информативный конспект приходит дополнительное осмысление пройденного материала. А еще, если за день проходишь 5+ уроков и в конце дня варенный сидишь, то на следуйщий день очень хорошо было бы повторить) Особенно конспект полезен через неделю-месяц, когда много знаний сами по себе выветрились.
просто супер, спасибо большое, не встречал такого подхода никогда, продолжайте творить дальше))
Лучшие курсы по React, Redux, State, JS ! Спасибо за такие уроки, что при возвращении спустя пару недель, можно все сразу вспомнить! Очень круто!
Самый лучший курс по #React, #Redux, #ReactJS!
Димыч спасибо за курсы большое! Всё очень доступно и как мне сказали актуально до сих пор
Делал сам это, потом посмотрел видос, оптимизировал и 2ч сидел искал ошибку, страница не выводилась, в итоге оказалось, что забыл спред оператор дописать перед action в редьюсере, будьте внимательны в общем)
2022
React , Redux, Dispatch ,Connect, Action, Route, Provider, Reducer, Props
Лучший курс по React.
Бомбим дальше ©
Димыч, ты лучший.
Огромное спасибо за уроки по react и redux
за 23 дня 49 уроков прошёл, на вторую половину наверное уйдёт больше, сложность возрастает. Дмитрий, спасибо!
красава, я два месяца проходил)
Второй рендер происходит из за у вас в файле index.js, отключите его и не будет проблем с дублированием users
Брат, спасибо тебе огромное, респект тебе,а то я уже совсем раскисла
@@ОльгаАбрамова-х4п ты в начале пути изучения реакта?
Спасибо!
Спасибо большое
@@ОльгаАбрамова-х4п как успехи?
самый крутой курс по реакт , Дима зверь-машина
По поводу 41:50: Ctrl+Alt+O удаляет неиспользованые импорты.
Отдельное огромнейшее спасибо за уроки :)
была ли такая ошибка, что после отработки функции Подписаться возвращает в стейте только текущую позицию, все остальные undefined)?
сперва реализовала вывод N юзеров при клике и подписаться/отписаться , а потом смотрела видео. это дало крутую возможность отследить ошибку с пропущеным глубоким копированием объекта юзер с измененным значением ключа isFollowed. в теории все понятно, а на практике не все нюансы удается отследить в моменте написания кода. Димыч, спасибо за уроки!
Димыч, Shift+Alt+Стрелка вверх/вниз - перемещает строку вверх/вниз
Напевно без тебе Діма я б React не вивчив ! )
Хотів не один раз послати тебе на три веселі букви , після прокидування всіх propsiv і рефакторинга коду )
Але велике " Д_Я_К_У_Ю " тобі Діма за старання і привіт із Закарпаття _Україна_ !
React говорит: "Наговнокодил" .)))))) Димыч, в конце курса надо будет издавать книгу твоих "перлов"
Это потому что "тупую компоненту" заставили диспачить, вот она и наговнокодила ))
А такой тоже огонь! "По сути тоже самое, только не так красиво. Точнее, более уродливо, чем там уродливо" )
От души посмеялся. "...Все, наговнокодил"=)
"все по феншую " еще классная фраза)
Спасибо за глубокое объяснение и напоминание всех важных тем, которые мы прошли. А именно, здесь были разобраны:
- reducers
- deep copy, shallow copy
- contairer and presentational components
- mapStateToProps, mapDispatchToProps
- router path
- map function
- ... дополните меня ;)
React, functional component, state, самые лучшие курсы реакт))
Лучший курс на постсоветском пространстве, который объясняет саму архитектуры, а не голые локальные сетстейты и жизненные циклы) лайк
Да, вот на этих темах мозг уже начинает подкипать !!! )) Тем интереснее двигаться дальше и разбираться больше и глубже в пройденном материале! Огонь! Спасибо за курс, Дмитрий!
псс, парень)) Привет из чата "Пара слов" :)
@@vityaost привет)) прикольно, что кто то ещё находит эти комментарии)) ещё интереснее вспоминать свои старые комменты😅😁
Вот это самая важная тема для новичка
мужик спасибо , 3 дня не смотрел видео не было возможности , как вернулся даже больше ценить начал ,то что ты тут сделал
Очень понравилось разьяснение алгоритма построения сайта начиная от:
1.createStore.
2.reducers.
3.Dispatch(обыкновенный switch,принимающий action).
4.ActionCreactor.
5.Connect контейнерной компоненты и презентационной.
6.отрисовка Презентационной как последний этап,оказался самым простым,хотя я всегда думал что это ппц как сложно.
Спасибо что делаешь сложные вещи простыми.
Очень здорово, что мы вернулись по сути к началу и начали создавать отдельный блок Users с нуля, но уже через продумывания State Managment! Понимаешь, как ты должен рассуждать на реальном проекте! И сразу стало ясно, почему BLL важнее и первично и как это реализуется!
Дмитрий, большое спасибо за курсы React Redux, особенно за вдохновение и мотивацию двигаться и бомбить дальше!!))
P.S. После какого по счету урока можно уже четко понимать, что знаешь минимальную базу, и готовиться к собесам?
Пожалуйста!
100!!!
Супер курс по react js!
Самые крутой курс по REACT REDUX. Спасибо огромное!!!!!!
даже если я балда, и не устроюсь на работу, мне просто в кайф были эти уроки, ни сколько не жалею,что занялась React!!!! спасибо
и не будешь разочарована потраченным временем?)
о ,как же я ждал этот видос! прям во время ,спасибо! React JS -лучший курс на ютубе,
spasibo za urok - React JS практика - страница пользователей
Огромнейшее спасибо за курс!! Ты помогаешь реализовать мою цель, быть разработчиком!!
лучший курс реакт
Спасибо за уроки, за лучшие уроки :) Лайфак: запустить сервер (npm start) удобно кнопочкой "Play" вверху справа, зелененькая такая. Там еще красненькая кнопочка стопа появляется, когда запущенно
Надо пересмотреть пару раз =)
Эх, Димыч) блочные элементы нельзя размещать в строчных)
Лайк! ))))
Правда штоле? Хм пойду гуглить почему) Неужели я говнокодер)
React, Redux - знати будемо круто!!!
Дякую за урок)
Спасибо за уроки!) Самый классный курс, практика, react , redux, функциональная компонента, state, connect(), reducer, observable, redux-store, dispatch)
Самый классный курс по React Redux!
Лайк, подписка, репост! ) круто всё объясняешь, человеческое спасибо :)
Казалось бы - ничего нового, но взгляд с изнанки - это тот еще вынос моего мозга) И все же, я это сделала, наконец-то, но самое главное - поняла структуру) Димыч, сенсей, благодарю!!!
Час видео на одном дыхании ! Димыч спасибо !
Очень крутой выпуск! просто топчик!!!
топ уроки) react бомба) наконец все встало на свои места когда сделали новую страницу) dispatch, state, redux, action creator, функциональная компонента - все закрепил:) Спасибо
2022. Очень здорово, что создали доп раздел на примере которого вспомнили/собрали воедино всю ту логику, что прошли раньше. Автору огромное спасибо!!!
за это отдельное спасибо Димичу
Просто шикарные уроки по React, я получаю кучу важной информации и в добавок заряжаюсь позитивом и мотивацией, большое спасибо)
Ждем с нетерпением следующие курсы! Спасибо большое за уроки!!
Димыч, спасибо за твою харизму и четкую подачу инфы! Лечу с тобой шух, шух!!!
Спасибо тебе, Димыч! Курс супер! Потихоньку начинаю понимать что к чему в Реакте!
React JS практика - страница пользователей
Спасибо, Димыч!
Смотрю, учусь
Спасибо было круто, React, Redux, Reducer, state, всё будем знать)
Сегодня целый день разбирал пошагово bll часть данного урока. Дошел до отрисовки и понял что все, мозг кипит. Но так круто, что затронули все базовые шаги для создания новой страницы. Димыч огромный респект!
очень полезный курс по React!!!
Все в голове по полочкам разложилось
Наконец-то Redux перестал быть страшным и запутанным!
Спасибо Дмитрий!!
сохранить пропорции аватарки и обрезать края + закруглить:
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50px;
50%
object-fit: cover;
aspect-ratio: 1/1;
огромное спасибо за остановки
и отдельно спасибо что в остановке 50-ого видео ты повторяешь остановки которые были ранее
Это, наверное, самое сложное видео за все время. Всё время какие-то тупые ошибки вылазили, я думала кукуха поедет((( Придется пересматривать снова, потому как запуталась окончательно(((
Привет, смогла стать front-end разработчиком?)
@@АлександрКоваль-д3щ нет, коронавирус выбил из колеи на 3 месяца. Я сейчас на 78 только уроке.
@@МарияВасиленко-я5к а я на 49ом :) прохожу по 2 - 3 каждый день (очень тщательно). Какие планы, коллега? Как, где и когда собираешься врываться во front end?)
@@АлександрКоваль-д3щ сейчас допройду 1 самурая и начну проходить 2-го. В ближайшие дни еще начну проект один делать вместе со знакомым бэкэндером, это будет мне + в копилку. Как пойму, что уверенно шарю во всем этом хотябы на начальном уровне, начну резюме на собесы рассылать и подтягивать теорию js. Ну и, конечно, придумаю какой проект еще запилить, пока ищу работу. По-любому так просто без мыла не залезешь, поэтому надо все время что-то пилить😀
@@МарияВасиленко-я5к спасибо за ответ :)
Сделали страницу пользователей в нашем React-приложении, спасибо за урок!)
Спасибо, всё круто!
Единственное один вопрос не понятен - почему в UsersContainer мы используем расширение jsx и импортим React если мы не используем ни JSX ни реакт в самой компоненте?
Лучший курс, чтобы понять React с точки зрения архитектуры приложений.
Димыч, ты красавчик! React react-redux функциональная компонента, state, store и прочее, всё супер объясняешь!
Спасибо за такие остановочки, помогают лучше уложить материал в голове
сколько раз пересмотрела этот урок? я 4)
"Покрутилка закрутилась" 😂
лучший курс по React Redux
"У Нагиева 3 паспорта на разные имена" - Заголовки всех завтрашних желтых газет
Самый крутой курс по Реакту!!!
Респект. React Redux
Топовый курс! Большое спасибо
React , Redux, State, Store, Dispatch ,Connect, Action, Route, Provider, Reducer, mapStateToProps, mapDispatchToProps, {...state}, Props
при импорте connect - смотрите внимательно что бы НЕ за импортировалось с какого то длинного пути - типо import connect from "react-redux/lib/connect/connect"; - у меня по этой причине была ошибка - Could not find "store" in the context of "Connect(Users)" - и в чем проблема наверно пол часа искал)
После этого урока прошлый становится гораздо понятнее!
React, функциональная компонента, State, redux, js, frontend, web, ДимычКрасавчик, спасибулечки
Димыч, отличная тема, третьим экшеном юзеров загружаем, необычный подход, тут есть где подебажить для себя, поразбираться!
Дмитрий вы моя надежда и (знания) на трудоустройство!!!!!!!!!!!!!!!!!!!!!!!!!! СПАСИБО БОЛЬШОЕ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Каждый урок это круть!!! Но хочется узнать, сколько вы еще планируете записать уроков для полноты нашей чаши знаний, чтоб можно было быть уверенным в своих силах и идти на собеседование!
Возможно посоветуете книгу?
оф. документация по реакту + гугление отдельных тем!
устроился на работу?)
@@павелдуров-ф3р видимо да, некогда отвечать теперь))
привет, тут люди интересуются, устроился на работу или как ? )
Устроился на работу?)
плюсик для лучшего ранжирования в react-комьюнити =)
React
Redux
курс React и не только)
Спасибо тебе огромное за твой труд и за чат в телеграме и всем, кто там есть! Если бы не вы, я бы умер под попытками понять баги, которые не мог пофиксить по часу-другому
Димыч, спасибо огромное. Очень полезный урок. Но есть такой вопрос, если у нас будет грубо говоря миллион пользователей, и мы будем пробегать map'м по всему массиву и искать нужный нам ид, чтобы изменить у него какое либо свойство, это ведь долго и не правильно?
Чтобы оптимизировать поиск юзера лучше преобразовать массив в объект, где свойство будет равно ид юзера и весь поиск будет такого формата: users[user.id].name
Я думаю, что в будущем этот миллион пользователей будет в базе данных, и пробегать будем не мы, а СУБД.
лучший курс по React
привет всем тем, кто прямо сейчас проходит это все ))
Дмитрий, большое спасибо за курсы React Redux, особенно за вдохновение и мотивацию двигаться и бомбить дальше!!)) 2023
"React JS - путь самурая 1.0" ? "Красава!" : "Иди на завод!" ;
я в switch не по action.type сравнивал а по action. Минус 2 часа жизни. Но зато несколько раз пробежался по всем функциям цепочки Flux. Спасибо за такой шикарный курс Дмитрий!
РЕБЯТ ПОМОГИТЕ! У кого-нибудь был баг, при котором изначально появляется не 4 юзера, а сразу 8(4 из которых повторяют 4 предыдущие)??? У меня такое и я просто не понимаю почему так происходит... пересматривал несколько раз видео, вроде написано все идентично... дебаггеры вообще не помогают! По ним только выяснилось, что в компоненту users входит сначала массив с 0, а потом сразу с 8... А у ,,map...ToProps" вообще какое-то свое поведение
Здравствуйте,нашли ответ?У меня тоже такая ошибка?
@@memfik да, даже два варианта: 1) убрать в индекс джс React.StrictMode ( но мне позже сказали, что идея плохая, я поверил) 2) в редьюсере написать: return ({...state, users: action.users}) (там получится, что старые пользователи будут исчезать, но так и нужно)