#21: 🍕 React Pizza v2 - Используем TypeScript + ReactJS (практика)

[@jullpic]

За что я люблю курсы Арчаков блог♥️ Арчаков: Я не буду тебе подробно разжовывать все детали. Также он: *на протяжении часа разжовывает десятиминутный материал, чтобы мы точно всё поняли*

[@yakub8798]

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

[@burunduckc]

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

[@ВладимирПалкин-е8ь]

Можешь пропустить

[@Андрійсметанін]

так он же сказал что за это ему и нравиться его контент! :)@@ВладимирПалкин-е8ь

[@warcraft.mp4889]

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

[@bagaudinparchiev8965]

{ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": [ "src", ] } конфиг с урока)

[@whiteguards43]

Спасибо!

[@goodcthulhu250]

Благодарю 😊

[@e_viskhan]

Красава

[@МаксимКожемяко-з8ш]

спасибо

[@FilmsMediaTV]

красавчик!) спасибо

[@КонстантинПоломин-ч7щ]

Если, кто заметил есть небольшой баг в корзине(может он чисто у меня), когда мы удаляем количество пицц(нажимая на минус), у нас они могут пойти в отрецание, для этого добавьте в компонент CartItems(в вашу корзину) измените функцию на "const onClickMinus = () => { if (count > 0) { dispatch(minusItem(id)) } }" и еще один момент когда вы у вас счётчик ноль на пицце в корзине, чтобы когда вы добавили новую пиццу она не отображалась со счётчиком ноль(поймете когда увидите) в redux в cartSlice в minusItem добавите "state.items = state.items.filter((obj) => obj.count !== 0);" Может кому понадобиться)

[@user-belnv]

привет, я придумал другое решение - 1? onClickMinus : undefined}>

[@alekso002]

thx u so much

[@jacktwinn]

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

[@alikrekrytov6865]

Лучший курс в IT индустрии!!! БЕЗ ВЫКЛЯНЧИВАНИЯ ДЕНЕГ ! РЕСПЕКТ АВТОРУ!

[@whiteguards43]

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

[@Host-Tach]

@@whiteguards43 тебя тоже взбесила эта фраза да?)))

[@whiteguards43]

@@Host-Tach Да.

[@orest4778]

20:55 - можно написать следующим образом: const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)); Тем самым сказав TS, что это точно будет элемент, а не null.

[@Evgeny..]

в шаблоне для редакса есть такая фича

[@orest4778]

@@Evgeny.. в каком шаблоне?

[@biLLie_wiLLie]

@@orest4778 для редакса

[@orest4778]

@@biLLie_wiLLie Гений

[@Evgeny..]

@@orest4778 если установливать CRA redux -template typescript. То там из коробки так написано будет

[@neys4171]

Обожаю ваши видео спасибо вам большое 😁🤩

[@handyfrontend]

Ребят, чтобы решить проблему с многочисленными ошибками из-за typescript - пересобирите сборку на vite, например. Мне помогло

[@Радар-ТВ]

хорош

[@IvanCrazyArchangelsk]

А потом ставим vite-plugin-checker и добавляем в defineConfig Витька import checker from 'vite-plugin-checker'; plugins: [ checker({ root: path.resolve(__dirname, './tsconfig.json'), typescript: true, overlay: true, enableBuild: true }), ] и радуемся вернувшимся многочисленными ошибкам, которые никуда, на самом деле, не пропадали)

[@navajo458]

В FullPizza мы возвращаем строку, а не reactElement, отсюда и все проблемы (TS кстати, это и пишет). Достаточно обернуть "загрузка..." jsx и все будет работать.

[@cocochanel2324]

Какие звуки я издаю после просмотра видео 54:00 :D

[@МаксимСоловьев-с9н]

Лучшее объяснение!!!

[@ГеннадийГорохов-ц8н]

Шикарное видео по тайпскрипту

[@IvanCrazyArchangelsk]

Видео огонь! Только есть один важный недочёт! В tsconfig стоит target ES5, что означает, что TS потом сконвертирует вам в продакшн JS код по стандарту ES5. Если разница между ES2023 и ES2022 не шибко, то установленный ES5 будет без стрелочных функций, промисов, деструктуризации, импортов и набьёт ваш код var'ами. Условно, вы можете уже на старте писать легаси код из 2014-го и не подозревать об этом. ES6 держит почти любой браузер сейчас, поэтому выбор очевиден.

[@СветланаАндреевна-х8р]

Спасибо, у вас самые понятные уроки!

[@romanriezanov1704]

Для root есть более корткое решение, без "if". Попробуйте так: const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement ); Ошибки не будет)

[@dimadiv6583]

Спасибо за решение)))

[@АлексейСоловьев-е9о]

еще более короткое) друг подсказал. const root = ReactDOM.createRoot(document.getElementById('root')!)

[@SergeyTebrikj]

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

[@dotg6618]

вот бы с самого начала собирал на Vite но как есть прекрасно, спасибо

[@СтройКонсалт]

День 12-й, часть II. Дэну респект #21**21.

[@rustamakhmetyanov4404]

Используем TypeScript + ReactJS/ спасибо за курс

[@Aurum-Boss]

Всё работает.Есть 3 предупреждения в итоге.2 связанные с импортами без расширения .tsx(./App.tsx, ./pages/FullPizza.tsx) ваще не работает.И одно предупреждение связано с tsconfig.json обозначает объект{}, в который заключен json ошибкой и что-то не может найти пути в конце "include","exclude" запятые стоят :).Возможно действительно нужно покапаться в настройках вебпака или тсконфиг донастроить.

