- Видео 108
- Просмотров 110 468
Типичный Веб Разработчик
Добавлен 15 май 2023
Добро пожаловать на канал о веб-разработке! Здесь вы найдете множество полезной информации о создании и развитии веб-сайтов, веб-приложений, а также о технологиях и инструментах, необходимых для успешной работы в этой области.
Подключаем и стилизуем 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
Краткая инструкция по использованию библиотеки 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-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
🥚
Спасибо!
надо учесть, что не каждый случайный набор возможно собрать в данной головоломке. есть алгоритм, проверяющий такую возможность, но я бы реализовал тасовку как просто 100 ходов в случайном направлении от пустого поля, кроме обратного хода.
Привет. Я так и сделал. Исправил функцию на гите проекта. Сделал 200 случайных ходов от пустого поля. Не нашел как добавить текстовую подсказку в видео чтобы не перезаливать.
+idea
а если нам нужно вызвать модальное окно из другого компонента? код примитивный и ненужный
Привет. Спасибо за комментарий. Думаю что подобный компонент на проде никто использовать не будет, а для "попробовать" вполне хватит. Если надо вызвать из другого компонента, можно использовать контекст или редакс.
@@tipichnyj_web_razrabotchik return ReactDOM.createPortal( меняем и работает.
2:47 - В алгоритме ошибка. Такое перемешивание дает неразрешимые ситуации, т.к. в пятнашках важно сохранять паритет. Для этого число свапов должно быть чётным, при этом нельзя включать пустую клетку в такой алгоритм, т.к. перемещение пустой клетки сбивает корректность подсчета количества свапов (перемещение двух чисел не тоже самое, что и перемещение пустой клетки, например, в соседнее число, результаты непредсказуемы). Если обязательно нужно замешать пустую клетку, далее можно сгенерировать два случайных числа, и переместить ее в матрице по горизонтали и вертикали, таким образом можно корректно получить случайные состояния.
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)
Привет. Огромное спасибо за комментарий. Похоже надо глубже изучать материал перед началом разработки. Сделал пошаговое перемешивание в 200 ходов.
Супер! Спасибо большое!
Лучше скажи как записать звук с ватсапа,слабо?
Удивительная работа коротко и ясно. Хочу только спросить, почему создали компонент AccordionItem ? Как она влияет на плавность раскрытия и закрытия ? Если его не создать не получится плавность ? Заранее благодарю за ответ )
Привет. AccordianItem произвольное название, у нас есть ненумерованный список ul с элементами li (list items), поэтому логично назвать accordionItem. Это никак не влияет на плавность. Можно взять div вместо ul и li. Плавность появляется за счет transition: height 0.3s; в файле Accordion.css.
@@tipichnyj_web_razrabotchik нет я не про название,а про то, что вы создали новый компонет и передали в нее пропсы. Т.е. вы изменили первоначальный ваш код, дабы сделать возможным плавность ?
Сложно 😅 но интересно! Спасибо за контент!
getEmptyXY - зачем forEach вызывающий функцию для каждого элемента, если можно использовать обычный for? Каждый элемент проверяется на равенство с number, даже если пустая ячейка уже была найдена, выйти из вложенного цикла и сохранить состояние можно сразу с break.
Привет. Спасибо за коммент. Поправил функцию на гите.
Что за монитрование такое про которое все говорят
Привет. Это отсылка к классовым компонентам, монтирование и размонтирование, когда компонент добавляется в разметку и удаляется из нее - www.dhiwise.com/post/react-hook-on-unmount-best-practices
Спасибо!
У тебя реально крутые видео на канале, продолжай в том же духе 👍
Спасибо!
не актуально
Привет. Что посоветуешь вместо Live Server?
Спасибо, полезное видео 👍
Отлично, мне пригодится эта функция. Подписался!
отличное видео!
Кент запиши про способы получения sso протокола
Класс! Спасибо за полезное видео! Когда то искал, как именно на windows можно было менять версию 👍
Супер бро то что надо!
Для работы react-приложения должен быть установлен node.js. Разве на github-pages он установлен по дефолту?
Привет. Для ReactJS разработки на компе нужен NodeJS. После сборки npm run build проект превращается в набор html js и css файлов. Их можно залить на любой веб сервер. Другое дело если проект на NextJS, тогда и для разработки и для работы на сервере нужен NodeJS.
@@tipichnyj_web_razrabotchik спасибо Типичному Разробу))) почему-то все, кто рассказывает как залить реакт-приложуху на github, не уточняют этого)))
Спасибо за качественную и понятную подачу. Теперь всё ясно и понятно стало.
Я нашла новый способ , он работает на редми 10c нужно погладить экран
Привет. На своем редми я тоже делаю скрин просто зажав 2 кнопки, при этом можно сделать скрин со скролом и сразу скопировать картинку, например, в телеграм. По идее это можно сделать на любом андроид смартфоне. Если этого достаточно, то никаких доп программ не нужно.
Здраствуйте,а где можно найти полный код?
Привет. По ссылке под видео есть ссылка - github.com/DmitriyShkredov/react-accordion-hr
а какой нужен впн чтобы монтировать в capcut скижите пжжж..(😭😭
Привет. С этим не подскажу, я использую DaVinci Resolve на ПК.
@@tipichnyj_web_razrabotchik спс
на Андроиде не работает, может знаете варианты как запустить ?
Привет, под видео есть ссылка на телеграм пост, там есть ссылка на исходники на гите, там есть собранный пример dmitriyshkredov.github.io/react-qr-scaner, проверьте его на своем устройстве. Когда я делал этот проект то проверял его на Windows Chrome, Android Chrome и iPhone Safari.
ты запускаешь на локалхосте, потом коннектишься по сети с мобилы, мобила не даст к камере доступ никогда пока не будет ssl сертификата, ставишь сертификат ssl для локалхост и все работает, проверено, для vite например поставил модуль, и он локалхост поднимает с https, после этого заработало на телефонах
после того как включилась секта если нажать кнопку офф, все падает с ошибкой 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)
cra всё, используйте vite
Привет, согласен, последние полгода работаю на vite.
Почему cra все?
@@warcraft.mp4889 его больше не поддерживают, ты когда только стартанул проект уже сколько критичиских уязвимостей, да и сами разрабы пишут не используйте
А ещё удобнее валидация в mui)
а если нужно отсканить по фото?
Привет, с фото тоже работает, проверял на Android и iOS смартфонах.
@@tipichnyj_web_razrabotchik я имел ввиду что бы загрузить фото и с него считало qr код при наличии
В таком режиме тоже работает. В доке есть пример: 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}`) }); });
@@tipichnyj_web_razrabotchik супер. Большое спасибо
Спасибо вам, это лучшее последовательное объяснение
Привет, спасибо тебе большее за это видео, оно мне очень сильно помогло!!! 👍👍👍
вот пример использования, я сделал кружок который следует за курсором, но вот проблема - на мобилках нет курсора и этот кружок постоянно находится в верхнем левом углу, что не есть хорошо. С этим способ этого можно избежать
Спасибо, очень помогло. Особенно приятно, что хук useClickOutside самописный.
Брат, реально спасибо, выручил <3
Я думаю самый лучший способ если у вас много иконок это 4
Господи, спасибо огромное. Пишу диплом на реакте, столько видео пересмотрела и только ты мне смог помочь. Спасибо!!!
И так оказывается бывает) А то понаслушаешься всяких "умных" людей, которые топят за диплом в прогерстве при приеме на работу, тип это топ и человек ну точно спец, в отличии от "этих" со всяких курсов, а по факту люди до диплома добрались, не умея модалки клепать)
@@evgenstepanov6319 сразу видно, в вузе не учились)
Здравствуйте! Супер видео: всё очень коротко и очень понятное объяснение 👍👍👍. И информации намного больше, чем в других намноооого длиннее видео
На 3:53 ничего не понятно "Запускаю Android Studio"... Как запускаете? У меня никаких вкладок в Visual Studio Code нет.
Я бы назвал это "как вставить просто кусок верстки куда угодно". И да, оставлять useState по-умолчанию без initialState это очень плохая практика.
А впиэн работает ?????? 🧐 я просто не знаю что делать
Привет. ВПН может блокироваться провайдером. Установил себе несколько штук, если один не работает, запускаю другой.
отличное объяснение, просто и понятно(да еще и на практике). спасибо!
Тихий голос и стремная музыка
Спасибо, а какие разшиерения ты используешь, чтоб с помощью точки вызвать сниипет дива с классом?? Помоги пожалуйста, очень надо!
Для этого не нужны плагины, набери в VS Code .test и нажми клавишу TAB и получится <div class="test"></div>
Только недавно разобрался, для этого требовалось ко всем файлам добавить разширение jsx. Спасибо за ответ! @@tipichnyj_web_razrabotchik
Спасибо большое!
Чудики, почему вы просто не можете создать квадратик из дива, и показать суть модалки для реакт, нафига столько мусора?
Годный контент. Все четко и по делу 👍
а как решить вопрос если неодностраничный сайт, а у меня есть маршрутизация? React Router?
Привет. Если сайт на React и он должен состоять из нескольких страниц, то используй router. В итоге получается одна SPA страница index.html, и на ней динамически сменяется контент в зависимости от адреса, например /home, /about, /contacts и т.д.