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

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

👉 @sWebDev

Airport Distance Map

Веб-приложение, показывающее расстояние от одного аэропорта до другого. Выполнено на GSAP.js.

👉 @sWebDev

Получаем доступ к реактивным данным и активным событиям Vue.js

В хуке created можно получить доступ к реактивным данным и активным событиям. Шаблоны и виртуальный DOM ещё не встроены (mounted) и не отрисованы.
Например:

        ExampleComponent.vue
        <script>
        export default {
        data() {
            return {
            property: 'Blank'
            }
        },

        computed: {
            propertyComputed() {
            console.log('I change when this.property changes.')
            return this.property
            }
        },

        created() {
            this.property = 'Example property update.'
            console.log('propertyComputed will update, as this.property is now reactive.')
        }
        }
        </script>

👉 @sWebDev

Onsen UI for Angular

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

👉 @sWebDev

Хорошие способы организации большого проекта Vue.js

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

👉 @sWebDev

Anime.js clock

Часы, выполненные с использованием библиотеки Anime.js.

👉 @sWebDev

Используем pre-render в React приложении с react-snap

Практическое руководство по использованию инструмента React Snap для предварительной отрисовки (pre-rendering) приложения на React. Автор описывает, как использовать React Snap для создания статических HTML-файлов, которые можно использовать для улучшения производительности и оптимизации поисковой оптимизации (SEO) приложения.

👉 @sWebDev

PrimeNG

Angular библиотека, которая предоставляет более 100 готовых компонентов для создания веб-приложений: таблицы, формы, кнопки, графики. У PrimeNG хорошая документация, наглядные примеры и развитое сообщество. Библиотека является кроссбраузерной и адаптивной.

👉 @sWebDev

Использование 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