React JS Практика. Пишем сайт с нуля

Дорожная карта и экосистема React 2024 - bit.ly/3NxXf7z
Исходники тут: t.me/js_by_vladilen/23
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
React JS - Приложение целиком (Контекст, Хуки, Анимации, Деплой)

[@VladilenMinin]

Исходники тут: t.me/js_by_vladilen/23 Получить профессию Frontend разработчика - bit.ly/3ypqDWq

[@user-hs6lx6ec3d]

15:28 - Создание формы 22:18 - Создаем Alert 34:00 - используем AlertState в компоненте 39:00 -Firebase(облачная база данных) 42:10 - Создаем FirebaseState(context, reducer,state) 1:08:45- Анимация css 1:21:00 -деплой приложения

[@Snegurjan]

Ребята,кто повторяет код за автором,если вы удалите все заметки ,то у вас вылетит ошибка,вам надо просто добавить пустой массив с проверкой "или" const payload = Object.keys(res.data || {}).map(key => А Владилен ,как обычно -Вышка,ТОП)

[@ilyalevtsov9266]

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

[@CotyaraShow]

Ни**я не понял, но очень интересно...

[@YouFourtt]

У меня комментарий удалился каким-то магическим образом, видимо из - за упоминания одного сайта интересного. Если интересно, скину в личку. Так вот. Тут ничего сложного нет. Автором видео были использованы преимущества ES6, а именно: синтаксис деструктуризации, синтаксис литерала объекта, операторы расширения, вычисляемые свойства.

[@YouFourtt]

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

[@melitopol_Russia]

@@YouFourtt , давно учишь реакт?

[@user-zv9iy3lm5n]

Большое спасибо за контент. Смотрю , повторяю, учусь.

[@user-gx7kf9um9x]

Все структурно, без воды, все об'ясняется от начала до конца, топовый контент определенно! СПАСИБО!

[@alekseytrump1586]

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

[@lolashepota4050]

Your lessons provide an opportunity for new knowledge in React! Well done, Bravo!

[@alexles5003]

Большое спасибо. Есть над чем подумать. И на что посмотреть

[@Evgeny..]

Еще раз смотрю! Спасибо большое!

[@rinatvaliullov3247]

Контент у Владилена как всегда огонь! Всё чётко, компактно и по делу.

[@someChicoRy]

Тяжеловато) думаю раза с 3го пойму. Спасибо, что тратишь время на это, Владилен

[@user-il3xh5di2i]

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

[@VladilenMinin]

Приятного просмотра)

[@user-hd7km6fr8x]

Спасибо, дружище! Бомба-ракета! ;)

[@braggamaffin]

Спасибо за канал, контент просто огонь!

[@nataliasmalii393]

Очень круто, спасибо! 👍

[@steelhead4590]

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

[@user-wy9gh3lw3q]

Классный урок, большое спасибо!

[@Evgeny..]

Отличное видео, спасибо большое!!!

[@doomymax577]

Владилен красавчик, спасибо тебе

[@victorvolkov762]

Блин, мегареспект за видео! Купил твой R-Native на Udemy!

[@alexles5003]

Офигенно то что доктор прописал. Из реактовского сайта я понял только про useState и useEffect

[@viktopxio3739]

Благодарю! То что нужно

[@DicrTarasov]

Отличный урок, спасибо.

[@insanesup9648]

сейчас по быстрому прошел, вообще огонь, быстро и по делу (сам бек на ноде пишу)

[@user-nn6mb9tv1b]

хочу просмотреть все видосы на этом канале - жаль что в сутках не 35 часов, я уже хуярю на двойной скорости воспроизведения

[@ilyalevtsov9266]

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

[@eldarbaktybekov2868]

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

[@ilyalevtsov9266]

@@eldarbaktybekov2868 а state не забыл обновить?

[@farthervideo]

купил курс, впервые в жизни что-то купил!!!

[@kirillbaryba746]

Доброй ночи. Владилен, в полном курсе есть информация как правильно строить архитектуру и масштабировать реакт приложения ?

[@HTMLHarbor]

Спасибо большое, получилось. Ура

[@power_kisa]

Очень понятно! Спасибо!

[@marybage4690]

Спасибо огромное! Очень полезное видео. Феноменально, как ты запомнил весь этот объём информации. Мне кажется, ты энциклопедия по JS. А можешь, пожалуйста, подсказать, как реализовано, например в документации по React, вставка кусочка кода в статью на тёмном фоне с подсветкой?

