Секреты React-разработки. Создай React-портфолио с нуля шаг за шагом

👉 Полный цикл разработки: от первой строки кода до деплоя
👉 Создаём современный и динамичный сайт на React
👉 Полное руководство (4 часа 42 минуты)

Сегодня я собрал в одном видео весь процесс создания портфолио на React с нуля! 🎥 В этом выпуске мы пройдём все этапы: от вёрстки и компонентов до анимации, переключения тем и финального деплоя.

💡 Что вы узнаете в этом видео:

🔹 Разработка структуры портфолио: создаём секции Home, About, Skills, Services, Portfolio, Clients, Contact.
🔹 Работа с React-компонентами: используем useState, useEffect, props и массивы данных.
🔹 Добавление анимации с Motion: оживляем интерфейс и создаём плавные переходы.
🔹 Переключение тем (светлая/тёмная): реализуем через useState и сохраняем в LocalStorage.
🔹 Динамическое меню и кнопка "Вверх": улучшаем навигацию и пользовательский опыт.
🔹 Деплой на Netlify: публикуем проект и делаем его доступным онлайн.


⏱️ Таймкоды:

00:07 — Обзор проекта - что мы будем разрабатывать в React
00:35 — Настройка окружения перед началом работы в React
15:53 — Создаём структуру проекта и компоненты
25:10 — Импортируем и подключаем картинки в проект
31:09 — Создаём компонент Header с меню навигации
57:50 — Разрабатываем секцию Home в React
01:05:05 — Создаём секцию About с данными о разработчике
01:13:30 — Добавляем секцию Skills с анимацией и эффектами
01:31:01 — Переходим к блоку Work Experience: оформление и логика
01:36:02 — Создаём секцию Services: карточки услуг и стили
02:02:49 — Разрабатываем секцию Portfolio с проектами
02:19:29 — Добавляем блок Next Project для перелистывания работ
02:24:35 — Создаём секцию Our Clients с отзывами и логотипами
02:44:38 — Разрабатываем секцию Contact с формой обратной связи
02:58:10 — Исправляем баг: убираем скролл при открытии мобильного меню
03:01:57 — Добавляем плавное появление popup в секции Portfolio
03:04:10 — Создаём секцию Footer с контактами и ссылками
03:22:00 — Добавляем кнопку "Вверх" для удобной навигации
03:28:33 — Реализуем переключение тем (светлая/тёмная) с сохранением
03:38:51 — Анимация элементов с помощью библиотеки React Motion
03:43:56 — Разбираем работу Motion: ключевые атрибуты и настройки
03:45:22 — Выносим анимацию в отдельный файл для удобства
04:19:07 — Обзор будущих проектов, которые можно реализовать
04:37:53 — Финальный деплой проекта на Netlify
04:42:23 — Всем мира и добра! 🚀😊

источник

📲 Мы в MAX

✍️ @React_lib

Возможно, вам не нужен useEffect (версия с ref‑колбэками)

В React хук useEffect часто используют для выполнения кода после монтирования компонента: подписки, измерения DOM-элементов, вызовы API и т. д. Но в некоторых случаях — особенно когда нам нужно только получить доступ к DOM-элементу — useEffect оказывается избыточным.

Что предлагают вместо useEffect?

Ref-колбэки.
Вместо того чтобы ждать монтирования и использовать useEffect, можно передать функции-колбэку ссылку (ref). Этот колбэк автоматически вызовется, когда элемент появится или исчезнет в DOM.

Когда использовать?

- Для измерения DOM (размеры, позиция).
- Для инициализации библиотек, которые работают с элементом.
- Для управления фокусом.

Если нужно реагировать на изменения состояния или выполнять сложные сайд-эффекты — тогда useEffect остаётся правильным выбором.

📲 Мы в MAX

✍️ @React_lib

Как я ускоряю разработку с помощью React DevTools

Сегодня хочу поделиться инструментом, без которого я уже не представляю работу — React DevTools.
Многие его ставят "для галочки", но реально используют только для просмотра компонентов. А ведь он может сильно ускорить разработку, если выжать из него максимум.

