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

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

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

#react #meteor #js

@react_tg
👍16🔥43❤‍🔥1🥱1
🖥 Plasmic — визуальный конструктор для React

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

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

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23🔥53
⚛️ 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
👍193🥰2🥱2🔥1😈1
🖥 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
13👍4🥰2🤔1💋1
🖥 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
10👍7🔥3❤‍🔥1
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
🔥123👍3
100_React_JS_Interview_Q_A.pdf
519.5 KB
⚡️ Огромная коллекция разборов задач с собеседований по различным языкам программирования.

@react_tg
🔥259👍6
🖥 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
👍135🥰4
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Cypress — это современный инструмент для тестирования фронтенда, созданный для решения ключевых проблем, с которыми сталкиваются разработчики и специалисты по качеству при тестировании веб-приложений.

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

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

npm install cypress --save-dev

Github

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

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

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

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


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

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

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

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

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

@react_tg
👍42🔥1510
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
👍39🔥105
2025/07/08 13:31:57
Back to Top
HTML Embed Code: