React

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

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

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

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

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

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

Подборка 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

Лучшие практики для написания тестов с использованием 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

Лучшие практики разработки сложных приложений на основе форм с помощью 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

Подборка 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

Коварные утечки памяти в React: как можно обжечься на useCallback и замыканиях Я работаю в Ramblr, это ИИ-стартап, где мы строим на React сложные приложения для аннотирования видео. Недавно мне попалась сложная утечка памяти, которая возникает при одновременном использовании замыканий JavaScript и хука useCallback в React. Поскольку я вырос на .NET, мне потребовалось немало времени, чтобы разобраться в происходящем. Поэтому я решил написать этот пост и рассказать вам, чему меня научила эта ситуация. Сначала я кратко напомню вам, как устроены замыкания, но можете смело пропустить этот раздел, если вы уже хорошо знаете, как устроен этот механизм в JavaScript. https://schiener.io/2024-03-03/react-closures ✍️ @React_lib

⚛️ Совет по React💡 Ввод возвращаемых значений пользовательских хуков с помощью TypeScript ✍️ @React_lib

Построение фильтра поиска в реальном времени в React: Пошаговое руководство Когда я начал работать с React, одной из распространенных проблем, с которыми я столкнулся, была реализация функции фильтра поиска в реальном времени. Эта функция обновляет отображаемые элементы по мере ввода пользователем текста и показывает все элементы заново, если поисковый фильтр пуст. Поэтому в этом руководстве я расскажу вам о том, как создать эту функцию в React. Мы начнем со списка жестко заданных элементов, а затем перейдем к списку элементов, полученных из API. https://dev.to/alais29/building-a-real-time-search-filter-in-react-a-step-by-step-guide-3lmm ✍️ @React_lib

Построение уникальных диаграмм React Эта галерея, основанная на сотнях примеров графиков, познакомит вас с основными концепциями визуализации данных с помощью React и D3.js. В ней также представлены готовые к использованию шаблоны, позволяющие быстрее приступить к работе. https://www.react-graph-gallery.com/ ✍️ @React_lib

No Outer margin В статье обсуждается проблема использования внешних отступов (outer margin) в веб-дизайне. Автор объясняет, почему лучше избегать их в пользу внутренних отступов (padding) для компонентов. Основной аргумент: внутренние отступы делают дизайн более предсказуемым и гибким, упрощая настройку элементов и их позиционирование. Статья также содержит примеры и рекомендации для практического применения в современной веб-разработке. Что такое «внешние» отступы и padding? Здесь термин «внешние» относится к отступам, которые выходят за границы border-box пользовательского интерфейса. В основном это касается случаев, когда margin применяется к самому внешнему элементу компонента.

function Card({ children }) {
  return (
    // WARNING: Don't do this! It is an outer `margin`!
    <div style={{ marginBottom: '1rem' }}>{children}</div>
  )
}

function EmployeeCard({ name, occupation }) {
  return (
    <Card>
      {/**
       * This is fine! We can use internal margins for layout,
       * but there are better ways we'll learn later!
       */}
      <div style={{ marginBottom: '1rem' }}>{name}</div>
      <div>{occupation}</div>
    </Card>
  )
}

https://kyleshevlin.com/no-outer-margin/ ✍️ @React_lib

Избегаем ошибки гидратации с помощью useSyncExternalStore Статья рассматривает, как разработчики могут эффективно справляться с проблемами, связанными с несовпадением данных при гидратации в React. Гидратация — это процесс, при котором серверный рендеринг синхронизируется с клиентским. Ошибки на этом этапе могут приводить к неожиданным багам. Основная идея заключается в использовании хука useSyncExternalStore, который помогает синхронизировать состояние внешнего источника данных с React-компонентами. Это особенно полезно для библиотек или приложений с критичными требованиями к корректности данных, таких как те, что полагаются на глобальные состояния или сложные асинхронные обновления. Статья также объясняет причины появления гидрационных ошибок и предлагает практические подходы для их минимизации, например, правильное управление состоянием и использование актуальных инструментов React для синхронизации данных.

const emptySubscribe = () => () => {}

function LastUpdated() {
  const date = React.useSyncExternalStore(
    emptySubscribe,
    () => lastUpdated.toLocaleDateString(),
    () => lastUpdated.toLocaleDateString('en-US')
  )

  return <span>Last updated at: {date}</span>
}

