React - آمار و تحلیل کانال تلگرام @react

2 732

Как писать чистый код в React? 🤔 Я знаю, что все хотят писать идеальный код, но реальность такова: зачастую приходится разбираться с грязными, запутанными компонентами. Сегодня покажу вам несколько принципов, которые помогут держать код в порядке. 1️⃣ Разбивайте компоненты 📌 Если ваш компонент растет и становится слишком сложным, разделите его на более мелкие части. Например, если у вас в компоненте 200 строк, скорее всего, это уже слишком. ❌ Плохо:


const Profile = ({ user }) => {
  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.bio}</p>
      <button>Follow</button>
    </div>
  );
};

✅ Хорошо:


const Avatar = ({ src, alt }) => <img src={src} alt={alt} />;
const UserInfo = ({ name, bio }) => (
  <>
    <h2>{name}</h2>
    <p>{bio}</p>
  </>
);
const FollowButton = () => <button>Follow</button>;

const Profile = ({ user }) => (
  <div>
    <Avatar src={user.avatar} alt={user.name} />
    <UserInfo name={user.name} bio={user.bio} />
    <FollowButton />
  </div>
);

2️⃣ Используйте useMemo и useCallback ⚡ Если передаете функции в пропсы или у вас тяжелые вычисления, используйте мемоизацию.


const handleClick = useCallback(() => {
  console.log("Clicked!");
}, []);

3️⃣ Следите за зависимостями в useEffect 🔍 Ловушка многих новичков: забывают указывать зависимости или наоборот — указывают лишнее. ❌ Так делать нельзя:


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

✅ Правильный вариант:


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

Чистый код — это не просто прихоть, а необходимость! Если писать код аккуратно, вам (и вашим коллегам) будет проще его поддерживать. А какие принципы чистого кода используете вы? Делитесь в комментариях! 👇 ✍️ @React_lib

2 732

Как я ускоряю работу с React-компонентами 🚀 Сегодня хочу поделиться трюком, который значительно ускорил мою разработку в React. Речь о создании базовых шаблонов компонентов. В чем суть? Каждый раз, когда начинаешь писать новый компонент, приходится проделывать одно и то же: ✅ Создавать файл, ✅ Импортировать React, ✅ Прописывать базовую структуру, ✅ Экспортировать компонент. Решение: создать alias-команду или snippet в VS Code, который автоматически генерирует заготовку компонента! Как это сделать? 🔹 Вариант 1. Используем VS Code Snippets 1. Открываем команду Preferences: Configure User Snippets 2. Выбираем javascript (или typescript), 3. Добавляем сниппет:


"React Functional Component": {
  "prefix": "rfc",
  "body": [
    "import React from 'react';",
    "",
    "const ${1:ComponentName} = () => {",
    "  return (",
    "    <div>",
    "      ${2:Hello, world!}",
    "    </div>",
    "  );",
    "};",
    "",
    "export default ${1:ComponentName};"
  ],
  "description": "Создает базовый функциональный компонент"
}

Теперь, когда я пишу rfc и нажимаю Tab, код заполняется автоматически! 🔥 🔹 Вариант 2. Используем CLI-команду Если вы используете bash или zsh, можно создать команду:


echo "import React from 'react';\n\nconst Component = () => {\n  return <div>Hello, world!</div>;\n};\n\nexport default Component;" > NewComponent.js

Теперь одним вызовом скрипта можно создать новый файл с базовой структурой! Сниппеты и автоматизация таких рутинных задач позволяют не тратить время на однотипные действия. Используете что-то подобное в своей работе? Делитесь своими лайфхаками! 👇 ✍️ @React_lib

2 732

🔥 Оптимизация React-приложения: Код-сплиттинг с React.lazy Сегодня расскажу о код-сплиттинге в React — мощном инструменте для ускорения загрузки приложения. Когда наше приложение растёт, бандл становится тяжёлым, а время загрузки — длиннее. Решение? Код-сплиттинг. Он позволяет загружать только нужные компоненты, а не весь код сразу. Как это работает? Используем React.lazy() и Suspense, чтобы загружать компоненты только когда они реально нужны. 📌 Пример:


