✅ Creating day-night CSS only toggle switch - Анимированный переключатель, выполненный с помощью SCSS, без использования JavaScript

https://codepen.io/gvissing/pen/XWVpjJd

@react_tg

🖼 Почему разрабатывать веб-интерфейсы так сложно?

Разработка веб-интерфейсов кажется простой, но только на первый взгляд.

Если углубиться в нее, обнаруживается множество сложностей, озадачивающих даже опытных специалистов.

Эта статья поможет вам разобраться с рядом проблем разработки веб-интерфейсов, начиная с несоответствия между веб-языками и современными требованиями к пользовательскому интерфейсу и заканчивая сложными вопросами управления данными и вызовами асинхронных API.

Кроме того, мы исследуем так называемые “нерезультативные пути” (“unhappy paths”), часто упускаемые из виду. К ним относятся состояния загрузки, обработка ошибок, а также более широкие архитектурные аспекты, включающие безопасность, производительность и доступность.

📌 Читать

@react_tg

🖥 Animated blob SVG text clipping effect — анимация появления и исчезновения текста. Реализован с помощью SVG-текста и JavaScript.

https://codepen.io/ZachSaucier/pen/gZzPgQ

@react_tg

🖥 Представляем вашему вниманию подробный вводный курс по React 18 и Redux Toolkit.

Это пошаговое руководство по созданию интерактивных веб-приложений с помощью этих мощных инструментов.

• Видео
• React код
• Redux код

@react_tg

🖥 Прощайте, useState и useEffect: революция в React

Многие разработчики продолжают использовать хуки useState и useEffect для обновления состояний, но мне такой подход не нравится. Проблема заключается в том, что компонент одновременно монтируется, перемонтируется и размонтируется, что приводит к неожиданному поведению. В результате при записи в консоль результат может быть повторен три раза.

Назначение хука useLoaderData
Хук useLoaderData  — это пользовательский хук в React, который помогает загружать данные в компонент. Он упрощает получение данных из API и выполнение асинхронных операций.

Используя хук useLoaderData, вы предоставляете ему функцию, которая возвращает промис. Этот промис представляет собой асинхронную операцию, в результате которой будут получены необходимые данные. Как только промис разрешится, данные станут доступны компоненту.

Хук useLoaderData обрабатывает состояние загрузки, поэтому вам не нужно вручную отслеживать, загружаются ли еще данные или их загрузка уже закончена. Он предоставляет удобный способ доступа к данным, а также позволяет устранять возможные ошибки, которые могут возникнуть при загрузке данных.

Хук useLoaderData позволяет сохранить чистоту и организованность кода компонента, отделяя логику загрузки данных от остальных задач компонента. Это позволяет легко получать данные и управлять ими более удобным для новичков способом.

Как это работает
Надеюсь, вы хорошо знаете, как функционирует React Router 6. В противном случае ознакомьтесь с документацией по ссылке.

Прежде всего, нам необходимо настроить систему маршрутизации в приложении для работы с API загрузчика. До этого момента мы использовали настройку BrowserRouter для работы с различными маршрутами приложения.

Обсудим этот фрагмент.

import { BrowserRouter, Routes, Route, Outlet } from "react-router-dom"
import HomeComponent from "./home"
import AboutCompoent from "./about"
function App () {
<BrowserRouter>
<Routes>
<Route path='/' element={<Outlet />}>
<Route index element={<HomeComponent /> } />
<Route path='about' element={<AboutComponent/> } />
</Route>
</Routes>
</BrowserRouter>
};
export default App;
Здесь создана традиционная система маршрутизации с использованием импорта из React Router.

Что тут происходит?

BrowserRouter из библиотеки React Router создает массив объектов из дочерних элементов Routes. Приведенный ниже фрагмент наглядно демонстрирует, как это происходит.

BrowserRouter([
{
path: '/',
element: <HomeComponent />,
children: []
},
{
path: '/about',
element: <AboutComponent/>,
children: []
}
])

📌 Читать дальше

@react_tg

✅ "Визуализация алгоритмов сортировки" (с использованием React и redux).

• Github

@react_tg

🖥 Framer Motion - это мощная библиотека анимации для React.

Она позволяет добавлять анимированные кнопки, исчезающий текст и многое другое - всего в нескольких строках кода.

В этом уроке показано как использовать Framer Motion для создания полностью анимированной боковой панели в React.

• Код проекта
• Урок
• Github

@react_tg

🖥 Огромная коллекция React-компонентов и библиотек.

Готовые решения на все случаи жизни.

📌 Github

@react_tg