Отличный урок. Не обращайте внимание на "учителей" - в наших рядах их становится еще больше)) Подача материала отлично, все разложено по полочкам - однозначно лайк и подписка. Ждем новых выпусков.
и еще мне очень нравится, что у тебя даже если ошибка выходит или баг, то это не за кадром, а показываешь, как решаешь и походу объясняешь. Очень живое видео.
Добрый день, Елена! Спасибо большое за урок! Старалась повторить, что-то получилось, что-то нет. Буду пересматривать и править. Спасибо за мотивацию и прекрасную подачу.
Елена это первый туториал , который я посмотрел из всех ютуберов, ну вас просто приятно слушать )))) и не ту той самой монотонной речи, продолжайте в том же духе.
Добрый день! Сейчас ищу работу, только что отучилась, с удовольствием пошла бы на первую работу под ваше начало. Вы объясняете так понятно, так приятно вас слушать, все сразу раскладывается по полочкам. Спасибо, что вы это делаете для нас😍
Smart and charming person. Thank you for turning your knowledge into such high-quality video content, absolutely free. As long as RUclips exists I will be your subscriber.
StrictMode выполняет рендеринг компонентов дважды в development режиме, но не в production. По мнению разработчиков React - это позволяет обнаружить некоторые проблемы в вашем коде, если таковые будут и предупредить Вас об этом
Отличный туториал, спасибо :) проблемы с TS в версии 4.0+ решается добавление дополнительного вызова create перед добавление middleware: create()(devtools(...)). И кстати у zustand есть нативный middleware для работы со стораджами - persist, в версиях 4.0+ кастомный из видео не работает из-за того что тип State - depricated и вообще TS ругается :)
Это мое первое видео от Елены. Мне очень понравилось два момента - "тасочки" (приятно слушать) и последние 10 минут крышесносных миддлваров с тайпскриптом. До этого было все понятно, Цуштант для меня новый стейт менеджер, но после Редакса очень понятный и приятный, а вот middleware с localStorage, да еще на TS - вот это для меня сложно и интересно! Спасибо!
Елена огомное спасибо за прекрасное видео, с достаточо подробными объяснениями!) Это первое видео, которое я смотрю у вас на канале. И у меня возник вопрос, а у вас на канале есть видео с подключением PostgresSQL к NodeJs? Если да, то можно пожалуйста ссылочку, заранее спасибо)😊
Здравствуйте, рада что видео понравилось! Пока про NodeJS в связке psql нет, только начинаю погружаться на канале в темы реакта, ноды и всех связующих. Постепенно добавлю и этот урок. Тема действительно классная! Пока можете посмотреть в сторону либы pg (node-postgres).
Елена, спасибо за ваши видео. Хотелось спросить, вы в настоящее время всегда используете только React на стороне фронта или также знакомы с vue или angular ?
Здравствуйте, рада что видео понравилось. ❤️ С vue и angular не работала, на последних трех работах был React и в целом меня в нем всё устраивает, позволяет решить любые задачи которые нужны.
Что интересно по углублённому js? Про vue пока в ближайшем будущем нет, на последних трех работах был реакт и пока с ним :)) Но если в будущем буду пробовать для самообучения скорее больше либы, то возможно что-то сниму. Про реакт, nodejs, typescript точно видео будут!
Бага с двойным созданием задачи происходит из-за StrictMode. Это должно проявляться только в режиме разработки а не продакшена. Решение: убрать обёртку, либо забить)
Рада, что помогла! Да такое можно сделать, но не всегда рекомендуют, т.к. интерфейсом можно пользоваться через табы и только таким способ узнать что выделено, что нет. Но я тоже время от времени удаляю эти выделения, если нужно чтобы красиво :)))
Отличный видеоурок, будучи работающим разработчиком подчерпнул для себя новую информацию. Единственное, что мне показалось, слег неясно объяснённым - работа с миддлварами под локальное хранилище.
Елена, доброе время суток. Познакомился с zustand, благодаря вашему видео. Огромное благодарю. Сейчас пишу простенький сайт с использованием zustand, и при клике на input type="checkbox" ни чего не происходит. И в связи с этим, можно ли с вами связаться для просмотра кода и выявление ошибки? Заранее благодарю.
Здравствуйте, хочу спросить если у вас платные курсы или что-то подобное? Я изучал html и css, теперь хочу двигаться дальше, вот нашел ваш канал и после просмотра некоторых видео, сделал для себя вывод что вы хорошо объясняете
Такое мне пока рано делать, но лайк не глядя за отличный урок! А скажите пожалуйста, на сколько хорошо надо знать вёрстку, если планируешь работать именно с реакт и Дж. с?
Здравствуйте, Константин! Вёрстка вам здесь в любом случае пригодится, что по факту это такое: когда мы создаём теги (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 (т.е. когда браузер не перезагружается постоянно при смене страниц), меняются только части на странице с точечными запросами данных.
Аааа! Ох уж эти названия! :D Спасибо! Это прямо как zustand, первоначально читала его как зустанд, потом оказалось, что слово немецкое и правильно зистанд :))))
@@user-td5bw9rt2g Короче всё зустанд! 😂 Успокоились! Сегодня на работе спросила у венгерца, он несмотря на то что знает немецкий тоже называет его зустанд. В общем норм :D
Добрый день! Подскажите, почему на 1:08 может возникать ошибка: "Свойство "children" этого тега JSX ожидает один дочерний объект типа "ReactNode", однако было предоставлено несколько дочерних объектов."
Да знаю про него, тема хорошая! Думаю в текущем примере не хотелось использовать доп. либу и как-то ограничиться маленькой функцией, но на бэкенде, конечно, лучше переходить к более профессиональным id. Кстати посмотрела сколько весит, в 3 раза больше чем zustand bundlephobia.com/package/uuid@8.3.2
Написал приложение по видео, все работает круто кроме одной мелочи - при редактировании заголовка задачи, новый заголовок не сохраняется в localStorage Для того чтобы это исправить, в компоненте InputTask в input нового поля при событии onKeyDown передавайте onEdited(id, editValue), editValue - вместо title Т.е по факту вы просто передаете старое значение, а нужно передавать новое из состояния
Доброй ночи! Понравилось ваше видео. Но к сожалению, пока знаний мало и не хочется еще 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 уже не первый раз какие-то глюки были. Плюс он довольно давно уже не поддерживается нормально.
Это для тайпскрипта. Получение document.getElementById('root') не гарантирует, что в html документе есть элемент с id=root, typescript ругается, т.к. для функции ReactDOM.createRoot контейнер должен быть обязательно. И поэтому добавляем !, что говорит typescript-у мы уверены document.getElementById('root') !== null
@@webelart хочу купить себе макбук, подскажите пожалуйста, по личному опыту, не мало ли вам 13 дюймов для разработки сайтов? все таки 13 и так кажется маловато, так ещё и при открытом дев тулз справа, так вообще)) как вам по ощущениям?
@@user-ij3wr1ym1c Тут всё просто. 15 дюймовые действительно более приятны если за ними работать изолированно, но у меня всегда есть внешний монитор, обычно 27 дюймов. И поэтому мне ок. А маленькие беру потому что тяжело таскать 15 дюймовые, и если я куда-то еду и долго на ногах, то прямо жуть, хоть они и тонкие и вроде бы лёгкие, всё-равно :))) Тем не менее даже с пятнашкам у меня внешний монитор тоже был, на него прикольно уводить окна браузера, консоль, а на основном писать код :)
Спасибо большое за ваши великолепные уроки, Елена! Хочу спросить у вас, повлияла ли текущая сложная ситуация в России на разработку, просто сейчас только учусь вёрстке и всему подобному и тревожусь что все возможно это зря и Россия теоретически может быть отброшена назад в развитии и не бессмысленны ли мои потуги к учёбе
Если тебе нравиться этим заниматься то точно не забрасывай, есть фриланс, оутсорс, комуто там знакомому знакомому чтото сделать, на самый худейший конец можно просто переехать... Главное стать хорошим толковым девом, дальше само пойдет... удачи тебе :)
Я отпишусь по Лондону, т.к. здесь живу. Здесь все хорошо по прежнему востребовано и предложения от рекрутеров продолжают поступать. Недавно даже из меты вновь писали :) Ребята всё классно написали. Поддерживаю!
Zustand произносится как /ˈʦuːʃtant/ ~ цуштант. Это немецкое слово, означающее "статус". Если уже читать на англ. манер, то это было бы ~ зустэнд (по типу zeus-tand) :)
@@jiauyjiauy3777 Если попробуете это слово запихать в Google Translate и нажать озвучку, то произносить зистанд. Звучит странно согласна, я его зустандом называю, но с немецкого это цуштанд :D
Видео хорошее!! давай еще пилить тайпскрипте!))) и огромная просьба: не выкладывать в 60 кадрах, даже в 50 и даже в 30))). Для статических видео частота не нужна, а для кого-то это может быть критичным: тариф по трафику, ограничение по скорости/качеству. Спасибо
25 кадров должно быть достаточно, посмотрю при след. монтировке. Последние видео 60 кадров, т.к. сначала монтирую кодинг съёмку, а она с компа 🙂 С камеры по умолчанию 25, и с какого источника начинаю сначала там настройки по умолчанию и берутся. В общем пофикшу, спасибо за комментарий 😘❤️
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.
Понимаю ваше беспокойство, для такого небольшого приложения кажется проще на html, css, js все написать и будет норм. :) Но 1. Цель основная обучение, посмотреть на технологии, как можно использовать. Писать здесь полномасштабное приложение можно, но времени гораздо больше займёт. ToDo листы - это как правила классика для практики. Они содержат все базовые функции: удаление, обновление, редактирование. 2. В реакте мне нравится простота работы с DOM. Даже в таком небольшом примере. Т.к. когда знаешь как быстро всё настроить, а мы по факту сделали здесь всё быстро vitejs пару секунд и всё готово :) А дальше уже экспорты работают, любые лимбы какие захотите из npm быстро можно установить. 3. Когда приложение становится большим, многостаночник даже, крупнее магазин и т.д. У реакта есть много преимуществ, это по факту SPA и пользователь гораздо быстрее получает информацию на странице, т.к. перезагрузки между страницами нет, идёт перерисовка только нужных частей. Ну и т.к. react - это js библиотека, то при разработке SPA работать на чистом js станет довольно сложно. 4. Этот стек востребован на рынке. И довольно хорошо востребован: react, typescript , и как я вижу zustand тоже используют ребята судя по комментариям. ❤️
Я чуть со стула не упал, услышав: "На порту localhost"! Порт: это 3000, а localhost - это адрес машины на котором запущен скрипт. А так, спасибо за объяснения)
Оговорилась, что ж тут поделать. Этот момент заметила ещё при записи, и вырулила в видео через пару секунд, но решила не акцентировать внимание на ошибке. От программистов ничего не скроешь :) Рада, что контент понравился! ❤️
Если текст заранее готовить, то видео будет искусственным. Я предпочитаю живую съёмку и презентации в том числе. Так подача выглядит более интересной и настоящей. Заранее готовлю обычно только примеры, т.к. иначе уйдёт много времени, но и даже эту подготовку делаю не всегда. ❤️
@@webelart 1. вы то упорно произносите зистанд 2. какая разница как на немецком? слово то означает технологию американского происхождения. Происхождение самого слова тут уже не имеет значения.
@@webelart 1. в любом случае не немецкого. по доступной в инете инфе его создателями являются создатели Recoil, а создателем последнего является по инфе с сайта Recoil японец. 2. в ютубе все англоязычные блогеры, за исключением некоторых, называющих его по немецки зюштанд, называют его зустанд или застэнд. НИ ОДНОГО не слышал, называющего его зистанд
Спасибо за проделанную работу! Есть небольшие замечания и пожелания: 1. Обратите внимание на произношение некоторых английских слов (например Vite, install); 2. Почему не пользуетесь возможностями ускоренного набора кода (как встроенными в VSCode, так и сторонними плагинами)? 3. Не совсем понятно применение тегов article и section; 4. Почему при выполнении задачи она удаляется? Обычно текст задачи перечёркивается или фон задачи меняется. Странный функционал ) 5. Для удобства также можно использовать в проекте абсолютные пути (относительно src).
Немного критики: Не правельная подача матерьяла , а именно - непоследовательно. Для новичков очень запутано и не понятно, некоторые сушьности определены заранее .
Текущее видео уже предполагает владение реактом. Если вам нужен контент для новичков ищите другой материал или дотягивайтесь и задавайте конкретные вопросы, что не понятно, что вы сами вложили, чтобы стало понятнее.
Елена вам срочно нужно вернуться в Россию, бросайте этот Лондон,в Россию срочно!!!!Мы ждём вас ,рано или поздно вас выгонят из Лондона а в России вам будут рады!
Елена, вы лучшая! Очень приятно слушать и смотреть!)❤
Елена, спасибо большое за видео, с Zustand ни когда не работал, и думаю будет очень интересно. 😊
Вы молодец ! Спасибо вам огромное за помощь сообществу, удачи в развитии канала)
Отличный урок. Не обращайте внимание на "учителей" - в наших рядах их становится еще больше)) Подача материала отлично, все разложено по полочкам - однозначно лайк и подписка. Ждем новых выпусков.
Супер!
Нашел для себя нового классного учителя.
Спасибо за ваш труд! Учусь по вашим видео ))
Интересный урок 🤔
Спасибо за ваш труд, Елена! ❤
❤️
Молодец, помогаешь развиваться новичкам. Благодаря таким как ты я смог добиться своих целей
Спасибо вам. Данный урок помог свести разве концы некоторых поверхностных знаний)
и еще мне очень нравится, что у тебя даже если ошибка выходит или баг, то это не за кадром, а показываешь, как решаешь и походу объясняешь.
Очень живое видео.
мммуа)))) умничка) много всего нового узнал и попрактиковал) Спасибооо и лайк)
Добрый день, Елена! Спасибо большое за урок! Старалась повторить, что-то получилось, что-то нет. Буду пересматривать и править. Спасибо за мотивацию и прекрасную подачу.
Спасибо за полезный контент! Особенно за TypeScript!
спасибо вам за такое отличное видео, у вас очень качественный контент👍
мы как раз учимся на курсе писать тудолист) интересные фишки подчеркнул. спасибо за ваш труд!
Елена это первый туториал , который я посмотрел из всех ютуберов, ну вас просто приятно слушать )))) и не ту той самой монотонной речи, продолжайте в том же духе.
Спасибо! 🌹🌸
Добрый день! Сейчас ищу работу, только что отучилась, с удовольствием пошла бы на первую работу под ваше начало. Вы объясняете так понятно, так приятно вас слушать, все сразу раскладывается по полочкам. Спасибо, что вы это делаете для нас😍
Привет! Где училась?
Оо, спасибо! Сегодня посмотрю, лайк заранее :3
Здравствуйте, недавно наткнулся на ваш канал, очень всё нравится! Желаю вам процветания!
Спасибо! ❤️
Агонь! Супер познавательно!
Спасибо огромное! Видео очень крутое!
Ты большая молодец! Продолжай в том же духе!
Прекрасно, с сеня подписка!
Smart and charming person. Thank you for turning your knowledge into such high-quality video content, absolutely free. As long as RUclips exists I will be your subscriber.
Thank you sooo much!!! ❤️
Только ночью приснился туду лист , после Реакт туториала, а тут такой подарок.
StrictMode выполняет рендеринг компонентов дважды в development режиме, но не в production. По мнению разработчиков React - это позволяет обнаружить некоторые проблемы в вашем коде, если таковые будут и предупредить Вас об этом
Отличный туториал, спасибо :) проблемы с TS в версии 4.0+ решается добавление дополнительного вызова create перед добавление middleware: create()(devtools(...)). И кстати у zustand есть нативный middleware для работы со стораджами - persist, в версиях 4.0+ кастомный из видео не работает из-за того что тип State - depricated и вообще TS ругается :)
давно тудусов не было
Это мое первое видео от Елены. Мне очень понравилось два момента - "тасочки" (приятно слушать) и последние 10 минут крышесносных миддлваров с тайпскриптом. До этого было все понятно, Цуштант для меня новый стейт менеджер, но после Редакса очень понятный и приятный, а вот middleware с localStorage, да еще на TS - вот это для меня сложно и интересно! Спасибо!
❤❤❤
Спасибо!!!
Классное видео и подача. 2 раза из-за StrictMode? Спасибо за уроки
Елена огомное спасибо за прекрасное видео, с достаточо подробными объяснениями!)
Это первое видео, которое я смотрю у вас на канале. И у меня возник вопрос, а у вас на канале есть видео с подключением PostgresSQL к NodeJs? Если да, то можно пожалуйста ссылочку, заранее спасибо)😊
Здравствуйте, рада что видео понравилось! Пока про NodeJS в связке psql нет, только начинаю погружаться на канале в темы реакта, ноды и всех связующих. Постепенно добавлю и этот урок. Тема действительно классная!
Пока можете посмотреть в сторону либы pg (node-postgres).
Елена, спасибо за ваши видео. Хотелось спросить, вы в настоящее время всегда используете только React на стороне фронта или также знакомы с vue или angular ?
Здравствуйте, рада что видео понравилось. ❤️ С vue и angular не работала, на последних трех работах был React и в целом меня в нем всё устраивает, позволяет решить любые задачи которые нужны.
Спасибо вам за творчество Елена, что скажете про vue? Стоит ждать от вас уроки по углубленному js?
Что интересно по углублённому js? Про vue пока в ближайшем будущем нет, на последних трех работах был реакт и пока с ним :)) Но если в будущем буду пробовать для самообучения скорее больше либы, то возможно что-то сниму. Про реакт, nodejs, typescript точно видео будут!
@@webelart Плюсую за nodejs, очень интересно.
спасибо за новый туториал❤
скажите, пожалуйста, а есть ли возможность привязать параллакс к движению телефона🤔 его акселерометру/ гироскопу
Да такое можно сделать, сама не реализовывала, но на одной из прошлых работ в команде делали подобную штуку.
@@webelart спасибо, чтож звучит как вызов)
Бага с двойным созданием задачи происходит из-за StrictMode. Это должно проявляться только в режиме разработки а не продакшена. Решение: убрать обёртку, либо забить)
Да, мы там уже поняли. Удаляем. ❤
Спасибо за видео)
не знаю писал ли уже кто-то, что бы при выделении инпута не было бордера, то указать outline: none;
Рада, что помогла! Да такое можно сделать, но не всегда рекомендуют, т.к. интерфейсом можно пользоваться через табы и только таким способ узнать что выделено, что нет.
Но я тоже время от времени удаляю эти выделения, если нужно чтобы красиво :)))
красивая девочка, и кодер.
эх, стар я уже)
Отличный видеоурок, будучи работающим разработчиком подчерпнул для себя новую информацию. Единственное, что мне показалось, слег неясно объяснённым - работа с миддлварами под локальное хранилище.
Елена, доброе время суток. Познакомился с zustand, благодаря вашему видео. Огромное благодарю. Сейчас пишу простенький сайт с использованием zustand, и при клике на input type="checkbox" ни чего не происходит. И в связи с этим, можно ли с вами связаться для просмотра кода и выявление ошибки? Заранее благодарю.
Здравствуйте, хочу спросить если у вас платные курсы или что-то подобное? Я изучал html и css, теперь хочу двигаться дальше, вот нашел ваш канал и после просмотра некоторых видео, сделал для себя вывод что вы хорошо объясняете
Пока на текущий момент нету. Рада, что материал и подача нравятся. ❤️
Для меня познавательно, благодарю.
Но почему вы не пользуетесь emmet?
Есть какой-то сакральный смысл?)
Нет, нету сакрального смысла :) Просто не использую.
Такое мне пока рано делать, но лайк не глядя за отличный урок! А скажите пожалуйста, на сколько хорошо надо знать вёрстку, если планируешь работать именно с реакт и Дж. с?
Здравствуйте, Константин! Вёрстка вам здесь в любом случае пригодится, что по факту это такое: когда мы создаём теги (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 Спасибо!
как сделать билд и перенести на хостинг?
Только начал смотреть, уверен что видео будет супер. Кстати название Vite взято с французского, что означает быстро и читается как "вит".
Аааа! Ох уж эти названия! :D Спасибо! Это прямо как zustand, первоначально читала его как зустанд, потом оказалось, что слово немецкое и правильно зистанд :))))
@@webelart. Правильно будет зуштанд с немецкого
@@justauser8517 Да я уже видела коммент, что слово немецкое. Опять же, ох уж эти названия :)
@@webelart правильно Цуштанд. Если уж по немецки.
@@user-td5bw9rt2g Короче всё зустанд! 😂 Успокоились! Сегодня на работе спросила у венгерца, он несмотря на то что знает немецкий тоже называет его зустанд. В общем норм :D
Добрый день! Подскажите, почему на 1:08 может возникать ошибка:
"Свойство "children" этого тега JSX ожидает один дочерний объект типа "ReactNode", однако было предоставлено несколько дочерних объектов."
вдруг кому пригодится: в map надо добавить return
Елена, посмотрите в сторону UUID для генерации уникальных идентификаторов
Да знаю про него, тема хорошая! Думаю в текущем примере не хотелось использовать доп. либу и как-то ограничиться маленькой функцией, но на бэкенде, конечно, лучше переходить к более профессиональным id. Кстати посмотрела сколько весит, в 3 раза больше чем zustand bundlephobia.com/package/uuid@8.3.2
в 18 реакте появился новый хук useId() как раз для генерации уникального случайного идентификатора =)
@@frusen_sol Воу воу воу!!! Срочно надо изучать! 😍
sctrict mode всегда так отрабатывает два раза. удалить его и все. на 39 минуте
Написал приложение по видео, все работает круто кроме одной мелочи - при редактировании заголовка задачи, новый заголовок не сохраняется в localStorage
Для того чтобы это исправить, в компоненте InputTask в input нового поля при событии onKeyDown передавайте onEdited(id, editValue), editValue - вместо title
Т.е по факту вы просто передаете старое значение, а нужно передавать новое из состояния
лишний ререндер вызывается из-за 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и, все равно воспринимается тяжело
время 36:36 на 35 строке лучше сделать так set({ tasks: [newTask, ...tasks] })
Так лучше выглядит :)
Стрик мод вызывал юз эффект два раза с пустыми зависимостями
Забавно, на ванильном js запросто, но реакт и другие библиотеки/фреймворки тёмный лес.
@@awenn2015 Та я и так не парюсь, но я не понял что ты написал и твою озабоченность.
А какой смысл использовать сборщик? Чем create react app с typescript темплейтом не угодил?
Основной плюс vite очень быстрое локальное компилирование. Изменения в разработке собираются за доли секунды
Я не так много работала с такими сборщиками, обычно на проектах кастомные.
Первоначально я использовала create-react-app для быстрой сборки примеров и вроде бы ок. Но когда с typescript установила, у меня возникли проблемы с scss и module. Начала разбираться в чём проблема потратила некоторое кол-во времени. И решила попробовать vitejs, буквально создала проект, пару команд и всё завелось моментом, модули css, typescript, svg без проблем вообще.
На мой взгляд такие сборщики должны работать без всяких затруднений и с минимальными затратами сил, запустил - работает. С create-react-app уже не первый раз какие-то глюки были. Плюс он довольно давно уже не поддерживается нормально.
11:07 зачем восклицательный знак на строке 6?
Это для тайпскрипта. Получение document.getElementById('root') не гарантирует, что в html документе есть элемент с id=root, typescript ругается, т.к. для функции ReactDOM.createRoot контейнер должен быть обязательно. И поэтому добавляем !, что говорит typescript-у мы уверены document.getElementById('root') !== null
Зустанд получше Рудакса будет конечно, сами на работе тоже зустанд юзаем)
О, тоже zustand используете! 🔥🔥🔥
@@webelart в bundlephobia смотрели размер бандла?
@@sergeys4732 Сейчас проверила 1.1кб, с редаксом не такая чтобы разница 1.6кб... Вот у preact и preact-dom уже повыше, если с react сравнивать.
@@webelart а редакс тулкит?) там что то цифры совсем уж большие
@@sergeys4732 С этим не работала. Интересно надо поизучать. Максимум туда redux-thunk подключала, ну и может какие-то либы для работы с API.
скоре из за включенного useStrinct в main ts
strick mode => 2x useEffect
Елена, подскажите какой у вас macbook?
13 дюймов, M1, memory 16GB
@@webelart хочу купить себе макбук, подскажите пожалуйста, по личному опыту, не мало ли вам 13 дюймов для разработки сайтов? все таки 13 и так кажется маловато, так ещё и при открытом дев тулз справа, так вообще)) как вам по ощущениям?
@@user-ij3wr1ym1c Тут всё просто. 15 дюймовые действительно более приятны если за ними работать изолированно, но у меня всегда есть внешний монитор, обычно 27 дюймов. И поэтому мне ок. А маленькие беру потому что тяжело таскать 15 дюймовые, и если я куда-то еду и долго на ногах, то прямо жуть, хоть они и тонкие и вроде бы лёгкие, всё-равно :))) Тем не менее даже с пятнашкам у меня внешний монитор тоже был, на него прикольно уводить окна браузера, консоль, а на основном писать код :)
@@webelart круто, спасибо большое за развернутый ответ!
40:26 updateTitle
Спасибо большое за ваши великолепные уроки, Елена! Хочу спросить у вас, повлияла ли текущая сложная ситуация в России на разработку, просто сейчас только учусь вёрстке и всему подобному и тревожусь что все возможно это зря и Россия теоретически может быть отброшена назад в развитии и не бессмысленны ли мои потуги к учёбе
Если тебе нравиться этим заниматься то точно не забрасывай, есть фриланс, оутсорс, комуто там знакомому знакомому чтото сделать, на самый худейший конец можно просто переехать... Главное стать хорошим толковым девом, дальше само пойдет... удачи тебе :)
@@1fractal спасибо большое за поддержку)
Наоборот спецы сейчас востребованы как никогда
Я отпишусь по Лондону, т.к. здесь живу. Здесь все хорошо по прежнему востребовано и предложения от рекрутеров продолжают поступать. Недавно даже из меты вновь писали :)
Ребята всё классно написали. Поддерживаю!
@@webelart благодарю за ответ)
Zustand произносится как /ˈʦuːʃtant/ ~ цуштант. Это немецкое слово, означающее "статус". Если уже читать на англ. манер, то это было бы ~ зустэнд (по типу zeus-tand) :)
На английский манер - это зистанд 😜
@@webelart а почему 'zus' должно произноситься, как "зис"?
@@jiauyjiauy3777 Да забейте, наслаждайтесь вечером 😘❤️
@@webelart да мне чисто интересно узнать (не более того), т.к. я зануда с лингвистической точки зрения. Да и можно на ты))
@@jiauyjiauy3777 Если попробуете это слово запихать в Google Translate и нажать озвучку, то произносить зистанд. Звучит странно согласна, я его зустандом называю, но с немецкого это цуштанд :D
было бы круто увидеть подобное на веб компонентах вместо фреймворков и либ
- из-за него идет перерисовка 2 раза
А в мире JS существуют примеры кроме ToDo листа?
канал it--kamasutra там разбирается социальная сеть.
я влюбился.выходите за меня !!!!
Вот так сразу? :)
из редакса надеюсь переключаться на zustand не придётся в дальнейшем
У нас в компании как раз переключились 😅 всмысле на старом приложении редакс.
@@webelart понял :)
Туду туду тудутудутуду тудутутуууууу дудудуду
Видео хорошее!! давай еще пилить тайпскрипте!))) и огромная просьба: не выкладывать в 60 кадрах, даже в 50 и даже в 30))). Для статических видео частота не нужна, а для кого-то это может быть критичным: тариф по трафику, ограничение по скорости/качеству. Спасибо
25 кадров должно быть достаточно, посмотрю при след. монтировке. Последние видео 60 кадров, т.к. сначала монтирую кодинг съёмку, а она с компа 🙂 С камеры по умолчанию 25, и с какого источника начинаю сначала там настройки по умолчанию и берутся. В общем пофикшу, спасибо за комментарий 😘❤️
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.
Если это немецкое слово, то произносится «цуштанд», означает состояние.
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
не зистанд, а цуштанд. это немецкое слово означает состояние
Zustand это немецкое слово. Значит "статус". Посмотрите его произношение в гуглтранслейте, и не Вайт, а Виит.
О боже, ещё один буквоед! Зустанд и Вайт!
Чтобы написать микроприложение из двух конпок, нужно столько всего установить. Жесть какаято
Понимаю ваше беспокойство, для такого небольшого приложения кажется проще на html, css, js все написать и будет норм. :) Но
1. Цель основная обучение, посмотреть на технологии, как можно использовать. Писать здесь полномасштабное приложение можно, но времени гораздо больше займёт. ToDo листы - это как правила классика для практики. Они содержат все базовые функции: удаление, обновление, редактирование.
2. В реакте мне нравится простота работы с DOM. Даже в таком небольшом примере. Т.к. когда знаешь как быстро всё настроить, а мы по факту сделали здесь всё быстро vitejs пару секунд и всё готово :) А дальше уже экспорты работают, любые лимбы какие захотите из npm быстро можно установить.
3. Когда приложение становится большим, многостаночник даже, крупнее магазин и т.д. У реакта есть много преимуществ, это по факту SPA и пользователь гораздо быстрее получает информацию на странице, т.к. перезагрузки между страницами нет, идёт перерисовка только нужных частей. Ну и т.к. react - это js библиотека, то при разработке SPA работать на чистом js станет довольно сложно.
4. Этот стек востребован на рынке. И довольно хорошо востребован: react, typescript , и как я вижу zustand тоже используют ребята судя по комментариям.
❤️
Я чуть со стула не упал, услышав: "На порту localhost"!
Порт: это 3000, а localhost - это адрес машины на котором запущен скрипт.
А так, спасибо за объяснения)
Оговорилась, что ж тут поделать. Этот момент заметила ещё при записи, и вырулила в видео через пару секунд, но решила не акцентировать внимание на ошибке. От программистов ничего не скроешь :)
Рада, что контент понравился! ❤️
Мне кажется на чистом js быстрее будет, но потом расширить это на чистом js геморрой.
c localStorage немного каша началась - скопировали вставили не заработало потом заработало)
Всё как в жизни, согласитесь? 😊
чтото хочется убрать редакс подальше от себя, уж как бы я его не любил много бойлеркода((
эта библиотека выглядит поудобнее
Такую архитектуру папок видел на рельсах 😁
Видео хорошее но лучше текст заранее подготовить и проговорить
Если текст заранее готовить, то видео будет искусственным. Я предпочитаю живую съёмку и презентации в том числе. Так подача выглядит более интересной и настоящей. Заранее готовлю обычно только примеры, т.к. иначе уйдёт много времени, но и даже эту подготовку делаю не всегда. ❤️
Не зистанд, а зустанд. П.С. Елена, вы действительно в Лондоне работаете? 😲
Правильно цуштант и это немецкое слово. А если в google.translate вобьёте, то на англ. будет зистанд. Да, я живу в Лондоне.
@@webelart 1. вы то упорно произносите зистанд
2. какая разница как на немецком? слово то означает технологию американского происхождения. Происхождение самого слова тут уже не имеет значения.
@@ashimov1970 В англ варианте читается зистанд, в чём ваша проблема?
@@ashimov1970 Почему вы решили, что технология американского происхождения?
@@webelart 1. в любом случае не немецкого. по доступной в инете инфе его создателями являются создатели Recoil, а создателем последнего является по инфе с сайта Recoil японец.
2. в ютубе все англоязычные блогеры, за исключением некоторых, называющих его по немецки зюштанд, называют его зустанд или застэнд. НИ ОДНОГО не слышал, называющего его зистанд
Ничёнипанятна
Елена Литвинова - если хотите больше подписчиков и просмотров- делайте 10 видео для тупых и одно для умных.
Опа, а чего Лондон? А как же родина? Англосаксы же плохие, не?
Спасибо за проделанную работу!
Есть небольшие замечания и пожелания:
1. Обратите внимание на произношение некоторых английских слов (например Vite, install);
2. Почему не пользуетесь возможностями ускоренного набора кода (как встроенными в VSCode, так и сторонними плагинами)?
3. Не совсем понятно применение тегов article и section;
4. Почему при выполнении задачи она удаляется? Обычно текст задачи перечёркивается или фон задачи меняется. Странный функционал )
5. Для удобства также можно использовать в проекте абсолютные пути (относительно src).
Сколько незнакомых слов в названии)
:))))
не вайт а вит
Это всё, что вы вынесли из урока? 🤔
Немного критики: Не правельная подача матерьяла , а именно - непоследовательно. Для новичков очень запутано и не понятно, некоторые сушьности определены заранее .
Текущее видео уже предполагает владение реактом. Если вам нужен контент для новичков ищите другой материал или дотягивайтесь и задавайте конкретные вопросы, что не понятно, что вы сами вложили, чтобы стало понятнее.
russian is difficult understand ... i want to learn russian language ..
:))) I have an English Channel as well. ❤️
This one ruclips.net/channel/UCdw1R35g3uDj4LVt1-aS-hA :)
Женщина в программировании?!😱😱
Дефолтная таска 8-)) Надеюсь, вы в жизни так не говорите, англицизмов в русском уже слишком много. Привет из Ирландии...
Елена вам срочно нужно вернуться в Россию, бросайте этот Лондон,в Россию срочно!!!!Мы ждём вас ,рано или поздно вас выгонят из Лондона а в России вам будут рады!
Чтобы Два раза не вызывалось надо убрать из main.tsx
Ага там уже разобрались! 😅 Спасибо!
Чтобы 2 таски не создавались в useEffect с deps = [] нужно strictMode убрать