React JS

🖥 15 обязательных шпаргалок для веб-разработчиков По ссылке вы найдёте подборку шпаргалок для разработчиков, которые содержат основные синтаксические конструкции и команды для работы с различными технологиями и языками программирования. Шпаргалки по CSS Flexbox, Grid, React, Git, Node.js, Django и не только ждут вас тут: https://dev.to/ishratumar/15-must-have-cheatsheets-for-developers-1n92 @react_tg

Попасть фронтендером в Яндекс за выходные — реально 23–24 сентября приходите на Wekeend Offer Frontend. Для этого нужно зарегистрироваться и решить фронтенд-квиз. После вы сможете за 2 дня пройти технические секции, познакомиться с нанимающими командами и получить офер в интересный проект. В мероприятии участвуют 17 команд: HR Tech, Поиск, Рекламные продукты, Yandex Cloud, 360, Яндекс Браузер, Бизнес-приложения, Умный дом, Yandex Infrastructure, Лавка, Еда, Недвижимость, Аренда, Авто.ру, CM.Expert, Путешествия и Буткемп. Вы сможете поговорить с ребятами и узнать, как работается в проектах. Если всё сложится хорошо — сразу же получите офер. Помогаем релоцироваться по РФ, нанимаем в офисы по всей стране. Узнать подробности и зарегистрироваться можно здесь. Реклама. ООО "Яндекс". erid: 2Vtzqx6jEoJ

🖥 Проблема устаревших замыканий и способы ее решения в 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 должен иметь все зависимости, объявленные в его массиве зависимостей. Поэтому, чтобы отправить данные формы в компонент, нужно объявить эти данные как зависимость: const onClick = useCallback(() => { // сюда подаются данные console.log(value); // добавление значения к зависимости }, [value]); Дилемма заключается в следующем: даже если onClick мемоизирован, он все равно меняется каждый раз, когда кто-то набирает ввод. Поэтому оптимизация производительности бесполезна. 👆 Далее 👆 Часть 2

📂3D Cards - красивые карточки с 3D эффектом. https://codepen.io/mubangadv/pen/YzJNbOa @react_tg

Работу найти проще, когда вы уверены в своих знаниях и коде. Изучайте актуальные стеки и технологии на курсах для разработчиков от Яндекс Практикума, получайте дополнительные навыки и зарабатывайте больше 🫶🏼 На курсах можно: – освоить Go и С++ для бэкенда на продвинутом уровне; – прокачаться от джуна до мидла во фронтенде и бэкенде; – погрузиться в React; – научиться тестировать веб-приложения на Java и Python; – разобраться в алгоритмах и структурах данных для работы и собеседований; – освоить методологию DevOps для эксплуатации и разработки. Выбирайте IT-направление, оценивайте уровень своих знаний с помощью бесплатного теста, проходите онлайн курс и становитесь самым подходящим кандидатом на желанную должность.

🔥 Дайджест полезных материалов из мира : React за неделю Почитать: — Создатель Ruby on Rails: «Turbo 8 отказывается от TypeScript» — Как отправлять пользовательский интерфейс по API — Проблема код-ревью: ESLint — больше, чем просто «extend» — Бот-сказочник, или как генерировать истории с помощью ChatGPT и Telegram — 9 лучших консольных файловых менеджеров Linux — Создаём с нуля своё BIM-приложение для просмотра моделей IFC формата в браузере на основе open-source библиотеки IFC.js — Обертка для indexedDB / localStorage /… — Как грамотный подход аналитиков может сэкономить бюджет компании за счет изменения подхода к реализации проекта — Ускорение в 30 раз — requestIdleCallback — Повышаем продуктивность разработки: магия общей ESLint конфигурации — Создание приложения для распознавания текста с изображений и аудиофайлов — 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) Хорошего дня! @react_js

Go

🖥 Крутой ИИ сервис, который конвертирует дизайн Figma в рабочий код на HTML + CSS и React. Не нужно делать группировку элементов вручную — сервис справляется с любым дизайном, на выходе получается вполне неплохой код за пару кликов! 📌Попробовать можно тут. @react_tg

🎉6 архитектур API и как они работают, которые вы должны знать @react_tg

☹️ Проблема устаревших замыканий и способы ее решения в 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