Frontender Libs - обзор библиотек JS / CSS

Запуск эффекта после размещения компонента в DOM React useLayoutEffect() - это метод React, который запускает эффект после того, как компонент был размещён на DOM.

      const App = () => {
        const [count, setCount] = useState(0);

        useLayoutEffect(() => {
          // Этот эффект будет запущен один раз, после первого рендеринга компонента
          const element = document.querySelector(".counter");
          element.textContent = count;
        }, [count]);

        return (
          <div>
            <div class="counter">Счётчик: {count}</div>
            <button onClick={() => setCount(count + 1)}>Увеличить</button>
          </div>
        );
      };

👉 @sWebDev

GSAP - Rocket Анимированная ракета, выполненная на Gsap.js. 👉 @sWebDev

Создание минимального проекта Angular Какой флаг используется при создании нового проекта Angular с целью создания минимального проекта? 👉 @sWebDev

​​HTML, CSS, JS, Node.JS, 🤯 - пора бы всё объединить! Все для изучения веба 👉 Логово фронтендера - самый большой канал для изучения фронта 👉 Логово верстальщика - все о верстке 👉 Логово Node.JS разраба - для тех кто хочет писать бэк на JS Собрано всё, проверяй🔥

GSAP Simpsons Slider Персонажи мультсериала The Simpsons, выполненные на Gsap.js. 👉 @sWebDev

React-sparklines Библиотека для отображения графиков в React приложениях. Легко внедряется и настраивается для отображения показателей и данных. 👉 @sWebDev

Оптимизируйте Vue С Помощью Веб-Воркеров Руководство по оптимизации приложений Vue с использованием веб-воркеров. Материал поможет повысить производительность и реактивность ваших Vue-приложений, предоставляя советы и практические примеры. 👉 @sWebDev

🎯 Тест по Node JS от OTUS 🚀 Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на углубленном курсе - Node JS Developer от OTUS Курс рассчитан на frontend-разработчиков или backend-разработчиков со знанием Javascript 🔥 РЕЗУЛЬТАТ ПРОХОЖДЕНИЯ КУРСА Разработка серверных приложений любой сложности на Node.js с использованием Express, TypeScript, GraphQl, Apollo и Nest.js Время прохождения теста ограниченно 30 минут 👉 ПРОЙТИ ТЕСТ Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Нативная интеграция. Информация о продукте www.otus.ru erid: Kra241ai1

Lil Pancake Flip Анимация вращающегося блина, выполненная на Gsap.js. 👉 @sWebDev

Джентельменский набор трушного фронтендера Опытные Frontend-разработчики собрали самые востребованные и бесплатные каналы, без которых не обойдется ни один настоящий фронтендер. Макеты для верстки — самый крупный канал с макетами для верстки. Первоисточник всех макетов в Telegram. Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д. JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку. codepen.js — готовые коды: реализованные на css и js анимации, скрипты и интерфейсы. Оживи статичные макеты Figma Start — каждый день выпускаем крутые макеты для верстки. Выбери самый интересный и удиви рекрутеров! Развивайся с нами, ведь так проще!

React-vis Библиотека для визуализации данных в React-приложениях. Предоставляет широкий спектр настраиваемых компонентов для создания красочных графиков и диаграмм. 👉 @sWebDev

API композиции Vue 3 Обзор Composition API во Vue 3, для создания чистого и организованного кода в ваших Vue-приложениях. 👉 @sWebDev

🟡Тест по React JS от OTUS — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS https://vk.cc/cs266v Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Нативная интеграция. Информация о продукте www.otus.ru Erid: Kra23pPRV

React: проверяем, чтобы компонент имел только одного потомка React.Children.only(this.props.children)- метод, используемый в библиотеке React, который предназначен для проверки того, что компонент имеет только одного потомка. Этот метод обычно используется в компонентах, ожидающих иметь только один дочерний элемент.

   import React from 'react';

   class MyComponent extends React.Component {
     render() {
       const child = React.Children.only(this.props.children);
       // Выше мы ожидаем только одного дочернего элемента.

       return (
         <div>
           {child}
         </div>
       );
     }
   }

   // Использование компонента:
   <MyComponent>
     <div>Единственный дочерний элемент</div>
   </MyComponent>

В этом примере MyComponent ожидает иметь только одного дочернего элемента. Если бы мы передали больше одного элемента, React выдал бы ошибку. 👉 @sWebDev

Configurable Dice (Three.js geometry) Игральная кость с гибкими настройками, созданная на Three.js. 👉 @sWebDev

Концепция "условного рендеринга" React Какая концепция в React называется "условным рендерингом" и как её можно реализовать? 👉 @sWebDev

Particle.js Анимированный фон, выполненный в стиле движения частиц. Реализовано на Three.js. 👉 @sWebDev

React Spring Одна из библиотек анимаций для React. Отличается невероятной гибкостью и производительностью. 👉 @sWebDev