React JS

Верстаешь? 🔥 Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке: 1. Сверстаешь веб-сайт на HTML + CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Добавишь в портфолио 1 качественный проект; 7. Получишь в подарок чек-лист «45 мест для поиска работы». А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова. 👉 Проскочить на интенсив бесплатно Начинаем 11 июля.

📚10 лучших библиотек React для разработки высокопроизводительных веб-приложений. 1. React Native React Router - это популярная библиотека для управления навигацией в React-приложениях. Она позволяет задавать маршруты и URL декларативно, а также предоставляет возможности вложенных маршрутов и динамического согласования. 2. Redux Redux - это контейнер состояний для JavaScript-приложений, который позволяет разработчикам предсказуемо и масштабируемо управлять сложной логикой состояния. Он интегрируется легко с React и обеспечивает центральное хранилище для состояния приложения, которое может быть использовано в нескольких компонентах. 3. React Router React Router - популярная библиотека для управления навигацией в React-приложениях. Она позволяет декларативно определять маршруты и URL, а также предоставляет возможности вложенных маршрутов и динамического согласования маршрутов. React Router интегрируется с другими React-библиотеками, включая Redux, что делает ее мощным инструментом для создания сложных веб-приложений. 4. React Query React Query - библиотека для получения и кэширования данных в React-приложениях. Она обеспечивает удобный интерфейс для получения данных и управления их жизненным циклом. React Query также поддерживает пагинацию, поллинг и рендеринг на сервере, что делает ее универсальным инструментом для создания высокопроизводительных веб-приложений. 5. React Bootstrap React Bootstrap - библиотека компонентов пользовательского интерфейса для React-приложений, основанная на фреймворке Bootstrap. Она предлагает предварительно встроенные компоненты, включая кнопки, формы, модалы и оповещения, и оптимизирована для использования с React. 6. Material UI Material UI - библиотека с готовыми компонентами пользовательского интерфейса, основанными на Google Material Design. Она включает кнопки, карточки, формы, иконки и другие компоненты. Material UI легко настраивается и подходит для создания привлекательных и отзывчивых интерфейсов. 7. Styled Components Styled Components - это библиотека для стилизации React-компонентов, позволяющая писать CSS в коде JavaScript с использованием мощного и интуитивно понятного API. Она также предоставляет возможность создавать темы и управлять настройками, а также оптимизирует производительность CSS путем уменьшения размера сгенерированного кода. 8. React Virtualized React Virtualized - библиотека для эффективного рендеринга больших наборов данных в React-приложениях, позволяющая осуществлять бесконечную прокрутку и ленивую загрузку. Она также обрабатывает динамическое изменение размеров и оптимизирована для высокой производительности. 9. React Testing Library React Testing Library — это библиотека для тестирования React-приложений, которая предлагает простой API для тестирования компонентов и их взаимодействия с пользователем. Она фокусируется на тестировании поведения приложения с точки зрения пользователя и помогает написать устойчивые тесты, не зависящие от изменений в базовой реализации. React Testing Library помогает улучшить качество React-приложения и написать хорошие тесты. 10. Framer Motion Framer Motion - библиотека для анимации в React, с простым API и поддержкой различных типов анимации, включая ключевые кадры, переходы и физическую анимацию. Также позволяет создавать сложные взаимодействия на основе жестов. @react_tg

Стартануть в IT быстро и эффективно — подготовительный курс по Frontend-разработке. 🗓 Начинаем 13 июля! Даем: 72 урока с практикой в браузере, 3 онлайн вебинара и 1 сессию лайвкодинга с практикующим разработчиком. Получаем: крепкие знания базы языка, умение понимать код и первую программу на JavaScript, написанную вместе с наставником. 🔜 Запишитесь прямо сейчас!

🖥 Эффективный способ тестрования хуков React с помощью Vitest. Подробный гайд для фронтенд-разработчика. Статья @react_tg

​Самый безопасный способ скрыть ключи API при использовании React Хотите убедиться, что ваши ключи API в целости и сохранности при работе с React? В этой статье вы увидите лучшие способы скрыть ключи API, от использования переменных среды до создания собственного внутреннего прокси-сервера. Подробнее: https://www.smashingmagazine.com/2023/05/safest-way-hide-api-keys-react/ #фронтенд #react

Gallery Example - Крутая Галерея картинок в стиле киберпанк. https://codepen.io/toshiya-marukubo/pen/gOKMvPZ @react_tg

Frontender's notes - самый большой канал по фронту с актуальной инфой по HTML, CSS, JS, TypeScript, React, Node.js и развитию Soft-skills, а также разборы вопросов для интервью и подборка крутых статей c опытом релокации айтишников в другие страны. Вам сюда: 👉 @frontendnoteschannel А так же небольшой канал с англоязычными статьями @frontend_international В общем добро пожаловать!

