React JS фундаментальный курс от А до Я

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 มิ.ย. 2024
  • React Полный курс от А до Я. Рассмотрим основные концепции и разработаем функционал, который встречается в каждом приложении.
    Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
    Ссылка на исходный код (git) здесь - t.me/ulbi_tv/23
    Таймкоды:
    00:00 ➝ Введение
    03:15 ➝ Теория
    11:40 ➝ Начало разработки. Создание проекта
    16:10 ➝ Что такое JSX?
    18:11 ➝ Компонент App. Работа с состоянием. UseState
    22:25 ➝ Управляемый инпут
    24:07 ➝ Первый функциональный компонент
    26:40 ➝ Первый классовый компонент
    30:25 ➝ Что такое хуки? useState, useEffect
    31:10 ➝ Стили. CSS. Классы
    34:30 ➝ Props. Аргументы компонента.
    36:55 ➝ Работы со списками. Преобразование массива объектов в массив React элементов
    41:50 ➝ Форма создания поста. Управляемые и неуправляемые компоненты
    42:30 ➝ Создание UI библиотеки. Первые компоненты. CSS модули. Пропс children
    50:00 ➝ Предотвращаем обновление страницы при submit формы
    50:45 ➝ хук useRef. Доступ к DOM элементу. Неуправляемый компонент
    57:35 ➝ React Devtools. Инструменты разработчика React
    59:15 ➝ Обмен данными между компонентами. От родителя к ребенку. От ребенка к родителю.
    01:04:20 ➝ Отрисовка по условию
    01:05:30 ➝ Сортировка. Выпадающий список
    01:12:00 ➝ Поиск. Фильтрация.
    01:15:10 ➝ useMemo. Мемоизация. Кеширование
    01:23:50 ➝ Модальное окно. Переиспользуемый UI компонент
    01:30:23 ➝ Анимации. React transition group
    01:33:40 ➝ Декомпозиция. Кастомные хуки
    01:36:20 ➝ Работа с сервером. Axios
    01:38:40 ➝ Жизненный цикл компонента. useEffect
    01:43:08 ➝ API. PostService
    01:44:45 ➝ Индикация загрузки данных с сервера
    01:46:20 ➝ Компонент Loader. Анимации
    01:49:25 ➝ Кастомный хук useFetching(). Обработка ошибок
    01:54:15➝ Постраничный вывод. Пагинация (pagination)
    02:06:20 ➝ Обьяснение механизма изменения состояния
    02:12:00 ➝ React router. Постраничная навигация. BrowserRouter, Route, Switch, Redirect
    02:22:00 ➝ Динамическая навигация. useHistory, useParams
    02:29:30 ➝ Загрузка комментариев к посту
    02:33:10 ➝ Улучшаем навигацию. Приватные и публичные маршруты
    02:38:00 ➝ useContext. Глобальные данные. Авторизация пользователя
    02:47:10 ➝ Бесконечная лента. Динамическая пагинация. useObserver
    02:58:40 ➝ План на дальнейшее обучение. Ставим лайки и пишем комментарии :)
    Мой канал в telegram и канал для общения подписчиков - t.me/ulbi_tv
    Поддержать меня и мой канал вы можете по ссылкам ниже.
    Patreon/boosty (доступ к бонусам) - boosty.to/ulbitv
    Qiwi кошелек - qiwi.com/n/BODYE821
    Яндекс деньги - yoomoney.ru/to/4100116193037469
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 5K

  • @user-sb7gq3os8x
    @user-sb7gq3os8x 4 หลายเดือนก่อน +243

    лайк, кто смотрит в 2024)
    курс пушка-бомба!!!

  • @user-jt7wb3zc1m
    @user-jt7wb3zc1m 2 ปีที่แล้ว +1393

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

    • @UlbiTV
      @UlbiTV  2 ปีที่แล้ว +59

      Спасибо)

    • @user-mm3sd3uh6y
      @user-mm3sd3uh6y 2 ปีที่แล้ว +6

      @@UlbiTV чет не понял. а редакс где? без flux-ориентированной библы это все чуть менее чем бесполезные игрушки

    • @UlbiTV
      @UlbiTV  2 ปีที่แล้ว +50

      @@user-mm3sd3uh6y какие глупости)) кто вам такое сказал?

    • @AlexanderOsnovnoi
      @AlexanderOsnovnoi 2 ปีที่แล้ว +32

      @@user-mm3sd3uh6y С какой стати? Реакт движется к тому, чтобы стать полностью самостоятельной библиотекой, без сторонних State Management систем. Разработчики отказываются от классовых компонент, добавляют хуки, это всё шаги к самостоятельности и обособленности от других фреймворков платформы

    • @digitalturkistan1857
      @digitalturkistan1857 2 ปีที่แล้ว +10

      @@UlbiTV он классные слово знает

  • @user-pp4td4hs1t
    @user-pp4td4hs1t ปีที่แล้ว +81

    если кто дошел до BrowserRouter, то теперь делают вот так:

    • @infindery
      @infindery หลายเดือนก่อน +1

      Спасибо

    • @EvilYou
      @EvilYou 24 วันที่ผ่านมา +2

      А вот как можно делать редирект:

  • @dr1m_o_o
    @dr1m_o_o 10 หลายเดือนก่อน +272

    Тем, кто делает сейчас. useHistory убрали, вместо него вы можете использовать useNavigate
    Было const router = useHistory()
    Стало const router = useNavigate()
    Далее, router.push('/path') меняем на router('/path')
    router.replace('/path') меняем на router('/path', {replace: true})
    Если вы хотите использовать state, используйте router('/path', { state: { name:'Xyz' }})

    • @saturnbeats8286
      @saturnbeats8286 8 หลายเดือนก่อน +2

      Вы просто лучший! Спасибо большое

    • @user-ib5ml1vz5r
      @user-ib5ml1vz5r 8 หลายเดือนก่อน +4

      Также, теперь не нужно всегда импортировать React в файлы компонентов

    • @saturnbeats8286
      @saturnbeats8286 8 หลายเดือนก่อน

      @@user-ib5ml1vz5r импортировать теперь React только в App.js?

    • @illam-saiv
      @illam-saiv 7 หลายเดือนก่อน +1

      Вообще, со времени записи видео React Router обновился до v6, и там изменения очень серьёзные. Пропала обратная совместимость

    • @gfhitdxaahn
      @gfhitdxaahn 7 หลายเดือนก่อน

      @@illam-saiv И многое из представленного в видео изменилось? Просто думаю проходить этот курс. Насколько он актуальный?

  • @user-ei3bu7pl2n
    @user-ei3bu7pl2n 2 ปีที่แล้ว +29

    святой человек, с просмотра твоих видео получил больше знаний чем с кучи платных курсов, за что большое человеческое спасибо, ну лайк с комментарием)

    • @UlbiTV
      @UlbiTV  2 ปีที่แล้ว +10

      Как бальзам на душу такие слова:)

  • @user-gt8bz2so5i
    @user-gt8bz2so5i ปีที่แล้ว +147

    Поверь не могу, что люди могут делать столько добра и пользы, сколько в этом курсе. Я в шоке. У тебя какая-то поразительная грамотность в речи, а ход мыслей и уверенность просто впечатляют. Очень круто! Пример!

  • @sentisie9013
    @sentisie9013 3 หลายเดือนก่อน +8

    Курс, который по праву может называться фундаментальным. Такого четкого объяснения не видел нигде, да и в принципе, чтобы столько функционала затрагивали в одном видео. Большое спасибо за проделанную работу!

  • @co181
    @co181 ปีที่แล้ว +316

    Если кто-то собрался смотреть это видео с полного 0 не тратьте время!, для того чтобы получить максимальную пользу выполните следующее:
    1- поймите JS любым способом на хорошем уровне
    2- Пройдите любой курс по REACT (плохой/хороший долгий/быстрый не важно
    3- Приступайте к этому видео и после просмотра каждой темы останавливайте видео пытайтесь сделать сами, гуглите подглядывайте обратно в видео если не получается сделать и так весь курс до победного конца (займет это все примерно от 10 часов до 20)
    4- Поздравляю вы знаете и умеете в REACT
    Если начнете смотреть сразу с 0 без базовых знаний, вы просто не поймете на сколько крутой этот курс.
    Автору здоровья и большое спасибо! Прошел этот курс и наконец почувствовал уверенность в своих силах в REACT

    • @nothing54999
      @nothing54999 ปีที่แล้ว

      @Google Account freeCodeCamp, кайфуй.

    • @palkan2590
      @palkan2590 ปีที่แล้ว +1

      спасибо!

    • @questionsanswer6293
      @questionsanswer6293 ปีที่แล้ว +1

      Я думаю любому понятно что начинать нужно основ JS не совсем понял про курс React вы говорите про платные курсы? На них нет денег

    • @co181
      @co181 ปีที่แล้ว

      @@questionsanswer6293 любой который сможешь найти( на ютубе полно), пройди его тебе будет ничего непонятно но потом когда начнешь смотреть этот курс все встанет на свои места

    • @Andrey-Nechaev
      @Andrey-Nechaev ปีที่แล้ว +3

      И не забудьте к этим 10-20 часам прибавить время на освоение JS на хорошем уровне.

  • @user-hd7mi3tj5r
    @user-hd7mi3tj5r 2 ปีที่แล้ว +378

    Огромное спасибо автору!!! Проходил React на курсах и много из видео знаю, но твои примеры и советы помогают сложить пазл из каши полученных знаний если не до конца , то на огромный процент!!! Надеюсь ты простишь новичка за некоторые исправления твоего видео))))
    1. Вместо switch теперь необходимо использовать Routes;
    2. useHistory убрали в router-dom v6 и заменили на useNavige, в котором по умолчанию исп-ся push
    3.exact не нужен теперь
    4. в route исп-ся теперь element c указанием компонента, вместо component
    5.у тебя в видео при рендере массива роутов идет component={route.component} ; у меня рендер массива роутов заработал только после указания в скобках element={}
    6.Redirect тоже убрали вместо него нужно исп-ть Route с переданным в element модуля ,
    пример с моего кода( ))
    Еще раз - автор не злись))) может кому-нибудь пригодится

    • @Grentanksmog
      @Grentanksmog 2 ปีที่แล้ว +8

      Спасибо! Ваш комментарий очень пригодился. Про Routes я нашёл на оф.сайте React Router, но вот про useHistory найти не смог.

    • @yzk970
      @yzk970 2 ปีที่แล้ว

      Спасибо!

    • @user-dv2to2mz9j
      @user-dv2to2mz9j 2 ปีที่แล้ว +3

      5 пункт, меня изрядно помучал, долго не мог найти решения

    • @anatoliytyz3290
      @anatoliytyz3290 2 ปีที่แล้ว +2

      за 5-й пункт огромное спасибо, 2 часа искал ответ, а нашёл тут

    • @johnwimbley24
      @johnwimbley24 2 ปีที่แล้ว +2

      А с чего вы начинали изучать программирование?
      Можно с нуля начинать react сразу?

  • @user-nc1nl8ph2s
    @user-nc1nl8ph2s 2 ปีที่แล้ว +26

    "если ты досмотрел этот ролик до конца, ты молодец и у тебя всё получится!" тут я чуть не прослезилась) спасибо!

  • @sanchopansa8956
    @sanchopansa8956 ปีที่แล้ว +56

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

    • @UlbiTV
      @UlbiTV  ปีที่แล้ว +6

      🙏🤝❤️

  • @semenkrupin5237
    @semenkrupin5237 ปีที่แล้ว +13

    Настроил себя на изучение React и скажу одно, что проанализировав все документации и примеры, это самое лучшее преподнесение информации. Все доходчиво, смотреть и слушать приятно. Подсел плотно на просмотр всех видео на этом канале и пожалуй, это лучшее времяпровождение на досуге. Спасибо большое за огромный вклад и старание и конечно же развития каналу, и твоему творчеству 🔥🔥🔥🔥🔥🔥🤞

  • @drunkmaster1101
    @drunkmaster1101 2 ปีที่แล้ว +46

    Редко оставляю коментарии. Но тут не могу пройти мимо. Это, наверное, лучший ролик по теме реакта для начинающих во всем рунете. Большое тебе спасибо за такой труд. Тут я узнал больше, чем при чтении официальной документации.

  • @interpol2138
    @interpol2138 ปีที่แล้ว +31

    Автор лучший! Огромная работа, разбирался в каждой строчке. Спасибо больше!
    Так же в связи с датой выхода ролика, помощь молодым выкатываю ниже
    36:50
    Изменены props и теперь могут выглядит так:
    Если у кого проблема с Route/react-router v6 то теперь нужно писать так:
    2:15:18
    2:19:27
    Вместо используется
    2:20:51
    Вместо использовал
    2:23:05 (Вместо useHistory() теперь используется useNavigate()
    const navigate = useNavigate()
    function transitToPost(id) {
    navigate(`/posts/${id}`, { replace: true })
    }
    //
    transitToPost(props.post.id)}>
    Открыть

    2:25:09
    Пропс exact больше не нужен
    2:34:49(Работа с декомпозицией файлов):AppRouter.jsx
    return (

    {routes.map(route =>

    )}

    )
    И файлом router.js У автора это файл по пути ../src/Router/index.js
    export const routes = [
    { path: "/about", element: , exact: true },
    { path: "/posts", element: , exact: true },
    { path: "/posts/:id", element: , exact: true },
    { path: "/", element: , exact: true },
    { path: "*", element: , exact: true },
    ];

    • @user-gy5lg4vp9i
      @user-gy5lg4vp9i ปีที่แล้ว +1

      Ещё не начал смотреть видос, но уже наткнулся на решение) От души

    • @user-gt3wg1qk8k
      @user-gt3wg1qk8k ปีที่แล้ว

      подскажите плз, может чтото изменилось, почему у меня не работает e.preventDefault(), когда пытаюсь поправить кнопку чтоб страница не обновлялась? (50:29)

    • @user-tv2tw9tu4i
      @user-tv2tw9tu4i ปีที่แล้ว

      Очень помог, спасибо

    • @fentan6806
      @fentan6806 ปีที่แล้ว

      Ты святой

    • @user-hl1dr1ov7c
      @user-hl1dr1ov7c ปีที่แล้ว

      @@user-gt3wg1qk8k нашел решение?

  • @MrMenma26
    @MrMenma26 ปีที่แล้ว +12

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

  • @user-bi3ws1eo2p
    @user-bi3ws1eo2p ปีที่แล้ว +8

    Просто лучший обучающий материал, что я видел на ютубе. Автору огромное спасибо за проделанную работу)

  • @selfishhsifles4536
    @selfishhsifles4536 2 ปีที่แล้ว +230

    Для VScode rsc можно заменить расширением "ES7 React/Redux/GraphQL/React-Native snippets" и ввести вместо rsc "rafce"

    • @user-jd9fk5ef8j
      @user-jd9fk5ef8j 2 ปีที่แล้ว +1

      Спасибо!

    • @user-il4pe2wq5p
      @user-il4pe2wq5p 2 ปีที่แล้ว

      @@user-jd9fk5ef8j Спасибо!)

    • @user-il4pe2wq5p
      @user-il4pe2wq5p 2 ปีที่แล้ว

      тебе спасибо ))

    • @iskander642
      @iskander642 2 ปีที่แล้ว

      Спасибо!

    • @dmitrys5369
      @dmitrys5369 2 ปีที่แล้ว

      Спасибо! то, что надо

  • @user-mq2gd3wg3h
    @user-mq2gd3wg3h ปีที่แล้ว +110

    Ulbi, прими скромные слова благодарности. Получил мощнейшую информацию за этот ролик, делал все параллельно с тобой, ушло где-то 30-35 часов на всё. В какие-то моменты делал ошибки, искал решения, гуглил, думал уже, что это всё не для меня, но в итоге решал все и продолжал дальше. Огромное тебе спасибо за такую гигантскую помощь. Буду дальше продолжать работать с твоим каналом, это невероятный кладезь знаний

    • @UlbiTV
      @UlbiTV  ปีที่แล้ว +19

      Спасибо за обратную связи и успехов тебе в обучении!

    • @le0messi
      @le0messi 10 หลายเดือนก่อน +1

      Здравствуйте, разрешите понитересоваться, как ваши успехи в обучении?

    • @dizalix201
      @dizalix201 8 หลายเดือนก่อน

      @@le0messiто что он тут показывает это 5 ти классник поймет, никакой глубины обычная тудушка

  • @user-ye4vw3tg6v
    @user-ye4vw3tg6v ปีที่แล้ว +2

    Спасибо за такой огромный труд, за этот курс. Действительно, здесь все только самое нужное. Выражаю тебе невероятнейшую благодарность!🙏

  • @endfine9230
    @endfine9230 หลายเดือนก่อน +3

    Какой же этот курс мощный, сегодня начал использовать всё что выучил на курсе и это прям вау, не представляю насколько тогда офигенен 'Продвинутый Frontend'

  • @user-xv8ud3kq9e
    @user-xv8ud3kq9e 2 ปีที่แล้ว +78

    Оставляю комментарий поддержки

  • @kibinnaneko3989
    @kibinnaneko3989 ปีที่แล้ว +28

    Сколько же у тебя полезного и интересного контента на канале, я просто теряю дар речи! Где ты берешь столько времени и сил?) Ведь это всё надо не только знать и уметь, а ещё и записать видео, перед этим продумав его до мелочей, чтобы все поняли. Виртуально пожимаю руку.

  • @user-hz8fh4iw5q
    @user-hz8fh4iw5q ปีที่แล้ว +1

    Мое первое знакомство React, но все рассказано и показано очень понятно и доходчиво!!! Спасибо тебе огромную за твою работу, за то, что тратишь на это время. Это действительно очень ценно и важно!

  • @denysmiller17
    @denysmiller17 8 หลายเดือนก่อน +4

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

  • @user-oz3ft2le7x
    @user-oz3ft2le7x 2 ปีที่แล้ว +19

    Приятно, слушать человека который знает о чём говорит и умеет доступно преподносить информацию!

  • @nothingg1759
    @nothingg1759 2 ปีที่แล้ว +64

    Спасибо большое за этот курс! Невозможно описать, насколько я был рад на него наткнуться. До этого работал с React на реальных проектах, но было много дыр в стилистике написания кода, некоторых нюансах и популярных решениях, по типу поиска, сортировки, навигации и т.п.
    Этот курс решил все мои проблемы, и теперь я могу писать свой код намного лучше!
    Огромное спасибо, что Вы выложили подобный материал в бесплатный доступ для простых смертных.
    Бесконечное уважение и успехов в развитии канала!

    • @UlbiTV
      @UlbiTV  2 ปีที่แล้ว +15

      Спасибо за столь теплый отзыв! Очень рад, успехов вам!

    • @user-rp8oy2kf5d
      @user-rp8oy2kf5d 2 ปีที่แล้ว

      няяяяяяяяяяя

    • @eduardkotov4757
      @eduardkotov4757 2 ปีที่แล้ว

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

  • @keepworking2705
    @keepworking2705 7 วันที่ผ่านมา

    Прошёл это видео после пути самурая, чтобы закрепить знания, всё очень классно легло, материал бесподобен, планирую пройти ещё много видео с этого канала. Автор - святой человек, спасибо огромное!

  • @blackwood8816
    @blackwood8816 ปีที่แล้ว +1

    Офигенский курс, без воды, каждая секунда несет за собой полезную инфу ,огонь)))Благодарю

  • @ipa_stor
    @ipa_stor 2 ปีที่แล้ว +51

    Наконец таки, теперь, когда меня будут доставать вопросами: "что ты там делаешь?" или "а как научиться?", буду просто кидать это видео😁😁😁 Тимур, спасибо, обязательно досмотрю, проверю свои знания:)
    Пс: 3 часа видео, нет слов, может прослушал, но ты хотя бы про донаты сказал? А то лайк и коммент услышал, а про донаты пропустил:)

    • @UlbiTV
      @UlbiTV  2 ปีที่แล้ว +2

      😂😂💪🏿💪🏿✊🏻✊🏻

  • @romanhudyma2164
    @romanhudyma2164 2 ปีที่แล้ว +96

    Спасибо Вам за очень качественный контент и проделанные труды. Как мидл что сам учился и просмотрел кучу гайдов, не могу не отметить прекрасный стиль подачи информации. Ваш талант изложения инфы огромен. Я только могу приставить сколько трудов было сделано для сценария такого видео.

    • @UlbiTV
      @UlbiTV  2 ปีที่แล้ว +78

      Так радует, что есть люди, которые могут оценить работу и поддержать, а не только потребляют :) спасибо!

    • @user-mm3sd3uh6y
      @user-mm3sd3uh6y 2 ปีที่แล้ว +5

      @@UlbiTV ох очень зря ты проп назвал onChange точь-в-точь как и атрибут у select onChange, это вносит путаницу и новичку гораздо сложнее разобраться что к чему

  • @FindSolution
    @FindSolution 5 หลายเดือนก่อน

    без слов... их просто нет... одни положительные эмоции от качества подачи и от самого материала! спасибо за твой труд и потраченное время!

  • @Vitalik_Kozhurov
    @Vitalik_Kozhurov ปีที่แล้ว

    Пушка, настолько емкий и классный курс по реакту) Вроде всего 3 часа, а сколько информации, все структурировано, последовательно, прям как я люблю) Автору огромный респект!!!

  • @slowmoka
    @slowmoka 2 ปีที่แล้ว +30

    Очень толково все: инфа, подача, дикция итд. Мне как начинающему немного сложновато, по этому смотрю это видео как справочник и каждый раз к нему возвращаюсь за пояснениями. Автору огромнейший респект что выкладывает такую бесценную инфу бесплатно.

  • @pavelg9855
    @pavelg9855 2 ปีที่แล้ว +14

    В отличие от огромного числа кликбейтных роликов "учим {что-то} за час" где 10 минут объясняют, а 50 - льют воду с умным видом, тут действительно можно выучить самое необходимое для создания SPA, пусть не за час, а за 3 и не с самого нуля, а зная кое-какие основы. Но это реально круто!

  • @Andrey-ep6sc
    @Andrey-ep6sc ปีที่แล้ว

    Просто лучший! На душе спокойно от того, что есть человек, который способен вот так все грамотно и доходчиво объяснить!

  • @Sgalagan1
    @Sgalagan1 10 หลายเดือนก่อน +7

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

  • @alextotun
    @alextotun 2 ปีที่แล้ว +16

    Реально стоящий ролик из множества, включая зарубежных авторов. Уложить так гладко недельное обучение в три часа, это гениально.) Спасибо огромное!

  • @alexlei4232
    @alexlei4232 ปีที่แล้ว +41

    react-router-dom Обновился до 6 версии. Читайте документацию!!! Если вкратце, появился компонент Routes внутрь него нужно вкладывать Route и в Route нельзя использовать вложенность Пример записи: ( )

    • @alexandrgurov
      @alexandrgurov ปีที่แล้ว +2

      спасибо большое за помощь!!! После двух часов безуспешных поисков проблемы, безнадёжно пошел в комменты....и тут ты. Очень помогло!

    • @arsram8397
      @arsram8397 ปีที่แล้ว

      Спасибо помог.

    • @yevhen3450
      @yevhen3450 ปีที่แล้ว +1

      Спасибо. Я знал, что найду тут такой комментарий!

  • @kirareilgan8463
    @kirareilgan8463 ปีที่แล้ว +2

    Спасибо тебе большое. Столько структурированного контента, без воды, я не встречала ещё нигде. Представить себе не могу, сколько сил ты вложил в это видео. Лайк, подписка, лучи добра. Надеюсь ты запустишь третий поток по фронтенду, буду ждать и верить

  • @user-ro2ll3wv6m
    @user-ro2ll3wv6m ปีที่แล้ว

    Уважаемый! Спасибо Тебе за твои труды, просмотрел много роликов по React и только у тебя одного информация изложена понятно и без воды. Благодарю Тебя. Здоровья Тебе и развития твоему каналу. Просто нет слов, молодец!

  • @MrSolpuga
    @MrSolpuga 2 ปีที่แล้ว +12

    Огромное спасибо автору за внятное четкое объяснение. За краткость и лаконичность. Это лучший курс по React из тех что я видел.

  • @matfeyivandaev5024
    @matfeyivandaev5024 2 ปีที่แล้ว +10

    Как всегда, всё по делу, никакой воды. Спасибо за фундаментальный курс по React JS!

  • @tamper308
    @tamper308 5 หลายเดือนก่อน +1

    Быстро и без воды, очень грамотно изложена вся информация !

  • @skobanev
    @skobanev 5 หลายเดือนก่อน

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

  • @user-rs2gl4wz4f
    @user-rs2gl4wz4f 2 ปีที่แล้ว +7

    Никогда не смотрела обучение с таким интересом, как просто развлекательный видос! Очень хорошо и понятно излагаешь материал, спасибо 👍🏻

  • @user-sz7pu7qj3z
    @user-sz7pu7qj3z 2 ปีที่แล้ว +17

    Структурированный, насыщенный с прекрасной подачей контент. Огромное спасибо!

  • @user-mw7vo6tx9i
    @user-mw7vo6tx9i 11 หลายเดือนก่อน

    Автору respect за труд, приятно слушать, всё очень ёмко, 5 минут видео можно разбирать целый день. Успехов тебе. Думаю, у тебя большое будущее с такими талантами!

  • @edgeofeternity85
    @edgeofeternity85 ปีที่แล้ว +2

    Спасибо огромное, Тимур, твоя подача материала просто превосходная! Учу React и в принципе программирование только на твоем канале, ты реально лучший. Здоровья тебе и успехов во всем!

  • @user-mr6yt2lz5v
    @user-mr6yt2lz5v 2 ปีที่แล้ว +110

    Для себя
    Таймкоды:
    00:00 ➝ Введение
    03:15 ➝ Теория
    11:40 ➝ Начало разработки. Создание проекта
    16:10 ➝ Что такое JSX?
    18:11 ➝ Компонент App. Работа с состоянием. UseState
    22:25 ➝ Управляемый инпут
    24:07 ➝ Первый функциональный компонент
    26:40 ➝ Первый классовый компонент
    30:25 ➝ Что такое хуки? useState, useEffect
    31:10 ➝ Стили. CSS. Классы
    34:30 ➝ Props. Аргументы компонента.
    36:55 ➝ Работы со списками. Преобразование массива объектов в массив React элементов
    41:50 ➝ Форма создания поста. Управляемые и неуправляемые компоненты
    42:30 ➝ Создание UI библиотеки. Первые компоненты. CSS модули. Пропс children
    50:00 ➝ Предотвращаем обновление страницы при submit формы
    50:45 ➝ хук useRef. Доступ к DOM элементу. Неуправляемый компонент
    57:35 ➝ React Devtools. Инструменты разработчика React
    59:15 ➝ Обмен данными между компонентами. От родителя к ребенку. От ребенка к родителю.
    01:04:20 ➝ Отрисовка по условию
    01:05:30 ➝ Сортировка. Выпадающий список
    01:12:00 ➝ Поиск. Фильтрация.
    01:15:10 ➝ useMemo. Мемоизация. Кеширование
    01:23:50 ➝ Модальное окно. Переиспользуемый UI компонент
    01:30:23 ➝ Анимации. React transition group
    01:33:40 ➝ Декомпозиция. Кастомные хуки
    01:36:20 ➝ Работа с сервером. Axios
    01:38:40 ➝ Жизненный цикл компонента. useEffect
    01:43:08 ➝ API. PostService
    01:44:45 ➝ Индикация загрузки данных с сервера
    01:46:20 ➝ Компонент Loader. Анимации
    01:49:25 ➝ Кастомный хук useFetching(). Обработка ошибок
    01:54:15➝ Постраничный вывод. Пагинация (pagination)
    02:06:20 ➝ Обьяснение механизма изменения состояния
    02:12:00 ➝ React router. Постраничная навигация. BrowserRouter, Route, Switch, Redirect
    02:22:00 ➝ Динамическая навигация. useHistory, useParams
    02:29:30 ➝ Загрузка комментариев к посту
    02:33:10 ➝ Улучшаем навигацию. Приватные и публичные маршруты
    02:38:00 ➝ useContext. Глобальные данные. Авторизация пользователя
    02:47:10 ➝ Бесконечная лента. Динамическая пагинация. useObserver
    02:58:40 ➝ План на дальнейшее обучение. Ставим лайки и пишем комментарии :)

    • @romanpolishchuk4517
      @romanpolishchuk4517 2 ปีที่แล้ว +4

      так это и так в описании написано

    • @sdfdvfddfdfd9439
      @sdfdvfddfdfd9439 2 ปีที่แล้ว +16

      @@romanpolishchuk4517 ума понять, что автор видео скопировал данный комментарий и разместил его в описании видимо не хватило

    • @react_js
      @react_js ปีที่แล้ว

      @@sdfdvfddfdfd9439

    • @olgadorosheva4424
      @olgadorosheva4424 10 หลายเดือนก่อน

      ​@@sdfdvfddfdfd9439зачем хамить?

  • @learningit2572
    @learningit2572 ปีที่แล้ว +699

    Досмотрел до конца , все повторил за тобой, еще много чего не понятно. Потратил так же около 30 часов. Огромная благодарность. Ты сделал большое дело. Сейчас у нас в Украине вакансий практически нет, но мы не унываем продолжаем учится и молимся что бы настал МИР! Ценю твой труд, очень при очень благодарен тебе

    • @igorekupaev1134
      @igorekupaev1134 ปีที่แล้ว +111

      Все наладится, друг. Как минимум потому что всегда плохо быть не может. Я из России, все люди - люди:)

    • @tishkafocovv8723
      @tishkafocovv8723 ปีที่แล้ว +74

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

    • @llssk6379
      @llssk6379 ปีที่แล้ว +31

      вот это стойкость, красава!))) перед собой аж неудобно когда прочитал твой пост!

    • @TheMrDemage
      @TheMrDemage ปีที่แล้ว +26

      @@tishkafocovv8723 за что простите? за 8 лет войны 14к убитых людей на Донбасе?

    • @bambalbino
      @bambalbino ปีที่แล้ว +30

      @@TheMrDemage Ты думаешь, что это @Laerning IT их убивал?

  • @kalts_daniil
    @kalts_daniil ปีที่แล้ว +1

    Тимур, огромное тебе спасибо за этот курс! Вышло очень классное приложение и ты задел все основные концепции ReactJs, показав на классных практических примерах 🔥 Ты лучший! Успехов тебе и твоему каналу 🔥🔥🔥

  • @user-zv2dp4xj9u
    @user-zv2dp4xj9u 9 หลายเดือนก่อน

    Огромное спасибо автору за проделанный колоссальный труд! Шикарная подача материала, все четко и по делу, ничего лишнего. И как же было приятно слушать грамотную русскую речь, это сейчас такая редкость!

  • @zettt6
    @zettt6 2 ปีที่แล้ว +20

    Сколько годной информации всего за 3 часа! Огромное спасибо автору, таким людям отдельное место в раю.

  • @nikolaitsykin
    @nikolaitsykin ปีที่แล้ว +8

    Столько сложной информации таким простым языком - это талант. Спасибо и успехов в твоем деле!

  • @user-gv6vy4tp8n
    @user-gv6vy4tp8n 2 หลายเดือนก่อน +1

    Автор просто профи. Видео сделал грамотно и продуманно, в конце дал напутствие, как заниматься дальше, что мало кто делает. Спасибо.

  • @user-ub9dl7kr6z
    @user-ub9dl7kr6z 9 หลายเดือนก่อน

    Большое спасибо за прекрасное видео! Нигде подобного прекрасного и четкого объяснения каждой темы я не встречал. Низкий поклон автору!

  • @MrNamed
    @MrNamed 2 ปีที่แล้ว +108

    Вот же дела, курс совсем свежий, а докуменатция к React router уже изменилась :)
    Пришлось еще отдельно почитывать, как правильно роуты делать
    Если вдруг новички будут смотреть и тоже споткнутся, компонент теперь должен обязательно быть завернут в и имеет атрибут element.
    больше не используется, вместо него всё тот же . Ну и стандартный элемент в конце делается звездочкой.
    То бишь по итогу внутри у меня получилась такая конструкция:








    Знатоки, может, поправят, а я в этом деле новенький тоже.
    Или последний роут , чтоб не перекидывало, а просто показывало ошибку.

    • @unclechernomor4421
      @unclechernomor4421 2 ปีที่แล้ว

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

    • @user-ds5jy3cj8o
      @user-ds5jy3cj8o 2 ปีที่แล้ว

      Ну это как будто даже все упрощает. Спасибо

    • @romanriezanov1704
      @romanriezanov1704 2 ปีที่แล้ว +1

      Подскажи плиз, а как зафиксировать Navbar ??
      При переходе на другой роут у меня моя нав панель уходит. То есть она остается только на главной странице

    • @user-zs3ms8df1p
      @user-zs3ms8df1p 2 ปีที่แล้ว +5

      Спасибо мил человек! Если бы не твой комментарий, еще какое то время было бы убито впустую :)

    • @user-jo8fn9ii2h
      @user-jo8fn9ii2h 2 ปีที่แล้ว +9

      Динамически тоже не сильно но меняется. Если кто не смог реализовать вот то как я написал.
      {
      routes.map((route) => {
      return ;
      })
      }

  • @sergeyzelensky
    @sergeyzelensky 2 ปีที่แล้ว +9

    Божечки, у меня не хватает слов благодарности, большущие спасибо, хотелось бы увидеть ролики/курс по JS

  • @whoawedev
    @whoawedev 7 หลายเดือนก่อน +2

    Это просто невероятно шикарный краш-курс по Реакту. Спасибо за проделанную работу!

  • @kostya4182
    @kostya4182 หลายเดือนก่อน

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

  • @user-hy3qo4mz7c
    @user-hy3qo4mz7c ปีที่แล้ว +2

    Шикарно объясняешь посмотрел 46 минут и в шоке сижу, не оторвешься. Лучше многих учителей рассказываешь. Как у такого ютубера так мало подписчиков? Без воды, затягивающее и понятно все.

  • @bolnoi13
    @bolnoi13 2 ปีที่แล้ว +5

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

  • @johngurevich9959
    @johngurevich9959 8 หลายเดือนก่อน +19

    После того как проделал путь в длинной в неделю вместе с автором хочется пожать ему руку и поблагодарить. Чтобы выпустить такой материал нужно обладать несомненным талантом

    • @UlbiTV
      @UlbiTV  8 หลายเดือนก่อน +3

      🙏🤝

  • @saibamir2211
    @saibamir2211 6 หลายเดือนก่อน +3

    Подписался на канал с самого начала изучения фронта, но было очень трудно что-либо понять, т.к. подача рассчитана на уже определенный опыт, но объем материала и его актуальность - это бомба! Спасибо большое автору.

  • @adriansergeev2900
    @adriansergeev2900 2 ปีที่แล้ว +131

    Спасибо за контент, у тебя здорово получается)
    Было бы огонь посмотреть про Unit testing React & Redux. Кто тоже так думает, лукас на коммент)

    • @vanunsakanyan2188
      @vanunsakanyan2188 2 ปีที่แล้ว +2

      ждем )

    • @mostinform9623
      @mostinform9623 ปีที่แล้ว

      да, несомненно, по тестированию вообще мало материала

  • @user-zj8ps3eq8n
    @user-zj8ps3eq8n 2 ปีที่แล้ว +11

    Отличный курс, отличная подача материала - без воды. Большое спасибо за этот материал и проделанную работу!

  • @user-lj5fr7kr8e
    @user-lj5fr7kr8e ปีที่แล้ว +1

    Огромное спасибо за этот вводный курс по React. Это шедевр!

  • @flick4804
    @flick4804 2 ปีที่แล้ว +4

    Это просто офигенно, наконец-то понял как работают все хуки и нашёл кучу ответов на свои вопросы, которые возникали на протяжении года работы!

  • @awesomebearaudiobooks
    @awesomebearaudiobooks 2 ปีที่แล้ว +5

    Спасибо, одно из лучших видео для новичков по React, которые я когда-либо видел! Кстати, отдельное спасибо за видео с ответами на самые распространённые вопросы собеседований!

  • @-LKRN
    @-LKRN 11 หลายเดือนก่อน +1

    Очень хороший, понятный, качественный и полезный курс.
    Видел комментарии про монтаж, про то, что где то меняется код и т.д., но в ролике этого нет, есть только склейки, которые наоборот делают лучше.
    Спасибо тебе, Ulbi!

  • @paimonia
    @paimonia 4 หลายเดือนก่อน

    Материал для видео очень удачно подобран и структурирован. А ещё этот канал - один из немногих обучающих, которые я не смотрю на скорости х2... идеальная скорость изложения и концентрация полезного, иногда даже паузу нужно поставить, чтобы осмыслить происходящее. Спасибо, с пользой и кайфом посмотрела ^__^

  • @user-gv6kk1yt1z
    @user-gv6kk1yt1z 2 ปีที่แล้ว +30

    Много работы вложено в этот выпуск. Спасибо вам большое

    • @UlbiTV
      @UlbiTV  2 ปีที่แล้ว +7

      И вам!

  • @ovircorp
    @ovircorp 2 ปีที่แล้ว +71

    Я потратил неделю своей жизни для самостоятельного изучения реакта, и все мои знания накопленные за эту неделю уложились в первые 30 минут этого видео 😀😀 Прям выжимка информации, очень много вопросов у меня закрылись) Спасибо большое, практически каждое твоё видео - золото!) Крутым делом занимаешься, надеюсь твой твой пыл не угаснет и будешь дальше делать годный контент;) Пошёл смотреть другие твои видео

    • @UlbiTV
      @UlbiTV  2 ปีที่แล้ว +10

      Спасибо за отзыв друг, очень рад, на канале много интересного!

    • @user-mw4jj6vj4r
      @user-mw4jj6vj4r 2 ปีที่แล้ว

      @@UlbiTV Привет! Скажи, пожалуйста, каким образом параметр sort взял значение из массива options.
      Вот сам момент 1:10:13.

    • @user-mw4jj6vj4r
      @user-mw4jj6vj4r 2 ปีที่แล้ว

      Ты скорее всего меня не понял, потому что я не могу сформулировать нормально)

    • @dieu-merci
      @dieu-merci 2 ปีที่แล้ว

      @@user-mw4jj6vj4r Array.prototype.map()

    • @user-mw4jj6vj4r
      @user-mw4jj6vj4r 2 ปีที่แล้ว

      @@dieu-merci спасибо!!!!

  • @user-ls8xg2ve9v
    @user-ls8xg2ve9v ปีที่แล้ว +3

    Спасибо за курс! Отличная подача и все базовые темы рассмотрены. Но конечно тем кто совсем с нуля - будет тяжко)

  • @tatyanamikhailov3361
    @tatyanamikhailov3361 ปีที่แล้ว

    Спасибо огромное! Шикарнейшая практика! А особенное спасибо что нет каждые 10 секунд переключения между файлами когда глаза устают от вечного мельтешения и ерзанья мышью!!!

  • @AndriiHurskyi-tyran53red
    @AndriiHurskyi-tyran53red 2 ปีที่แล้ว +13

    Це найкраще відео про реакт, яке я бачив. Дуже дякую 🙂

  • @bogdanvasenshev6475
    @bogdanvasenshev6475 2 ปีที่แล้ว +10

    Лучший курс по React js, который я видел до сих пор. Очень ясное изложение с примерами и рисунками + приятно слушать. Спасибо большое за труд!

  • @AkeroKent
    @AkeroKent ปีที่แล้ว +1

    ладно если не упоминать о том насколько быстро все делалось то видео сама настоящая находка, сильно благодарю

  • @Dimarate
    @Dimarate ปีที่แล้ว

    Прекрасный материал для того чтобы разобраться в React и начать писать на нем приложения. Просмотрел с огромным удовольствием. Благодарю.

  • @anastasya2399
    @anastasya2399 2 ปีที่แล้ว +6

    Очень полезный урок! Все четко и понятно. Таких уроков на ютубе ещё не видела, классная подача материала, без лишней воды. Спасибо!

    • @UlbiTV
      @UlbiTV  2 ปีที่แล้ว +2

      Спасибо вам!

  • @bumblebee_1
    @bumblebee_1 2 หลายเดือนก่อน

    Сколько курсов уже просмотрел, а чел делает только лучше и лучше. Спасибо!

  • @kateverkhogliad3575
    @kateverkhogliad3575 ปีที่แล้ว

    Пояснено майже все, що буду використовувати для розробки реального проекту) Лаконічно і зрозуміло. Дякую за чудовий курс!

  • @orbismala8124
    @orbismala8124 2 ปีที่แล้ว +4

    Наверное один из ценнейших курсов, наряду с продвинутым React. Узнал как исправить те проблемы, которые встречались в моём проекте и как вообще всё это правильнее реализовать. Спасибо.

  • @sergeyschastlivtsev5643
    @sergeyschastlivtsev5643 2 ปีที่แล้ว +10

    Мать моя женщина, как же ты крут! Спасибо)

  • @karis7539
    @karis7539 10 หลายเดือนก่อน +1

    Ubi, огромное тебе спасибо, это видео очень помогло моей карьере. Я год назад начал изучение React с этого ролика и в конце апреля 2023 нашел свою первую работу. Уже дорос до мидла)

  • @natalyakosh
    @natalyakosh 10 หลายเดือนก่อน

    Тимур, огромное спасибо за это обучение! Очень содержательный, грамотно рассказанный и несомненно полезный гайд по React. Еще раз спасибо и успехов!

  • @user-ww2iv8pc8i
    @user-ww2iv8pc8i 2 ปีที่แล้ว +16

    Спасибо большое, 3 часа современного реакта без старого классового подхода, залатал пробелы в образовании. Никаких кошек и самолюбования на заднем плане - очень профессионально

    • @UlbiTV
      @UlbiTV  2 ปีที่แล้ว +2

      Спасибо!

  • @user-uh9lt6jh7p
    @user-uh9lt6jh7p 2 ปีที่แล้ว +8

    Герой нашего времени! Присоединяюсь ко всем благодарностям и наилучшим пожеланиям! Продолжай в том же духе

  • @TarasovFrontDev
    @TarasovFrontDev ปีที่แล้ว

    Топовое видео! Хочу выразить свою благодарность за подробный и обстоятельный разбор применения хуков и конкретные примеры их применения!

  • @PieceOfInternet
    @PieceOfInternet 5 หลายเดือนก่อน

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

  • @wishmaker1443
    @wishmaker1443 2 ปีที่แล้ว +3

    Вообще четко, быстро, понятно. Мне очень заходит такая подача контента! Огромнейшее спасибо!

  • @wardi9013
    @wardi9013 2 ปีที่แล้ว +6

    Я сам дотнетчик, но посмотрел с удовольствием, автору респект! Видно очень много сил вложено, отлично все по полочкам, без воды, молодец!

    • @UlbiTV
      @UlbiTV  2 ปีที่แล้ว +2

      Спасибо!

  • @dilarkadream2494
    @dilarkadream2494 11 หลายเดือนก่อน

    Благодарю за курс и возможность обучаться у Вас! Посмотрела видео на канале, и сразу подписалась) Желаю процветанию канала, крепкого здоровья Вам!

  • @andrewsemakin5397
    @andrewsemakin5397 11 หลายเดือนก่อน +3

    Парень,огромных успехов тебе. Ты реальный ЧЕЛОВЕЧИЩЕ! Большое спасибо за труд! Ты мне очень помог вначале моего пути! Жму руку 🤝🏾

    • @UlbiTV
      @UlbiTV  11 หลายเดือนก่อน

      🤝

  • @user-tr8xi3ik3c
    @user-tr8xi3ik3c 2 ปีที่แล้ว +8

    Какой автор Красавчик! Мое уважение за столько подробный и качественный материал.

  • @oleksiishkulipa1626
    @oleksiishkulipa1626 2 ปีที่แล้ว +64

    когда знаешь что следующее 3и часа пройдут продуктивно 👍
    Спасибо

    • @user-is9yv2gl3n
      @user-is9yv2gl3n 2 ปีที่แล้ว +6

      Я эти 3 часа, наверное, неделю буду пошагово разбирать :)

    • @user-mp4qg1jc2t
      @user-mp4qg1jc2t 2 ปีที่แล้ว

      @@user-is9yv2gl3n у меня 4 дня ушло :)

    • @user-nv7nk1ze2u
      @user-nv7nk1ze2u 2 ปีที่แล้ว

      @@user-is9yv2gl3n я сутки просидел пошагово разбирая код это жестко конечно

  • @bro_webman
    @bro_webman ปีที่แล้ว

    Благодарю за такой большой объём работы и свободный доступ к нему!)Успехов)

  • @stormyx6122
    @stormyx6122 2 หลายเดือนก่อน +1

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

  • @user-uk4er6rs9p
    @user-uk4er6rs9p 2 ปีที่แล้ว +19

    Спасибо огромное за такую учебную благотворительность!

  • @user-yw4jn4bg3v
    @user-yw4jn4bg3v 2 ปีที่แล้ว +3

    по красоте раскидал )