[@andriyloz7558]

Спасибо, очень познавательное видео. Было бы круто посмотреть рефакторинг этого приложения с использованием TypeScript. Кстати, как Вы относитесь к Mobx как к библиотеке для хранения состояния веб-приложения?

[@asilbekashirov1341]

Самое годное видео, что я когда-либо видел

[@andriipereverziev6287]

Крутой урок! Спасибо

[@redpill5384]

Очень годно! Спасибо

[@jackasmile6517]

спасибо за видео! немного застряла с реактом ( слишком много информации поглотила и мало ее обдумала :)) становится понятнее, что нужно и зачем.

[@DimanMazafaca]

как успехи спустя время?

[@user-th4qi8iv3q]

@@DimanMazafaca как успехи

[@DimanMazafaca]

@@user-th4qi8iv3q все такой же олух. Хотя каждый день по 2 часа занимаюсь

[@user-th4qi8iv3q]

@@DimanMazafaca и на скок продвинулись

[@excelente9842]

Очень классный урок!

[@user-hz1nq8qf7r]

Очень круто! Особенно в ФП стиле

[@user-gz1lz7hh9w]

Да! ФП наше все!

[@user-nn7qf7qx8t]

Владилен, спасибо. Отличное видео. Подскажи пожалуйста как бы выглядел [ADD_NOTE] если notes : {1: {title: "title", list: []}}

[@user-wr3mv9np6g]

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

[@alex45779]

Спасибо за понятные объяснения!

[@eldarbaktybekov2868]

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

[@user-mn2po8ns2z]

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

[@hovsargsyan7778]

Подписался, спасибо огромное

[@mikesheva3]

Спасибо за видео, в коде есть баг, если в базе не будет записей, то при фетчноутс апликуха крашится, res.data = undefined

[@lesyaborodich3070]

Спасибо большое ❤️❤️❤️❤️

[@mr.sablin]

Отличное видео! Владилен. а курс по реакту еще можно где-то приобрести? Udemi по ссылке говорит что его больше нельзя приобрести на их платформе.

[@VladilenMinin]

Скоро будет доступен. Информация будет в телеграм чате

[@alexanderserhiienko1212]

Спасибо, интересно

[@gradusnikblea]

Спасибо за уроки)))

[@konjinni]

в конце видео можно посоветовать самостоятельно добавить функционал "завершено/не завершено"

[@CJIu3eHb]

Ого, какой занятный франкенштейн получился: множественный контекст с динамическими значениями (вместе с обертками XxxxState для хранения стейта и useReducer) теперь заменяет redux. :) Конечно, дублирование значения времени анимации в компоненте и в стилях выглядит не очень, здесь бы помог какой-нибудь css in js, можно было бы в переменную вынести. Хотя там свои неудобства будут. UPD. Как я и подозревал, у автора есть страсть делать redux из всего, что под руку попадется - есть даже видео "RxJS Примеры. Создание своего Redux"(kzbin.info/www/bejne/h3fTiHuNeZh5nrM). :)

[@nivaech]

Столько есть великолепных каналов на KZbin, связанных с веб разработкой. Traversy Media, Dev Ed, Codding Addict, techsith, Web Dev Simplified... Но ни в одном из них нет настолько удачно собранного вместе годного материала, как здесь.

[@VladilenMinin]

А ещё на русском:) Спасибо)

[@MrVertu01]

Получилось всё, спасибо, надо теперь попробовать добавить авторизацию и потом переписать на TS, но для начала нужно научиться делать всё это, потому что не всё было понятно в видео. Вообще не понимаю, как я должен мыслить, чтобы написать что-то

[@user-bx6eg5lj3v]

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

[@aleksdobriy6941]

Спасибо! Случаем в планах не стоит снять видос на тему Server-Side Rendering with React ? 😱😀

[@VladilenMinin]

Думаю сделаю

[@nikitagorchakov9591]

огонь!!!!

[@aleksandrmatyka3118]

У вас очень хороший канал!

[@VladilenMinin]

Благодарю за отзыв)

[@daniilukraine3611]

Это конечно не stackoverflow, но я вам помогу ) Если у вас выпадает ошибка по не совместительству с node-sass ==> " Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. "

[@user-wy9gh3lw3q]

