⚡️ Memos - это открытый сервис для создания заметок, который обеспечивает конфиденциальность.

🔵 Реализован с использованием технологий React и Go, позволяя удобно записывать свои мысли.

😀 Для быстрого запуска с помощью Docker:

docker run -d \
  --init \
  --name memos \
  --publish 5230:5230 \
  --volume ~/.memos/:/var/opt/memos \
  neosmemo/memos:stable

CodeBase | Frontend | #react

⚡️ Plasmic - это визуальный конструктор для React, который позволяет создавать приложения на React без необходимости писать код, используя готовые компоненты.

🔵 Кроме того, Plasmic является очень эффективным и подходит для разработки маркетинговых веб-сайтов и сайтов электронной коммерции с большим объемом трафика.

🐱 GitHub
🔵 Сайт

CodeBase | Frontend | #react

⚡️ React-animations ⚡️

React-animations — это библиотека, основанная на анимациях из animate.css. Она легко осваивается и предлагает большое количество анимаций.

React-animations совместима с любыми inline-style библиотеками, которые поддерживают определение ключевых кадров анимации через объекты, такими как Radium, Aphrodite или styled-components.

Теперь давайте разберём, как это работает на примере анимации подпрыгивания.

➡️ Для начала необходимо импортировать нужную анимацию из react-animations.

const Bounce = styled.div`animation: 2s ${keyframes`${bounce}} infinite;

➡️ После создания компонента нужно обернуть любой HTML-код или компонент для применения анимации.

<Bounce><h1>Hello Animation Bounce</h1></Bounce>

➡️ Пример:

import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';
import { bounce } from 'react-animations';
import './style.css';

const Bounce = styled.div`animation: 2s ${keyframes`${bounce}} infinite;

export default class ReactAnimations extends Component {
    render() {
        return (
            <Bounce><h1>Hello Animation Bounce</h1></Bounce>
        );
    }
}

Анимация успешно работает, она проста и легко настраивается.

Для использования анимации при прокрутке можно воспользоваться отличным решением — библиотекой react-animate-on-scroll.

CodeBase | Frontend | #react