Вот что реально помогает:

1. Профайлер — если у вас страница перерисовывается дольше, чем хотелось бы, откройте вкладку Profiler. Там видно, какие компоненты рендерятся лишний раз и сколько это занимает времени.
2. Поиск по дереву компонентов — если проект большой, можно быстро найти нужный компонент прямо в DevTools (Cmd/Ctrl + F).
3. Редактирование пропсов на лету — в режиме разработчика можно менять пропсы и сразу видеть результат без пересборки проекта.
4. Highlight updates — включает подсветку обновляемых компонентов. Очень удобно, чтобы найти “лишние” рендеры.

Если вы еще не используете хотя бы профайлер и подсветку рендеров — попробуйте. Уже через пару дней вы начнете понимать, где проект "проседает" и что можно оптимизировать.

А вы часто заглядываете в Profiler или больше по старинке — console.log и догадки?

📲 Мы в MAX

✍️ @React_lib

День сурка frontend-разработчика

Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что.

Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь.

И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.

Есть классные проекты и сильные команды, где разработчиков действительно ценят, дают расти, поддерживают развитие и платят достойно и ты можешь туда попасть!

👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке.

Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂

А в своем канале:
👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения
👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться
👉На примерах объясняю, как проходить собеседования, включая техничку
👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров

А еще регулярно публикую полезные материалы:
▪️Задачи, на которых валяться кандидаты
▪️База по микрофронтам
▪️Подборка из 100+ каналов с вакансиями для разработчиков
▪️100 вопросов, которые точно помогут тебе на собеседовании
▪️Чек лист проверки своего резюме

А еще у меня множество успешных кейсов и отзывов, найти их можно в канале.

Реклама, erid: 2W5zFJobajB ИП Галактионов Тихон Витальевич, ИНН 771618975809

Сегодня я хочу рассказать вам о проблеме, которая встречается почти у каждого React-разработчика - "эффект дрожания" интерфейса при условном рендеринге.

Допустим, у вас есть компонент, который отображает список данных после загрузки. Пока данные подгружаются, вы показываете спиннер, а потом - сам список. Всё вроде нормально… но при переключении состояния верстка “прыгает”, элементы смещаются, и пользователь видит неприятный скачок.

💡 Как решить?
Главная идея — зарезервировать место под контент заранее. Даже если мы показываем скелетон или спиннер, блок должен иметь такую же высоту, как и итоговый контент.
Например:

{isLoading ? (
  <div style={{ height: 300 }}>
    <Spinner />
  </div>
) : (
  <List items={data} />
)}

А ещё лучше — использовать скелетон-загрузчик (skeleton loader). Он повторяет форму будущего контента, и благодаря этому переключение происходит плавно и без сдвигов.

📌 Совет: в UI-библиотеках вроде Material UI или Ant Design уже есть готовые скелетоны - просто используйте их вместо "чистого" спиннера. Пользователь не заметит перехода, и приложение будет казаться быстрее.

А у вас бывает, что верстка дергается при смене состояния? Как вы это решаете?

📲 Мы в MAX

✍️ @React_lib

Динамический импорт компонентов в React.

Часто в приложении мы грузим сразу всё, даже то, что пользователю может и не понадобиться. Например, модальные окна, сложные графики, админские панели. Это увеличивает бандл и замедляет загрузку.

Решение простое - использовать React.lazy и Suspense:

import { Suspense, lazy } from "react";

const Chart = lazy(() => import("./Chart"));

function Dashboard() {
  return (
    <div>
      <h1>Статистика</h1>
      <Suspense fallback={<p>Загрузка графика...</p>}>
        <Chart />
      </Suspense>
    </div>
  );
}

Теперь график подгрузится только тогда, когда реально нужен.
⚡ Это экономит мегабайты и ускоряет first paint приложения.

