❤️

Привет! Где училась?

Спасибо! 🌹🌸

Спасибо! ❤️

Thank you sooo much!!! ❤️

Здравствуйте, рада что видео понравилось! Пока про NodeJS в связке psql нет, только начинаю погружаться на канале в темы реакта, ноды и всех связующих. Постепенно добавлю и этот урок. Тема действительно классная! Пока можете посмотреть в сторону либы pg (node-postgres).

Да такое можно сделать, сама не реализовывала, но на одной из прошлых работ в команде делали подобную штуку.

@@webelart спасибо, чтож звучит как вызов)

❤❤❤

Здравствуйте, рада что видео понравилось. ❤️ С vue и angular не работала, на последних трех работах был React и в целом меня в нем всё устраивает, позволяет решить любые задачи которые нужны.

Что интересно по углублённому js? Про vue пока в ближайшем будущем нет, на последних трех работах был реакт и пока с ним :)) Но если в будущем буду пробовать для самообучения скорее больше либы, то возможно что-то сниму. Про реакт, nodejs, typescript точно видео будут!

@@webelart Плюсую за nodejs, очень интересно.

Рада, что помогла! Да такое можно сделать, но не всегда рекомендуют, т.к. интерфейсом можно пользоваться через табы и только таким способ узнать что выделено, что нет. Но я тоже время от времени удаляю эти выделения, если нужно чтобы красиво :)))

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

@@alexeybudai8511 8 месяцев прошло с того комментария) Я успешно деплою проекты и на том и на этом, попутное используя общие библиотеки типа tailwind или framer motion. И да, react для меня оказался даже проще.

Нет, нету сакрального смысла :) Просто не использую.

Здравствуйте, Константин! Вёрстка вам здесь в любом случае пригодится, что по факту это такое: когда мы создаём теги (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 Спасибо!

Пока на текущий момент нету. Рада, что материал и подача нравятся. ❤️

Да знаю про него, тема хорошая! Думаю в текущем примере не хотелось использовать доп. либу и как-то ограничиться маленькой функцией, но на бэкенде, конечно, лучше переходить к более профессиональным id. Кстати посмотрела сколько весит, в 3 раза больше чем zustand bundlephobia.com/package/uuid@8.3.2

в 18 реакте появился новый хук useId() как раз для генерации уникального случайного идентификатора =)

@@frusen_sol Воу воу воу!!! Срочно надо изучать! 😍

Аааа! Ох уж эти названия! :D Спасибо! Это прямо как zustand, первоначально читала его как зустанд, потом оказалось, что слово немецкое и правильно зистанд :))))

@@webelart. Правильно будет зуштанд с немецкого

@@justauser8517 Да я уже видела коммент, что слово немецкое. Опять же, ох уж эти названия :)

@@webelart правильно Цуштанд. Если уж по немецки.

@@user-td5bw9rt2g Короче всё зустанд! 😂 Успокоились! Сегодня на работе спросила у венгерца, он несмотря на то что знает немецкий тоже называет его зустанд. В общем норм :D

Да, мы там уже поняли. Удаляем. ❤

вдруг кому пригодится: в map надо добавить return

Спасибо, не всегда так получается. Бывает слишком долго :D

Здравствуйте! Вам в любом случае 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и, все равно воспринимается тяжело

Так лучше выглядит :)

О, тоже zustand используете! 🔥🔥🔥

@@webelart в bundlephobia смотрели размер бандла?

@@sergeys4732 Сейчас проверила 1.1кб, с редаксом не такая чтобы разница 1.6кб... Вот у preact и preact-dom уже повыше, если с react сравнивать.

@@webelart а редакс тулкит?) там что то цифры совсем уж большие

@@sergeys4732 С этим не работала. Интересно надо поизучать. Максимум туда redux-thunk подключала, ну и может какие-то либы для работы с API.

Это для тайпскрипта. Получение document.getElementById('root') не гарантирует, что в html документе есть элемент с id=root, typescript ругается, т.к. для функции ReactDOM.createRoot контейнер должен быть обязательно. И поэтому добавляем !, что говорит typescript-у мы уверены document.getElementById('root') !== null

@@awenn2015 Та я и так не парюсь, но я не понял что ты написал и твою озабоченность.

13 дюймов, M1, memory 16GB

@@webelart хочу купить себе макбук, подскажите пожалуйста, по личному опыту, не мало ли вам 13 дюймов для разработки сайтов? все таки 13 и так кажется маловато, так ещё и при открытом дев тулз справа, так вообще)) как вам по ощущениям?

@@user-ij3wr1ym1c Тут всё просто. 15 дюймовые действительно более приятны если за ними работать изолированно, но у меня всегда есть внешний монитор, обычно 27 дюймов. И поэтому мне ок. А маленькие беру потому что тяжело таскать 15 дюймовые, и если я куда-то еду и долго на ногах, то прямо жуть, хоть они и тонкие и вроде бы лёгкие, всё-равно :))) Тем не менее даже с пятнашкам у меня внешний монитор тоже был, на него прикольно уводить окна браузера, консоль, а на основном писать код :)

@@webelart круто, спасибо большое за развернутый ответ!

Основной плюс vite очень быстрое локальное компилирование. Изменения в разработке собираются за доли секунды

