React JS

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

⚡️ Мощный нейропереводчик Нейросеть Babelfish получила обновление, которое значительно улучшило распознавание речи — теперь она может в реальном времени переводить любое аудио на нужный вам язык. ▪ Github @react_tg

🏗👷‍♂️ Крутая анимация для вашего проекта Строители разработчики так и не достроили страницу, на которую вы хотели попасть. #страница404 #анимация https://codepen.io/l-mnh-the-flexboxer/pen/qBRVXwm @react_tg

Дарим билет в мир большого IT 🎫 От тебя нужен только опыт работы разработчиком JS+React от года и желание попасть в команду Холдинга Т1 — одного из лидеров российского ИТ-рынка, в портфеле которого 800+ высокотехнологичных проектов и 70+ продуктов и услуг. Регистрируйся на онлайн-интенсив в Открытые школы Т1 и прокачай навыки бесплатно всего за 1 месяц. Лучшие получат оффер от Т1 🔝 и уникальный карьерный фаст-трек до мидла в бигтехе. Всего за полгода мы выпустили 500+ специалистов. Участники присоединились к командам финтех-разработки и разработки ИТ-продуктов. Также участников ждут в юнитах облачных сервисов, развития ИИ-решений, интеграции и консалтинга. ⌛️ Быстрое обучение: 1 месяц. 💻Гибкий формат: все этапы онлайн, занятия по вечерам. 🌏 Работа в Т1 возможна с тер-рии РФ и Беларуси. Ты с нами? Тогда подавай заявку до 22 августа! Старт интенсива: 28 августа. Реклама. ООО "Т1". ИНН 7720484492.

⚡️ Прелоадер, на котором буквы загрузчика пытаются догнать друг друга. Примеры применения: ▪ загрузка страницы в электронной библиотеке; ▪ загрузка страницы интернет-магазина с канцелярскими товарами. #прелоадер #ожидание #загрузка #js https://codepen.io/arlinacode/pen/rrRoOQ @react_tg

TDesign — Корпоративная дизайн система Design - это комплексная корпоративная система проектирования, и библиотеки компонентов были реализованы для Vue, React и WeChat MiniProgram TDesign хорошо подходит для создания приложений со сложным дизайном и возможностями кроссплатформенного, мультитехнологичного стека. https://github.com/Tencent/tdesign @react_tg

Ищем новичков во фронтенд-разработке и вёрстке сайтов. Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений. А именно: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг. Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

🖥 Синхронизация React с API браузера @react_tg

⚡️ Полезный сервис 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