https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store ✍️ @React_lib

Как использовать автофокус с помощью React Hooks В веб-разработке автофокус играет важную роль, улучшая пользовательский опыт за счёт автоматического фокусирования на полях ввода при загрузке страницы или в ответ на определённые действия пользователя. В этой статье будет показано, как реализовать эту функцию в React с использованием хуков. https://blog.openreplay.com/how-to-autofocus-using-react-hooks/ ✍️ @React_lib

👩‍💻 Курс по Electron - Создание настольных приложений (включая React и TypeScript) Изучите, как использовать Electron, React и TypeScript для создания настольных приложений. В ходе этого курса вы узнаете всё: от настройки среды разработки до внедрения продвинутых функций, таких как визуализация данных, безопасная коммуникация и кастомные рамки окон, при этом обеспечивая безупречный пользовательский опыт. ⌨️ 0:00:00 Intro & How electron works ⌨️ 0:08:31 Setting up React ⌨️ 0:11:45 Setting up Electron ⌨️ 0:17:41 Adding TypeScript ⌨️ 0:22:47 Configuring Electron-Builder ⌨️ 0:29:07 DX Improvements ⌨️ 0:35:16 Reading System Resources ⌨️ 0:46:25 Communicating with the UI ⌨️ 1:09:34 Making IPC Typesafe ⌨️ 1:32:10 Event Validation ⌨️ 1:39:55 Unsubscribing from Events ⌨️ 1:43:55 Data Visualisation ⌨️ 2:00:24 Securing the App ⌨️ 2:06:53 Creating Tray Elements ⌨️ 2:14:40 Hiding to the Tray ⌨️ 2:27:31 Customising the Menu Bar ⌨️ 2:35:01 Enable View Switching ⌨️ 2:40:02 Custom Window Frames ⌨️ 2:51:00 Testing Theory ⌨️ 2:53:26 E2E Tests ⌨️ 3:06:27 Unit Tests ⌨️ 3:19:19 Finalising the UI ⌨️ 3:33:03 Outro источник ✍️ @React_lib

Хотите улучшить производительность ваших React-приложений и освоить современные методы разработки? Присоединяйтесь к нашему бесплатному вебинару "Использование хуков и мемоизации для оптимизации React-приложений"! На вебинаре вы узнаете: - Основные API хуки: useState, useEffect, useRef, useContext. - Как использовать хуки для управления состоянием и побочными эффектами в React-приложениях. - Как применять мемоизацию для оптимизации производительности компонентов с помощью useCallback, useMemo и React.memo. Этот вебинар будет полезен: - Новичкам, стремящимся освоить React и познакомиться с современными методами разработки и оптимизации. - JavaScript-разработчикам, которые хотят углубить понимание React и познакомиться с современными техниками управления состоянием и побочными эффектами. - Frontend-разработчикам, стремящимся улучшить производительность своих React-приложений. Не упустите возможность повысить свои навыки и улучшить свои проекты! Зарегистрируйтесь на вебинар прямо сейчас и начните оптимизировать свои React-приложения уже сегодня: https://vk.cc/cFgcHD Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Как использовать forwardRef с generic компонентами Статья объясняет, как использовать forwardRef с обобщенными компонентами в TypeScript. Она рассматривает проблемы forwardRef с типизацией обобщенных компонентов и предлагает способ их решения. Этот метод позволяет сохранить типовую безопасность при передаче ссылок на компоненты. Одно из ограничений forwardRef в том, что он отключает выведение типа для generic компонентов. Например:

const Table = <T,>(
  props: {
    data: T[];
    renderRow: (row: T) => React.ReactNode;
  },
  ref: React.ForwardedRef<HTMLTableElement>
) => {
  /** --snip-- */
};
 
const ForwardReffedTable = React.forwardRef(Table);

<Table
    data={["a", "b"]}
    renderRow={(row) => { // Тип выводится: row: string
      return <tr>{row}</tr>;
  }}
/>;

<ForwardReffedTable
    data={["a", "b"]}
    renderRow={(row) => { // Тип не выводится: row: unknown
      return <tr>{row}</tr>;
  }}
/>;

https://www.totaltypescript.com/forwardref-with-generic-components ✍️ @React_lib