Я не так много работала с такими сборщиками, обычно на проектах кастомные. Первоначально я использовала create-react-app для быстрой сборки примеров и вроде бы ок. Но когда с typescript установила, у меня возникли проблемы с scss и module. Начала разбираться в чём проблема потратила некоторое кол-во времени. И решила попробовать vitejs, буквально создала проект, пару команд и всё завелось моментом, модули css, typescript, svg без проблем вообще. На мой взгляд такие сборщики должны работать без всяких затруднений и с минимальными затратами сил, запустил - работает. С create-react-app уже не первый раз какие-то глюки были. Плюс он довольно давно уже не поддерживается нормально.

На английский манер - это зистанд 😜

@@webelart а почему 'zus' должно произноситься, как "зис"?

@@jiauyjiauy3777 Да забейте, наслаждайтесь вечером 😘❤️

@@webelart да мне чисто интересно узнать (не более того), т.к. я зануда с лингвистической точки зрения. Да и можно на ты))

@@jiauyjiauy3777 Если попробуете это слово запихать в Google Translate и нажать озвучку, то произносить зистанд. Звучит странно согласна, я его зустандом называю, но с немецкого это цуштанд :D

Если тебе нравиться этим заниматься то точно не забрасывай, есть фриланс, оутсорс, комуто там знакомому знакомому чтото сделать, на самый худейший конец можно просто переехать... Главное стать хорошим толковым девом, дальше само пойдет... удачи тебе :)

@@1fractal спасибо большое за поддержку)

Наоборот спецы сейчас востребованы как никогда

Я отпишусь по Лондону, т.к. здесь живу. Здесь все хорошо по прежнему востребовано и предложения от рекрутеров продолжают поступать. Недавно даже из меты вновь писали :) Ребята всё классно написали. Поддерживаю!

@@webelart благодарю за ответ)

У нас в компании как раз переключились 😅 всмысле на старом приложении редакс.

@@webelart понял :)

канал it--kamasutra там разбирается социальная сеть.

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.

Оговорилась, что ж тут поделать. Этот момент заметила ещё при записи, и вырулила в видео через пару секунд, но решила не акцентировать внимание на ошибке. От программистов ничего не скроешь :) Рада, что контент понравился! ❤️

О боже, ещё один буквоед! Зустанд и Вайт!

Currently it's not, but I want to start create English videos as well. I think soon I'll start it. ❤️

@@webelart ❤ from Pakistan

Правильно цуштант и это немецкое слово. А если в google.translate вобьёте, то на англ. будет зистанд. Да, я живу в Лондоне.

@@webelart 1. вы то упорно произносите зистанд 2. какая разница как на немецком? слово то означает технологию американского происхождения. Происхождение самого слова тут уже не имеет значения.

@@ashimov1970 В англ варианте читается зистанд, в чём ваша проблема?

@@ashimov1970 Почему вы решили, что технология американского происхождения?

@@webelart 1. в любом случае не немецкого. по доступной в инете инфе его создателями являются создатели Recoil, а создателем последнего является по инфе с сайта Recoil японец. 2. в ютубе все англоязычные блогеры, за исключением некоторых, называющих его по немецки зюштанд, называют его зустанд или застэнд. НИ ОДНОГО не слышал, называющего его зистанд

Понимаю ваше беспокойство, для такого небольшого приложения кажется проще на html, css, js все написать и будет норм. :) Но 1. Цель основная обучение, посмотреть на технологии, как можно использовать. Писать здесь полномасштабное приложение можно, но времени гораздо больше займёт. ToDo листы - это как правила классика для практики. Они содержат все базовые функции: удаление, обновление, редактирование. 2. В реакте мне нравится простота работы с DOM. Даже в таком небольшом примере. Т.к. когда знаешь как быстро всё настроить, а мы по факту сделали здесь всё быстро vitejs пару секунд и всё готово :) А дальше уже экспорты работают, любые лимбы какие захотите из npm быстро можно установить. 3. Когда приложение становится большим, многостаночник даже, крупнее магазин и т.д. У реакта есть много преимуществ, это по факту SPA и пользователь гораздо быстрее получает информацию на странице, т.к. перезагрузки между страницами нет, идёт перерисовка только нужных частей. Ну и т.к. react - это js библиотека, то при разработке SPA работать на чистом js станет довольно сложно. 4. Этот стек востребован на рынке. И довольно хорошо востребован: react, typescript , и как я вижу zustand тоже используют ребята судя по комментариям. ❤️

Всё как в жизни, согласитесь? 😊

Если текст заранее готовить, то видео будет искусственным. Я предпочитаю живую съёмку и презентации в том числе. Так подача выглядит более интересной и настоящей. Заранее готовлю обычно только примеры, т.к. иначе уйдёт много времени, но и даже эту подготовку делаю не всегда. ❤️

:))))

Это всё, что вы вынесли из урока? 🤔

:))) I have an English Channel as well. ❤️

This one ukposts.info/the/dw1R35g3uDj4LVt1-aS-hA.html :)

Текущее видео уже предполагает владение реактом. Если вам нужен контент для новичков ищите другой материал или дотягивайтесь и задавайте конкретные вопросы, что не понятно, что вы сами вложили, чтобы стало понятнее.

Ага там уже разобрались! 😅 Спасибо!