Благодаря отсутствию классовых компонентов, эти проекты станут отличным введением в функциональное программирование с React и наверняка помогут вам улучшить свои навыки.
Если понравился пост, добавь🔥 🔥 🔥
CodeBase | Frontend | #react #project
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤4
jsx
import React, { Component } from 'react';
class TimerComponent extends React.Component {
constructor() {
super();
this.state = {
seconds: 0,
};
this.timer = null; // Инициализация таймера
}
// При монтировании компонента, запускаем таймер
componentDidMount() {
this.timer = setInterval(() => {
this.setState({ seconds: this.state.seconds + 1 });
}, 1000); // Обновление каждую секунду (1000 миллисекунд)
}
// При размонтировании компонента, очищаем таймер, чтобы избежать утечки памяти
componentWillUnmount() {
clearInterval(this.timer);
}
render() {
return (
<>
<h1>Timer Component</h1>
<p>Прошедшее время: {this.state.seconds} секунд</p>
</>
);
}
}
export default TimerComponent;
Понравился пост? Добавь🔥 🔥 🔥
CodeBase | Frontend | #react_js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥3🥴1
const [state, setState] = useState(initialState);
Во время инициализации,
state
равно переданному значению initialState
.setState(newState);
При последующих обновлениях, значение
state
, полученное с помощью useState
, отображает текущее состояние после всех обновлений.Функциональные обновления
setState
, которая принимает предыдущее значение и возвращает новое. В примере с компонентом счетчика используются обе формы setState
.function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
<button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
</>
);
}
Понравился пост? Добавь🔥 🔥 🔥
CodeBase | Frontend | #react
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8❤🔥3👍1
npm install tamagui @tamagui/config
@tamagui/core
— является библиотекой стилей, расширяющей API стилей React Native с множеством функций из CSS без внешних зависимостей, кроме React.@tamagui/static
— компилятор, который оптимизирует производительность.@tamagui
— обширный универсальный набор компонентов.Понравился пост? Добавь🔥 🔥 🔥
CodeBase | Frontend | #react
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
useLayoutEffect
— это хук в React, который позволяет выполнять побочные эффекты синхронно после того, как все изменения DOM были внесены, но до того, как браузер обновит экран. useEffect
Основное различие между
useEffect
и useLayoutEffect
заключается во времени их выполнения:useEffect
выполняется асинхронно после рендеринга и после того, как браузер обновил экран.useLayoutEffect
выполняется синхронно сразу после всех изменений в DOM, но до того, как браузер нарисует экран. useLayoutEffect
Использование
useLayoutEffect
целесообразно в случаях, когда нужно: useLayoutEffect
Рассмотрим пример, где мы хотим измерить ширину элемента
div
сразу после его рендеринга и отобразить эту ширину в элементе:import React, { useLayoutEffect, useRef, useState } from 'react';
function MeasureDiv() {
const divRef = useRef(null);
const [width, setWidth] = useState(0);
useLayoutEffect(() => {
if (divRef.current) {
setWidth(divRef.current.offsetWidth);
}
}, []);
return (
<div>
<div ref={divRef} style={{ width: '50%' }}>
Resize the window to change my width
</div>
<p>Div width: {width}px</p>
</div>
);
}
export default MeasureDiv;
useRef
для получения ссылки на элемент div.
useLayoutEffect
мы измеряем ширину элемента после его рендеринга, но до того, как браузер обновит экран. useState
и отображается в абзаце.Этот подход гарантирует, что ширина элемента будет измерена до того, как пользователь увидит изменения на экране, что может быть критично для некоторых приложений, например, для анимаций или точных расчётов верстки.
useLayoutEffect
блокирует обновление экрана до завершения эффекта, использование его для длительных операций может привести к задержкам и ухудшению производительности. useLayoutEffect
только тогда, когда это действительно необходимо, а для всех остальных побочных эффектов использовать useEffect.
Понравился пост? Добавь🔥 🔥 🔥
CodeBase | Frontend | #react_hook
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5❤1
docker run -d \
--init \
--name memos \
--publish 5230:5230 \
--volume ~/.memos/:/var/opt/memos \
neosmemo/memos:stable
CodeBase | Frontend | #react
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
CodeBase | Frontend | #react
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
React-animations — это библиотека, основанная на анимациях из animate.css. Она легко осваивается и предлагает большое количество анимаций.
React-animations совместима с любыми inline-style библиотеками, которые поддерживают определение ключевых кадров анимации через объекты, такими как Radium, Aphrodite или styled-components.
Теперь давайте разберём, как это работает на примере анимации подпрыгивания.
const Bounce = styled.div`animation: 2s ${keyframes`${bounce}} infinite;
<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
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3❤1
Forwarded from Я хочу стать программистом
Паттерны проектирования jаvascript
Год: 2025
Автор: Ди Франческо Уго
Язык: Русский
#паттерны #JаvaScript #WebAPI #React #фронтенд #frontend
Год: 2025
Автор: Ди Франческо Уго
Язык: Русский
Автор дает исчерпывающее представление о паттернах проектирования в современном jаvascript (ES6+) и приводит практические примеры их применения. Сначала вы познакомитесь с порождающими, структурными и поведенческими паттернами проектирования в идиоматическом для jаvascript стиле, а затем переключитесь на архитектурные паттерны и паттерны пользовательского интерфейса. Вы узнаете, как применять паттерны, характерные для таких библиотек, как React, и распространять их на фронтенд и микрофронтенд.
В последней части книги представлены и проиллюстрированы паттерны улучшения производительности и безопасности, включая обмен сообщениями, события и стратегии загрузки ресурсов, а также паттерны высокопроизводительных асинхронных вычислений. В издании приводятся примеры использования React и Next.js, а также jаvascript и Web API. Они помогут выбрать и внедрить проверенные паттерны проектирования в различных веб-экосистемах и изменить ваш подход к разработке.
#паттерны #JаvaScript #WebAPI #React #фронтенд #frontend
👍4
React: современные шаблоны для разработки приложений
Автор: Бэнкс Алекс, Порселло Ева
Авторы научат вас создавать пользовательские интерфейсы, которые будут динамически отображать изменения без необходимости перезагрузки страницы даже на крупномасштабных сайтах, работающих с огромными массивами данных.
#book#react
Книга
CodeBase | Frontend | #react
Автор: Бэнкс Алекс, Порселло Ева
Авторы научат вас создавать пользовательские интерфейсы, которые будут динамически отображать изменения без необходимости перезагрузки страницы даже на крупномасштабных сайтах, работающих с огромными массивами данных.
#book#react
Книга
CodeBase | Frontend | #react
👍6