[@Татьяна-ю1р2м]

спасибо за крутое обучение!!!!

[@Unnamed-r8x]

Автор давай еще какой классный курс ))

[@alexandr8151]

хорошее введение в тайп скрипт!

[@ibragimAst]

Дела реза хуьлда, сан ваш!

[@Deduska-ded]

Очень странно что даже в оф. доке написано что tsconfig необязателен, но за первую ошибку(Module not found) без tsx расширения отвечает как раз строчка "jsx": "react" в tsconfig. Решается созданием дефолтного tsconfig через tsc --init

[@mrrappbit]

Красавчик! Правда всё равно очень подробно получается) 😅

[@tw1spy]

супер, дякую!

[@АлександрИванькович-т9ф]

Мне нравится TS за то что у него есть autocomplete

[@jamjam3337]

🔥🔥🔥

[@artman9592]

спасибо

[@МаксШувалов-о3н]

Подчеркивало import App from './App.tsx' но запускалось. Когда убирал расширение tsx выдавало ошибку что не находил App. Решил проблему так: создал отдельный проект через npx create-react-app my-app --template typescript, скопировал tsconfig и вставил в проект пиццу, может у кому то понадобится.

[@warcraft.mp4889]

А я прочитал в vscode тело ошибки (An import path can only end with a '.tsx' extension when 'allowImportingTsExtensions' is enabled) и добавил этот параметр с true в tsconfig. ВСе пропало

[@sashap1rus562]

Лучший

[@zakiro4277]

21:52 тоже такая же ошибка вышла все ок

[@kenanhaciyev3759]

разжевал)

[@Мария-ц8ъ2е]

TypeScript ReactJS Redux

[@shokhrookhr3850]

Ураааааа🥳

[@alexeyfilippov42]

На сколько видео еще рассчитан урок? и добавь пожалуйста весь курс в плейлист

[@Evgeny..]

если сразу весь курс, то просмотров будет меньше

[@alexeyfilippov42]

@@Evgeny.. с чем связан плейлист и просмотры

[@Евгений-х7п9с]

Бро, а нельзя было заюзать опциональную цепочку на руте?

[@archieankaev7741]

у меня ошибка только на root была, исправлять ничего не потребовалось :D

[@thomasgabe3588]

странно у меня tsconfig.json сам появился после установки TypeScript практически с такими же настройками как у вас

[@whiteguards43]

А где ссылка на конфиг (?

[@rostislavpotapov7215]

в репе проекта лежит....

[@ПерсивальЛоуэл]

43:41

[@neilwatts2402]

53:58 утка?

[@arthurr172]

азазхахах

[@Yusuf_Nohcho]

😂😂

[@bobozaka]

@Archakov Blog забыл прикрепить tsconfig

[@Человек-р9ц]

На гитхабе в проекте лежит

[@ГригорийБотаров]

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

[@НиколайБалабанов-ц6п]

Компонент должен возвращать JSX, в этом и проблема в FullPizza. Заговорился, наверное

[@betteramsly8341]

джазаакаЛлох1у хойр

[@webstep4677]

Есть ли смысл смотреть первую пиццу? Или пицца #2 современный вариант и первая устарела?

[@pustotaxoxo]

Посмотри первый видос пицца v2, вроде он там все рассказывает про это

[@GUNTRUP_]

24:24 - почему-то ошибок нету вообще таких как у тебя

[@markwahlberg9358]

+

[@mr.zxzxzxz3816]

ts react js

[@mrrappbit]

также только на root ругался и все, остальное пашет

[@miloman1995s]

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

[@mex5341]

на 150 руб беднее стал ,офигеть

[@matvienko_p]

tsconfig: { "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": ["src"] }

[@JdIm6fhjLgdWRhn]

50:00

[@MtChannel6wee]

@Archakov Blog после установки typeSrcipt у меня все полетело, теперь вообще не знаю что делать... Выдает такую ошибку уже что только не пробовал и node-sass удалял и обновлял и версии менял ничего не помогает, может быть ты можешь подсказать что делать или как хотя бы назад откатиться и удалить typeScript из проекта? Ошибка: ./src/scss/app.scss (./node_modules/css-loader??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--6-oneOf-5-3!./src/scss/app.scss) Error: Node Sass version 9.0.0 is incompatible with ^4.0.0.

[@MtChannel6wee]

Если у кого -то будет похожая проблема я не понял сам как я это решил, но попробуйте заменить в tsconfig.json "target": "esnext", "module": "esnext", на "target": "esnext", "module": "commonjs", я сидел с этой проблемой несколько дней и не мог найти ответа как это решить, также index.js у меня выглядит так: import ReactDOM from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import { Provider } from "react-redux"; import App from "./App"; import { store } from "./redux/store"; const portalDiv = document.getElementById('root')!; const root = ReactDOM.createRoot(portalDiv); root.render( ); Может быть кому-то сэкономит время,удачи!

[@NayroTV]

@@MtChannel6wee челллл сппппппппаааассссссссибббббооооооо)))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))

[@gyyazali]

При импорта модульных css выходит такая ошибка на tsx Cannot find module './fullPizza.module.css' or its corresponding type declarations

[@betteramsly8341]

лучший