👉 Но будь аккуратен: динамический импорт хорошо работает для редко используемых частей. А если компонент нужен почти всегда - выгоды не будет.

Я, например, почти всегда лениво загружаю модальные окна и тяжелые виджеты.
А ты используешь React.lazy у себя в проекте?

📲 Мы в MAX

✍️ @React_lib

🚀 Подборка полезных IT каналов в Max


Системное администрирование, DevOps 📌

https://max.ru/i_odmin Все для системного администратора
https://max.ru/bash_srv Bash Советы
https://max.ru/sysadminof Книги для админов, полезные материалы
https://max.ru/i_odmin_book Библиотека Системного Администратора
https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др.
https://max.ru/tipsysdmin Типичный Сисадмин

Excel лайфхак 📌
https://t.me/Excel_lifehack Excel лайфхак

Английский с нуля 🇬🇧
https://max.ru/UchuEnglish

1C разработка 📌
https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С

Программирование C++📌
https://max.ru/cpp_lib Библиотека C/C++ разработчика

Программирование Go📌
https://max.ru/golang_lib Библиотека Go (Golang) разработчика

Программирование React📌
https://max.ru/react_lib React

Программирование Python 📌
https://max.ru/python_of Python академия.
https://max.ru/BookPython Библиотека Python разработчика

Java разработка 📌
https://max.ru/bookjava Библиотека Java разработчика

GitHub Сообщество 📌
https://max.ru/githublib Интересное из GitHub

Базы данных (Data Base) 📌
https://max.ru/database_info Все про базы данных

Фронтенд разработка 📌
https://max.ru/frontend_1 Подборки для frontend разработчиков

Библиотеки 📌
https://max.ru/programmist_of Книги по программированию
https://max.ru/proglb Библиотека программиста
https://max.ru/bfbook Книги для программистов

Программирование 📌
https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций
https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT
https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻

Шутки программистов 📌
https://max.ru/itumor Шутки программистов

Защита, взлом, безопасность 📌
https://max.ru/thehaking Канал о кибербезопасности
https://max.ru/xakkep_1 Хакер Free

Книги, статьи для дизайнеров 📌
https://max.ru/odesigners Статьи, книги для дизайнеров

Математика 📌
https://max.ru/Pomatematike Канал по математике
https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике

Вакансии 📌
https://max.ru/progjob Вакансии в IT

Мир технологий 📌
https://max.ru/mir_teh Канал для любознательных

Бонус 📌
https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга
https://max.ru/mockva_life Свежие новости Москвы
https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП

Формы без боли: react-hook-form + zod = схема в центре, минимум ререндеров

Сейчас покажу, как я собираю формы так, чтобы валидация была в одном месте, а компоненты не прыгали от каждого ввода.

1) Схема — источник правды

import { z } from 'zod';

export const userSchema = z.object({
  email: z.string().email(),
  age: z.number().int().min(18),
  newsletter: z.boolean().default(false),
});
export type UserForm = z.infer<typeof userSchema>;

2) Инициализация формы с резолвером

import { useForm, FormProvider } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

const UserForm = ({ initial }: { initial?: Partial<UserForm> }) => {
  const methods = useForm<UserForm>({
    resolver: zodResolver(userSchema),
    defaultValues: { newsletter: false, ...initial },
    mode: 'onChange', // мгновенная подсветка ошибок
  });

  const { handleSubmit, formState: { isSubmitting, errors } } = methods;

  const onSubmit = async (data: UserForm) => {
    // маппим серверные ошибки обратно в форму при необходимости
    // setError('email', { type: 'server', message: 'уже занято' })
    await api.saveUser(data);
  };

  return (
    <FormProvider {...methods}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Input name="email" label="Email" />
        <NumberInput name="age" label="Возраст" />
        <Checkbox name="newsletter" label="Подписаться" />
        {errors.root && <p className="error">{errors.root.message}</p>}
        <button disabled={isSubmitting}>Сохранить</button>
      </form>
    </FormProvider>
  );
};

3) Поля - через контекст, с мемоизацией

