Telegram Web Link
🎉 MeteorJS 3.0 — Долгожданный релиз спустя 3 года! 🚀

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

📌Обсуждение на GitHub
📌Новая документация

#react #meteor #js

@react_tg
🖥 Plasmic — визуальный конструктор для React

Plasmic позволяет создавать React-приложения практически без написания кода из готовых компонентов.
При этом Plasmic очень производительный и его можно использовать для разработки маркетинговых сайтов и сайтов электронной коммерции с большими объёмами трафика

🖥 GitHub
🟡 Страничка Plasmic
🟡 Шаблоны

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
⚛️ React Custom Hooks позволяют повторно использовать логику состояния в компонентах React, интегрируясь с хуками useState и useEffect.


Пример Custom Hook, `useFetch`, показывает, как можно обрабатывать загрузку данных и управлять состоянием загрузки:

import { useState, useEffect } from 'react';

function useFetch(url) {
const [data, setData] = useState([]);
const [isClick Me Load More, setIsClick Me Load More] = 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
🖥 chatgpt.js — мощная open-source библиотека JavaScript для ChatGPT

npm install @kudoai/chatgpt.js

chatgpt.js — это клиентская JS-библиотека, позволяющая легко взаимодействовать с DOM ChatGPT.
Библиотека chatgpt.js — многофункциональная, объектно-ориентированная, простая в использовании и производительная

🖥 GitHub
🟡 Страничка chatgpt.js

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Zag — конечные автоматы для создания компонентов UI

Zag работает с React и с другими фреймворками, а также с чистым JS.
Zag позволяет писать компоненты 1 раз и использовать везде: взаимодействие компонентов моделируется независимо от фреймворка.

Особенности Zag:

— Фокус на доступности: Zag создан с учетом требований доступности и решает многие вопросы, связанные с взаимодействием с клавиатурой и т.д.

— Headless: Zag даёт возможность использовать любое решение по стилизации, которое нравится

🖥 GitHub
🟡 Доки

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Buffet — это всеобъемлющий веб-менеджер виртуальных машин с открытым исходным кодом, предназначенный для удобного и безопасного управления виртуальными машинами.

Его серверная часть реализована на Python Flask, а интерфейс - на TypeScript React, при этом используются QEMU и KVM для виртуализации и noVNC для удаленного доступа к рабочему столу.

- Безопасный доступ к виртуальным машинам осуществляется через noVNC, websockify с поддержкой SSL/TLS и случайно генерируемые одноразовые пароли VNC.
- Администрирование пользователей, виртуальных машин и журналов выполняется из панели администратора.
- Возможность создания, запуска и удаления виртуальных машин QEMU/KVM.
- Определение пользовательских операционных систем и дистрибутивов с помощью JSON.
- Полностью адаптивный интерфейс, подходящий для настольных компьютеров, планшетов и смартфонов.
- Безопасная аутентификация и авторизация пользователей реализована с помощью JSON Web Tokens (JWT), bcrypt и двухфакторной аутентификации.

GIthub

@react_tg
100_React_JS_Interview_Q_A.pdf
519.5 KB
⚡️ Огромная коллекция разборов задач с собеседований по различным языкам программирования.

@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
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Cypress — это современный инструмент для тестирования фронтенда, созданный для решения ключевых проблем, с которыми сталкиваются разработчики и специалисты по качеству при тестировании веб-приложений.

В отличие от Selenium, Cypress обеспечивает более быстрые, простые и надежные тесты. Он позволяет легко настраивать, писать, запускать и отлаживать различные типы тестов, включая сквозные, компонентные и модульные.

Подходит для любых приложений, работающих в браузере, и поддерживает тестирование в разных браузерах, обеспечивая стабильные результаты и эффективную интеграцию в CI-процессы.

npm install cypress --save-dev

Github

@react_tg
This media is not supported in your browser
VIEW IN TELEGRAM
❗️Простой React Совет

Если вам нужно импортировать серверный компонент из клиентского компонента, передайте его как prop

@reeact_tg
This media is not supported in your browser
VIEW IN TELEGRAM
Двигающиеся кольца прелоадера, которые раскрываются при взлёте.

Примеры применения:
загрузка нового уровня в игре;
загрузка результатов тестирования.


#прелоадер #ожидание #загрузка

https://codepen.io/izmaelmag/pen/XNJKZx

@react_tg
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Полезный сервис CSS Grid Generator, который сгенерирует сетку и выдаст CSS-код.

Вам нужно только задать количество строк, колонок и расстояния между ними, далее рисуем расположение div-блоков в сетке.

https://cssgrid-generator.netlify.app/

@react_tg
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Синхронизация React с API браузера

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
2025/07/07 13:12:16
Back to Top
HTML Embed Code: