Использование React в приложениях Angular

Рассмотрим интеграцию React в приложение Angular. Такой подход может быть полезным, например, при разработке сложных компонентов или при работе с приложением, которое уже использует React.

👉 @sWebDev

The Movie Database

База данных с кино, реализованная на React.

👉 @sWebDev

Новый функционал React для оптимизации производительности?

В React 18 появился функционал автоматической группировки нескольких вызовов обновления в один этап рендера. Что это за функционал?

👉 @sWebDev

Vue-controlled Wall-E

Проект с героем мультфильма WALL-E, следящим за движением курсора. Выполнено на Vue.js.

👉 @sWebDev

Добавление события на элемент Vue

Добавление события на элемент реализуется директивой v-on. Аргументом директивы после двоеточия передается название события. Названия событий аналогичны событиям JavaScript. В примере мы навесили обработчик click, на кнопку, которая увеличивает переменную counter на единицу.

    
        <template>
        <div class="counter">{{counter}}</div>
        <button v-on:click="increaseCounter">+1</button>
        </template>
        
        <script>
            export default {
                name: 'App',
                data() {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    increaseCounter: function () {
                        return this.counter++;
                    }
                }
            }
        </script>

C версии Vue 2.4.0 доступна возможность навесить несколько событий на элемент.

👉 @sWebDev

GSAP FLIP image grid modal

Галерея с анимацией, созданная на GSAP.js и SCSS.

👉 @sWebDev

Освоение React: методы, которые выведут ваш пользовательский интерфейс на новый уровень

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

👉 @sWebDev

Blotter.js

Blotter.js - это библиотека для создания текстовых анимаций на WebGL. Она позволяет создавать сложные и красивые текстовые анимации, используя шейдеры и эффекты, которые обрабатываются на GPU. Библиотека имеет простой API, который позволяет легко создавать и настраивать текстовые анимации, поддерживает различные типы текстовых элементов, включая 2D и 3D тексты.

👉 @sWebDev

Scattering hexagons

Анимированная сцена с рассеиванием, выполненная на JQuery.

👉 @sWebDev

5 способов определить компонент в Vue 3

Vue развивается и в настоящее время существует несколько способов определения компонента. По ссылке определяем простой компонент и проводим рефакторинг всеми доступными методами.

👉 @sWebDev

Muuri

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

👉 @sWebDev

Game of Life (React + Redux)

Необычная игра, выполненная на React и Redux.

👉 @sWebDev

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

В React 18 появился хук, который позволяет вернуть отложенную версию переданного значения, что это за хук?

👉 @sWebDev

React Calculator

По ссылке проект калькулятора, выполненного на React.

👉 @sWebDev

React хук для изменения ширины и длины элемента

use-resize-observer  —  React-хук, который позволяет измерять ширину и высоту элемента. Этот хук невероятно удобен при работе с обрезкой, редактированием, обработкой изображений и т.д.

Пример:

    import React from "react";
    import ReactDOM from "react-dom";
    import useResizeObserver from "use-resize-observer";
    import "./styles.css";

    const App = () => {
    const { ref, width, height } = useResizeObserver<HTMLDivElement>();
    return (
    <div>
    <div className="instructions">Try resizing this div!</div>
    <div ref={ref} className="box">
    {width}x{height}
    </div>
    </div>
    )};

    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

👉 @sWebDev

LIVE: React Gallery with Keyboard Control

Проект анимированной галереи, выполненной на React.

👉 @sWebDev

Новый способ передачи данных в динамически создаваемые компоненты

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

👉 @sWebDev

Matter.js

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

👉 @sWebDev

React Animated BB-8

Отслеживание курсора в стиле Star Wars. Проект с анимированным BB-8, выполнено на React.

👉 @sWebDev