import React, { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <h1>Главная страница</h1>
      <Suspense fallback={<p>Загрузка...</p>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Здесь HeavyComponent загружается только тогда, когда он нужен, а пока он загружается — показывается fallback. 📍 Где это использовать? ✔ Ленивые модули ✔ Большие страницы (Dashboard, Profile) ✔ Админ-панели ✔ Карты, графики, таблицы Но помни: React.lazy работает только для компонентов. Для остального кода (например, утилит) лучше использовать динамический импорт (import()). Попробуй внедрить код-сплиттинг в свой проект и скажи, насколько ускорилась загрузка! 🚀 ✍️ @React_lib

2 732

⚡️ В сети начали массово сливать курсы и книги известных онлайн школ по айти Вот отсортированная база с тонной материала (постепенно пополняется): БАЗА (4687 видео/книг): (363 видео, 87 книги) — Python (415 видео, 68 книги) — Frontend (143 видео, 33 книги) — ИБ/Хакинг (352 видео, 89 книги) — С/С++ (343 видео, 87 книги) — Java (176 видео, 32 книги) — Git (293 видео, 63 книги) — C# (174 видео, 91 книги) — DevOps (167 видео, 53 книги) — PHP (227 видео, 83 книги) — SQL/БД (163 видео, 29 книги) — Linux (114 видео, 77 книги) — Сисадмин (107 видео, 43 книги) — BA/SA (181 видео, 32 книги) — Go (167 видео, 43 книги) — Kotlin/Swift (112 видео, 24 книги) — Flutter (137 видео, 93 книги) — DS/ML (113 видео, 82 книги) — GameDev (183 видео, 37 книги) — Дизайн (129 видео, 73 книги) — QA (213 видео, 63 книги) — Rust (121 видео, 24 книги) — 1С (136 видео, 33 книги) — PM/HR Скачивать ничего не нужно — все выложили в Telegram

2 732

🚀 Оптимизация React-приложения: 5 техник, которые работают Сегодня расскажу вам, как можно ускорить работу React-приложения, если оно начинает тормозить. 1️⃣ Используйте React.memo Если ваш компонент ререндерится без причины, оберните его в React.memo(). Это предотвратит ненужные перерисовки, если пропсы не изменились.


const OptimizedComponent = React.memo(({ data }) => {
  return <div>{data}</div>;
});

2️⃣ Оптимизируйте контекст с useMemo и useCallback Частая ошибка — передача в useContext сложных объектов без мемоизации. Используйте useMemo и useCallback для оптимизации.


const value = useMemo(() => ({ user, logout }), [user]);

3️⃣ Разбейте состояние на атомарные части Часто программисты хранят весь стейт в одном useState, но лучше разбить его на части. Так обновление одной переменной не будет вызывать ререндер всего компонента.


const [name, setName] = useState("");  
const [age, setAge] = useState(0);

4️⃣ Динамическая подгрузка компонентов (Code Splitting) Если у вас большое приложение, используйте React.lazy для загрузки компонентов по требованию.


const LazyComponent = React.lazy(() => import("./BigComponent"));

5️⃣ Используйте производительные списки Если у вас много элементов (список в 1000+ элементов), используйте виртуализацию, например, react-window или react-virtualized.


import { FixedSizeList as List } from "react-window";

<List height={400} itemCount={items.length} itemSize={35}>
  {({ index, style }) => <div style={style}>{items[index]}</div>}
</List>;

✍️ @React_lib

2 732

❌ Избегайте использования нескольких переменных состояния для отслеживания статуса. ✅ Вместо этого используйте перечисления (enums). ✍️ @React_lib

2 732

Интерактивное руководство по рендерингу в React В чистом виде React - это библиотека для построения пользовательских интерфейсов. Она настолько проста, что всю ментальную модель можно представить в виде формулы v = f(s) - где ваше представление является просто функцией вашего состояния. Хотя это уравнение дает нам простую мысленную модель работы React, есть один аспект уравнения, который до сих пор, после стольких лет, кажется, смущает людей. Когда и как именно вызывается f? Или, говоря иначе, когда и как React обновляет представление? Этой, казалось бы, простой теме посвящено множество постов в блогах, докладов на конференциях и сообщений в твиттере. И все же почему-то даже опытные разработчики React имеют некоторые (часто неизвестные) заблуждения на этот счет. https://ui.dev/why-react-renders ✍️ @React_lib

2 732

🔥Podlodka React Crew – онлайн-конференция для React-разработчиков. И в новом сезоне ребята решили разобраться, какие инструменты и знания включают в роадмапы профессионального развития и насколько они применимы. Что в программе: 💬 Говорим на одном языке с пользователями: i18n в React-приложениях – Виталий Баев, контрибьютор Next.js и Vite 🌍 Как выбрать инструменты и сделать интерфейс удобным для всех? 📡 OpenTelemetry для фронтенд-разработчика – Валерий Катцин, frontend-разработчик в Точке 📊 Как собирать данные о работе приложения и использовать их для улучшения продукта? 🔥 "Долгожданный" React 19 – Алекс Рассудихин, разработчик с опытом во Vue, React, Next и Astro 🚀 Какие фичи вышли в продакшен, а какие – нет? 🤖 AI Integrated Developer Experience – Марк Байдебура, Senior Full-stack Engineer в Influencer 🧠 Где AI реально помогает, а где пока его лучше не использовать? 📅 Конференция пройдет 10-14 февраля. Ты не просто узнаешь по новые фичи и подходы, но и определишься, какие из них включить в свой roadmap и как расти дальше. 🔗 Регистрируйтесь: podlodka.io/reactcrew

2 732

⚛️ Совет по React: Используйте пользовательский хук для управления состоянием массивов в ваших компонентах. ✍️ @React_lib

2 732

Эффективное тестирование хуков React с помощью Vitest В этой статье рассматривается использование Vitest и библиотеки React Testing Library для модульного тестирования хуков React таким образом, чтобы их было легко поддерживать и расширять. https://mayashavin.com/articles/test-react-hooks-with-vitest ✍️ @React_lib

2 732

React 19: что нового в самой популярной библиотеке для создания интерфейсов? Узнайте первыми! Новые хуки, улучшения рефов, кастомные элементы — React становится ещё удобнее. И мы готовы рассказать, как использовать это на практике. Хотите быть на пике технологий? На открытом вебинаре 6 февраля в 19:00 мск разберём, как применять нововведения React 19 в реальных проектах. Все участники получат скидку на большое обучение «React.js Developer» — идеальный способ прокачать навыки. Записаться: https://vk.cc/cI3bho Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

2 732

⚛️ Если вы используете fetch() в useEffect, вам, вероятно, стоит посмотреть это короткое видео ✍️ @React_lib

2 732

+6

React.js with typescript #1 : Introduction to React.js #2 : Creating React App #3 : React Components #4 : React Variables in Components #5 : Styling in React #6 : Using Buttons and Click Events #7 : Usage of useState() hook источник ✍️ @React_lib

2 732

Открытый урок «Оптимизация работы компонентов в React.js». Когда: 29 января в 20:00 мск. На вебинаре вы узнаете: - Как работать с оптимизацией в React.js - Особенности работы функциональных компонентов и хуков - Трюк с мемоизацией коллбеков для списка элементов Встречаемся в преддверии старта курса «React.js Developer» Otus. Все участники вебинара получат специальную цену на обучение! Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cHW678 Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

2 732

8 лучших практик проектирования компонентов React.js React - одна из самых популярных библиотек JavaScript для создания пользовательских интерфейсов, и одна из причин ее популярности - компонентно-ориентированная архитектура. React поощряет создание пользовательского интерфейса на основе многократно используемых компонентов, что позволяет разработчикам создавать сложные пользовательские интерфейсы более эффективно. https://dev.to/blossom/8-best-practices-for-reactjs-component-design-4jn5 ✍️ @React_lib

2 732

❌ Избегайте использования объектов в качестве зависимостей в React.useEffect() ✅ Вместо этого используйте примитивные ключи ✍️ @React_lib

2 732

Подборка Telegram каналов для программистов Системное администрирование 📌 https://t.me/sysadmin_girl Девочка Сисадмин https://t.me/srv_admin_linux Админские угодья https://t.me/linux_srv Типичный Сисадмин https://t.me/linux_odmin Linux: Системный администратор https://t.me/devops_star DevOps Star (Звезда Девопса) https://t.me/i_linux Системный администратор https://t.me/linuxchmod Linux https://t.me/sys_adminos Системный Администратор https://t.me/tipsysdmin Типичный Сисадмин (фото железа, было/стало) https://t.me/sysadminof Книги для админов, полезные материалы https://t.me/i_odmin Все для системного администратора https://t.me/i_odmin_book Библиотека Системного Администратора https://t.me/i_odmin_chat Чат системных администраторов https://t.me/i_DevOps DevOps: Пишем о Docker, Kubernetes и др. https://t.me/sysadminoff Новости Линукс Linux 1C разработка 📌 https://t.me/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С Программирование C++📌 https://t.me/cpp_lib Библиотека C/C++ разработчика https://t.me/cpp_knigi Книги для программистов C/C++ https://t.me/cpp_geek Учим C/C++ на примерах Программирование Python 📌 https://t.me/pythonofff Python академия. Учи Python быстро и легко🐍 https://t.me/BookPython Библиотека Python разработчика https://t.me/python_real Python подборки на русском и английском https://t.me/python_360 Книги по Python Rus Java разработка 📌 https://t.me/BookJava Библиотека Java разработчика https://t.me/java_360 Книги по Java Rus https://t.me/java_geek Учим Java на примерах GitHub Сообщество 📌 https://t.me/Githublib Интересное из GitHub Базы данных (Data Base) 📌 https://t.me/database_info Все про базы данных Мобильная разработка: iOS, Android 📌 https://t.me/developer_mobila Мобильная разработка https://t.me/kotlin_lib Подборки полезного материала по Kotlin Фронтенд разработка 📌 https://t.me/frontend_1 Подборки для frontend разработчиков https://t.me/frontend_sovet Frontend советы, примеры и практика! https://t.me/React_lib Подборки по React js и все что с ним связано Разработка игр 📌 https://t.me/game_devv Все о разработке игр Библиотеки 📌 https://t.me/book_for_dev Книги для программистов Rus https://t.me/programmist_of Книги по программированию https://t.me/proglb Библиотека программиста https://t.me/bfbook Книги для программистов https://t.me/books_reserv Книги для программистов БигДата, машинное обучение 📌 https://t.me/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning Программирование 📌 https://t.me/bookflow Лекции, видеоуроки, доклады с IT конференций https://t.me/coddy_academy Полезные советы по программированию https://t.me/rust_lib Полезный контент по программированию на Rust https://t.me/golang_lib Библиотека Go (Golang) разработчика https://t.me/itmozg Программисты, дизайнеры, новости из мира IT https://t.me/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 https://t.me/nodejs_lib Подборки по Node js и все что с ним связано https://t.me/ruby_lib Библиотека Ruby программиста QA, тестирование 📌 https://t.me/testlab_qa Библиотека тестировщика Шутки программистов 📌 https://t.me/itumor Шутки программистов Защита, взлом, безопасность 📌 https://t.me/thehaking Канал о кибербезопасности https://t.me/xakep_1 Статьи из "Хакера" Книги, статьи для дизайнеров 📌 https://t.me/ux_web Статьи, книги для дизайнеров Английский 📌 https://t.me/UchuEnglish Английский с нуля Математика 📌 https://t.me/Pomatematike Канал по математике https://t.me/phis_mat Обучающие видео, книги по Физике и Математике Excel лайфхак📌 https://t.me/Excel_lifehack https://t.me/tikon_1 Новости высоких технологий, науки и техники💡 https://t.me/mir_teh Мир технологий (Technology World) Вакансии 📌 https://t.me/sysadmin_rabota Системный Администратор https://t.me/progjob Вакансии в IT

2 732

Лучшие практики для написания тестов с использованием React Testing Library В статье рассматриваются способы повышения качества тестов, написанных с использованием React Testing Library. Автор делится практическими советами, которые помогут вам писать более надежные и поддерживаемые тесты. Среди ключевых моментов: - Как избегать тестирования реализаций и сосредотачиваться на поведении компонентов. - Почему важно работать с пользовательскими событиями вместо прямого взаимодействия с DOM. - Использование ARIA-атрибутов для более точного поиска элементов. Эти подходы помогают создавать тесты, которые лучше отражают реальное использование компонентов и упрощают их сопровождение.


export const Form = ({ saveData }) => {
  const [state, setState] = useState({
    name: "",
    email: "",
    password: "",
    confirmPassword: "",
    conditionsAccepted: false,
  });

  const onFieldChange = (event) => {
    let value = event.target.value;
    if (event.target.type === "checkbox") {
      value = event.target.checked;
    }

    setState({ ...state, [event.target.id]: value });
  };

  const onSubmit = (event) => {
    event.preventDefault();
    saveData(state);
  };

  return (
    <form className="form" onSubmit={onSubmit}>
      <div className="field">
        <label>Name</label>
        <input
          id="name"
          onChange={onFieldChange}
          placeholder="Enter your name"
        />
      </div>
      <div className="field">
        <label>Email</label>
        <input
          type="email"
          id="email"
          onChange={onFieldChange}
          placeholder="Enter your email address"
        />
      </div>
      <div className="field">
        <label>Password</label>
        <input
          type="password"
          id="password"
          onChange={onFieldChange}
          placeholder="Password should be at least 8 characters"
        />
      </div>
      <div className="field">
        <label>Confirm password</label>
        <input
          type="password"
          id="confirmPassword"
          onChange={onFieldChange}
          placeholder="Enter the password once more"
        />
      </div>
      <div className="field checkbox">
        <input type="checkbox" id="conditions" onChange={onFieldChange} />
        <label>I agree to the terms and conditions</label>
      </div>
      <button type="submit">Sign up</button>
    </form>
  );
};

https://claritydev.net/blog/improving-react-testing-library-tests ✍️ @React_lib

2 732

Лучшие практики разработки сложных приложений на основе форм с помощью React Hook Form и поддержки TypeScript Ранее я уже погружался в сферу интеграции React Hook Form с Redux, изучая способы использования возможностей этих двух важнейших инструментов для создания динамических форм в приложениях React. Однако на этом мое путешествие не закончилось. В процессе работы над этим проектом я погрузился в тонкости разработки сложных приложений на основе форм. Глубокое погружение в разработку форм открыло для меня множество повторяющихся паттернов, бесценных лучших практик и идей, которые существенно повлияли на мой подход к коду, принятию решений и архитектурному дизайну - особенно при работе над крупными приложениями на основе форм. https://orizens.com/blog/best_practices_for_developing_complex_form-based_apps_with_react_hook_form_and_typescript_support/ ✍️ @React_lib

2 732

Подборка Telegram каналов для программистов Системное администрирование 📌 https://t.me/sysadmin_girl Девочка Сисадмин https://t.me/srv_admin_linux Админские угодья https://t.me/linux_srv Типичный Сисадмин https://t.me/linux_odmin Linux: Системный администратор https://t.me/devops_star DevOps Star (Звезда Девопса) https://t.me/i_linux Системный администратор https://t.me/linuxchmod Linux https://t.me/sys_adminos Системный Администратор https://t.me/tipsysdmin Типичный Сисадмин (фото железа, было/стало) https://t.me/sysadminof Книги для админов, полезные материалы https://t.me/i_odmin Все для системного администратора https://t.me/i_odmin_book Библиотека Системного Администратора https://t.me/i_odmin_chat Чат системных администраторов https://t.me/i_DevOps DevOps: Пишем о Docker, Kubernetes и др. https://t.me/sysadminoff Новости Линукс Linux 1C разработка 📌 https://t.me/odin1C_rus Cтатьи, курсы, советы, шаблоны кода 1С Программирование C++📌 https://t.me/cpp_lib Библиотека C/C++ разработчика https://t.me/cpp_knigi Книги для программистов C/C++ https://t.me/cpp_geek Учим C/C++ на примерах Программирование Python 📌 https://t.me/pythonofff Python академия. Учи Python быстро и легко🐍 https://t.me/BookPython Библиотека Python разработчика https://t.me/python_real Python подборки на русском и английском https://t.me/python_360 Книги по Python Rus Java разработка 📌 https://t.me/BookJava Библиотека Java разработчика https://t.me/java_360 Книги по Java Rus https://t.me/java_geek Учим Java на примерах GitHub Сообщество 📌 https://t.me/Githublib Интересное из GitHub Базы данных (Data Base) 📌 https://t.me/database_info Все про базы данных Мобильная разработка: iOS, Android 📌 https://t.me/developer_mobila Мобильная разработка https://t.me/kotlin_lib Подборки полезного материала по Kotlin Фронтенд разработка 📌 https://t.me/frontend_1 Подборки для frontend разработчиков https://t.me/frontend_sovet Frontend советы, примеры и практика! https://t.me/React_lib Подборки по React js и все что с ним связано Разработка игр 📌 https://t.me/game_devv Все о разработке игр Библиотеки 📌 https://t.me/book_for_dev Книги для программистов Rus https://t.me/programmist_of Книги по программированию https://t.me/proglb Библиотека программиста https://t.me/bfbook Книги для программистов https://t.me/books_reserv Книги для программистов БигДата, машинное обучение 📌 https://t.me/bigdata_1 Data Science, Big Data, Machine Learning, Deep Learning Программирование 📌 https://t.me/bookflow Лекции, видеоуроки, доклады с IT конференций https://t.me/coddy_academy Полезные советы по программированию https://t.me/rust_lib Полезный контент по программированию на Rust https://t.me/golang_lib Библиотека Go (Golang) разработчика https://t.me/itmozg Программисты, дизайнеры, новости из мира IT https://t.me/php_lib Библиотека PHP программиста 👨🏼‍💻👩‍💻 https://t.me/nodejs_lib Подборки по Node js и все что с ним связано https://t.me/ruby_lib Библиотека Ruby программиста QA, тестирование 📌 https://t.me/testlab_qa Библиотека тестировщика Шутки программистов 📌 https://t.me/itumor Шутки программистов Защита, взлом, безопасность 📌 https://t.me/thehaking Канал о кибербезопасности https://t.me/xakep_1 Статьи из "Хакера" Книги, статьи для дизайнеров 📌 https://t.me/ux_web Статьи, книги для дизайнеров Английский 📌 https://t.me/UchuEnglish Английский с нуля Математика 📌 https://t.me/Pomatematike Канал по математике https://t.me/phis_mat Обучающие видео, книги по Физике и Математике Excel лайфхак📌 https://t.me/Excel_lifehack https://t.me/tikon_1 Новости высоких технологий, науки и техники💡 https://t.me/mir_teh Мир технологий (Technology World) Вакансии 📌 https://t.me/sysadmin_rabota Системный Администратор https://t.me/progjob Вакансии в IT