React JS

⚡️ Полезный сервис CSS Grid Generator, который сгенерирует сетку и выдаст CSS-код. Вам нужно только задать количество строк, колонок и расстояния между ними, далее рисуем расположение div-блоков в сетке. https://cssgrid-generator.netlify.app/ @react_tg

⭕ Двигающиеся кольца прелоадера, которые раскрываются при взлёте. Примеры применения: ▪ загрузка нового уровня в игре; ▪ загрузка результатов тестирования. #прелоадер #ожидание #загрузка https://codepen.io/izmaelmag/pen/XNJKZx @react_tg

❗️Простой React Совет Если вам нужно импортировать серверный компонент из клиентского компонента, передайте его как prop ❗ @reeact_tg

⚡️ Cypress — это современный инструмент для тестирования фронтенда, созданный для решения ключевых проблем, с которыми сталкиваются разработчики и специалисты по качеству при тестировании веб-приложений. В отличие от Selenium, Cypress обеспечивает более быстрые, простые и надежные тесты. Он позволяет легко настраивать, писать, запускать и отлаживать различные типы тестов, включая сквозные, компонентные и модульные. Подходит для любых приложений, работающих в браузере, и поддерживает тестирование в разных браузерах, обеспечивая стабильные результаты и эффективную интеграцию в CI-процессы. npm install cypress --save-dev ▪Github @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

❓React-компоненты работают медленно и требуют оптимизации? Хотите узнать, как сделать их быстрыми и эффективными? Ждем вас на открытом вебинаре «Оптимизация работы компонентов в React.js» 6 августа в 19:00 мск, где мы разберём: - как работать с оптимизацией в React.js; - особенности работы функциональных компонентов и хуков; - трюк с мемоизацией коллбеков для списка элементов. Урок будет полезен как начинающим разработчикам React, так и опытным специалистам, которые хотят глубже изучить процесс мемоизации. Встречаемся в рамках курса «React.js Developer». Все участники вебинара получат специальную цену на обучение! 👉 Регистрация открыта: https://otus.pw/Ed83/?erid=LjN8JvLSB Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

🖥 Zag — конечные автоматы для создания компонентов UI Zag работает с React и с другими фреймворками, а также с чистым JS. Zag позволяет писать компоненты 1 раз и использовать везде: взаимодействие компонентов моделируется независимо от фреймворка. Особенности Zag: — Фокус на доступности: Zag создан с учетом требований доступности и решает многие вопросы, связанные с взаимодействием с клавиатурой и т.д. — Headless: Zag даёт возможность использовать любое решение по стилизации, которое нравится 🖥 GitHub 🟡 Доки @react_tg

🖥 chatgpt.js — мощная open-source библиотека JavaScript для ChatGPT — npm install @kudoai/chatgpt.js chatgpt.js — это клиентская JS-библиотека, позволяющая легко взаимодействовать с DOM ChatGPT. Библиотека chatgpt.js — многофункциональная, объектно-ориентированная, простая в использовании и производительная 🖥 GitHub 🟡 Страничка chatgpt.js @javascriptv

⚛️ 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();
...

Helper Function, `formatDate`, не зависит от React и форматирует даты, используя dayjs:

import dayjs from 'dayjs';

function formatDate(date) {
  return dayjs(date).format('MM/DD/YYYY');
}

Если требуется управление состоянием, используйте Custom Hooks. Для общих вычислений без привязки к состоянию лучше подходят Helper Functions. #frontend #react #JavaScript #ReactJS 📎 Хабр @react_tg

🖥 Plasmic — визуальный конструктор для React Plasmic позволяет создавать React-приложения практически без написания кода из готовых компонентов. При этом Plasmic очень производительный и его можно использовать для разработки маркетинговых сайтов и сайтов электронной коммерции с большими объёмами трафика 🖥 GitHub 🟡 Страничка Plasmic 🟡 Шаблоны @react_tg

🎉 MeteorJS 3.0 — Долгожданный релиз спустя 3 года! 🚀 Наконец-то вышел MeteorJS 3.0, избавившись от Fibers в пользу async методов, что позволило обновить NodeJS до версии 20! 🎉 Теперь все методы и работа с БД выполняются асинхронно, улучшена документация, добавлена поддержка ARM на Linux. Для релиза выполнено 160 задач и обновлено множество пакетов. Это огромный шаг вперед для разработчиков! 🌟 📌Обсуждение на GitHub 📌Новая документация #react #meteor #js @react_tg

Интерактивная шпаргалка по CSS Grid Все шпаргалки можно разделить на 3 категории: регулярки, css grid и всё остальное. В данном случае это — второй вариант. Шпаргалка объёмная, можно на месте сравнить как будут отображаться те или иные варианты конфигурации. Ссылка на шпаргалку #шпаргалка #css @react_tg

🖥 react-inlinesvg — компонент React для загрузки компонентов — npm i react-inlinesvg react-inlinesvg позволяет загружать локальные или удаленные SVG в свои компоненты React. 🖥 GitHub 🟡 Sandbox @react_tg

🖥 Free React Icons - Hugeicons Pro Огромная библиотека для фронтенд разработчиков и дизайнеров, содержащую более 4000 иконок в форматах SVG и React. ▪ GitHub ▪Сайт @react_tg

Офер в Яндекс для опытных фронтендеров за два дня 24–25 августа приглашаем фронтендеров с опытом работы от четырёх лет получить офер в Яндекс через multitrack за 2 дня. Достаточно решить задачи онлайн до 20 августа и пройти несколько технических секций 24 августа, чтобы уже 25-го получить офер и выбрать три команды, к которым вам было бы интересно присоединиться. Как правило, за несколько собеседований сложно понять, подходит ли вам команда и наоборот. Multitrack позволит вам поработать в трёх разных командах Яндекса и выбрать подходящую. Вы сможете погрузиться в рабочие процессы, познакомиться с будущими коллегами и понять, с какими задачами и технологиями хотите работать. Узнать подробности и зарегистрироваться. Реклама. ООО "Яндекс". ИНН 7736207543

🖥 Mitosis — позволяет единым образом создавать компоненты для всего: для React, Vue, Qwik, Solid, Angular и для других фреймворков — npm create @builder.io/mitosis@latest Mitosis — это open-source инструмент, который преобразует JSX-код в компоненты для React и для остальных фреймворков. Таким образом можно избавиться от необходимости переписывать код каждый раз заново под новый фреймворк. 🖥 GitHub 🟡 Доки @react_tg

🖥 Unovis — модульный фреймворк для визуализации данных на React и не только — npm install -P @unovis/ts @unovis/react Unovis — это фреймворк визуализации данных для React, Angular, Svelte, Vue и для чистого TS и JS, который: — имеет поддержку разных видов диаграмм, карт и всяких сложных графиков — позволяет импортировать только необходимые компоненты для уменьшения размера приложения — очень гибкий и настраиваемый 🖥 GitHub 🟡 Доки 🟡 Галлерея @react_tg

💫 Яндекс устраивает технологический Код-хоппинг 8 августа! Встретимся в Петербурге, чтобы потусить и послушать короткие лайтнинги от коллег. Переключимся с работы на живое общение — так мы сможем не только подзарядиться, но и поймать новые идеи! В программе — прогулка по трём барам, настойки и коктейли, codebattle, задушевные разговоры и крутая вечеринка! ✉️ Заполняйте форму и регистрируйтесь уже сейчас! А если хотите рассказать о проекте или увлечении, приложите к форме тему и тезисы. До встречи на Код-хоппинге! 🎉