17266
React программирование @haarrp - admin @itchannels_telegram - 🔥лучшие ит-каналы @javascriptv - продвинутый javascript @programming_books_it - бесплатные it книги @ai_machinelearning_big_data - ml № 5037566384
⚡️ Cypress — это современный инструмент для тестирования фронтенда, созданный для решения ключевых проблем, с которыми сталкиваются разработчики и специалисты по качеству при тестировании веб-приложений.
В отличие от Selenium, Cypress обеспечивает более быстрые, простые и надежные тесты. Он позволяет легко настраивать, писать, запускать и отлаживать различные типы тестов, включая сквозные, компонентные и модульные.
Подходит для любых приложений, работающих в браузере, и поддерживает тестирование в разных браузерах, обеспечивая стабильные результаты и эффективную интеграцию в CI-процессы.npm install cypress --save-dev
▪Github
@react_tg
⚡️ Огромная коллекция разборов задач с собеседований по различным языкам программирования.
@react_tg
❓React-компоненты работают медленно и требуют оптимизации? Хотите узнать, как сделать их быстрыми и эффективными?
Ждем вас на открытом вебинаре «Оптимизация работы компонентов в React.js» 6 августа в 19:00 мск, где мы разберём:
- как работать с оптимизацией в React.js;
- особенности работы функциональных компонентов и хуков;
- трюк с мемоизацией коллбеков для списка элементов.
Урок будет полезен как начинающим разработчикам React, так и опытным специалистам, которые хотят глубже изучить процесс мемоизации.
Встречаемся в рамках курса «React.js Developer». Все участники вебинара получат специальную цену на обучение!
👉 Регистрация открыта: https://otus.pw/Ed83/?erid=LjN8JvLSB
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
🖥 chatgpt.js — мощная open-source библиотека JavaScript для ChatGPT
— npm install @kudoai/chatgpt.js
chatgpt.js — это клиентская JS-библиотека, позволяющая легко взаимодействовать с DOM ChatGPT.
Библиотека chatgpt.js — многофункциональная, объектно-ориентированная, простая в использовании и производительная
🖥 GitHub
🟡 Страничка chatgpt.js
@javascriptv
🖥 Plasmic — визуальный конструктор для React
Plasmic позволяет создавать React-приложения практически без написания кода из готовых компонентов.
При этом Plasmic очень производительный и его можно использовать для разработки маркетинговых сайтов и сайтов электронной коммерции с большими объёмами трафика
🖥 GitHub
🟡 Страничка Plasmic
🟡 Шаблоны
@react_tg
Интерактивная шпаргалка по CSS Grid
Все шпаргалки можно разделить на 3 категории: регулярки, css grid и всё остальное. В данном случае это — второй вариант.
Шпаргалка объёмная, можно на месте сравнить как будут отображаться те или иные варианты конфигурации.
Ссылка на шпаргалку
#шпаргалка #css
@react_tg
Вы ещё успеваете поступить в онлайн-магистратуру МФТИ «Финансовые технологии и аналитика» 👩🎓Ближайшие даты экзаменов — 4 и 19 сентября.
➕Диплом очной магистратуры гособразца по направлению 38.03.05 «Бизнес-информатика».
➕Онлайн-обучение из любой точки мира.
➕Углубленная специализация в сфере финтех-разработки или аналитики.
➕Гранты на запуск своего стартапа в области Data Science/AI/ML до 3 млн ₽.
➕Более 5 проектов в портфолио: реальные задачи от Сбера, ВТБ, Ozon Fintech, Альфа-Банка и других финтех-компаний уже с первого семестра.
➕Возможность совмещать с работой и развивать корпоративный проект в качестве дипломного.
➕Рассрочка под 3% от Сбера и Минобразования. Платёж во время учебы — до 900 ₽ в месяц.
Бесплатный подготовительный курс и запись прошедших консультаций по экзаменам доступны после регистрации. Оставьте заявку, чтобы зарегистрироваться на день открытых дверей и начать готовиться к поступлению: https://netolo.gy/b3n8
Реклама ООО “Нетология” LatgBfeHX
🔥 Дайджест полезных материалов из мира : 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
⚡Легкий способ получать свежие обновлении и следить за трендами в разработке на вашем языке. Находите свой стек и подписывайтесь:
Машинное обучение: @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
📕Ит-книги /channel/addlist/BkskQciUW_FhNjEy
📌 Infinite scrollable and draggable (WebGL)grid - интерактивная бесконечная сетка с возможностью прокрутки, выполненная с помощью SCSS и JavaScript
https://codepen.io/ReGGae/pen/eYGyLrP
@react_tg
Refs в React: от доступа к DOM до императивного API
Одна из полезных особенностей React — абстрагирование от сложного взаимодействия с объектной моделью документа (DOM, Document Object Model). Вместо того чтобы запрашивать элементы, пытаться добавить к ним классы и устранять несоответствия браузера, можно просто писать компоненты, сосредоточившись на взаимодействии с пользователем. Однако иногда все же появляется необходимость в доступе к реальному DOM.
И здесь самое важное — разобраться в особенностях Ref и его окружения, научиться их правильно использовать. Сначала рассмотрим, зачем нужен доступ к DOM, как при этом помогает Ref, что такое useRef, forwardRef и useImperativeHandle и как их правильно использовать. Кроме того, посмотрим, как без forwardRef и useImperativeHandle получить подобные результаты.
А в качестве бонуса рассмотрим реализацию в React императивных API.
📌 Читать дальше
@react_tg
🚀Services Section | Learn CSS Garden - интерактивная анимация раздела услуг сайта. Реализована с помощью CSS и JS
https://codepen.io/ahmadnasr/pen/KKpvNGY
@reacttg
🛠Job Search Platform UI
Красивый пользовательский интерфейс платформы поиска работы. Реализован с помощью CSS и JS
https://codepen.io/TurkAysenur/pen/jOqdNbm
@react_tg
✔️ Галерея React Graph — большая коллекция различных диаграмм, графиков и визуализаций, созданных с помощью React и D3.js, с комментариями и кодом.
https://www.react-graph-gallery.com/
@react_tg
🖥 Как ускорить таблицу на React в 1 000 раз, изменив одну строку
JP Camara, главный инженер Wealthbox, в своём блоге поделился интересным опытом ускорения TanStack Table — новой версии React-библиотеки для создания функциональных таблиц — аж до 10 мс. Делимся с вами ссылкой на перевод его статьи:
📌 Читать статью
@react_tg
🖥 React Native Reanimated — низкоуровневая абстракция для API библиотеки Animated
— npx create-expo-app@latest my-app -e with-reanimated
React Native Reanimated предоставляет полную, низкоуровневую абстракцию для API библиотеки Animated, на основе которой можно построить более гибкий интерфейс, особенно когда речь идет о взаимодействии с помощью жестов.
🖥 GitHub
🟡 Доки
🟡 Посмотреть пример на Snack
@react_tg
⚡️ Buffet — это всеобъемлющий веб-менеджер виртуальных машин с открытым исходным кодом, предназначенный для удобного и безопасного управления виртуальными машинами.
Его серверная часть реализована на Python Flask, а интерфейс - на TypeScript React, при этом используются QEMU и KVM для виртуализации и noVNC для удаленного доступа к рабочему столу.
- Безопасный доступ к виртуальным машинам осуществляется через noVNC, websockify с поддержкой SSL/TLS и случайно генерируемые одноразовые пароли VNC.
- Администрирование пользователей, виртуальных машин и журналов выполняется из панели администратора.
- Возможность создания, запуска и удаления виртуальных машин QEMU/KVM.
- Определение пользовательских операционных систем и дистрибутивов с помощью JSON.
- Полностью адаптивный интерфейс, подходящий для настольных компьютеров, планшетов и смартфонов.
- Безопасная аутентификация и авторизация пользователей реализована с помощью JSON Web Tokens (JWT), bcrypt и двухфакторной аутентификации.
▪ GIthub
@react_tg
🖥 Zag — конечные автоматы для создания компонентов UI
Zag работает с React и с другими фреймворками, а также с чистым JS.
Zag позволяет писать компоненты 1 раз и использовать везде: взаимодействие компонентов моделируется независимо от фреймворка.
Особенности Zag:
— Фокус на доступности: Zag создан с учетом требований доступности и решает многие вопросы, связанные с взаимодействием с клавиатурой и т.д.
— Headless: Zag даёт возможность использовать любое решение по стилизации, которое нравится
🖥 GitHub
🟡 Доки
@react_tg
⚛️ React Custom Hooks позволяют повторно использовать логику состояния в компонентах React, интегрируясь с хуками useState и useEffect.
Пример Custom Hook, `useFetch`, показывает, как можно обрабатывать загрузку данных и управлять состоянием загрузки:
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
const response = await fetch(url);
const result = await response.json();
...dayjs:import dayjs from 'dayjs';
function formatDate(date) {
return dayjs(date).format('MM/DD/YYYY');
}
🎉 MeteorJS 3.0 — Долгожданный релиз спустя 3 года! 🚀
Наконец-то вышел MeteorJS 3.0, избавившись от Fibers в пользу async методов, что позволило обновить NodeJS до версии 20! 🎉 Теперь все методы и работа с БД выполняются асинхронно, улучшена документация, добавлена поддержка ARM на Linux. Для релиза выполнено 160 задач и обновлено множество пакетов. Это огромный шаг вперед для разработчиков! 🌟
📌Обсуждение на GitHub
📌Новая документация
#react #meteor #js
@react_tg
🖥 Разделение пользовательского интерфейса и логики в 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
🖥 Hyperscript Tagged Markup — крутая альтернатива JSX, применяющая стандартные шаблоны с тегами, с поддержкой компилятора.
▪Используйте JSX-подобный синтаксис в простом JavaScript (транспилятор не требуется)
▪Пишите код с помощью React/Preact прямо в браузере, а затем компилируйте htm для продакшена
▪Он использует стандартные JavaScript tagged templates и работает во всех современных браузерах
🚀 GitHub
@react_tg
🖥 Reactjs
▪Reactjs Hooks, простыми словами
▪useEffect hook, простыми словами
▪Reactjs Hooks изнутри, на модели
▪useSyncExternalStore hook, простыми словами
📌источник
@react_tg
🖥 Полный гайд по использованию RxDB в качестве базы данных для React приложений.
RxDB — это реактивная автономная база данных ,разработанная специально для JavaScript-приложений. Библиотека предоставляет комплексный API для выполнения действий с базой данных и синхронизации данных между клиентами и серверами.
Основная философия RxDB строится на наблюдаемости (observability), что позволяет разработчикам оперативно управлять изменениями данных и создавать динамический UI.
📌 Читать
@react_tg
Ищете работу frontend-разработчиком, но боитесь, что вам не хватит опыта и вы провалите собеседование?
Приходите на открытое собеседование на позицию junior+ frontend-разработчика в прямом эфире 16 августа в 19.00.
На собеседовании будут вопросы по HTML, CSS, JS и будут даны пару задач на решение. Вы увидите, как проводятся настоящие собеседования, поймёте, к чему нужно быть готовым, а в конце сможете задать вопросы и получить рекомендации.
Ведущие:
▪️Дмитрий Безуглый, CTO Frogly, работал Frontend Team Lead VK и нанимал разработчиков в VK.
▪️Артур Стамбульцян, Frontend Team Lead Telegram Open Network.
Перестаньте бояться собеседований
и узнайте, как проходить их лучше!
[Зарегистрироваться]
Верстаешь?
С 15 по 21 августа проводим бесплатный онлайн-интенсив по Frontend-разработке, где будем учить, как разрабатывать сайты и веб-приложения.
Что будет:
1️⃣ Создание полноценного веб-сайта на HTML и CSS
Мы научим тебя создавать стильные и функциональные веб-страницы с использованием самых современных технологий.
2️⃣ Оживление страницы с помощью JavaScript
Узнаешь, как добавить интерактивность и динамичность в свои проекты.
3️⃣ Использование фронтенд-фреймворка Angular
Узнаешь, как использовать этот мощный инструмент для создания масштабируемых и эффективных веб-приложений.
4️⃣ Подключение Backend и загрузка сайта на хостинг
Мы научим тебя основам работы с Backend'ом и покажем, как развернуть свой проект на хостинге.
5️⃣ Советы по доработке проекта
Получишь ценные советы от опытных разработчиков, чтобы улучшить свой проект и достичь более высокого уровня качества.
👉 Участвуй бесплатно 🚀
⚛ Как реализовать 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
⚡️Маст-хэв список для программистов, каналы с последними книжными новинками, библиотеками, разбором кода и актуальной информацией, связанной с вашим языком программирования.
Лучший способ получать свежие обновлении и следить за трендами в разработке.
Машинное обучение: t.me/ai_machinelearning_big_data
Python: t.me/pythonl
C#: t.me/csharp_ci
C/C++/ t.me/cpluspluc
Data Science: t.me/data_analysis_ml
Devops: t.me/devOPSitsec
Go: t.me/Golang_google
Базы данных: t.me/sqlhub
Rust: t.me/rust_code
Javascript: t.me/javascriptv
React: t.me/react_tg
PHP: t.me/phpshka
Android: t.me/android_its
Мобильная разработка: t.me/mobdevelop
Linux: t.me/+A8jY79rcyKJlYWY6
Big Data: t.me/bigdatai
Хакинг: t.me/linuxkalii
Тестирование: /channel/+F9jPLmMFqq1kNTMy
Java: t.me/javatg
💼 Папка с вакансиями: t.me/addlist/_zyy_jQ_QUsyM2Vi
Папка Go разработчика: t.me/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: t.me/addlist/eEPya-HF6mkxMGIy
📕 Бесплатные Книги для программистов: /channel/addlist/YZ0EI8Ya4OJjYzEy
🎞 YouTube канал: uproger" rel="nofollow">https://www.youtube.com/@uproger
😆ИТ-Мемы: t.me/memes_prog
🇬🇧Английский: t.me/english_forprogrammers
⭐️ Image Hover Effects — несколько вариантов эффектов при наведении на блоки с изображением и текстом. Реализованы на чистом CSS.
https://codepen.io/aybukeceylan/pen/vYNgLdw
@react_tg
🌟 Создание Typing Test приложения на React + TypeScript + Redux Toolkit
🟡Задачи:
1. У пользователей должна быть возможность выбирать количество предложений
2. Текст необходимо получать из внешнего API;
3. Применение соответствующих стилей для правильного и неправильного символа;
4. Подсветка текущего символа;
5. Приложение должно вычислять и отображать скорость и точность печати текста пользователем;
6. Пользователи должны иметь возможность перезапустить текущий тест.
Настройка проекта
• Создадим React проект с TypeScript шаблоном, выполнив в терминале следующую команду: npx create-react-app typing-test-app --template typescript.
• После завершения установки, перейдем в директорию проекта, установим axios (npm install axios) и Redux Toolkit (npm install @reduxjs/toolkit react-redux).
• Удалим все файлы, которые нам не пригодятся (оставим index.tsx, App.tsx, index.css, react-app-env.d.ts).
• Создадим папки api, assets, components, helpers, redux, types и style. Файл index.css переместим в папку style.
• Отредактируем оставшиеся файлы.
🟢 Файл index.tsx:import React from 'react';
import ReactDOM from 'react-dom/client';
import './style/index.css';
import App from './App';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
🟢 Файл App.tsx:import { FunctionComponent } from 'react';
const App:FunctionComponent = () => {
return (
<>
</>
);
};
export default App;
Приложение мы пишем на TypeScript, поэтому для функциональных компонентов желательно указывать тип FunctionComponent, который мы импортируем из React.
✔️ Продолжение
@react_tg