import { useFormContext, Controller } from 'react-hook-form';

// Простой контролируемый инпут с минимальными ререндерами
export const Input = React.memo(({ name, label }: { name: string; label: string }) => {
  const { register, formState: { errors } } = useFormContext();
  return (
    <label>
      {label}
      <input {...register(name)} />
      {errors[name] && <span className="error">{String(errors[name]?.message)}</span>}
    </label>
  );
});

// Пример для нестандартного компонента через Controller
export const NumberInput = React.memo(({ name, label }: { name: string; label: string }) => {
  const { control, formState: { errors } } = useFormContext();
  return (
    <label>
      {label}
      <Controller
        control={control}
        name={name}
        render={({ field }) => <input type="number" {...field} />}
      />
      {errors[name] && <span className="error">{String(errors[name]?.message)}</span>}
    </label>
  );
});

4) Динамические списки - useFieldArray

const { control } = useFormContext();
const { fields, append, remove } = useFieldArray({ control, name: 'phones' });

Храните массивы в форме, рендерите по fields, добавляйте/удаляйте кнопками - ререндерится только нужный участок.

5) Практические советы

- Включайте DevTools формы только в dev.
- Ошибки сервера маппьте через setError, а не кидайте alert.
- При редактировании сущности меняйте key формы (<form key={user.id}>) — проще, чем делать reset в куче мест.
- Дорогие поля оборачивайте в React.memo, а вычисления — в useMemo.

📲 Мы в MAX

✍️ @React_lib

React Developer Learning Roadmap

|-- Core Web Fundamentals
| |-- HTML & Semantic Elements
| |-- CSS Basics: Selectors, Properties
| |-- Box Model: Margin, Padding, Border
| |-- Layout Systems: Flexbox, CSS Grid
| |-- Responsive Design & Media Queries
| |-- CSS Preprocessors (SASS, LESS)
| |-- CSS Architecture Patterns (BEM, SMACSS)

|-- JavaScript Deep Dive
| |-- Syntax, Variables & Data Types
| |-- Operators & Expressions
| |-- Control Flow (if-else, switch)
| |-- Loops (for, while, do-while)
| |-- Functions, Arrow Functions
| |-- Scope, Closures & Hoisting
| |-- Error Handling & Debugging

|-- DOM & Browser APIs
| |-- Element Selection & Manipulation
| |-- Event Handling
| |-- Working with Forms & Validations
| |-- Fetch API / AJAX
| |-- Web Storage (localStorage, sessionStorage)

|-- Modern JavaScript & Tooling
| |-- ES6+ Features: let/const, spread/rest, destructuring, modules
| |-- Transpiling (Babel)
| |-- Bundlers: Webpack, Rollup, Parcel
| |-- Module Systems: ES Modules, CommonJS

|-- Version Control & Workflow
| |-- Git Fundamentals: commit, branch, merge
| |-- Hosting: GitHub, GitLab, Bitbucket
| |-- Pull Requests & Code Reviews
| |-- Continuous Integration Basics

|-- React & Ecosystem
| |-- React Fundamentals: JSX, Components, Props
| |-- State & Lifecycle Methods
| |-- Hooks (useState, useEffect, useContext, etc.)
| |-- Component Architecture & Composition
| |-- Routing (React Router)
| |-- State Management (Context API, Redux, Zustand, Recoil)
| |-- React Performance (memo, useCallback, useMemo)

|-- Styling in React
| |-- CSS-in-JS (Styled-Components, Emotion)
| |-- CSS Modules
| |-- Utility-first Frameworks (Tailwind)
| |-- UI Component Libraries (Material-UI, Ant Design)
| |-- Theming & Design Tokens
| |-- Accessibility (a11y) & ARIA
| |-- Cross-Browser Compatibility

|-- Testing in React
| |-- Unit Testing (Jest, React Testing Library)
| |-- Component Testing & Snapshot Testing
| |-- Integration Testing
| |-- End-to-End Testing (Cypress, Playwright)
| |-- Linting & Formatting (ESLint, Prettier)

