Изменения в процессе рендеринга в React 19 RC

Как в React 19 RC изменился процесс рендеринга компонентов по сравнению с React 18?

Забыли? Вернитесь к посту от 14.07.2024.

👉 @sWebDev

Мир глазами front-end разработчика.

👉 @sWebDev | #юмор

Настройка взаимодействия компонентов в Angular

С помощью @HostBinding можно динамически изменять стили и классы хост-элемента компонента в зависимости от его состояния. Например, можно подсвечивать компонент при наведении курсора мыши или изменять его внешний вид при получении новых данных.

@Component({ ... })
export class HighlightComponent {
  @HostBinding('style.backgroundColor') backgroundColor = 'transparent';
  // ...
}

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

@Component({ ... })
export class DropdownComponent {
  @HostListener('document:click', ['$event'])
  onClick(event: MouseEvent) { /* ... */ }
}

👉 @sWebDev

Torus Tunnel

Анимация туннеля на Three.js.

👉 @sWebDev

Жизненная ситуация?

❤️ - Да.

👍 - Нет.

👉 @sWebDev | #юмор

«Где Дата, Коль?». Первое реалити-шоу про дата-инженеров

Новый проект учебного центра Слёрм и Николая Маркова, Data Platform Lead в компании Altenar.

👀 Мы выбрали 5 участников, чтобы 14 недель подряд наблюдать, как они проходят наш курс «Data-инженер». И отлично справляются, набирая баллы, или лажают, пропуская дедлайны 🙂

Чтобы дойти до финала, участники должны освоить Python, MapReduce и ETL-инструменты, разобраться с Hadoop, NOSQL, Airflow, Kafka, аналитикой и архитектурой хранилищ данных.

Каждые две недели выходит новая серия. Ментор и ревьюеры разбирают сделанные домашки участников, комментируют результаты и обновляют турнирную таблицу.

❗️Главное правило: Кто перестаёт учиться — выбывает из проекта. Никаких исключений!

Кто справится со всеми заданиями вовремя? Кому ревьюер выставит самый высокий балл? Кто вылетит? А кто получит главный приз?

Ответы на эти вопросы, новости с шоу, а также статьи, кейсы и best practices для начинающего дата-инженера — в канале проекта: 👉 @gdedata

Подписывайтесь!

Реклама. ИП Аердинов Н.В. ИНН 638103515932 erid: LjN8K97oM

RoughViz

RoughViz — это библиотека JavaScript, позволяющая создавать графики в стиле "нарисованных от руки". Это придаёт визуализациям данных уникальный и креативный вид, делая их более привлекательными и запоминающимися.

👉 @sWebDev

Alien Goober

Анимация пришельца на Anime.js.

Вам не кажется, что это больше похоже на приведение?

❤️ - Приведение.

👍 - Пришелец.

👉 @sWebDev

Как создать библиотеку React components ESM+CJS

В этой статье рассказывается о создании библиотеки React-компонентов ESM+CJS. Обсуждаются проблемы создания библиотеки, работающей в разных средах. Автор рекомендует использовать Rollup в качестве модульного бандлера, а TypeScript для проверки типов. Другие важные моменты включают использование зависимостей типа "peer" и поддержание чистоты файла package.json.

👉 @sWebDev

The Raging Sea

Настраиваемая анимация воды на Three.js.

👉 @sWebDev

Lazy.js

Lazy.js — это библиотека JavaScript, предоставляющая инструменты для работы с коллекциями данных (массивы, объекты) , обеспечивающая ленивые вычисления для повышения производительности.

👉 @sWebDev

Работа с роутами в React

Какой метод в React Router позволяет загружать дополнительные роуты динамически?

Забыли? Вернитесь к посту от 22.07.2024.

👉 @sWebDev

Никому не говорите, что вы программист.

👉 @sWebDev | #юмор

Создание контекста с использованием React.createContext

Контекст передает данные через компонентное дерево без пропсов. React.createContext создает глобальное состояние.

1. Создаем контекст и компонент-провайдер:

import React, { createContext, useState, useContext } from 'react';
const ThemeContext = createContext();
const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

2. Используем контекст в дочернем компоненте:

const ThemedComponent = () => {
  const { theme, setTheme } = useContext(ThemeContext);
  return (
    <div>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </div>
  );
};

3. Оборачиваем приложение в ThemeProvider:

const App = () => (
  <ThemeProvider>
    <ThemedComponent />
  </ThemeProvider>
);
export default App;

👉 @sWebDev

Animated Unsubscribe Page

Интерактивная анимация страницы отписки на GSAP.

👉 @sWebDev

Часто задумываетесь об удобстве пользователей?

❤️ - Да.

👍 - Нет.

👉 @sWebDev | #юмор

Lottie-web

Lottie-web - это библиотека, разработанная компанией Airbnb для рендеринга анимаций, созданных в Adobe After Effects, в веб-приложениях. Анимации экспортируются из After Effects с использованием плагина Bodymovin и могут быть легко встроены в ваши веб-страницы с помощью Lottie.

👉 @sWebDev

3D Printing

Анимация 3D-печати на Three.js.

👉 @sWebDev