Спасибо тебе огромное!

[@daniilukraine3611]

@@user-wy9gh3lw3q на здоровье !

[@Pan_Artem]

Спасибо!

[@creese85]

Спасибо)

[@boriskulak3613]

Круто!

[@phnxbr]

Спасибо большое. Прошёл от начала и до конца. Контент современный, своевременный. На Udemy тоже купил курсы. Вопрос про Redux важный: можно ли useRedux использовать в готовом проекте?

[@VladilenMinin]

Можно. useReducer только

[@phnxbr]

Владилен Минин да, useReducer. У меня уже проект с combinedReducer, я бы хотел продолжать на хуках в новых формах

[@VladilenMinin]

На канале подробный ролик есть про хуки

[@user-th4qi8iv3q]

@@phnxbr как успехи

[@user-dd1hs5be3s]

тут ошибка есть , если база пустая будет , то неработает в FirebaseState.js нет проверки на Null y res.data в fetchNotes и строка: const payload = Object.keys(res.data).map(key => { выдаёт ошибку

[@nikitadv777]

Ребят, может кто подскажет, какой шрифт использует Владилен и какой там размер и line-spacing. Буду благодарен!

[@videnin10]

если у кого-то есть такая ошибка "Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.", то ee можно пофиксить так, если используете yarn: yarn remove node-sass yarn add node-sass@4.14.1 или так, если используете npm: npm uninstall node-sass npm install node-sass@4.14.1

[@viktorkovalchuk3342]

Спасибо

[@olegivanovo6779]

Вже якось сам зозібрався але дякую

[@Evgeny..]

На самом деле сложновато ,но многое теперь проясняется

[@user-lg5se3nj1e]

Хороший контент. Спасибо. А как решать проблему с js который идет с bootstrap? По факту сейчас все компоненты в bootstrap(которые используют js) не работают. Если прицепить js руками, то работать он будет в обход react, что как минимум это плохо. Какие есть пути решить эту проблему(собственно я так понимаю это проблема всех css фреймворков + react) ?

[@VladilenMinin]

Либо писать свой функционал на js Либо использовать библиотеки, что то вроде react-bootstrap

[@eljaro8195]

Кто поставил дизлайки то? шикарная подача информации!

[@Dmitriy_Sentinel]

Народ, подскажи пожалуйста, начал изучать React но при создании проекта, почему-то не работает автообновление страницы после изменения любого файла. И чтобы увидеть изменения, надо перезапускать весь проект...

[@phnxbr]

Второй вопрос к моему первому комменту: Если использовать хуки, redux формы уже более не актуальны?

[@user-sz8pz2ow8d]

а как создать несколько инпутов, и использовать их? Типа не только инпут для тайтла, а еще како-то чекбокс

[@centner813]

*Hint*: Достаточно написать `yarn start` или же `yarn build`. Привычка писать `run` в `yarn run start` скорее всего досталась от работы с NPM: `npm run start` ;) Вообще годный материал 👍

[@SergeSchekhovtsov]

npm start тоже работает) я так пишу

[@irinaoblomova4384]

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

[@irinaoblomova4384]

Оказалась версия бутстрапа не та.

[@Polite_person_]

Да вы задолбали со всех сторон годноту выпускать, когда я это буду все смотреть бл..ть????!!!!!111

[@VladilenMinin]

Вежливый Человек планируй время, у меня ещё много контента)

[@aske34ru]

Я тоже не успеваю :D

[@user-ur5kc8er8w]

вы только смотрите? Мне ещё как- то осмысливать это приходиться

[@evgenysumaev882]

Спасибо за отличный урок. Плюс купил сегодня ваш курс по React. Вопрос по уроку. Почему-то удаление работает так: нажимаешь на кнопку, ничего визуально не меняется, после обновления страницы, отображается список корректно - на 1 запись меньше. В чем может быть проблема? Добавление работает нормально.

[@Max-kr4ie]

Я пошел методом от противного, и всячески пытался добиться твоего результата, удаляя не критически важные элементы. А потом подумал. В общем ты не дописал метод removeNote. const removeNote = async id => { await axios.delete(`${url}/notes/${id}.json`) dispatch({ type: REMOVE_NOTE, payload: id }) } Удаляешь из бд, но не обновляешь локальный стейт - если не написать диспатч

[@Max-kr4ie]

