и еще мне очень нравится, что у тебя даже если ошибка выходит или баг, то это не за кадром, а показываешь, как решаешь и походу объясняешь. Очень живое видео.
Елена это первый туториал , который я посмотрел из всех ютуберов, ну вас просто приятно слушать )))) и не ту той самой монотонной речи, продолжайте в том же духе.
Отличный урок. Не обращайте внимание на "учителей" - в наших рядах их становится еще больше)) Подача материала отлично, все разложено по полочкам - однозначно лайк и подписка. Ждем новых выпусков.
Добрый день, Елена! Спасибо большое за урок! Старалась повторить, что-то получилось, что-то нет. Буду пересматривать и править. Спасибо за мотивацию и прекрасную подачу.
Добрый день! Сейчас ищу работу, только что отучилась, с удовольствием пошла бы на первую работу под ваше начало. Вы объясняете так понятно, так приятно вас слушать, все сразу раскладывается по полочкам. Спасибо, что вы это делаете для нас😍
Smart and charming person. Thank you for turning your knowledge into such high-quality video content, absolutely free. As long as TH-cam exists I will be your subscriber.
StrictMode выполняет рендеринг компонентов дважды в development режиме, но не в production. По мнению разработчиков React - это позволяет обнаружить некоторые проблемы в вашем коде, если таковые будут и предупредить Вас об этом
Бага с двойным созданием задачи происходит из-за StrictMode. Это должно проявляться только в режиме разработки а не продакшена. Решение: убрать обёртку, либо забить)
Это мое первое видео от Елены. Мне очень понравилось два момента - "тасочки" (приятно слушать) и последние 10 минут крышесносных миддлваров с тайпскриптом. До этого было все понятно, Цуштант для меня новый стейт менеджер, но после Редакса очень понятный и приятный, а вот middleware с localStorage, да еще на TS - вот это для меня сложно и интересно! Спасибо!
Добрый день! Подскажите, почему на 1:08 может возникать ошибка: "Свойство "children" этого тега JSX ожидает один дочерний объект типа "ReactNode", однако было предоставлено несколько дочерних объектов."
Отличный видеоурок, будучи работающим разработчиком подчерпнул для себя новую информацию. Единственное, что мне показалось, слег неясно объяснённым - работа с миддлварами под локальное хранилище.
Елена, доброе время суток. Познакомился с zustand, благодаря вашему видео. Огромное благодарю. Сейчас пишу простенький сайт с использованием zustand, и при клике на input type="checkbox" ни чего не происходит. И в связи с этим, можно ли с вами связаться для просмотра кода и выявление ошибки? Заранее благодарю.
Это для тайпскрипта. Получение document.getElementById('root') не гарантирует, что в html документе есть элемент с id=root, typescript ругается, т.к. для функции ReactDOM.createRoot контейнер должен быть обязательно. И поэтому добавляем !, что говорит typescript-у мы уверены document.getElementById('root') !== null
I was watching your lecture and set ({tasks: [newtasks, ...tasks]}) Warning: Maximum update depth exceeded. I keep getting this error. Can I check the code?
Рада, что помогла! Да такое можно сделать, но не всегда рекомендуют, т.к. интерфейсом можно пользоваться через табы и только таким способ узнать что выделено, что нет. Но я тоже время от времени удаляю эти выделения, если нужно чтобы красиво :)))
Написал приложение по видео, все работает круто кроме одной мелочи - при редактировании заголовка задачи, новый заголовок не сохраняется в localStorage Для того чтобы это исправить, в компоненте InputTask в input нового поля при событии onKeyDown передавайте onEdited(id, editValue), editValue - вместо title Т.е по факту вы просто передаете старое значение, а нужно передавать новое из состояния
Да знаю про него, тема хорошая! Думаю в текущем примере не хотелось использовать доп. либу и как-то ограничиться маленькой функцией, но на бэкенде, конечно, лучше переходить к более профессиональным id. Кстати посмотрела сколько весит, в 3 раза больше чем zustand bundlephobia.com/package/uuid@8.3.2
Аааа! Ох уж эти названия! :D Спасибо! Это прямо как zustand, первоначально читала его как зустанд, потом оказалось, что слово немецкое и правильно зистанд :))))
@@АндрейСидоров-ц3ж Короче всё зустанд! 😂 Успокоились! Сегодня на работе спросила у венгерца, он несмотря на то что знает немецкий тоже называет его зустанд. В общем норм :D
@@webelart хочу купить себе макбук, подскажите пожалуйста, по личному опыту, не мало ли вам 13 дюймов для разработки сайтов? все таки 13 и так кажется маловато, так ещё и при открытом дев тулз справа, так вообще)) как вам по ощущениям?
@@НикитаМалиенко-о6у Тут всё просто. 15 дюймовые действительно более приятны если за ними работать изолированно, но у меня всегда есть внешний монитор, обычно 27 дюймов. И поэтому мне ок. А маленькие беру потому что тяжело таскать 15 дюймовые, и если я куда-то еду и долго на ногах, то прямо жуть, хоть они и тонкие и вроде бы лёгкие, всё-равно :))) Тем не менее даже с пятнашкам у меня внешний монитор тоже был, на него прикольно уводить окна браузера, консоль, а на основном писать код :)
Елена, спасибо за ваши видео. Хотелось спросить, вы в настоящее время всегда используете только React на стороне фронта или также знакомы с vue или angular ?
Здравствуйте, рада что видео понравилось. ❤️ С vue и angular не работала, на последних трех работах был React и в целом меня в нем всё устраивает, позволяет решить любые задачи которые нужны.
Здравствуйте, хочу спросить если у вас платные курсы или что-то подобное? Я изучал html и css, теперь хочу двигаться дальше, вот нашел ваш канал и после просмотра некоторых видео, сделал для себя вывод что вы хорошо объясняете
Елена огомное спасибо за прекрасное видео, с достаточо подробными объяснениями!) Это первое видео, которое я смотрю у вас на канале. И у меня возник вопрос, а у вас на канале есть видео с подключением PostgresSQL к NodeJs? Если да, то можно пожалуйста ссылочку, заранее спасибо)😊
Здравствуйте, рада что видео понравилось! Пока про NodeJS в связке psql нет, только начинаю погружаться на канале в темы реакта, ноды и всех связующих. Постепенно добавлю и этот урок. Тема действительно классная! Пока можете посмотреть в сторону либы pg (node-postgres).
Такое мне пока рано делать, но лайк не глядя за отличный урок! А скажите пожалуйста, на сколько хорошо надо знать вёрстку, если планируешь работать именно с реакт и Дж. с?
Здравствуйте, Константин! Вёрстка вам здесь в любом случае пригодится, что по факту это такое: когда мы создаём теги (html в чистом варианте), добавляем стили (css) - и это уже вёрстка. Также можно добавлять события и реакции на них, кликнули на кнопку, что-то появилось. Собственно примерно в упрощённом виде так работают страницы сайтов :) В реакте у вас вместо чистого html будет jsx по факту можно назвать шаблонизатором, который на js позволяет писать теги похожие на html, собственно эти теги потом будут вставлены в чистый html и вы увидите в хроме отображение. Также будете добавлять стили. Можно по разному, в текущем уроке я использовала препроцессор scss, он в итоге преобразуется в чистый css и добавляется на страницу также. А вот js часть уже в реакте в плане событий имеет свои особенности, как реакции на события происходят и т.д. По факту в чистой разработке вы пишите на html, css, js клиентскую часть. Весь клиент по факту, а именно внутренности теги, стили и т.д. можно добавлять через чистый js, реакт - это просто js библиотека, которая по факту формирует html через js, но упрощает этот процесс и оптимизирует. css может по разному отрабатывать, тут настройка сборки (это может быть webpack), он может разделять js на отдельную логику css, js минифицированный и они уже подключаются к стартовой странице html. Но при этом вёрстка по факту остаётся, вам нужно уметь использовать css, располагать контент на странице, делать это качественно и грамотно. Поэтому вёрстку знать надо. Сам реакт в связке с доп. либами также добавляет много разных возможностей, которые позволяют перенести часть Бэкенд логики на клиент: 1. разделение на страницы 2. более точечные запросы. и т.д. И он очень популярен для создания SPA (т.е. когда браузер не перезагружается постоянно при смене страниц), меняются только части на странице с точечными запросами данных.
Доброй ночи! Понравилось ваше видео. Но к сожалению, пока знаний мало и не хочется еще TypeScript голову забивать. Хочу попробовать это реализовать на JS. насколько это реально? Можно ли интерфейсы заменить классами js? Кстати zustand понравилось больше по сравнению с useState. В Redux пока даже боюсь лезть Уже полгода изучаю JS, на кодеварс делаю задачи. Но когда пытаюсь что-то серьезней делать, впадаю в ступор. Так как трудно разбить большую задачу на маленькие подзадачи и решать их последовательно, создавая приложение.
Здравствуйте! Вам в любом случае react потребуется. Можно без typescript, но на чистом JS будет сложнее. В целом на чистом тоже можно, на на react проще. Про zustand да он крутой, мне тоже больше, чем redux нравится сейчас. И про ваши трудности я тоже понимаю. Обычно я в такие моменты покупала книгу какую-нибудь, допустим по реакту и читала одновременно создавая приложение. Я подумаю на тему таких видео. может реально будет интересно.
@@webelart Добрый день! Не могу понять, реализация и взаимодействие с данными описано interface ToDoStore. Но непонятно, при взаимодействии с интерфейсом в приложении мы не вызываем функции, которые описаны ToDoStore. А в interface InputTaskProps описаны другие функции, и нажимая кнопку удалить вызывается функция, которая реализована в ToDoStore. Допустим, я хочу сделать не удаление задачи при включении чекбокс, а ее перечеркивание. По логике, я должен поставить флаг выполнения задачи true и изменить ее стиль css. Как происходит связывание функции удаления onRemoved: (id: string) => void; с функцией которая реализует само удаление removeTask: (id: string) => void; ЗЫ: нашел где происходит связывание - в App.tsx ЗЫ1: по реализации интересно сделать на чистом ReactJS, возможно с Redux. Так как в голове каша, и когда еще TS смотришь, он хоть мне близок, учитывая небольшой опыт Cи, все равно воспринимается тяжело
Я не так много работала с такими сборщиками, обычно на проектах кастомные. Первоначально я использовала create-react-app для быстрой сборки примеров и вроде бы ок. Но когда с typescript установила, у меня возникли проблемы с scss и module. Начала разбираться в чём проблема потратила некоторое кол-во времени. И решила попробовать vitejs, буквально создала проект, пару команд и всё завелось моментом, модули css, typescript, svg без проблем вообще. На мой взгляд такие сборщики должны работать без всяких затруднений и с минимальными затратами сил, запустил - работает. С create-react-app уже не первый раз какие-то глюки были. Плюс он довольно давно уже не поддерживается нормально.
Zustand произносится как /ˈʦuːʃtant/ ~ цуштант. Это немецкое слово, означающее "статус". Если уже читать на англ. манер, то это было бы ~ зустэнд (по типу zeus-tand) :)
@@jiauyjiauy3777 Если попробуете это слово запихать в Google Translate и нажать озвучку, то произносить зистанд. Звучит странно согласна, я его зустандом называю, но с немецкого это цуштанд :D
Because the goal of this lesson is not to create a simple project. The goal is to study technologies: reactjs + state management zustand. And usually when you start to study a new library it's cool to create something simple and todo list is the perfect suit here.
Спасибо большое за ваши великолепные уроки, Елена! Хочу спросить у вас, повлияла ли текущая сложная ситуация в России на разработку, просто сейчас только учусь вёрстке и всему подобному и тревожусь что все возможно это зря и Россия теоретически может быть отброшена назад в развитии и не бессмысленны ли мои потуги к учёбе
Если тебе нравиться этим заниматься то точно не забрасывай, есть фриланс, оутсорс, комуто там знакомому знакомому чтото сделать, на самый худейший конец можно просто переехать... Главное стать хорошим толковым девом, дальше само пойдет... удачи тебе :)
Я отпишусь по Лондону, т.к. здесь живу. Здесь все хорошо по прежнему востребовано и предложения от рекрутеров продолжают поступать. Недавно даже из меты вновь писали :) Ребята всё классно написали. Поддерживаю!
Видео хорошее!! давай еще пилить тайпскрипте!))) и огромная просьба: не выкладывать в 60 кадрах, даже в 50 и даже в 30))). Для статических видео частота не нужна, а для кого-то это может быть критичным: тариф по трафику, ограничение по скорости/качеству. Спасибо
25 кадров должно быть достаточно, посмотрю при след. монтировке. Последние видео 60 кадров, т.к. сначала монтирую кодинг съёмку, а она с компа 🙂 С камеры по умолчанию 25, и с какого источника начинаю сначала там настройки по умолчанию и берутся. В общем пофикшу, спасибо за комментарий 😘❤️
@@webelart 1. вы то упорно произносите зистанд 2. какая разница как на немецком? слово то означает технологию американского происхождения. Происхождение самого слова тут уже не имеет значения.
@@webelart 1. в любом случае не немецкого. по доступной в инете инфе его создателями являются создатели Recoil, а создателем последнего является по инфе с сайта Recoil японец. 2. в ютубе все англоязычные блогеры, за исключением некоторых, называющих его по немецки зюштанд, называют его зустанд или застэнд. НИ ОДНОГО не слышал, называющего его зистанд
Я чуть со стула не упал, услышав: "На порту localhost"! Порт: это 3000, а localhost - это адрес машины на котором запущен скрипт. А так, спасибо за объяснения)
Оговорилась, что ж тут поделать. Этот момент заметила ещё при записи, и вырулила в видео через пару секунд, но решила не акцентировать внимание на ошибке. От программистов ничего не скроешь :) Рада, что контент понравился! ❤️
Спасибо за проделанную работу! Есть небольшие замечания и пожелания: 1. Обратите внимание на произношение некоторых английских слов (например Vite, install); 2. Почему не пользуетесь возможностями ускоренного набора кода (как встроенными в VSCode, так и сторонними плагинами)? 3. Не совсем понятно применение тегов article и section; 4. Почему при выполнении задачи она удаляется? Обычно текст задачи перечёркивается или фон задачи меняется. Странный функционал ) 5. Для удобства также можно использовать в проекте абсолютные пути (относительно src).
Понимаю ваше беспокойство, для такого небольшого приложения кажется проще на html, css, js все написать и будет норм. :) Но 1. Цель основная обучение, посмотреть на технологии, как можно использовать. Писать здесь полномасштабное приложение можно, но времени гораздо больше займёт. ToDo листы - это как правила классика для практики. Они содержат все базовые функции: удаление, обновление, редактирование. 2. В реакте мне нравится простота работы с DOM. Даже в таком небольшом примере. Т.к. когда знаешь как быстро всё настроить, а мы по факту сделали здесь всё быстро vitejs пару секунд и всё готово :) А дальше уже экспорты работают, любые лимбы какие захотите из npm быстро можно установить. 3. Когда приложение становится большим, многостаночник даже, крупнее магазин и т.д. У реакта есть много преимуществ, это по факту SPA и пользователь гораздо быстрее получает информацию на странице, т.к. перезагрузки между страницами нет, идёт перерисовка только нужных частей. Ну и т.к. react - это js библиотека, то при разработке SPA работать на чистом js станет довольно сложно. 4. Этот стек востребован на рынке. И довольно хорошо востребован: react, typescript , и как я вижу zustand тоже используют ребята судя по комментариям. ❤️
Если текст заранее готовить, то видео будет искусственным. Я предпочитаю живую съёмку и презентации в том числе. Так подача выглядит более интересной и настоящей. Заранее готовлю обычно только примеры, т.к. иначе уйдёт много времени, но и даже эту подготовку делаю не всегда. ❤️
Немного критики: Не правельная подача матерьяла , а именно - непоследовательно. Для новичков очень запутано и не понятно, некоторые сушьности определены заранее .
Текущее видео уже предполагает владение реактом. Если вам нужен контент для новичков ищите другой материал или дотягивайтесь и задавайте конкретные вопросы, что не понятно, что вы сами вложили, чтобы стало понятнее.
Елена вам срочно нужно вернуться в Россию, бросайте этот Лондон,в Россию срочно!!!!Мы ждём вас ,рано или поздно вас выгонят из Лондона а в России вам будут рады!
и еще мне очень нравится, что у тебя даже если ошибка выходит или баг, то это не за кадром, а показываешь, как решаешь и походу объясняешь.
Очень живое видео.
Это крепкий лайк!!!!Нужно больше роликов по реакту и тайпскрипту< и всяких штук-фишек!!!!!!!!!!!!!!
Елена это первый туториал , который я посмотрел из всех ютуберов, ну вас просто приятно слушать )))) и не ту той самой монотонной речи, продолжайте в том же духе.
Спасибо! 🌹🌸
Отличный урок. Не обращайте внимание на "учителей" - в наших рядах их становится еще больше)) Подача материала отлично, все разложено по полочкам - однозначно лайк и подписка. Ждем новых выпусков.
Супер!
Нашел для себя нового классного учителя.
Добрый день, Елена! Спасибо большое за урок! Старалась повторить, что-то получилось, что-то нет. Буду пересматривать и править. Спасибо за мотивацию и прекрасную подачу.
Добрый день! Сейчас ищу работу, только что отучилась, с удовольствием пошла бы на первую работу под ваше начало. Вы объясняете так понятно, так приятно вас слушать, все сразу раскладывается по полочкам. Спасибо, что вы это делаете для нас😍
Привет! Где училась?
мммуа)))) умничка) много всего нового узнал и попрактиковал) Спасибооо и лайк)
Спасибо за ваш труд! Учусь по вашим видео ))
Smart and charming person. Thank you for turning your knowledge into such high-quality video content, absolutely free. As long as TH-cam exists I will be your subscriber.
Thank you sooo much!!! ❤️
Вы молодец ! Спасибо вам огромное за помощь сообществу, удачи в развитии канала)
Молодец, помогаешь развиваться новичкам. Благодаря таким как ты я смог добиться своих целей
StrictMode выполняет рендеринг компонентов дважды в development режиме, но не в production. По мнению разработчиков React - это позволяет обнаружить некоторые проблемы в вашем коде, если таковые будут и предупредить Вас об этом
Бага с двойным созданием задачи происходит из-за StrictMode. Это должно проявляться только в режиме разработки а не продакшена. Решение: убрать обёртку, либо забить)
Да, мы там уже поняли. Удаляем. ❤
Прекрасно, с сеня подписка!
Это мое первое видео от Елены. Мне очень понравилось два момента - "тасочки" (приятно слушать) и последние 10 минут крышесносных миддлваров с тайпскриптом. До этого было все понятно, Цуштант для меня новый стейт менеджер, но после Редакса очень понятный и приятный, а вот middleware с localStorage, да еще на TS - вот это для меня сложно и интересно! Спасибо!
❤❤❤
Здравствуйте, недавно наткнулся на ваш канал, очень всё нравится! Желаю вам процветания!
Спасибо! ❤️
Елена, спасибо большое за видео, с Zustand ни когда не работал, и думаю будет очень интересно. 😊
давно тудусов не было
Только ночью приснился туду лист , после Реакт туториала, а тут такой подарок.
Оо, спасибо! Сегодня посмотрю, лайк заранее :3
мы как раз учимся на курсе писать тудолист) интересные фишки подчеркнул. спасибо за ваш труд!
Интересный урок 🤔
Спасибо за ваш труд, Елена! ❤
❤️
Спасибо вам. Данный урок помог свести разве концы некоторых поверхностных знаний)
спасибо вам за такое отличное видео, у вас очень качественный контент👍
Елена, вы лучшая! Очень приятно слушать и смотреть!)❤
Классное видео и подача. 2 раза из-за StrictMode? Спасибо за уроки
Агонь! Супер познавательно!
Ты большая молодец! Продолжай в том же духе!
Добрый день! Подскажите, почему на 1:08 может возникать ошибка:
"Свойство "children" этого тега JSX ожидает один дочерний объект типа "ReactNode", однако было предоставлено несколько дочерних объектов."
вдруг кому пригодится: в map надо добавить return
Спасибо за полезный контент! Особенно за TypeScript!
Отличный видеоурок, будучи работающим разработчиком подчерпнул для себя новую информацию. Единственное, что мне показалось, слег неясно объяснённым - работа с миддлварами под локальное хранилище.
Спасибо огромное! Видео очень крутое!
Елена, доброе время суток. Познакомился с zustand, благодаря вашему видео. Огромное благодарю. Сейчас пишу простенький сайт с использованием zustand, и при клике на input type="checkbox" ни чего не происходит. И в связи с этим, можно ли с вами связаться для просмотра кода и выявление ошибки? Заранее благодарю.
11:07 зачем восклицательный знак на строке 6?
Это для тайпскрипта. Получение document.getElementById('root') не гарантирует, что в html документе есть элемент с id=root, typescript ругается, т.к. для функции ReactDOM.createRoot контейнер должен быть обязательно. И поэтому добавляем !, что говорит typescript-у мы уверены document.getElementById('root') !== null
I was watching your lecture and set ({tasks: [newtasks, ...tasks]})
Warning: Maximum update depth exceeded.
I keep getting this error. Can I check the code?
красивая девочка, и кодер.
эх, стар я уже)
Спасибо за видео)
не знаю писал ли уже кто-то, что бы при выделении инпута не было бордера, то указать outline: none;
Рада, что помогла! Да такое можно сделать, но не всегда рекомендуют, т.к. интерфейсом можно пользоваться через табы и только таким способ узнать что выделено, что нет.
Но я тоже время от времени удаляю эти выделения, если нужно чтобы красиво :)))
время 36:36 на 35 строке лучше сделать так set({ tasks: [newTask, ...tasks] })
Так лучше выглядит :)
Написал приложение по видео, все работает круто кроме одной мелочи - при редактировании заголовка задачи, новый заголовок не сохраняется в localStorage
Для того чтобы это исправить, в компоненте InputTask в input нового поля при событии onKeyDown передавайте onEdited(id, editValue), editValue - вместо title
Т.е по факту вы просто передаете старое значение, а нужно передавать новое из состояния
Для меня познавательно, благодарю.
Но почему вы не пользуетесь emmet?
Есть какой-то сакральный смысл?)
Нет, нету сакрального смысла :) Просто не использую.
как сделать билд и перенести на хостинг?
Елена, посмотрите в сторону UUID для генерации уникальных идентификаторов
Да знаю про него, тема хорошая! Думаю в текущем примере не хотелось использовать доп. либу и как-то ограничиться маленькой функцией, но на бэкенде, конечно, лучше переходить к более профессиональным id. Кстати посмотрела сколько весит, в 3 раза больше чем zustand bundlephobia.com/package/uuid@8.3.2
в 18 реакте появился новый хук useId() как раз для генерации уникального случайного идентификатора =)
@@frusen_sol Воу воу воу!!! Срочно надо изучать! 😍
Только начал смотреть, уверен что видео будет супер. Кстати название Vite взято с французского, что означает быстро и читается как "вит".
Аааа! Ох уж эти названия! :D Спасибо! Это прямо как zustand, первоначально читала его как зустанд, потом оказалось, что слово немецкое и правильно зистанд :))))
@@webelart. Правильно будет зуштанд с немецкого
@@justauser8517 Да я уже видела коммент, что слово немецкое. Опять же, ох уж эти названия :)
@@webelart правильно Цуштанд. Если уж по немецки.
@@АндрейСидоров-ц3ж Короче всё зустанд! 😂 Успокоились! Сегодня на работе спросила у венгерца, он несмотря на то что знает немецкий тоже называет его зустанд. В общем норм :D
Елена, подскажите какой у вас macbook?
13 дюймов, M1, memory 16GB
@@webelart хочу купить себе макбук, подскажите пожалуйста, по личному опыту, не мало ли вам 13 дюймов для разработки сайтов? все таки 13 и так кажется маловато, так ещё и при открытом дев тулз справа, так вообще)) как вам по ощущениям?
@@НикитаМалиенко-о6у Тут всё просто. 15 дюймовые действительно более приятны если за ними работать изолированно, но у меня всегда есть внешний монитор, обычно 27 дюймов. И поэтому мне ок. А маленькие беру потому что тяжело таскать 15 дюймовые, и если я куда-то еду и долго на ногах, то прямо жуть, хоть они и тонкие и вроде бы лёгкие, всё-равно :))) Тем не менее даже с пятнашкам у меня внешний монитор тоже был, на него прикольно уводить окна браузера, консоль, а на основном писать код :)
@@webelart круто, спасибо большое за развернутый ответ!
Елена, спасибо за ваши видео. Хотелось спросить, вы в настоящее время всегда используете только React на стороне фронта или также знакомы с vue или angular ?
Здравствуйте, рада что видео понравилось. ❤️ С vue и angular не работала, на последних трех работах был React и в целом меня в нем всё устраивает, позволяет решить любые задачи которые нужны.
Здравствуйте, хочу спросить если у вас платные курсы или что-то подобное? Я изучал html и css, теперь хочу двигаться дальше, вот нашел ваш канал и после просмотра некоторых видео, сделал для себя вывод что вы хорошо объясняете
Пока на текущий момент нету. Рада, что материал и подача нравятся. ❤️
Елена огомное спасибо за прекрасное видео, с достаточо подробными объяснениями!)
Это первое видео, которое я смотрю у вас на канале. И у меня возник вопрос, а у вас на канале есть видео с подключением PostgresSQL к NodeJs? Если да, то можно пожалуйста ссылочку, заранее спасибо)😊
Здравствуйте, рада что видео понравилось! Пока про NodeJS в связке psql нет, только начинаю погружаться на канале в темы реакта, ноды и всех связующих. Постепенно добавлю и этот урок. Тема действительно классная!
Пока можете посмотреть в сторону либы pg (node-postgres).
sctrict mode всегда так отрабатывает два раза. удалить его и все. на 39 минуте
Спасибо!!!
спасибо за новый туториал❤
скажите, пожалуйста, а есть ли возможность привязать параллакс к движению телефона🤔 его акселерометру/ гироскопу
Да такое можно сделать, сама не реализовывала, но на одной из прошлых работ в команде делали подобную штуку.
@@webelart спасибо, чтож звучит как вызов)
Такое мне пока рано делать, но лайк не глядя за отличный урок! А скажите пожалуйста, на сколько хорошо надо знать вёрстку, если планируешь работать именно с реакт и Дж. с?
Здравствуйте, Константин! Вёрстка вам здесь в любом случае пригодится, что по факту это такое: когда мы создаём теги (html в чистом варианте), добавляем стили (css) - и это уже вёрстка. Также можно добавлять события и реакции на них, кликнули на кнопку, что-то появилось. Собственно примерно в упрощённом виде так работают страницы сайтов :)
В реакте у вас вместо чистого html будет jsx по факту можно назвать шаблонизатором, который на js позволяет писать теги похожие на html, собственно эти теги потом будут вставлены в чистый html и вы увидите в хроме отображение. Также будете добавлять стили. Можно по разному, в текущем уроке я использовала препроцессор scss, он в итоге преобразуется в чистый css и добавляется на страницу также.
А вот js часть уже в реакте в плане событий имеет свои особенности, как реакции на события происходят и т.д.
По факту в чистой разработке вы пишите на html, css, js клиентскую часть. Весь клиент по факту, а именно внутренности теги, стили и т.д. можно добавлять через чистый js, реакт - это просто js библиотека, которая по факту формирует html через js, но упрощает этот процесс и оптимизирует. css может по разному отрабатывать, тут настройка сборки (это может быть webpack), он может разделять js на отдельную логику css, js минифицированный и они уже подключаются к стартовой странице html.
Но при этом вёрстка по факту остаётся, вам нужно уметь использовать css, располагать контент на странице, делать это качественно и грамотно. Поэтому вёрстку знать надо.
Сам реакт в связке с доп. либами также добавляет много разных возможностей, которые позволяют перенести часть Бэкенд логики на клиент:
1. разделение на страницы
2. более точечные запросы.
и т.д.
И он очень популярен для создания SPA (т.е. когда браузер не перезагружается постоянно при смене страниц), меняются только части на странице с точечными запросами данных.
@@webelart Спасибо!
лишний ререндер вызывается из-за StrictMode обертки
Стрик мод вызывал юз эффект два раза с пустыми зависимостями
Доброй ночи! Понравилось ваше видео. Но к сожалению, пока знаний мало и не хочется еще TypeScript голову забивать. Хочу попробовать это реализовать на JS. насколько это реально? Можно ли интерфейсы заменить классами js? Кстати zustand понравилось больше по сравнению с useState. В Redux пока даже боюсь лезть Уже полгода изучаю JS, на кодеварс делаю задачи. Но когда пытаюсь что-то серьезней делать, впадаю в ступор. Так как трудно разбить большую задачу на маленькие подзадачи и решать их последовательно, создавая приложение.
Здравствуйте! Вам в любом случае react потребуется. Можно без typescript, но на чистом JS будет сложнее. В целом на чистом тоже можно, на на react проще.
Про zustand да он крутой, мне тоже больше, чем redux нравится сейчас.
И про ваши трудности я тоже понимаю. Обычно я в такие моменты покупала книгу какую-нибудь, допустим по реакту и читала одновременно создавая приложение. Я подумаю на тему таких видео. может реально будет интересно.
@@webelart Добрый день! Не могу понять, реализация и взаимодействие с данными описано interface ToDoStore. Но непонятно, при взаимодействии с интерфейсом в приложении мы не вызываем функции, которые описаны ToDoStore. А в interface InputTaskProps описаны другие функции, и нажимая кнопку удалить вызывается функция, которая реализована в ToDoStore. Допустим, я хочу сделать не удаление задачи при включении чекбокс, а ее перечеркивание. По логике, я должен поставить флаг выполнения задачи true и изменить ее стиль css. Как происходит связывание функции удаления onRemoved: (id: string) => void; с функцией которая реализует само удаление removeTask: (id: string) => void;
ЗЫ: нашел где происходит связывание - в App.tsx
ЗЫ1: по реализации интересно сделать на чистом ReactJS, возможно с Redux. Так как в голове каша, и когда еще TS смотришь, он хоть мне близок, учитывая небольшой опыт Cи, все равно воспринимается тяжело
А какой смысл использовать сборщик? Чем create react app с typescript темплейтом не угодил?
Основной плюс vite очень быстрое локальное компилирование. Изменения в разработке собираются за доли секунды
Я не так много работала с такими сборщиками, обычно на проектах кастомные.
Первоначально я использовала create-react-app для быстрой сборки примеров и вроде бы ок. Но когда с typescript установила, у меня возникли проблемы с scss и module. Начала разбираться в чём проблема потратила некоторое кол-во времени. И решила попробовать vitejs, буквально создала проект, пару команд и всё завелось моментом, модули css, typescript, svg без проблем вообще.
На мой взгляд такие сборщики должны работать без всяких затруднений и с минимальными затратами сил, запустил - работает. С create-react-app уже не первый раз какие-то глюки были. Плюс он довольно давно уже не поддерживается нормально.
Zustand произносится как /ˈʦuːʃtant/ ~ цуштант. Это немецкое слово, означающее "статус". Если уже читать на англ. манер, то это было бы ~ зустэнд (по типу zeus-tand) :)
На английский манер - это зистанд 😜
@@webelart а почему 'zus' должно произноситься, как "зис"?
@@jiauyjiauy3777 Да забейте, наслаждайтесь вечером 😘❤️
@@webelart да мне чисто интересно узнать (не более того), т.к. я зануда с лингвистической точки зрения. Да и можно на ты))
@@jiauyjiauy3777 Если попробуете это слово запихать в Google Translate и нажать озвучку, то произносить зистанд. Звучит странно согласна, я его зустандом называю, но с немецкого это цуштанд :D
А в мире JS существуют примеры кроме ToDo листа?
канал it--kamasutra там разбирается социальная сеть.
Зустанд получше Рудакса будет конечно, сами на работе тоже зустанд юзаем)
О, тоже zustand используете! 🔥🔥🔥
@@webelart в bundlephobia смотрели размер бандла?
@@sergeys4732 Сейчас проверила 1.1кб, с редаксом не такая чтобы разница 1.6кб... Вот у preact и preact-dom уже повыше, если с react сравнивать.
@@webelart а редакс тулкит?) там что то цифры совсем уж большие
@@sergeys4732 С этим не работала. Интересно надо поизучать. Максимум туда redux-thunk подключала, ну и может какие-то либы для работы с API.
я влюбился.выходите за меня !!!!
Вот так сразу? :)
Забавно, на ванильном js запросто, но реакт и другие библиотеки/фреймворки тёмный лес.
@@awenn2015 Та я и так не парюсь, но я не понял что ты написал и твою озабоченность.
скоре из за включенного useStrinct в main ts
strick mode => 2x useEffect
40:26 updateTitle
из редакса надеюсь переключаться на zustand не придётся в дальнейшем
У нас в компании как раз переключились 😅 всмысле на старом приложении редакс.
@@webelart понял :)
- из-за него идет перерисовка 2 раза
было бы круто увидеть подобное на веб компонентах вместо фреймворков и либ
Why use 5 different technologies for such a simple project? Plain javascript does job perfectly.
Because the goal of this lesson is not to create a simple project. The goal is to study technologies: reactjs + state management zustand. And usually when you start to study a new library it's cool to create something simple and todo list is the perfect suit here.
Спасибо большое за ваши великолепные уроки, Елена! Хочу спросить у вас, повлияла ли текущая сложная ситуация в России на разработку, просто сейчас только учусь вёрстке и всему подобному и тревожусь что все возможно это зря и Россия теоретически может быть отброшена назад в развитии и не бессмысленны ли мои потуги к учёбе
Если тебе нравиться этим заниматься то точно не забрасывай, есть фриланс, оутсорс, комуто там знакомому знакомому чтото сделать, на самый худейший конец можно просто переехать... Главное стать хорошим толковым девом, дальше само пойдет... удачи тебе :)
@@1fractal спасибо большое за поддержку)
Наоборот спецы сейчас востребованы как никогда
Я отпишусь по Лондону, т.к. здесь живу. Здесь все хорошо по прежнему востребовано и предложения от рекрутеров продолжают поступать. Недавно даже из меты вновь писали :)
Ребята всё классно написали. Поддерживаю!
@@webelart благодарю за ответ)
Видео хорошее!! давай еще пилить тайпскрипте!))) и огромная просьба: не выкладывать в 60 кадрах, даже в 50 и даже в 30))). Для статических видео частота не нужна, а для кого-то это может быть критичным: тариф по трафику, ограничение по скорости/качеству. Спасибо
25 кадров должно быть достаточно, посмотрю при след. монтировке. Последние видео 60 кадров, т.к. сначала монтирую кодинг съёмку, а она с компа 🙂 С камеры по умолчанию 25, и с какого источника начинаю сначала там настройки по умолчанию и берутся. В общем пофикшу, спасибо за комментарий 😘❤️
Не зистанд, а зустанд. П.С. Елена, вы действительно в Лондоне работаете? 😲
Правильно цуштант и это немецкое слово. А если в google.translate вобьёте, то на англ. будет зистанд. Да, я живу в Лондоне.
@@webelart 1. вы то упорно произносите зистанд
2. какая разница как на немецком? слово то означает технологию американского происхождения. Происхождение самого слова тут уже не имеет значения.
@@ashimov1970 В англ варианте читается зистанд, в чём ваша проблема?
@@ashimov1970 Почему вы решили, что технология американского происхождения?
@@webelart 1. в любом случае не немецкого. по доступной в инете инфе его создателями являются создатели Recoil, а создателем последнего является по инфе с сайта Recoil японец.
2. в ютубе все англоязычные блогеры, за исключением некоторых, называющих его по немецки зюштанд, называют его зустанд или застэнд. НИ ОДНОГО не слышал, называющего его зистанд
Если это немецкое слово, то произносится «цуштанд», означает состояние.
Zustand это немецкое слово. Значит "статус". Посмотрите его произношение в гуглтранслейте, и не Вайт, а Виит.
О боже, ещё один буквоед! Зустанд и Вайт!
For non Russian students English version should be available
Currently it's not, but I want to start create English videos as well. I think soon I'll start it. ❤️
@@webelart ❤ from Pakistan
Я чуть со стула не упал, услышав: "На порту localhost"!
Порт: это 3000, а localhost - это адрес машины на котором запущен скрипт.
А так, спасибо за объяснения)
Оговорилась, что ж тут поделать. Этот момент заметила ещё при записи, и вырулила в видео через пару секунд, но решила не акцентировать внимание на ошибке. От программистов ничего не скроешь :)
Рада, что контент понравился! ❤️
Туду туду тудутудутуду тудутутуууууу дудудуду
Елена Литвинова - если хотите больше подписчиков и просмотров- делайте 10 видео для тупых и одно для умных.
не зистанд, а цуштанд. это немецкое слово означает состояние
Такую архитектуру папок видел на рельсах 😁
Мне кажется на чистом js быстрее будет, но потом расширить это на чистом js геморрой.
Спасибо за проделанную работу!
Есть небольшие замечания и пожелания:
1. Обратите внимание на произношение некоторых английских слов (например Vite, install);
2. Почему не пользуетесь возможностями ускоренного набора кода (как встроенными в VSCode, так и сторонними плагинами)?
3. Не совсем понятно применение тегов article и section;
4. Почему при выполнении задачи она удаляется? Обычно текст задачи перечёркивается или фон задачи меняется. Странный функционал )
5. Для удобства также можно использовать в проекте абсолютные пути (относительно src).
Чтобы написать микроприложение из двух конпок, нужно столько всего установить. Жесть какаято
Понимаю ваше беспокойство, для такого небольшого приложения кажется проще на html, css, js все написать и будет норм. :) Но
1. Цель основная обучение, посмотреть на технологии, как можно использовать. Писать здесь полномасштабное приложение можно, но времени гораздо больше займёт. ToDo листы - это как правила классика для практики. Они содержат все базовые функции: удаление, обновление, редактирование.
2. В реакте мне нравится простота работы с DOM. Даже в таком небольшом примере. Т.к. когда знаешь как быстро всё настроить, а мы по факту сделали здесь всё быстро vitejs пару секунд и всё готово :) А дальше уже экспорты работают, любые лимбы какие захотите из npm быстро можно установить.
3. Когда приложение становится большим, многостаночник даже, крупнее магазин и т.д. У реакта есть много преимуществ, это по факту SPA и пользователь гораздо быстрее получает информацию на странице, т.к. перезагрузки между страницами нет, идёт перерисовка только нужных частей. Ну и т.к. react - это js библиотека, то при разработке SPA работать на чистом js станет довольно сложно.
4. Этот стек востребован на рынке. И довольно хорошо востребован: react, typescript , и как я вижу zustand тоже используют ребята судя по комментариям.
❤️
чтото хочется убрать редакс подальше от себя, уж как бы я его не любил много бойлеркода((
эта библиотека выглядит поудобнее
c localStorage немного каша началась - скопировали вставили не заработало потом заработало)
Всё как в жизни, согласитесь? 😊
Опа, а чего Лондон? А как же родина? Англосаксы же плохие, не?
Видео хорошее но лучше текст заранее подготовить и проговорить
Если текст заранее готовить, то видео будет искусственным. Я предпочитаю живую съёмку и презентации в том числе. Так подача выглядит более интересной и настоящей. Заранее готовлю обычно только примеры, т.к. иначе уйдёт много времени, но и даже эту подготовку делаю не всегда. ❤️
Немного критики: Не правельная подача матерьяла , а именно - непоследовательно. Для новичков очень запутано и не понятно, некоторые сушьности определены заранее .
Текущее видео уже предполагает владение реактом. Если вам нужен контент для новичков ищите другой материал или дотягивайтесь и задавайте конкретные вопросы, что не понятно, что вы сами вложили, чтобы стало понятнее.
Сколько незнакомых слов в названии)
:))))
Ничёнипанятна
не вайт а вит
Это всё, что вы вынесли из урока? 🤔
russian is difficult understand ... i want to learn russian language ..
:))) I have an English Channel as well. ❤️
This one th-cam.com/channels/dw1R35g3uDj4LVt1-aS-hA.html :)
Дефолтная таска 8-)) Надеюсь, вы в жизни так не говорите, англицизмов в русском уже слишком много. Привет из Ирландии...
Женщина в программировании?!😱😱
Елена вам срочно нужно вернуться в Россию, бросайте этот Лондон,в Россию срочно!!!!Мы ждём вас ,рано или поздно вас выгонят из Лондона а в России вам будут рады!
Чтобы Два раза не вызывалось надо убрать из main.tsx
Ага там уже разобрались! 😅 Спасибо!