Типичный Веб Разработчик
Типичный Веб Разработчик
  • Видео 108
  • Просмотров 110 468
Подключаем и стилизуем React-dropdown компонент
Все ссылки в Телеграм👉 t.me/tipichnyj_web_razrabotchik/86
Краткая инструкция по использованию библиотеки react-dropdown. Подключаем, стилизуем, группируем элементы меню.
ruclips.net/p/PLOa95Q78GmW5SgKJEXHOCgfnnMTrP24xS
ruclips.net/p/PLOa95Q78GmW562W50hRQ1YAwRoE5sD10b
ruclips.net/p/PLOa95Q78GmW4hSUc86YNQiXOIVjz95ThA
ruclips.net/p/PLOa95Q78GmW7kSU9pg_bT5-6MZMekvLuI
ruclips.net/p/PLOa95Q78GmW4JzWG2olawioY-mYrQjdmK
ruclips.net/p/PLOa95Q78GmW5YhBuosJWh1yYXLGAcQHTn
ruclips.net/p/PLOa95Q78GmW6tTtIY9Qww9ZmDWG7qertl
Просмотров: 98

Видео

Создаем игру Пятнашки за 10 минут | ReactJS 15 Puzzle Game
Просмотров 16214 дней назад
Все ссылки в Телеграм👉 t.me/tipichnyj_web_razrabotchik/84 В этом видео создаем игру Пятнашки с нуля. За основу берем чистый шаблон Vite React. Весь процесс создания игры с подробным описанием каждой функции занимает около 10 минут. ruclips.net/p/PLOa95Q78GmW5SgKJEXHOCgfnnMTrP24xS ruclips.net/p/PLOa95Q78GmW562W50hRQ1YAwRoE5sD10b ruclips.net/p/PLOa95Q78GmW4hSUc86YNQiXOIVjz95ThA ruclips.net/p/PLOa...
Ленивая загрузка изображений в ReactJS | Lazy Loading in ReactJS
Просмотров 20521 день назад
Все ссылки в Телеграм👉 t.me/tipichnyj_web_razrabotchik/79 В этом видео разберем, как подключить ленивую загрузку или Lazy loading тяжелых изображений в ReactJS. ruclips.net/p/PLOa95Q78GmW5SgKJEXHOCgfnnMTrP24xS ruclips.net/p/PLOa95Q78GmW562W50hRQ1YAwRoE5sD10b ruclips.net/p/PLOa95Q78GmW4hSUc86YNQiXOIVjz95ThA ruclips.net/p/PLOa95Q78GmW7kSU9pg_bT5-6MZMekvLuI ruclips.net/p/PLOa95Q78GmW4JzWG2olawioY-...
Как сменить версию Node.js на своем Windows PC | NVM for Windows
Просмотров 7321 день назад
Как сменить версию Node.js на своем Windows PC | NVM for Windows
Как создать InputFile Компонент в React JS за 7 минут
Просмотров 3333 месяца назад
Как создать InputFile Компонент в React JS за 7 минут
Как сократить ссылку бесплатно без регистрации
Просмотров 2004 месяца назад
Как сократить ссылку бесплатно без регистрации
React Hook Form | Валидация Checkbox Component за 7 минут
Просмотров 4024 месяца назад
React Hook Form | Валидация Checkbox Component за 7 минут
Как создать Checkbox Компонент в React JS за 5 минут
Просмотров 1,4 тыс.5 месяцев назад
Как создать Checkbox Компонент в React JS за 5 минут
#10: React Hooks | Реaкт Хук useScrollbarSize | React Hook useScrollbarSize
Просмотров 2315 месяцев назад
#10: React Hooks | Реaкт Хук useScrollbarSize | React Hook useScrollbarSize
#9: React Hooks | Реaкт Хук useScrollbarWidth | React Hook useScrollbarWidth
Просмотров 2366 месяцев назад
#9: React Hooks | Реaкт Хук useScrollbarWidth | React Hook useScrollbarWidth
React Hook Form | подключаем схему валидации Yup
Просмотров 4666 месяцев назад
React Hook Form | подключаем схему валидации Yup
React Hook Form | Валидация текстового поля
Просмотров 3156 месяцев назад
React Hook Form | Валидация текстового поля
Валидация формы c Formik и Yup в React JS
Просмотров 9996 месяцев назад
Валидация формы c Formik и Yup в React JS
Движение элемента меню за курсором мыши в React JS
Просмотров 6807 месяцев назад
Движение элемента меню за курсором мыши в React JS
Анимация кнопки меню в React JS + GSAP | Hamburger Button animation
Просмотров 4927 месяцев назад
Анимация кнопки меню в React JS GSAP | Hamburger Button animation
React + GSAP | MotionPathPlugin + ScrollTrigger
Просмотров 4057 месяцев назад
React GSAP | MotionPathPlugin ScrollTrigger
Как создать React JS проект и загрузить его на Github Pages
Просмотров 4,5 тыс.8 месяцев назад
Как создать React JS проект и загрузить его на Github Pages
React + GSAP | MotionPathPlugin
Просмотров 5948 месяцев назад
React GSAP | MotionPathPlugin
React + GSAP | ScrollTrigger
Просмотров 2 тыс.8 месяцев назад
React GSAP | ScrollTrigger
React + GSAP | Базовые анимации
Просмотров 2,5 тыс.8 месяцев назад
React GSAP | Базовые анимации
Подключаем и стилизуем React-modal | How to use React-modal
Просмотров 9908 месяцев назад
Подключаем и стилизуем React-modal | How to use React-modal
Как создать Modal Component (Popup) в React | React Modal Component
Просмотров 4,1 тыс.8 месяцев назад
Как создать Modal Component (Popup) в React | React Modal Component
Как создать горизонтальный Аккордеон Компонент в React JS за 7 минут
Просмотров 5729 месяцев назад
Как создать горизонтальный Аккордеон Компонент в React JS за 7 минут
Провайдер темы в React JS за 7 минут | React Theme Provider
Просмотров 1,9 тыс.9 месяцев назад
Провайдер темы в React JS за 7 минут | React Theme Provider
Как получить высокое разрешение видео и фото из камеры в React
Просмотров 3109 месяцев назад
Как получить высокое разрешение видео и фото из камеры в React
Как анимировать меню при монтировании в React JS
Просмотров 2,1 тыс.9 месяцев назад
Как анимировать меню при монтировании в React JS
Drag and Drop загрузка файлов перетаскиванием в React JS
Просмотров 1,2 тыс.9 месяцев назад
Drag and Drop загрузка файлов перетаскиванием в React JS
Обнаружение лица в реальном времени с Tensorflow и React
Просмотров 48910 месяцев назад
Обнаружение лица в реальном времени с Tensorflow и React
Как создать Аккордеон Компонент в React JS за 7 минут
Просмотров 3,4 тыс.10 месяцев назад
Как создать Аккордеон Компонент в React JS за 7 минут
Как создать выпадающее меню в React JS за 5 минут | React Dropdown Menu
Просмотров 7 тыс.10 месяцев назад
Как создать выпадающее меню в React JS за 5 минут | React Dropdown Menu

