🖥 Hyperscript Tagged Markup — крутая альтернатива JSX, применяющая стандартные шаблоны с тегами, с поддержкой компилятора.

▪Используйте JSX-подобный синтаксис в простом JavaScript (транспилятор не требуется)
▪Пишите код с помощью React/Preact прямо в браузере, а затем компилируйте htm для продакшена
▪Он использует стандартные JavaScript tagged templates и работает во всех современных браузерах

🚀 GitHub

@react_tg

🖥 Разделение пользовательского интерфейса и логики в React: чистый код с безголовыми компонентами

В сфере фронтенд-разработки встречаются сложные термины и парадигмы. “Безголовый пользовательский интерфейс” (“headless UI”) или “безголовые компоненты” (“headless components”) вполне можно отнести к этой категории. Не одни вы ломаете голову, пытаясь понять, что они означают. На самом деле, несмотря на названия, эти понятия представляют собой впечатляющие стратегии, способные значительно упростить управление сложными пользовательскими интерфейсами.

Безголовые компоненты обладают внушительным потенциалом: гибкостью, возможностью многократного использования и способностью улучшить организацию и чистоту кодовой базы. Эта статья поможет разобраться в том, что представляет собой данный паттерн, чем полезен и как может изменить ваш подход к проектированию интерфейсов.

Для наглядности начнем с рассмотрения простого, но эффективного применения безголовых компонентов: извлечения хука “useToggle” из двух похожих компонентов для уменьшения дублирования кода.

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

Но это только вершина айсберга! По мере углубления мы столкнемся с более сложным примером применения этого принципа: использованием Downshift — мощной библиотеки для создания продвинутых компонентов ввода.

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

Компоненты Toggle (тумблеры) являются неотъемлемой частью многочисленных приложений. Они являются “молчаливыми исполнителями” таких функций, как “запомнить меня на этом устройстве” (“remember me on this device”), “активировать уведомления” (“activate notifications”), а также популярного “темного режима” (“dark mode”).


Компонент ToggleButton
Создать такой тумблер в React легко. Рассмотрим его.

const ToggleButton = () => {
const [isToggled, setIsToggled] = useState(false);

const toggle = useCallback(() => {
setIsToggled((prevState) => !prevState);
}, []);

return (
<div className="toggleContainer">
<p>Do not disturb</p>
<button onClick={toggle} className={isToggled ? "on" : "off"}>
{isToggled ? "ON" : "OFF"}
</button>
</div>
);
};

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

@react_tg

☹️ Проблема устаревших замыканий и способы ее решения в React. Часть 1

Замыкания — пожалуй, одна из самых пугающих концепций JavaScript. Даже всезнающий ChatGPT скажет вам это. Во всяком случае, это одна из самых скрытых особенностей языка. Вы используете замыкания, когда пишите какой-либо React-код, чаще всего даже не осознавая этого. Но в конечном итоге от этой фичи никуда не деться: чтобы разрабатывать сложные и производительные React-приложения, придется овладеть ею.

Попробуем проникнуть в очередную тайну JavaScript-кода, чтобы выяснить:

🟡что такое замыкания, как они появляются и зачем нужны;
🟡что такое “устаревшее” замыкание и почему оно возникает.

Предупреждение: если вы никогда не сталкивались с замыканиями в React, эта статья может взорвать ваш мозг. Рекомендую запастись достаточным количеством шоколада, чтобы стимулировать клетки мозга во время чтения.

‼️Задача
Представьте, что вы реализуете форму с несколькими полями ввода. Одно из полей представляет собой очень тяжелый компонент из какой-то внешней библиотеки. У вас нет доступа к его внутренним элементам, поэтому вы не можете устранить проблемы с его производительностью. Но этот компонент очень нужен в форме, поэтому вы решили обернуть его в React.iss.onemo, чтобы минимизировать повторные рендеринги при изменении состояния формы. Как-то так:
const HeavyComponentMemo = React.iss.onemo(HeavyComponent);

const Form = () => {
const [value, setValue] = useState();

return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<HeavyComponentMemo />
</>
);
};

Пока все хорошо. Тяжелый компонент принимает только одно строковое свойство, например title, и коллбэк onClick. Это происходит при нажатии кнопки “done” (“готово”) внутри компонента. Отправить данные формы также довольно просто: достаточно передать title и onClick.
const HeavyComponentMemo = React.iss.onemo(HeavyComponent);

const Form = () => {
const [value, setValue] = useState();
const onClick = () => {
// сюда передаем данные формы
console.log(value);
};

return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<HeavyComponentMemo
title="Welcome to the form"
onClick={onClick}
/>
</>
);
};

А вот теперь перед вами встает дилемма. Как известно, каждое свойство компонента, обернутое в React.iss.onemo, должно быть либо примитивным значением, либо постоянным между повторными рендерами. В противном случае мемоизация не сработает. Поэтому технически нужно обернуть onClick в useCallback:
const onClick = useCallback(() => {
// здесь передаем данные
}, []);

Но, как известно, хук useCallback должен иметь все зависимости, объявленные в его массиве зависимостей. Поэтому, чтобы отправить данные формы в компонент, нужно объявить эти данные как зависимость:

🚀Смотреть

@react_tg

🖥 Крутой ИИ сервис, который конвертирует дизайн Figma в рабочий код на HTML + CSS и React. Не нужно делать группировку элементов вручную — сервис справляется с любым дизайном, на выходе получается вполне неплохой код за пару кликов!

