CodeBase | Frontend
2.14K subscribers
380 photos
149 videos
5 files
566 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
⚡️Приложение для поиска фильмов с помощью React (с хуками) ⚡️

➡️ Чему вы научитесь

➡️ Создавая данное приложение, вы улучшите навыки работы с React, использовав новые хуки API.

➡️ Проект включает в себя компоненты React, разнообразные хуки, взаимодействие с внешним API и стилизацию с помощью CSS.

➡️ Стек технологий и особенности

🟢 React с хуками
🟢 create-react-app
🟢 JSX
🟢 CSS

Благодаря отсутствию классовых компонентов, эти проекты станут отличным введением в функциональное программирование с React и наверняка помогут вам улучшить свои навыки.

Если понравился пост, добавь 🔥🔥🔥


🔗 Ссылка на проект

CodeBase | Frontend | #react #project
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥74
⚡️ componentWillUnmount ⚡️

➡️ Этот метод вызывается прямо перед удалением компонента из DOM. Это важное место для выполнения задач по очистке, таких как остановка таймеров, отписка от событий или освобождение ресурсов для предотвращения утечек памяти.

🗣 Пример кода:

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;


TimerComponent класс инициализирует состояние seconds для отслеживания времени. В componentDidMount устанавливается таймер, а в componentWillUnmount он очищается. Таймер обновляет время каждую секунду. Компонент отображает прошедшее время. Очистка таймера в componentWillUnmount предотвращает утечки ресурсов.

Понравился пост? Добавь 🔥🔥🔥


CodeBase | Frontend | #react_js
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥3🥴1
🖼️ React: Базовые крючки 🖼️

const [state, setState] = useState(initialState);


➡️ Использование функции useState позволяет создать переменную state и функцию setState для управления ее значением.

Во время инициализации, state равно переданному значению initialState.

setState(newState);

➡️ Функция setState применяется для изменения значения состояния. При вызове функции с новым значением, React добавляет в очередь повторную отрисовку компонента.

При последующих обновлениях, значение 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
⚡️ Tamagui - это программное обеспечение с текстовым графическим пользовательским интерфейсом (TUI) для управления устройствами через командную строку, облегчая взаимодействие пользователя с техническими устройствами.

➡️ Для установки используйте:

npm install tamagui @tamagui/config


➡️ Включает в себя три компонента:

🟢 @tamagui/core — является библиотекой стилей, расширяющей API стилей React Native с множеством функций из CSS без внешних зависимостей, кроме React.

🟢 @tamagui/static — компилятор, который оптимизирует производительность.

🟢 @tamagui — обширный универсальный набор компонентов.

🖥 GitHub
💩 Доки

Понравился пост? Добавь 🔥🔥🔥


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 целесообразно в случаях, когда нужно:

🔘 Измерить размеры или позицию DOM-элементов до того, как браузер отрисует изменения.
🔘 Выполнить какие-либо операции, которые могут повлиять на верстку или стиль, и эти изменения должны быть учтены до отображения на экране.

▶️ Пример использования 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
🔥51
⚡️ Memos - это открытый сервис для создания заметок, который обеспечивает конфиденциальность.

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

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

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

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

🐱 GitHub
🔵 Сайт

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 ⚡️

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
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥31
Паттерны проектирования jаvascript

Год: 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
👍6