|-- Performance & Optimization
| |-- Code Splitting & Lazy Loading (React.lazy, Suspense)
| |-- Memoization & Avoiding Re-renders
| |-- Image Optimization & Lazy Loading
| |-- Tree Shaking & Minification
| |-- Critical Rendering Path & Web Vitals
| |-- Server-Side Rendering & Hydration

|-- Build, Deployment & Server-side Tools
| |-- Package Managers: npm, yarn, pnpm
| |-- Build Scripts & Tooling
| |-- Frameworks / SSR: Next.js, Remix
| |-- Static Site Generation (SSG) & Incremental Static Regeneration
| |-- Deployment Platforms: Vercel, Netlify, AWS, DigitalOcean
| |-- CI/CD for React Apps

|-- Projects & Portfolio for React
| |-- Small React Apps & Widgets (e.g. Modal, To-Do List)
| |-- Real-world Projects (Dashboard, E-Commerce, Social App)
| |-- Fullstack Projects (React + backend)
| |-- Open Source Contributions & Collaborations

|-- Continuous Learning & Growth
| |-- Blogs, Tutorials & Courses
| |-- React & JavaScript Conference Talks
| |-- Community & Developer Forums
| |-- Reading Documentation & RFCs
| |-- Tracking the React Ecosystem & Trends

📲 Мы в MAX

✍️ @React_lib

Custom Hooks

Часто мы пишем один и тот же код в разных компонентах: работа с localStorage, отслеживание размеров окна, дебаунс запросов. И вот тут кастомные хуки реально спасают.

Например, простой хук для работы с localStorage 👇

import { useState } from "react";

function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  const setStoredValue = (newValue: T) => {
    setValue(newValue);
    localStorage.setItem(key, JSON.stringify(newValue));
  };

  return [value, setStoredValue] as const;
}

export default useLocalStorage;

Теперь можно использовать так:

const [theme, setTheme] = useLocalStorage("theme", "light");

🔥 Плюсы:

- код становится чище и переиспользуемым;
- избавляемся от дублирования логики;
- легко тестировать и поддерживать.

Я заметил, что когда начинаешь собирать библиотеку своих хуков, разработка ускоряется в разы. Советую прямо сегодня завести папку hooks и складывать туда такие полезности.

📲 Мы в MAX

✍️ @React_lib

❌ Избегайте использования нескольких переменных состояния для отслеживания статуса.

✅ Вместо этого используйте перечисления (enums).

📲 Мы в MAX

✍️ @React_lib

⚛️ Я собрал визуализацию того, как работает процесс рендеринга в React

Надеюсь, она поможет вам понять этот процесс и позволит лучше предсказывать и контролировать изменения UI.

Trigger → Render → Commit

📲 Мы в MAX

✍️ @React_lib

Почему useEffect - это не костыль, а инструмент, и как им не надо пользоваться 😅

Очень часто вижу в коде:

useEffect(() => {
  fetchData();
}, []);

и всё вроде бы ок… пока не появляется зависимость, вроде userId, и кто-то лениво добавляет её в массив зависимостей, не понимая, что произойдёт при каждом изменении.

👉 Проблема не в useEffect - а в том, что мы не до конца понимаем его модель.
useEffect = реакция на изменение состояния.
Если у тебя эффект, который не зависит от UI - например, загрузка данных - вынеси его в кастомный хук или вообще за пределы компонента.

Например:

function useUser(userId) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    let ignore = false;
    async function load() {
      const data = await fetch(`/api/user/${userId}`).then(r => r.json());
      if (!ignore) setUser(data);
    }
    load();
    return () => (ignore = true);
  }, [userId]);

  return user;
}

Теперь у тебя эффект чистый, изолированный и переиспользуемый.
Компонент не знает ничего про загрузку - он просто получает user.

💡 Маленький лайфхак: если ты пишешь эффект и не можешь объяснить словами, почему он зависит от этих переменных - скорее всего, архитектура требует пересмотра, а не новый костыль в useEffect.

