⚛️ Я не слишком беспокоюсь о повторных рендерах в React. (если только я не вижу проблем с производительностью).

Однако мне важно понимать, как работает процесс рендеринга.

@react_tg

Совет React: используйте пользовательский хук для обработки состояний массива в ваших компонентах ↓

@react_tg

Чистая архитектура фронтенда

В этой статье речь пойдет об архитектуре фронтенда, проектирование которой подчиняется множеству принципов, в том числе SOLID, KISS, DRY и DDD.

В чем важность архитектуры фронтенда?

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

Что представляет собой архитектура фронтенда?

📌 Читать

@react_tg

🔥 Дайджест полезных материалов из мира React за неделю

Почитать:
— Сложность алгоритмов. Разбор Big O
— Я счастлив, что больше не веб-разработчик
— Mobile Web, навигация и при чем тут Nginx
— Микрофронтенд для самых маленьких
— Кастомизация бессерверных функций без применения промежуточного ПО
— KISS your website или как написать уважаемый сайт на аутсорсе, глава первая
— Что выбрать: Npm, Yarn или Pnpm?
— Pixel Combats Api
— Анатомия shadcn/ui
— Валидация формы с помощью AJV, Vue.js и TypeScript
— How Validate Form Input Data In React Or Any JavaScript Web Application ?
— Fixing Fetch Waterfalls in React
— Svelte journey | Part 2
— How many of you use cloud emulators for testing?
— Svelte : Toji Fushiguro of Javascript Frameworks.
— Efficient React Development: A Deep Dive into Components, Hooks, and Performance Optimization
— Unveiling the Power of React Hooks: A Comprehensive Guide
— Tips for styling React apps in JavaScript
— This Week In React #167: Hydration, Remix, Server Components, cache, perf, Glow, Unistyles, Expo, :has(), Tailwind, date-fns...
— Mastering Redux Toolkit in Your React Projects

Посмотреть:
🌐 Type Predicates Solve This Common TypeScript Error (⏱ 05:01)
🌐 You Should Be Using Types Instead Of Interfaces In TypeScript (⏱ 00:52)

Хорошего дня!

@react_tg

🍔 Beat Burger

Приложение на React, анимированное библиотекой gsap. При нажатии на элементы проигрываются звуки.

#react #js

https://codepen.io/ste-vg/pen/MWpxKYR

@react_tg

Стильный слайдер для сайта

#html #css #js #slider

https://codepen.io/theseventh/pen/LYVqMYb

@javascriptv

⚛ Создание UI-компонентов React на продвинутом уровне

React — хорошая библиотека. Так давайте сделаем ее еще лучше, создавая многоразовые компоненты на высокопрофессиональном уровне.

Для использования этого руководства достаточно базовых знаний о React, TypeScript и Tailwind CSS.

В качестве примера поработаем с button, но принципы, которым будем следовать здесь, применимы к любому HTML-тегу.

const Button = ({children, className}) => {
return (
<button className={className}>{children}</button>
)
}

Приведенный выше код работает, но что, если понадобится ввести ARIA (accessible rich internet application attribute — доступные полнофункциональные интернет-приложения), ссылки или любые другие свойства обычного тега button?

Можно просто добавить больше свойств и на этом закончить.

const Button = ({children, className, ref, type}) => {
return (
<button className={className} ref={ref} type={type}>{children}</button>
)
}

Это одно из решений, но оно не эффективно. Чтобы сделать его более действенным, поработаем с TypeScript и React. Быстро создать проект с использованием React и TypeScript поможет документация Vite.

Первым шагом будет импорт необходимых типов из React и создание интерфейса для свойств кнопки (button).

📌 Продолжение

@react_tg

Искусство манипулирования массивами JavaScript: исследование метода Array.prototype.filter()

Такие методы, как Array.prototype.filter(), Array.prototype.map() и Array.prototype.reduce(), являются неотъемлемой частью парадигмы функционального программирования JavaScript. Но достаточно ли хорошо вы понимаете, как работает метод filter? Не будем вдаваться в подробности реализации, а рассмотрим только внутренний механизм этого метода. “Дьявол кроется в деталях” — попробуем копнуть поглубже и поискать этого “дьявола” в языке JavaScript.

В JavaScript массивы не являются “примитивными значениями”, а рассматриваются как “объекты”, а при слове “объект” на ум приходит другое слово — “метод”. В этой статье хочу обратить ваше внимание на неизменяющие (Non-Mutating ) и изменяющие (Mutating) методы массива. На простом языке разницу между ними я бы объяснил так: методы, которые не изменяют исходный массив, а создают или возвращают новый массив с необходимыми изменениями, называются неизменяющими, а изменяющие методы — это те, которые изменяют исходный массив.

Array.prototype.filter() — один из неизменяющих методов, возвращающий новый массив. Возвращаемый массив содержит элементы, отфильтрованные из исходного массива на основе теста, реализованного функцией обратного вызова, переданной в качестве входного аргумента методу .filter().

Сигнатура метода “filter” выглядит следующим образом:

📌Смотреть

@react_tg

Разработка веб-дэшбордов с использованием React, Material UI, Tailwind CSS и Nivo. Часть 1

Визуализация данных — важнейший компонент процесса принятия обоснованных решений и представления информации в удобном для пользователя виде. Она позволяет преобразовывать сложные данные в четкие и осмысленные визуальные картины, благодаря чему организации могут решать различные задачи и повышать эффективность своей работы.

Для визуализации данных существует множество платформ бизнес-аналитики (BI). В качестве примера можно привести Tableau, Power BI, QlikView и Looker. Однако они могут иметь ограничения и отличаться высокой стоимостью. Альтернативным подходом к использованию BI-инструментов является применение библиотек визуализации данных, таких как Nivo, при веб-разработке фронтенда.

В этом цикле из трех частей мы рассмотрим, как создавать дэшборды, отслеживающие производительность сайта, с помощью React, Tailwind CSS, Material UI и Nivo. Если вы разработчик, желающий усовершенствовать навыки визуализации данных, владелец бизнеса, стремящийся получить представление о данных, или просто человек, интересующийся миром React и визуализации данных, рекомендуем приступить к работе после прочтения серии этих статей.

Итак, начнем!

📌 Читать

@react_tg