Комментарии

  • @dphdmn
    @dphdmn День назад

    🥚

  • @user-tq2lm6sn1t
    @user-tq2lm6sn1t 7 дней назад

    Спасибо!

  • @vadimkh
    @vadimkh 7 дней назад

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

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik 7 дней назад

      Привет. Я так и сделал. Исправил функцию на гите проекта. Сделал 200 случайных ходов от пустого поля. Не нашел как добавить текстовую подсказку в видео чтобы не перезаливать.

  • @user-id7ve3kc5y
    @user-id7ve3kc5y 8 дней назад

    +idea

  • @yava43
    @yava43 9 дней назад

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

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik 9 дней назад

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

    • @yava43
      @yava43 9 дней назад

      @@tipichnyj_web_razrabotchik return ReactDOM.createPortal( меняем и работает.

  • @dphdmn
    @dphdmn 10 дней назад

    2:47 - В алгоритме ошибка. Такое перемешивание дает неразрешимые ситуации, т.к. в пятнашках важно сохранять паритет. Для этого число свапов должно быть чётным, при этом нельзя включать пустую клетку в такой алгоритм, т.к. перемещение пустой клетки сбивает корректность подсчета количества свапов (перемещение двух чисел не тоже самое, что и перемещение пустой клетки, например, в соседнее число, результаты непредсказуемы). Если обязательно нужно замешать пустую клетку, далее можно сгенерировать два случайных числа, и переместить ее в матрице по горизонтали и вертикали, таким образом можно корректно получить случайные состояния.

    • @dphdmn
      @dphdmn 10 дней назад

      function getScramble(n) { let arr = Array.from({ length: n * n - 1 }, (_, i) => i + 1), parity = false; for (let i = 0; i < n * n - 3; i++) { let t = Math.floor(Math.random() * (n * n - 1 - i)) + i; if (i !== t) parity = !parity; [arr[i], arr[t]] = [arr[t], arr[i]]; } if (parity) [arr[n * n - 3], arr[n * n - 2]] = [arr[n * n - 2], arr[n * n - 3]]; arr.push(0); let g = n * n - 1, d = Math.floor(Math.random() * n), r = Math.floor(Math.random() * n); for (let i = 0; i < d; i++, g -= n) [arr[g], arr[g - n]] = [arr[g - n], arr[g]]; for (let i = 0; i < r; i++, g -= 1) [arr[g], arr[g - 1]] = [arr[g - 1], arr[g]]; return arr; } getScramble(4)

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik 9 дней назад

      Привет. Огромное спасибо за комментарий. Похоже надо глубже изучать материал перед началом разработки. Сделал пошаговое перемешивание в 200 ходов.

  • @romanpityul8805
    @romanpityul8805 10 дней назад

    Супер! Спасибо большое!

  • @user-tw3jj8in2i
    @user-tw3jj8in2i 10 дней назад

    Лучше скажи как записать звук с ватсапа,слабо?

  • @aminabu5985
    @aminabu5985 11 дней назад

    Удивительная работа коротко и ясно. Хочу только спросить, почему создали компонент AccordionItem ? Как она влияет на плавность раскрытия и закрытия ? Если его не создать не получится плавность ? Заранее благодарю за ответ )

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik 11 дней назад

      Привет. AccordianItem произвольное название, у нас есть ненумерованный список ul с элементами li (list items), поэтому логично назвать accordionItem. Это никак не влияет на плавность. Можно взять div вместо ul и li. Плавность появляется за счет transition: height 0.3s; в файле Accordion.css.

    • @aminabu5985
      @aminabu5985 11 дней назад

      @@tipichnyj_web_razrabotchik нет я не про название,а про то, что вы создали новый компонет и передали в нее пропсы. Т.е. вы изменили первоначальный ваш код, дабы сделать возможным плавность ?

  • @user-ce5bm1lv1c
    @user-ce5bm1lv1c 13 дней назад

    Сложно 😅 но интересно! Спасибо за контент!

  • @2Extremum
    @2Extremum 13 дней назад

    getEmptyXY - зачем forEach вызывающий функцию для каждого элемента, если можно использовать обычный for? Каждый элемент проверяется на равенство с number, даже если пустая ячейка уже была найдена, выйти из вложенного цикла и сохранить состояние можно сразу с break.

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik 8 дней назад

      Привет. Спасибо за коммент. Поправил функцию на гите.

  • @user-tb3mm6dl3z
    @user-tb3mm6dl3z 17 дней назад

    Что за монитрование такое про которое все говорят

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik 17 дней назад

      Привет. Это отсылка к классовым компонентам, монтирование и размонтирование, когда компонент добавляется в разметку и удаляется из нее - www.dhiwise.com/post/react-hook-on-unmount-best-practices

  • @neobulk3761
    @neobulk3761 17 дней назад

    Спасибо!

  • @user-wu1ci5yw8v
    @user-wu1ci5yw8v 18 дней назад

    У тебя реально крутые видео на канале, продолжай в том же духе 👍

  • @sherzodnishonov4769
    @sherzodnishonov4769 19 дней назад

    Спасибо!

  • @blackwood8816
    @blackwood8816 20 дней назад

    не актуально

  • @igorsenichev3779
    @igorsenichev3779 23 дня назад

    Спасибо, полезное видео 👍

  • @viacheslavkononenko3198
    @viacheslavkononenko3198 25 дней назад

    Отлично, мне пригодится эта функция. Подписался!

  • @zak_47
    @zak_47 25 дней назад

    отличное видео!

  • @yammi7962
    @yammi7962 25 дней назад

    Кент запиши про способы получения sso протокола

  • @igorsenichev3779
    @igorsenichev3779 26 дней назад

    Класс! Спасибо за полезное видео! Когда то искал, как именно на windows можно было менять версию 👍

  • @user-tb3mm6dl3z
    @user-tb3mm6dl3z 26 дней назад

    Супер бро то что надо!

  • @user-or1hy4xz8u
    @user-or1hy4xz8u 27 дней назад

    Для работы react-приложения должен быть установлен node.js. Разве на github-pages он установлен по дефолту?

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik 26 дней назад

      Привет. Для ReactJS разработки на компе нужен NodeJS. После сборки npm run build проект превращается в набор html js и css файлов. Их можно залить на любой веб сервер. Другое дело если проект на NextJS, тогда и для разработки и для работы на сервере нужен NodeJS.

    • @user-or1hy4xz8u
      @user-or1hy4xz8u 26 дней назад

      @@tipichnyj_web_razrabotchik спасибо Типичному Разробу))) почему-то все, кто рассказывает как залить реакт-приложуху на github, не уточняют этого)))

  • @user-lk9ip5ds7o
    @user-lk9ip5ds7o Месяц назад

    Спасибо за качественную и понятную подачу. Теперь всё ясно и понятно стало.

  • @Prostodrakonchik
    @Prostodrakonchik Месяц назад

    Я нашла новый способ , он работает на редми 10c нужно погладить экран

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik 26 дней назад

      Привет. На своем редми я тоже делаю скрин просто зажав 2 кнопки, при этом можно сделать скрин со скролом и сразу скопировать картинку, например, в телеграм. По идее это можно сделать на любом андроид смартфоне. Если этого достаточно, то никаких доп программ не нужно.

  • @pipm0r
    @pipm0r Месяц назад

    Здраствуйте,а где можно найти полный код?

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik 26 дней назад

      Привет. По ссылке под видео есть ссылка - github.com/DmitriyShkredov/react-accordion-hr

  • @user-jd2hv8mv4s
    @user-jd2hv8mv4s Месяц назад

    а какой нужен впн чтобы монтировать в capcut скижите пжжж..(😭😭

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik 26 дней назад

      Привет. С этим не подскажу, я использую DaVinci Resolve на ПК.

    • @user-jd2hv8mv4s
      @user-jd2hv8mv4s 26 дней назад

      @@tipichnyj_web_razrabotchik спс

  • @YuriiDzomaDzoma
    @YuriiDzomaDzoma Месяц назад

    на Андроиде не работает, может знаете варианты как запустить ?

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik Месяц назад

      Привет, под видео есть ссылка на телеграм пост, там есть ссылка на исходники на гите, там есть собранный пример dmitriyshkredov.github.io/react-qr-scaner, проверьте его на своем устройстве. Когда я делал этот проект то проверял его на Windows Chrome, Android Chrome и iPhone Safari.

    • @user-mo4ne2gi9o
      @user-mo4ne2gi9o 28 дней назад

      ты запускаешь на локалхосте, потом коннектишься по сети с мобилы, мобила не даст к камере доступ никогда пока не будет ssl сертификата, ставишь сертификат ssl для локалхост и все работает, проверено, для vite например поставил модуль, и он локалхост поднимает с https, после этого заработало на телефонах

  • @tender6795
    @tender6795 Месяц назад

    после того как включилась секта если нажать кнопку офф, все падает с ошибкой ERROR Cannot read properties of null (reading 'getContext') TypeError: Cannot read properties of null (reading 'getContext') at detect (localhost:3000/static/js/bundle.js:167:39)

  • @aleksbleziks4070
    @aleksbleziks4070 Месяц назад

    cra всё, используйте vite

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik Месяц назад

      Привет, согласен, последние полгода работаю на vite.

    • @warcraft.mp4889
      @warcraft.mp4889 Месяц назад

      Почему cra все?

    • @aleksbleziks4070
      @aleksbleziks4070 Месяц назад

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

  • @_ilunchik_2244
    @_ilunchik_2244 Месяц назад

    А ещё удобнее валидация в mui)

  • @MrJakpoter
    @MrJakpoter Месяц назад

    а если нужно отсканить по фото?

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik Месяц назад

      Привет, с фото тоже работает, проверял на Android и iOS смартфонах.

    • @MrJakpoter
      @MrJakpoter Месяц назад

      @@tipichnyj_web_razrabotchik я имел ввиду что бы загрузить фото и с него считало qr код при наличии

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik Месяц назад

      В таком режиме тоже работает. В доке есть пример: const html5QrCode = new Html5Qrcode(/* element id */ "reader"); // File based scanning const fileinput = document.getElementById('qr-input-file'); fileinput.addEventListener('change', e => { if (e.target.files.length == 0) { // No file selected, ignore return; } const imageFile = e.target.files[0]; // Scan QR Code html5QrCode.scanFile(imageFile, true) .then(decodedText => { // success, use decodedText console.log(decodedText); }) .catch(err => { // failure, handle it. console.log(`Error scanning file. Reason: ${err}`) }); });

    • @MrJakpoter
      @MrJakpoter Месяц назад

      @@tipichnyj_web_razrabotchik супер. Большое спасибо

  • @batpyiiikob7245
    @batpyiiikob7245 Месяц назад

    Спасибо вам, это лучшее последовательное объяснение

  • @illiabulgakov2013
    @illiabulgakov2013 2 месяца назад

    Привет, спасибо тебе большее за это видео, оно мне очень сильно помогло!!! 👍👍👍

  • @mitattt
    @mitattt 2 месяца назад

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

  • @8Masturbek228
    @8Masturbek228 2 месяца назад

    Спасибо, очень помогло. Особенно приятно, что хук useClickOutside самописный.

  • @user-jp9ix1tf1f
    @user-jp9ix1tf1f 2 месяца назад

    Брат, реально спасибо, выручил <3

  • @AzizbekErgashev-ri1yw
    @AzizbekErgashev-ri1yw 2 месяца назад

    Я думаю самый лучший способ если у вас много иконок это 4

  • @alinakikot5613
    @alinakikot5613 2 месяца назад

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

    • @evgenstepanov6319
      @evgenstepanov6319 2 месяца назад

      И так оказывается бывает) А то понаслушаешься всяких "умных" людей, которые топят за диплом в прогерстве при приеме на работу, тип это топ и человек ну точно спец, в отличии от "этих" со всяких курсов, а по факту люди до диплома добрались, не умея модалки клепать)

    • @alinakikot5613
      @alinakikot5613 Месяц назад

      ⁠@@evgenstepanov6319 сразу видно, в вузе не учились)

  • @nadejdavera571
    @nadejdavera571 2 месяца назад

    Здравствуйте! Супер видео: всё очень коротко и очень понятное объяснение 👍👍👍. И информации намного больше, чем в других намноооого длиннее видео

  • @rybak2108
    @rybak2108 2 месяца назад

    На 3:53 ничего не понятно "Запускаю Android Studio"... Как запускаете? У меня никаких вкладок в Visual Studio Code нет.

  • @2Extremum
    @2Extremum 2 месяца назад

    Я бы назвал это "как вставить просто кусок верстки куда угодно". И да, оставлять useState по-умолчанию без initialState это очень плохая практика.

  • @user-lj4gs1sz9p
    @user-lj4gs1sz9p 2 месяца назад

    А впиэн работает ?????? 🧐 я просто не знаю что делать

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik 2 месяца назад

      Привет. ВПН может блокироваться провайдером. Установил себе несколько штук, если один не работает, запускаю другой.

  • @coordinata_m
    @coordinata_m 2 месяца назад

    отличное объяснение, просто и понятно(да еще и на практике). спасибо!

  • @nan1000
    @nan1000 3 месяца назад

    Тихий голос и стремная музыка

  • @tofidndndkkdkwkqe7017
    @tofidndndkkdkwkqe7017 3 месяца назад

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

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik 2 месяца назад

      Для этого не нужны плагины, набери в VS Code .test и нажми клавишу TAB и получится <div class="test"></div>

    • @tofidndndkkdkwkqe7017
      @tofidndndkkdkwkqe7017 2 месяца назад

      Только недавно разобрался, для этого требовалось ко всем файлам добавить разширение jsx. Спасибо за ответ! @@tipichnyj_web_razrabotchik

  • @daddy148
    @daddy148 3 месяца назад

    Спасибо большое!

  • @virtuallife3985
    @virtuallife3985 3 месяца назад

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

  • @rw_machine1974
    @rw_machine1974 3 месяца назад

    Годный контент. Все четко и по делу 👍

  • @zhibekkrmkl7981
    @zhibekkrmkl7981 3 месяца назад

    а как решить вопрос если неодностраничный сайт, а у меня есть маршрутизация? React Router?

    • @tipichnyj_web_razrabotchik
      @tipichnyj_web_razrabotchik 2 месяца назад

      Привет. Если сайт на React и он должен состоять из нескольких страниц, то используй router. В итоге получается одна SPA страница index.html, и на ней динамически сменяется контент в зависимости от адреса, например /home, /about, /contacts и т.д.