📲 Мы в MAX

✍️ @React_lib

🧠 Сегодня я покажу вам трюк, который ускоряет ре-рендеры в React на реальных проектах

Иногда компонент начинает перерендериваться слишком часто, даже когда его пропсы не меняются. Особенно это заметно в списках, формах и сложных UI.
Сегодня я расскажу, как я на проектах использую мемоизацию коллбеков и данных, чтобы UI перестал «дергаться».

🔥 Проблема

Допустим, есть список элементов, и каждый элемент получает проп onSelect, который создаётся при каждом рендере родителя:

const handleSelect = id => {
  setSelected(id);
};

Каждый раз новая функция → дочерние элементы думают, что проп изменился → ненужный ререндер.

✅ Решение

Используйте useCallback:

const handleSelect = useCallback((id) => {
  setSelected(id);
}, []);

Но самое интересное - часто хватает мемоизации не всех, а только “горячих” функций.
Я обычно включаю профайлер, смотрю самые частые ререндеры и мемоизирую только узкие места. Так производительность улетает вверх без лишнего усложнения кода.

🎯 Практическое правило, которое я использую

Мемоизируйте только то, что реально ререндерится слишком часто.
Слепая мемоизация = грязный код.

📲 Мы в MAX

✍️ @React_lib

Как получить оффер в Яндекс, Сбер, МТС и другие крутые компании?

На фото ребята из моего комьюнити, где уже больше 220 frontend-разработчиков. Все они успешно устроились в крутые компании и получили офферы от 300 тыс рублей 🫂

👋 Привет, меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и остаюсь рядом на испытательном сроке.

В их жизни больше нет бесконечных скучных созвонов, безуспешных откликов на вакансии, странноватых собесов с вопросами словно ты на олимпиаде.

И у тебя тоже получится 😎

У меня есть канал, где я:
👉 Показываю, как пройти HR-фильтр и превратить отклики в реальные приглашения
👉 Помогаю найти мотивацию и разбираюсь с убеждениями, которые мешают расти
👉 На примерах показываю, как проходить собеседования, включая техничку
👉 Разбираю резюме и делюсь лайфхаками — например, как аккуратно «пинговать» рекрутеров

И регулярно выкладываю полезное:
▪️ Задачи, на которых валятся кандидаты
▪️ Подборка из 100+ каналов с вакансиями для разработчиков
▪️ 100 вопросов, которые помогут тебе на собеседовании
▪️ Чек-лист для проверки своего резюме

Подписывайся: https://t.me/+yKkCEerQCzRmZjY6

Реклама, erid: 2W5zFHYzE6u ИП Галактионов Тихон Витальевич, ИНН 771618975809

🚀 Подборка полезных IT каналов в Max


Системное администрирование, DevOps 📌

https://max.ru/i_odmin Все для системного администратора
https://max.ru/bash_srv Bash Советы
https://max.ru/sysadminof Книги для админов, полезные материалы
https://max.ru/i_odmin_book Библиотека Системного Администратора
https://max.ru/i_devops DevOps: Пишем о Docker, Kubernetes и др.
https://max.ru/tipsysdmin Типичный Сисадмин
https://max.ru/channel_win_sysadmin Системный Администратор Windows
https://max.ru/channel_linux_admin Linux: Системный администратор
https://max.ru/channel_linuxmod Linux
https://max.ru/channel_i_linux Системный администратор
https://max.ru/channel_devopslib DevOps, SRE, Sysadmin
https://max.ru/channel_devops_star DevOps Star (Звезда Девопса)

Excel лайфхак 📌
https://t.me/Excel_lifehack Excel лайфхак

Английский с нуля 🇬🇧
https://max.ru/UchuEnglish

1C разработка 📌
https://max.ru/odin1c_rus Cтатьи, курсы, советы, шаблоны кода 1С
https://max.ru/channel_DevLab1C 1С:Предприятие 8