Circular Corner Borders 3D Hover Image (CSS Only) - Эффект при наведении на карточку, выполненный на чистом CSS, без использования JavaScript https://codepen.io/TheMOZZARELLA/pen/OJOOVVJ @react_tg

Node, Nest, Next, Express🤯 - пора бы всё объединить! Для этого мы создали отдельный уголок - Серверный JavaScript. Собрали всё, проверяй🔥

React.js Design Patterns Год: 2023 Автор: Aleksandra Desmurs-Linczewska Publisher: Bpb Формат: EPUB 📚 Скачать книгу @react_tg

Grid 3d card tilt effect — карточки с эффектом объема при наведении. Реализованы с помощью CSS и JavaScript. https://codepen.io/ghaste/pen/zYJqxax @react_tg

🗂4 пользовательских хука React. 1. useMount Следует настроить хук под названием useMount. Тогда функция обратного вызова будет выполняться только при первом рендеринге компонента. Исходный код: const useMount = (callback) => { React.useEffect(callback, []) } Пример: const UseMountDemo = () => { const [count, setCount] = React.useState(0) useMount(() => { console.log("useMount") }) return ( <div> count: { count } <button onClick={() => setCount(count++)}>add</button> </div> ) } Когда компонент рендерится повторно, useMount не выполняется снова. 2. useUnmount Можно разработать хук useUnmount, чтобы указать, что функция обратного вызова выполняется, когда компонент размонтирован. Исходный код: const useUnmount = (callback) => { React.useEffect(() => { return callback }, []) } Пример: const Child = () => { const [ count, setCount ] = useState(0) useUnmount(() => { // Мы ожидаем вывод значения num, когда компонент будет размонтирован console.log('useUnmount', count) }) return ( <div> count: {count} <button onClick={() => setCount(count + 1)}>add</button> </div> ) } const UseUnmountedDemo = () => { const [showChild, setShowChild] = React.useState(true); // Мы используем "showChild" для управления отображением и скрытием дочернего компонента return ( <div> { !!showChild && <Child /> } <button onClick={() => setShowChild(false)}>Destroy child</button> </div> ) } Когда компонент Child удаляется, функция обратного вызова useUnmount выполняется, но обнаруживается, что count  —  это начальное значение 0, а не 10. Что вызывает такой неправильный результат? Причина этого кроется в механизме закрытия в useEffect, потому что функция передается при выгрузке компонента для первого рендеринга. Чтобы получить состояние в реальном времени, нужно использовать useRef. const useUnmount = (callback) => { const callbackRef = React.useRef(callback) callbackRef.current = callback React.useEffect(() => { return () => { callbackRef.current() } }, []) } Теперь при удалении компонента получаем правильное значение count 3. useContext Иногда необходимо выполнять логический код только после изменения зависимости. Можно ли мы достичь этой цели, используя такой подход? function UseUpdateEffectDemo() { const [count, setCount] = React.useState(0) React.useEffect(() => { console.log('count changed', count) }, [ count ]) return ( <div> count: {count} <button onClick={() => setCount(count + 1)}>change</button> </div> ) } Однако count выведет 0, как только компонент будет смонтирован. Как можно выполнить функцию обратного вызова после изменения count? const useUpdateEffect = function (effectCallback, deps = []) { const isFirstMount = React.useRef(false) React.useEffect(() => { return () => { isFirstMount.current = false } }, []) React.useEffect(() => { // Не выполняйте effectcallback для первого раза if (!isFirstMount.current) { isFirstMount.current = true } else { return effectCallback() } }, deps) } function UseUpdateEffectDemo() { const [count, setCount] = React.useState(0) useUpdateEffect(() => { console.log('Count changed', count) }, [ count ]) return ( <div> count: {count} <button onClick={() => setCount(count + 1)}>change</button> </div> ) } 4. useSetState Читать продолжение

Million.js — ориентированная на производительность замена VDOM для React Начавшаяся два года назад как небольшая, не зависящая от библиотек реализация виртуального DOM, Million сейчас — это библиотека, которая ускоряет работу компонентов React до 70 %.

📚7 библиотек для анимаций на React 1. React Spring React-spring - это библиотека, основанная на принципах физики пружин, которая позволяет создавать анимацию пользовательского интерфейса и удовлетворить большинство ваших потребностей в этой области. Ее гибкие инструменты позволяют реализовать ваши идеи и создать интерактивные интерфейсы с анимацией. 2. Framer Motion Framer Motion - это библиотека анимации для React, которая подходит для использования в проектах. Она использует функциональность, предоставляемую Framer - лучшим инструментом для прототипирования команд. Библиотека создана на основе открытого исходного кода... 3. TS Particles С tsParticles вы можете легко создавать подробные настройки для частиц и анимаций конфетти и фейерверков, которые могут использоваться как анимированные фоны для вашего сайта. Эта библиотека предоставляет готовые компоненты для работы с React, Angular, Svelte и Web Components. 4. Green Sock GSAP, или GreenSock Animation Platform, является платформой для анимации, которая может анимировать любой элемент, на который можно нажать (CSS свойства, SVG, React Canvas, общие объекты и многое другое), решая множество проблем с несоответствиями в разных браузерах, и все это происходит с ошеломляющей скоростью. 5. Remotion Remotion — это инструмент, который позволяет создавать видео и анимации с использованием HTML, CSS, JavaScript и TypeScript, и даже неспециалисты могут освоить этот процесс. Основываясь на своем программистском опыте, вы можете создавать анимации и видео с помощью Remotion. 6. React Move React Move — легковесная библиотека, позволяющая разработчикам создавать красивые анимации на основе данных. Она наглядно отражает события жизненного цикла при загрузке страниц, и может быть использована для создания привлекательных эффектов в вашем проекте. 7. React Awesome Reveal React Awesome Reveal позволяет создавать анимацию появления элементов с помощью Intersection Observer API, который определяет, когда элементы становятся видимыми в окне приложения. Emotion использует эффективную технологию анимации CSS, которая повышает производительность и обеспечивает аппаратное ускорение.

Parallax Article Card — форма с эффектом параллакса при наведении. Реализована с помощью SCSS и JavaScript. https://codepen.io/mprquinn/pen/zdKqGE @react_tg

🔧 Waku — минималистичный React-фреймворк с поддержкой React Server Components. Репозиторий

Стартануть в IT быстро и эффективно — подготовительный курс по Frontend-разработке. 🗓 Начинаем 13 июня! Даем: 72 урока с практикой в браузере, 3 онлайн вебинара и 1 сессию лайвкодинга с практикующим разработчиком. Получаем: крепкие знания базы языка, умение понимать код и первую программу на JavaScript, написанную вместе с наставником. 🔜 Запишитесь прямо сейчас!

7 методов оптимизации производительности React 1. Использование React.memo (HOC, а не хук) import React, { memo } from 'react' interface Props { title: string subtitle: string } const MyComponent: React.FC<Props> = memo(({ title, subtitle }) => { return ( <div> <h1>{title}</h1> <h2>{subtitle}</h2> </div> ) }) 2. Оптимизация обработчиков событий с помощью useCallback import React, { useState, useCallback } from 'react' const Counter: React.FC = () => { const [count, setCount] = useState(0) const increment = useCallback(() => { setCount(prevCount => prevCount + 1) }, []) return ( <div> <p>Count: {count}</p> <button onClick={increment}>Increment</button> </div> ) } 3. Виртуализация длинных списков с помощью react-window import React from 'react' import { FixedSizeList as List } from 'react-window' const Row: React.FC<{ index: number; style: React.CSSProperties }> = ({ index, style, }) => { return ( <div style={style}> <p>{`Row ${index}`}</p> </div> ) } const VirtualizedList: React.FC = () => { const itemCount = 1000 return ( <List height={500} itemCount={itemCount} itemSize={50} width={300}> {Row} </List> ) } 4. Ленивая загрузка компонентов с помощью React.lazy и Suspense import React, { lazy, Suspense } from 'react' const LazyLoadedComponent = lazy(() => import('./LazyLoadedComponent')) const App: React.FC = () => { return ( <div> <Suspense fallback={<div>Loading...</div>}> <LazyLoadedComponent /> </Suspense> </div> ) } 5. Использование API React.Profiler для выявления узких мест производительности import React, { Profiler } from 'react' const onRender = ( id: string, phase: 'mount' | 'update', actualDuration: number, baseDuration: number, startTime: number, commitTime: number, interactions: Set<{ id: number; name: string; timestamp: number }> ) => { console.log('Profiler:', { id, phase, actualDuration, baseDuration, startTime, commitTime, interactions, }) } const App: React.FC = () => { return ( <Profiler id="MyComponent" onRender={onRender}> <MyComponent /> </Profiler> ) } 6. Оптимизация обновления состояний с помощью Immer import React, { useState } from 'react' import produce from 'immer' interface User { id: number name: string } const App: React.FC = () => { const [users, setUsers] = useState<User[]>([ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, ]) const updateUser = (id: number, newName: string) => { setUsers( produce((draftUsers: User[]) => { const user = draftUsers.find(user => user.id === id) if (user) { user.name = newName } }) ) } return ( // ... ) } 7. Использование троттлинга и дебаунсинга для обработчиков ввода import React, { useState, useCallback } from 'react' import { debounce } from 'lodash-es' const SearchBox: React.FC = () => { const [searchTerm, setSearchTerm] = useState('') const handleSearch = useCallback( debounce((value: string) => { setSearchTerm(value) }, 300), [] ) const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { handleSearch(event.target.value) } return ( <div> <input type="text" onChange={handleChange} /> </div> ) } @react_tg