React JS

☹️ Проблема устаревших замыканий и способы ее решения в React. Часть 1 Замыкания — пожалуй, одна из самых пугающих концепций JavaScript. Даже всезнающий ChatGPT скажет вам это. Во всяком случае, это одна из самых скрытых особенностей языка. Вы используете замыкания, когда пишите какой-либо React-код, чаще всего даже не осознавая этого. Но в конечном итоге от этой фичи никуда не деться: чтобы разрабатывать сложные и производительные React-приложения, придется овладеть ею. Попробуем проникнуть в очередную тайну JavaScript-кода, чтобы выяснить: 🟡что такое замыкания, как они появляются и зачем нужны; 🟡что такое “устаревшее” замыкание и почему оно возникает. Предупреждение: если вы никогда не сталкивались с замыканиями в React, эта статья может взорвать ваш мозг. Рекомендую запастись достаточным количеством шоколада, чтобы стимулировать клетки мозга во время чтения. ‼️Задача Представьте, что вы реализуете форму с несколькими полями ввода. Одно из полей представляет собой очень тяжелый компонент из какой-то внешней библиотеки. У вас нет доступа к его внутренним элементам, поэтому вы не можете устранить проблемы с его производительностью. Но этот компонент очень нужен в форме, поэтому вы решили обернуть его в React.memo, чтобы минимизировать повторные рендеринги при изменении состояния формы. Как-то так: const HeavyComponentMemo = React.memo(HeavyComponent); const Form = () => { const [value, setValue] = useState(); return ( <> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} /> <HeavyComponentMemo /> </> ); }; Пока все хорошо. Тяжелый компонент принимает только одно строковое свойство, например title, и коллбэк onClick. Это происходит при нажатии кнопки “done” (“готово”) внутри компонента. Отправить данные формы также довольно просто: достаточно передать title и onClick. const HeavyComponentMemo = React.memo(HeavyComponent); const Form = () => { const [value, setValue] = useState(); const onClick = () => { // сюда передаем данные формы console.log(value); }; return ( <> <input type="text" value={value} onChange={(e) => setValue(e.target.value)} /> <HeavyComponentMemo title="Welcome to the form" onClick={onClick} /> </> ); }; А вот теперь перед вами встает дилемма. Как известно, каждое свойство компонента, обернутое в React.memo, должно быть либо примитивным значением, либо постоянным между повторными рендерами. В противном случае мемоизация не сработает. Поэтому технически нужно обернуть onClick в useCallback: const onClick = useCallback(() => { // здесь передаем данные }, []); Но, как известно, хук useCallback должен иметь все зависимости, объявленные в его массиве зависимостей. Поэтому, чтобы отправить данные формы в компонент, нужно объявить эти данные как зависимость: Смотреть

🔥 Дайджест полезных материалов из мира : React за неделю Почитать: — react-query vs SWR и избавимся ли мы от Redux? — Абстрактные типы данных. Изложение для начинающих — Генерируем простой web интерфейс для просмотра таблиц PostgreSQL — Паттерны реактивности в современном JavaScript — Ликбез по распространенным Client-Side уязвимостям — Подробная настройка Content Security Policy (CSP) — RxJS: как операторы высшего порядка упрощают код — Задачи про PEG-парсеры — Просто о Deep #1 — Добавление server side Open Graph и прочего SEO в существующую SPA — JU Query: Web App for community based learning (Project) — React interactive Components | Tabs — React Content Rendering — How to start building a Next.js project — Sync Files to Public Folder in Next.js using Chokidar — Deep dive into understanding Props in React — 👹🔥 How to Escape JS Framework Hell (Including React) 🔥👹 — Crie um modelo de interface Login / Sign Up (UI) em React utilizando Bootstrap 5 — 🚀 Mastering Advanced Complex React useContext with useReducer ⭐ (Redux Style) ⭐ — Talks from SeattleJS Conf 2023 (free) Посмотреть: 🌐 CSS Anchor Is The Best New CSS Feature Since Flexbox (⏱ 15:39) 🌐 New useFormStatus React Hook (⏱ 01:00) Хорошего дня!

Share Widget — крутой виджет "Поделиться", внутри которого расположены ссылки на соцсети. Реализован с помощью JavaScript. https://codepen.io/quinlo/pen/NWdMGmq @javascriptv

Научитесь программировать на языке JavaScript и создавать пользовательские интерфейсы сайтов и приложений. На профессии «Фронтенд-разработчик» вы за 10 месяцев: ✔️Изучите JavaScript в связке с HTML и CSS и освоите React для создания сложных компонентов, которые легко поддерживать и использовать повторно.  ✔️Решите более 420 задач в браузере и создадите 4 проекта для портфолио на GitHub и выполните 150 тестовых заданий от наших партнёров. 🎁 Оцените формат и решите, стоит ли продолжать! Вводные ознакомительные курсы профессии доступны бесплатно сразу после регистрации! Реклама. ООО "ХЕКСЛЕТ РУС". ИНН 7325174845. erid: 2RanymjL3zx

Бесплатные сертификационные курсы для изучения веб-разработки ▪️ Web Development Courses and Tutorials (Udemy) https://udemy.com/topic/web-development/free ▪️ Web Development Courses (Coursera) https://coursera.org/courses?query=web%20development ▪️ Web Development Programs (Udacity) https://udacity.com/courses/all?field=school-of-programming&price=Free ▪️ Web Development Tutorials (freeCodeCamp) https://freecodecamp.org ▪️ Become a Web Developer (CodeAcademy) https://codecademy.com/learn/paths/web-development ▪️ Web Development Training (LinkedIn Learning) https://linkedin.com/learning/topics/web-development ▪️ Front End Web Development Courses (Udemy) https://udemy.com/topic/front-end-web-development/free ▪️ Web Development Courses by Khan Academy https://khanacademy.org/computing/computer-programming ▪️ Complete Free Web Development Course (YouTube) https://youtube.com/embed/U-JhRjRaD4A ▪️ Web Development Courses (edX) https://edx.org/learn/web-development @react_tg

Стартануть в IT быстро и эффективно — подготовительный курс по Frontend-разработке. Изучаем базу за 14 дней — всего за 990 рублей! 🗓 Начинаем 7 сентября. Даем: 72 урока с практикой в браузере, 3 онлайн вебинара и 1 сессию лайвкодинга с практикующим разработчиком. Получаем: крепкие знания базы языка, умение понимать код и первую программу на JavaScript, написанную вместе с наставником. 🔜 Запишитесь прямо сейчас!

🖥 Разделение пользовательского интерфейса и логики в React: чистый код с безголовыми компонентами В сфере фронтенд-разработки встречаются сложные термины и парадигмы. “Безголовый пользовательский интерфейс” (“headless UI”) или “безголовые компоненты” (“headless components”) вполне можно отнести к этой категории. Не одни вы ломаете голову, пытаясь понять, что они означают. На самом деле, несмотря на названия, эти понятия представляют собой впечатляющие стратегии, способные значительно упростить управление сложными пользовательскими интерфейсами. Безголовые компоненты обладают внушительным потенциалом: гибкостью, возможностью многократного использования и способностью улучшить организацию и чистоту кодовой базы. Эта статья поможет разобраться в том, что представляет собой данный паттерн, чем полезен и как может изменить ваш подход к проектированию интерфейсов. Для наглядности начнем с рассмотрения простого, но эффективного применения безголовых компонентов: извлечения хука “useToggle” из двух похожих компонентов для уменьшения дублирования кода. Хотя этот пример может показаться тривиальным, он облегчает понимание основных принципов работы безголовых компонентов. Выявление общих закономерностей и выделение их в многократно используемые части позволит упорядочить кодовую базу и проложить путь к более эффективному процессу разработки. Но это только вершина айсберга! По мере углубления мы столкнемся с более сложным примером применения этого принципа: использованием Downshift — мощной библиотеки для создания продвинутых компонентов ввода. Надеюсь, что к концу статьи у вас будет не только понимание безголовых компонентов, но и уверенность в том, что вы сможете интегрировать этот мощный паттерн в свои проекты. Итак, избавимся от путаницы в голове, чтобы воспользоваться преобразующим потенциалом безголовых компонентов. Компоненты Toggle (тумблеры) являются неотъемлемой частью многочисленных приложений. Они являются “молчаливыми исполнителями” таких функций, как “запомнить меня на этом устройстве” (“remember me on this device”), “активировать уведомления” (“activate notifications”), а также популярного “темного режима” (“dark mode”). Компонент ToggleButton Создать такой тумблер в React легко. Рассмотрим его. const ToggleButton = () => { const [isToggled, setIsToggled] = useState(false); const toggle = useCallback(() => { setIsToggled((prevState) => !prevState); }, []); return ( <div className="toggleContainer"> <p>Do not disturb</p> <button onClick={toggle} className={isToggled ? "on" : "off"}> {isToggled ? "ON" : "OFF"} </button> </div> ); }; ▪Читать дальше @react_tg

Вы ещё успеваете поступить в онлайн-магистратуру МФТИ «Финансовые технологии и аналитика» 👩‍🎓Ближайшие даты экзаменов — 4 и 19 сентября. ➕Диплом очной магистратуры гособразца по направлению 38.03.05 «Бизнес-информатика». ➕Онлайн-обучение из любой точки мира. ➕Углубленная специализация в сфере финтех-разработки или аналитики. ➕Гранты на запуск своего стартапа в области Data Science/AI/ML до 3 млн ₽. ➕Более 5 проектов в портфолио: реальные задачи от Сбера, ВТБ, Ozon Fintech, Альфа-Банка и других финтех-компаний уже с первого семестра. ➕Возможность совмещать с работой и развивать корпоративный проект в качестве дипломного. ➕Рассрочка под 3% от Сбера и Минобразования. Платёж во время учебы — до 900 ₽ в месяц. Бесплатный подготовительный курс и запись прошедших консультаций по экзаменам доступны после регистрации. Оставьте заявку, чтобы зарегистрироваться на день открытых дверей и начать готовиться к поступлению: https://netolo.gy/b3n8 Реклама ООО “Нетология” LatgBfeHX

🖥 Hyperscript Tagged Markup — крутая альтернатива JSX, применяющая стандартные шаблоны с тегами, с поддержкой компилятора. ▪Используйте JSX-подобный синтаксис в простом JavaScript (транспилятор не требуется) ▪Пишите код с помощью React/Preact прямо в браузере, а затем компилируйте htm для продакшена ▪Он использует стандартные JavaScript tagged templates и работает во всех современных браузерах 🚀 GitHub @react_tg

🔥 Дайджест полезных материалов из мира : React за неделю Почитать: — Под капотом анимаций в React Native. Часть 2/2: Reanimated and JSI — Подборка VS Code-плагинов для Frontend-разработчиков и не только — Рефлексия в JavaScript и TypeScript: обзор основных техник. Как сгенерировать CLI-интерфейс для класса — Считаем «a=1; b=2; x=pi/3; abcos(x)» — JavaScript повсюду или почему веб-технологии захватили мир — DOM, DI и View: деревья в Angular — Как уменьшали размер VS Code, используя name mangling — сокращение идентификаторов во время сборки — Как показать миллион зданий на карте — и не сломать браузер — Одно PWA, чтоб править всеми — Как запретить разработчику делать не то что нужно? — SysCorp Technology PVT LTD — What is PWA - Progressive Web App? — The Future of Module Federation — I want your opinion! — React Custom Hooks: useDebounce — Rspack 0.3 Release Announcement — Announcing Rspack 0.2 — Full Stack Web Application — Optimizing Performance in React: Best Practices for Speedy Apps — React Custom Hook: useRenderCount Посмотреть: 🌐 NEW Way To Create Variables In JavaScript (⏱ 12:13) 🌐 Help Me Teach You TypeScript (⏱ 00:45) Хорошего дня! @react_tg

🖥 Reactjs ▪Reactjs Hooks, простыми словами ▪useEffect hook, простыми словами ▪Reactjs Hooks изнутри, на модели ▪useSyncExternalStore hook, простыми словами 📌источник @react_tg

⚡Легкий способ получать свежие обновлении и следить за трендами в разработке на вашем языке. Находите свой стек и подписывайтесь: Машинное обучение: @ai_machinelearning_big_data Go: @Golang_google C#: @csharp_ci Базы данных: @sqlhub Python: @pythonl C/C++/: @cpluspluc Data Science: @data_analysis_ml Devops: @devOPSitsec Rust: @rust_code Javascript: @javascriptv React: @react_tg PHP: @phpshka Docker: @docker Android: @android_its Мобильная разработка: @mobdevelop Linux: linuxacademy Big Data: t.me/bigdatai Хакинг: @linuxkalii Java:@javatg Собеседования: @machinelearning_interview 💼 Папка с вакансиями: t.me/addlist/_zyy_jQ_QUsyM2Vi Папка Go разработчика: t.me/addlist/MUtJEeJSxeY2YTFi Папка Python разработчика: t.me/addlist/eEPya-HF6mkxMGIy 🔥ИТ-Мемы: t.me/memes_prog 🇬🇧Английский: @english_forprogrammers 📕Ит-книги https://t.me/addlist/BkskQciUW_FhNjEy

Гайд по использованию RxDB в качестве базы данных для приложений React 🚀RxDB — это реактивная автономная база данных специально для JavaScript-приложений. Она предлагает комплексный API для выполнения действий с базой данных и синхронизации данных между клиентами и серверами. Основная философия RxDB вращается вокруг наблюдаемости (observability), что позволяет разработчикам оперативно управлять изменениями данных и создавать динамический UI. 🔗 Читать

📌 Infinite scrollable and draggable (WebGL)grid - интерактивная бесконечная сетка с возможностью прокрутки, выполненная с помощью SCSS и JavaScript https://codepen.io/ReGGae/pen/eYGyLrP @react_tg

Ищете работу frontend-разработчиком, но боитесь, что вам не хватит опыта и вы провалите собеседование? Приходите на открытое собеседование на позицию junior+ frontend-разработчика в прямом эфире 16 августа в 19.00. На собеседовании будут вопросы по HTML, CSS, JS и будут даны пару задач на решение. Вы увидите, как проводятся настоящие собеседования, поймёте, к чему нужно быть готовым, а в конце сможете задать вопросы и получить рекомендации. Ведущие: ▪️Дмитрий Безуглый, CTO Frogly, работал Frontend Team Lead VK и нанимал разработчиков в VK. ▪️Артур Стамбульцян, Frontend Team Lead Telegram Open Network. Перестаньте бояться собеседований и узнайте, как проходить их лучше! [Зарегистрироваться]

Refs в React: от доступа к DOM до императивного API Одна из полезных особенностей React — абстрагирование от сложного взаимодействия с объектной моделью документа (DOM, Document Object Model). Вместо того чтобы запрашивать элементы, пытаться добавить к ним классы и устранять несоответствия браузера, можно просто писать компоненты, сосредоточившись на взаимодействии с пользователем. Однако иногда все же появляется необходимость в доступе к реальному DOM. И здесь самое важное — разобраться в особенностях Ref и его окружения, научиться их правильно использовать. Сначала рассмотрим, зачем нужен доступ к DOM, как при этом помогает Ref, что такое useRef, forwardRef и useImperativeHandle и как их правильно использовать. Кроме того, посмотрим, как без forwardRef и useImperativeHandle получить подобные результаты. А в качестве бонуса рассмотрим реализацию в React императивных API. 📌 Читать дальше @react_tg

Верстаешь? С 15 по 21 августа проводим бесплатный онлайн-интенсив по Frontend-разработке, где будем учить, как разрабатывать сайты и веб-приложения. Что будет: 1️⃣ Создание полноценного веб-сайта на HTML и CSS Мы научим тебя создавать стильные и функциональные веб-страницы с использованием самых современных технологий. 2️⃣ Оживление страницы с помощью JavaScript Узнаешь, как добавить интерактивность и динамичность в свои проекты. 3️⃣ Использование фронтенд-фреймворка Angular Узнаешь, как использовать этот мощный инструмент для создания масштабируемых и эффективных веб-приложений. 4️⃣ Подключение Backend и загрузка сайта на хостинг Мы научим тебя основам работы с Backend'ом и покажем, как развернуть свой проект на хостинге. 5️⃣ Советы по доработке проекта Получишь ценные советы от опытных разработчиков, чтобы улучшить свой проект и достичь более высокого уровня качества. 👉 Участвуй бесплатно 🚀

🚀Services Section | Learn CSS Garden - интерактивная анимация раздела услуг сайта. Реализована с помощью CSS и JS https://codepen.io/ahmadnasr/pen/KKpvNGY @reacttg

⚛ Как реализовать feature gate в React Feature gate — это высокоуровневый инструмент, позволяющий командам настраивать доступные пользователю функции без обновления кода приложения. • В современной разработке программного обеспечения feature gate, часто называемый feature toggle или feature flag, является важным инструментом для управления релизом новых функций. Посмотрим, как реализовать feature gate во время сборки в React-приложении. Что такое feature gate? Feature gate, также известный как feature toggle или feature flag, — это метод разработки программного обеспечения, позволяющий командам контролировать доступность определенных функций и возможностей в приложении без явного внесения изменений в код. Он предоставляет альтернативу поддержанию нескольких функциональных ветвей в исходном коде, поскольку разрабатываемый код или функция могут быть объединены с основной ветвью путем отключения соответствующего feature gate. Настройка React-проекта Для реализации feature gate в приложении будем использовать React и TypeScript с шаблоном ESLint для настройки шаблонного кода. Если у вас уже есть разработанное ранее React-приложение, шаблон можно не использовать. Реализация feature gate Необходимо реализовать feature gate таким образом, чтобы он позволял переключать как определенный раздел приложения, так и всю маршрутную страницу. Конфигурация feature gate Конфигурация feature flag представляет собой набор пар ключ-значение, которые будут доступны всему приложению, а логика построения маршрутов будет использовать заданные флаги для определения набора маршрутов, доступных пользователю. Можно представить его как объект, в котором ключи будут выступать в качестве имен флагов, а соответствующее значение может быть либо true, либо false. Таким образом, конфигурация будет выглядеть примерно так: const featureFlags = { featureA: true, featureB: false, featureC: true, }; Но данная конфигурация должна быть настраиваемой без необходимости изменения кода, верно? ☝️Одним из способов достижения этой цели является определение файла констант featureFlag.ts, который будет считывать конфигурацию из .env— или json-файла. Мы будем использовать .env-файл для управления флагами функций, а в дальнейшей части статьи рассмотрим, как получить конфигурацию из API и сделать ее динамической в подлинном смысле этого слова. 📌 Далее @react_tg

Как пройти интервью в заграничной компании? • Что нужно чтобы начать собеседоваться за границу? • Где искать вакансии? • Как выбрать страну для переезда и спланировать его? • Как составить CV? • Как проходить разные типы собеседований? • Какие есть лайфхаки для прохождения технического интервью? 🧠 Авторский канал про IT-эмиграцию и релокацию рассказывает как пройти все этапы трудоустройства в заграничную компанию - от отклика на вакансию до торга по зарплате. Автор проходил интервью в десятках IT-компаний Австралии 🇦🇺, Сингапура 🇸🇬 и Европы 🇪🇺, получил обширный опыт трудоустройства и релокейтов, занимался наймом программистов, а теперь делится своим опытом и знаниями с читателями. ⚡️ Есть вопросы? Добро пожаловать: @australia_reporting