Программирование C++📌
https://max.ru/cpp_lib Библиотека C/C++ разработчика
https://max.ru/channel_cpp_geek C++ geek

Программирование Go📌
https://max.ru/golang_lib Библиотека Go (Golang) разработчика

Программирование React📌
https://max.ru/react_lib React

Программирование Rust📌
https://max.ru/channel_rust_lib

Программирование Python 📌
https://max.ru/python_of Python академия.
https://max.ru/BookPython Библиотека Python разработчика

Java разработка 📌
https://max.ru/bookjava Библиотека Java разработчика
https://max.ru/channel_java_geek Java Geek

GitHub Сообщество 📌
https://max.ru/githublib Интересное из GitHub

Базы данных (Data Base) 📌
https://max.ru/database_info Все про базы данных

Фронтенд разработка 📌
https://max.ru/frontend_1 Подборки для frontend разработчиков

Библиотеки 📌
https://max.ru/programmist_of Книги по программированию
https://max.ru/proglb Библиотека программиста
https://max.ru/bfbook Книги для программистов

Программирование 📌
https://max.ru/bookflow Лекции, видеоуроки, доклады с IT конференций
https://max.ru/itmozg Программисты, дизайнеры, новости из мира IT
https://max.ru/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻

Шутки программистов 📌
https://max.ru/itumor Шутки программистов

Защита, взлом, безопасность 📌
https://max.ru/thehaking Канал о кибербезопасности
https://max.ru/xakkep_1 Хакер Free

Книги, статьи для дизайнеров 📌
https://max.ru/odesigners Статьи, книги для дизайнеров

Математика 📌
https://max.ru/Pomatematike Канал по математике
https://max.ru/phismat_1 Обучающие видео, книги по Физике и Математике

Вакансии в IT📌
https://max.ru/progjob
https://max.ru/channel_rabotait

Мир технологий 📌
https://max.ru/mir_teh Канал для любознательных

Бонус 📌
https://max.ru/piterspb_78 Свежие новости Санкт-Петербурга
https://max.ru/mockva_life Свежие новости Москвы
https://max.ru/piterspb Питер Новости: Санкт-Петербург / СПБ / ДТП

🎯 Сегодня покажу вам простой, но мощный приём: как ускорить React-приложение с помощью мемоизации списков

Каждый из нас рендерит списки: товары, заявки, комментарии, юзеров - список бесконечен.
И одна из самых частых проблем: каждый элемент списка перерендеривается даже при минимальном изменении родителя.

Сегодня разбираем реальный кейс и решение, которое спасает производительность.

🔥 Проблема

У нас есть список задач, и при обновлении одной задачи - перерендериваются все элементы списка.
Визуально это незаметно, но при больших списках производительность падает.

Причина проста: у каждого элемента меняется ссылка на props → компонент считается обновлённым → React перерендеривает его.


💡 Решение: React.memo + useCallback

Вот минимальный рабочий пример.

Компонент элемента списка

const TaskItem = React.memo(function TaskItem({ task, onToggle }) {
  console.log("Render:", task.title);
  return (
    <div>
      <input
        type="checkbox"
        checked={task.done}
        onChange={() => onToggle(task.id)}
      />
      {task.title}
    </div>
  );
});

Родитель

function TaskList() {
  const [tasks, setTasks] = useState(data);

  const toggle = useCallback(id => {
    setTasks(prev =>
      prev.map(t => (t.id === id ? { ...t, done: !t.done } : t))
    );
  }, []);

  return tasks.map(task => (
    <TaskItem key={task.id} task={task} onToggle={toggle} />
  ));
}

🚀 Что это даёт?

- React.memo не даст компоненту перерендериться без изменения реальных данных.
- useCallback создаёт стабильную ссылку на функцию.
- Итог: перерендерятся только изменённые элементы, остальное остаётся нетронутым.

При 500+ элементах разница ощущается моментально.

📲 Мы в MAX

✍️ @React_lib

