วีดีโอ

Привет. Видео снималось год назад, скорее всего с выходом новых версий немного изменилась структура.

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

Привет. Возьми на гите исходники, проверь что работает и только потом перестилизуй под свой проект - github.com/DmitriyShkredov/react-qr-scaner/tree/dev

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

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

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

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 ходов.

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

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

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

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

Привет. Что посоветуешь вместо Live Server?

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

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

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

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

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

@@tipichnyj_web_razrabotchik спс

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

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

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

Почему cra все?

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

Привет, с фото тоже работает, проверял на 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 супер. Большое спасибо

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

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