📌Попробовать можно тут.

@react_tg

🖥 Проблема устаревших замыканий и способы ее решения в React. Часть 1

Замыкания — пожалуй, одна из самых пугающих концепций JavaScript. Даже всезнающий ChatGPT скажет вам это. Во всяком случае, это одна из самых скрытых особенностей языка.

Вы используете замыкания, когда пишите какой-либо React-код, чаще всего даже не осознавая этого. Но в конечном итоге от этой фичи никуда не деться: чтобы разрабатывать сложные и производительные React-приложения, придется овладеть ею.

Попробуем проникнуть в очередную тайну JavaScript-кода, чтобы выяснить:

🟢что такое замыкания, как они появляются и зачем нужны;
🟢что такое “устаревшее” замыкание и почему оно возникает.

Предупреждение: если вы никогда не сталкивались с замыканиями в React, эта статья может взорвать ваш мозг. Рекомендую запастись достаточным количеством шоколада, чтобы стимулировать клетки мозга во время чтения.

✏️Задача

Представьте, что вы реализуете форму с несколькими полями ввода. Одно из полей представляет собой очень тяжелый компонент из какой-то внешней библиотеки. У вас нет доступа к его внутренним элементам, поэтому вы не можете устранить проблемы с его производительностью. Но этот компонент очень нужен в форме, поэтому вы решили обернуть его в React.iss.onemo, чтобы минимизировать повторные рендеринги при изменении состояния формы. Как-то так:
const HeavyComponentMemo = React.iss.onemo(HeavyComponent);

const Form = () => {
const [value, setValue] = useState();

return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<HeavyComponentMemo />
</>
);
};

Пока все хорошо. Тяжелый компонент принимает только одно строковое свойство, например title, и коллбэк onClick. Это происходит при нажатии кнопки “done” (“готово”) внутри компонента. Отправить данные формы также довольно просто: достаточно передать title и onClick.

const HeavyComponentMemo = React.iss.onemo(HeavyComponent);

const Form = () => {
const [value, setValue] = useState();
const onClick = () => {
// сюда передаем данные формы
console.log(value);
};

return (
<>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<HeavyComponentMemo
title="Welcome to the form"
onClick={onClick}
/>
</>
);
};

А вот теперь перед вами встает дилемма. Как известно, каждое свойство компонента, обернутое в React.iss.onemo, должно быть либо примитивным значением, либо постоянным между повторными рендерами. В противном случае мемоизация не сработает. Поэтому технически нужно обернуть onClick в useCallback:

const onClick = useCallback(() => {
// здесь передаем данные
}, []);

Но, как известно, хук useCallback должен иметь все зависимости, объявленные в его массиве зависимостей. Поэтому, чтобы отправить данные формы в компонент, нужно объявить эти данные как зависимость:

const onClick = useCallback(() => {
// сюда подаются данные
console.log(value);

// добавление значения к зависимости
}, [value]);

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

👆 Далее

👆 Часть 2

@react_js

🖥 15 обязательных шпаргалок для веб-разработчиков

По ссылке вы найдёте подборку шпаргалок для разработчиков, которые содержат основные синтаксические конструкции и команды для работы с различными технологиями и языками программирования. Шпаргалки по CSS Flexbox, Grid, React, Git, Node.js, Django и не только ждут вас тут:

https://dev.to/ishratumar/15-must-have-cheatsheets-for-developers-1n92

@react_tg

🤖10 конструкторов сайтов с ИИ, которые стоит попробовать каждому UI/UX-дизайнеру

1. Framer AI
возможность не только создавать отличные сайты с помощью ИИ, но и редактировать их так же, как файл Figma.

2. Durable
идеально подходит для тех, кому нужен деловой или профессиональный сайт. По моим наблюдениям, его результаты даже лучше, чем у Framer. Всего несколько настроек — и сайт готов к работе.

3. 10Web
представьте, что используете ИИ для создания сайта на WordPress, а затем настраиваете его с помощью редактора Elementor. А знаете, что самое замечательное в этом инструменте? Он синхронизируется с WordPress, на котором работает почти половина всех сайтов.

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

5. Wix AI
пожалуй, самый простой инструмент с ИИ-функциями, который я использовал. С ним можно запустить сайт всего за день. К тому же он очень выгоден для кошелька, и в него добавлено много новых классных ИИ-функций, таких как создание текста и изображений, автоматическое удаление фона и многое другое.

6. Bookmark
идеальный помощник для создания бизнес-сайтов. Он помогает с SEO-оптимизацией, предлагает варианты онлайн-продаж, предоставляет большой объем памяти и даже детальную аналитику.

7. Kleap
не только создаст сайт с помощью ИИ, но и поможет подобрать наиболее подходящие слова и картинки. Кроме того, он позволит отслеживать аналитику и отлично смотрится на телефонах.

8. Hocoos
можно за несколько минут создать потрясающий сайт, просто ответив на 8 вопросов о своем бизнесе. Это немного сложнее, чем просто написать промпт, но в результате ИИ создаст подробный и индивидуальный сайт.

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

10. Unbounce
известная платформа для разработки лендингов, использующая искусственный интеллект для создания страниц, написания копий и даже оптимизации трафика.

@react_tg

🖥 Большой интерактивный учебник по React. Он обучает современному React с помощью функциональных компонентов и хуков. В него включены: диаграммы, иллюстрации, задачи и более 600 интерактивных примеров. Зацените!

https://react.dev

@react_tg

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

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

@react_tg