Кастомные хуки (Custom Hooks). Создаем свой первый кастомный хук useWindowSize

Сегодня напишем простой, но очень полезный хук - useWindowSize. Он будет отслеживать ширину и высоту окна браузера. Это пригодится, если вам нужно менять верстку (например, скрывать сайдбар) при изменении размера экрана.

Мы создадим функцию, которая:

1. Использует useState для хранения размеров.
2. Использует useEffect для подписки на событие resize.
3. Важно: Не забываем удалять обработчик событий (cleanup function), чтобы не нагружать память!


Вот готовый пример. Можете сохранить его в файл useWindowSize.js.

import { useState, useEffect } from 'react';

// Наш кастомный хук
function useWindowSize() {
  // 1. Инициализируем состояние
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined,
  });

  useEffect(() => {
    // Функция для обновления состояния
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    
    // Устанавливаем размер сразу при загрузке
    handleResize(); 
    
    // 2. Добавляем слушатель события изменения размера окна
    window.addEventListener("resize", handleResize);
    
    // 3. Очистка: удаляем слушатель при размонтировании
    return () => window.removeEventListener("resize", handleResize);
  }, []); // Пустой массив зависимостей = запускаем один раз

  return windowSize;
}

export default useWindowSize;

🚀 Как это использовать в компоненте?

Теперь ваш компонент становится чистым и понятным. Никакой лишней логики внутри!

import React from 'react';
import useWindowSize from './useWindowSize';

const App = () => {
  // Просто вызываем наш хук
  const { width, height } = useWindowSize();

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>📏 Размер окна</h1>
      <p>Ширина: <strong>{width}px</strong></p>
      <p>Высота: <strong>{height}px</strong></p>
      
      {width < 600 ? (
        <p>📱 Похоже, вы на мобильном устройстве!</p>
      ) : (
        <p>💻 Это десктопная версия.</p>
      )}
    </div>
  );
};

export default App;

📲 Мы в MAX

✍️ @React_lib

🚀 Что такое условный рендеринг в React и зачем он нужен?

Если говорить просто, условный рендеринг - это способность вашего React-приложения решать, что именно показывать пользователю в зависимости от определенных условий (состояния, пропсов и т.д.).

Думайте об этом как о "if... else...", но для вашего пользовательского интерфейса (UI).


- ЕСЛИ пользователь вошел в систему, ТО показать компонент <UserProfile />.

- ИНАЧЕ показать компонент <LoginForm />.


💡 Для чего он нужен?

Без условного рендеринга все наши приложения были бы статичными. Именно эта концепция делает интерфейс динамическим, "живым" и отзывчивым.

Он нужен буквально повсюду. Вот самые частые примеры:

- Пока идет загрузка данных с сервера: Мы показываем <Spinner /> (крутилку). Как только данные пришли — показываем <DataList />.

- Аутентификация: Показываем "Профиль", если isLoggedIn === true, и "Войти", если isLoggedIn === false.

- Обработка ошибок: Если при загрузке произошла ошибка, мы показываем <ErrorMessage /> вместо контента.

- Пустые состояния: Показываем "Ваша корзина пуста", если cart.items.length === 0, и список товаров, если в ней что-то есть.

- Интерактив: Показ/скрытие модальных окон, выпадающих меню или вкладок по клику.


🛠️ Как это сделать?

В React есть несколько популярных способов:

1. Тернарный оператор (? :) - самый частый выбор.
{isLoading ? <Spinner /> : <Content />}

2. Логический оператор "И" (&&) - идеален, когда вам нужно что-то показать или не показать ничего (нет ветки "else").
{hasMessages && <NotificationBadge />}

3. Обычный if/else - используется внутри тела компонента, до return, для более сложной логики.

Условный рендеринг - это не просто "фича", это сам смысл React. Это то, что позволяет вашему UI реагировать на изменения данных и действия пользователя.

#React #JavaScript #Frontend #Development #ConditionalRendering

📲 Мы в MAX

✍️ @React_lib