из-за того что loading: false прописан в фетче если удалить все элементы получаем ошибку или бесконечную загрузку, все же пришлось делать отдельный редуцер для стоп лоадинг и делать проверку на res.data

[@user37126]

Я сделал проверку в компоненте Notes, если не пустой массив note - тогда только выводим список, тогда нет вечной загрузки.

[@pavelmaksimenka4278]

Хуки прекрасны до того момента, как начинаешь писать тесты.

[@Ya-GalinaVyacheslavovna]

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

[@denismerioara8294]

Спасибо

[@H1roHamada]

Что может быть за ошибка в Home.js после new Array, где ключ значение после ключа подчеркивает ":" и вот такая ошибка. Ожидалось ",".ts(1005). Я так понял это тайпскрипт, много перепробовал, ничего не помогает

[@yakut54]

Здрасти.... заранее лайк и поехали мозги взрывать))

[@Grapeoff]

На это можно смотреть, как на огонь

[@MrAROpekin]

привет, можно ссылку на урок с анимациями?

[@qaswert167]

36:37 У кого появилась ошибка? Как надо исправлять? Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

[@kirintsev]

на 18:40 можно еще вот так const notes = [...Array(3).keys()].map(item => ({id: item, title: `Note ${item}`}))

[@jekins]

Спасибо за видео. Запиши плиз видео по Next.js. Не нашел ни одного на русском, а SSR важная штука

[@Max-kr4ie]

добавил в копилку нужных знаний, спасибо

[@taraspixel589]

Object.keys(res.data).map() - этот код будет крашить апку при отсутствии заметок на сервере (res.data = null). я всегда делаю проверку res.data ? ... : ...

[@user-zg3vt6zh6y]

_.keys(res.data) :)

[@AndreyHohutkin]

@@user-zg3vt6zh6y В чем проблема? Object.keys(res.data || []).map()

[@user-zg3vt6zh6y]

@@AndreyHohutkin так тож можна

[@Vitaliy-ct2wv]

@@AndreyHohutkin пасиб за решение проблемы

[@Mirba_]

Object.keys(!res.data).map()

[@sima93]

А у всех так, что когда нет ни одной заметки , идет вечный loading и ошибка в консоли: Uncaught (in promise) TypeError: Cannot convert undefined or null to object at Function.keys () at fetchNotes (FirebaseState.js:21:1)

[@dvdrelin]

1:01:09 тут безопасная секция лишняя тк в цепочке уже есть .catch который и поймает исключение. Перевыброс просто лишний шаг

[@mk3mk3mk]

при вводе заметки и нажатии Enter выскакивает Alert: Внимание! Что-то пошло не так! Архив приложения скачал с github. Приложение запустилось нормально. Запускал yarn install, потом yarn start Пробовал yarn upgrade. Потом опять запустил приложение, и опять та же ошибка. В консоли ошибок нет. Что это может быть?

[@xasikonkz]

Контент годнота, не понимаю почему мало подписчиков. Еще бы полный курс по js🙏

[@Archycoon]

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

[@AmericanDragon134]

Почему мы в начале удалили return и использовали Const

[@user-pm9ov1op3z]

Прошу сделать отдельный ролик по хукам. Например столкнулся с проблемой определённой не синхронности в useState, а так же при изменении useContext из дочернего компонента. Как правильно работать с useCallback, useMemo и когда их применять. P.S документацию читал, увы есть ряд вопросов которые там не раскрываются и в рунете так же нет подробной документации (Где, Как, Когда, Как комбинировать). Прошу выпустить ролик на данную интересную тему!

[@VladilenMinin]

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

[@DevBer]

Снова со старта наткнулся на траблу - yarn add node-sass и тд и получаю "No such file or directory: 'add'", установил через npm ))

[@sergnazarchuk1003]

что я упустил по работе с fb. -Unhandled Rejection (TypeError): Cannot convert undefined or null to object и почему именно релиз подключения фб через енв.локал?

[@sergnazarchuk1003]

ясно .. чтоб запустить скаченный с гита код надо создать линк на фб и создать в базе фб предварительно - notes ибо без него код не пашет

[@faridqasimov4226]

почему у меня не создается файл firebase.json и .firebaserc после firebase init

[@marklebel3800]

уже можно называть канал "Лайк не глядя"?

[@user-hz9ez9fk8i]

Почему Route может не работать?