React

Хотите узнать, как создать чат-приложение с использованием React и WebSockets? На вебинаре вы узнаете: - Основы WebSockets и их интеграция с React. - Реализация функциональности чата. - Управление состоянием и работа с хранилищем данных (обновление интерфейса при изменении состояния). Этот вебинар будет полезен: - JavaScript-разработчикам, которые хотят улучшить навыки работы с React и узнать особенности работы и обновления приложения в режиме реального времени. - Frontend-разработчикам, желающим понять и использовать WebSockets для создания интерактивных приложений. - Fullstack-разработчикам для дополнения своих знаний и получения навыков интеграции WebSocket серверов с React-приложениями. После вебинара вы сможете: - Настроить и управлять WebSocket соединением в React-проектах. - Управлять состоянием в React-проектах и работать с хранилищами данных для сохранения истории сообщений. - Применить знания для создания разнообразных приложений реального времени (чаты, системы уведомлений, онлайн-игры). Урок пройдет 7 ноября в 20:00 мск и будет приурочен к старту большого курса «React.js Developer». После вебинара вы получите специальную цену на обучение и персональную консультацию от менеджеров! Регистрируйтесь на открытый вебинар прямо сейчас! 👇 https://vk.cc/cDM8oR Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Реализация Intersection Observer API в React для определения, когда элемент входит или выходит из области видимости. Особенности 🪝 Hooks или Component API - С помощью useInView отслеживать элементы проще, чем когда-либо ⚡️ Оптимизированная производительность - Повторно использует экземпляры Intersection Observer, где это возможно ⚙️ Соответствует нативному API - Интуитивно понятен в использовании 🛠 Написан на TypeScript - Легко интегрируется в ваш существующий TypeScript проект 🧪 Готов к тестированию - Моделирует Intersection Observer для легкого тестирования с Jest или Vitest 🌳 Поддержка tree-shaking - Включает только те части, которые вы используете 💥 Маленький размер - Около ~1,15kB для useInView и ~1,6kB для <InView> https://github.com/thebuilder/react-intersection-observer ✍️ @React_lib

ReaPer : Инструмент с открытым исходным кодом для анализа производительности React-приложений https://medium.com/@annako/reaper-an-open-source-dev-tool-to-analyze-react-application-performance-786f1d40f6de ✍️ @React_lib

Управление типами кортежей Предположим, у нас есть функция, которая возвращает кортеж, например, пользовательский хук:

function useBool(initialValue = false) {
  const [state, setState] = React.useState(initialValue)

  const handlers = React.useMemo(
    () => ({
      on: () => setState(true),
      off: () => setState(false),
      toggle: () => setState(s => !s),
      reset: () => setState(initialValue),
    }),
    [initialValue],
  )

  return [state, handlers]
}

const result = useBool()

https://kyleshevlin.com/wrangling-tuple-types/ ✍️ @React_lib

⚛️ Мне не нравится встраивать бизнес-логику или логику приложения напрямую в компоненты. Вместо этого я использую хук useReducer, чтобы отделить бизнес-логику от пользовательского интерфейса. ✅ Более предсказуемые изменения состояния ✅ Лучшая архитектура ✍️ @React_lib

👀Хотите узнать, какой подход лучше для вашего проекта на Vue.js — Composition API или Options API? Ждем вас на открытом вебинаре 23 октября в 20:00 мск, где мы разберем: - сравнение двух подходов: плюсы и минусы каждого; - стоит ли переводить проект на Composition API; - начинать ли новый проект на Options API; - ответы на все возникающие вопросы. Урок для новичков в Vue.js, которые хотят понять основные подходы и сделать разработку и поддержку приложений более предсказуемыми. Встречаемся в преддверии старта курса «Vue.js-разработчик». Все участники вебинара получат специальную цену на обучение! ➡️➡️➡️Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cCiafl Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

❌ Избегайте создания компонентов с слишком большим количеством пропсов. ✅ Вместо этого используйте паттерн составных компонентов (compound components) в React, чтобы эффективно применять композицию. ✍️ @React_lib

⚛️ Новости React Compiler - react-compiler-runtime 🔥 Новый официальный экспериментальный пакет для поддержки React v18 + v17 👌 ✍️ @React_lib

⚛️ Один компонент, множество форм: мощь полиморфных компонентов React ✍️ @React_lib

Хотите освоить прогрессивный фреймворк для создания веб-приложений на JS? ➡️Ждем вас на открытом вебинаре 23 октября в 20:00 мск, где мы разберем: ✔️архитектурные принципы Nest.Js, включая внедрение зависимостей и модульность; ✔️как создавать маршруты, контроллеры и использовать middleware; ✔️как работать с базами данных, включая MongoDB, PostgreSQL и MySQL; ✔️методы тестирования и отладки приложений Nest.Js. Спикер Николай Лапшин — опытный архитектор, тимлид, преподаватель и разработчик с широким технологическим стеком. Встречаемся в преддверии старта курса «Node.js Developer». Все участники вебинара получат специальную цену на обучение! ➡️Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cC8B7k

❌ Избегайте prop-drilling компонентов в React ✅ Вместо этого используйте шаблон Provider/Consumer с помощью Context API ✍️ @React_lib

Запуск локального React приложения в Android и iOS приложения Бывают ситуации, когда вам нужно запустить веб-приложение React с мобильного телефона локально. Это означает, что оно полностью обходится без облака, на 100 % состоит из офлайна и абсолютно не требует обращения к удаленному серверу. В этом руководстве мы покажем вам, как можно собрать приложение Vite и React в приложение для iOS и Android и загрузить его в WKWebView. https://ditto.live/blog/run-react-locally-in-android https://ditto.live/blog/run-react-locally-in-ios-app ✍️ @React_lib

React95 Это библиотека компонентов, созданная на основе дизайна пользовательского интерфейса Windows 95. https://react95.github.io/React95/?path=/story/all--all https://github.com/React95/React95 ✍️ @React_lib

Будущее React.use и React.useMemo — мощная альтернатива селекторам контекста В этой статье я рассмотрю, как оптимизировал проблемный контекст React приложения с помощью библиотеки use-context-selector от Дайши Като, как у меня сформировалось предпочтение в пользу использования селекторов контекста для предотвращения ненужных перерисовок, и как Дэн Абрамов убедил меня, что абстракция, которую я создал для того, чтобы сделать селекторы контекста компонуемыми, была неверным подходом. https://interbolt.org/blog/react-use-selector-optimization/ ✍️ @React_lib

Больше, чем нужно знать о ReactDOM.flushSync flushSync является частью того, что я называю "Rare React"; это любопытные и необычные части, внешнее кольцо API, редко используемые особые инструменты. И именно это мне нравится изучать и писать об этом статьи в блог. Итак, что делает ReactDOM.flushSync и когда это полезно? Название предполагает, что он выполняет синхронную очистку. Но что такое "очистка", что именно очищается, и когда это должно происходить синхронно? Для чего это нужно?

function Demo() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount((c) => c + 1);
    setFlag((f) => !f);
  }

  return (
    <div>
     <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>
        {count}
      </h1>
    </div>
  );
}

https://julesblom.com/writing/flushsync ✍️ @React_lib

Подборка репозитории GitHub, необходимые каждому разработчику на React 1. 30 Days of React 30 Days of React challenge - это пошаговое руководство по изучению React за 30 дней. 2. Awesome React Коллекция удивительных вещей, связанных с экосистемой React 3. React Bits ✨ React паттерны, техники, советы и рекомендации ✨ 4. React Typescript Cheatsheett-cheatsheets/react Шпаргалки для опытных разработчиков React, начинающих работать с TypeScript 5. ReactJS Interview Question Список из 500 вопросов и ответов на собеседования по ReactJS. ✍️ @React_lib

React и жизнь после сборки Бывает что на руках есть лишь «бинарная» сборка сайта на модном фреймворке вроде Angular или React, в которой «срочно надо что‑то поправить». А исходного кода нет. Есть лишь вы, «бандл» с обфрусцированным JavaScript‑кодом внутри и горящие сроки. Рассказываю что с этим можно cделать кроме увольнения. https://habr.com/ru/articles/839464/ ✍️ @React_lib

Структура приложения React.js - лучшие практики В этой статье рассматриваются лучшие практики структурирования приложений React.js с упором на три основных подхода: Группировка по признакам, Группировка по типу файлов и гибридный подход. В руководстве также рассказывается о том, как интегрировать в структуру приложения современные возможности React, такие как Redux, Hooks, Stateful Container Components, Context API, Testing libraries и Styled-компоненты. https://www.dotnetcurry.com/reactjs/folder-structure-for-reactjs ✍️ @React_lib

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

⚛️ Одной из самых сложных вещей для меня при изучении React была разделение ответственности. Когда стоит вынести JSX в новые компоненты? Когда создавать кастомные хуки? Как можно абстрагировать слой данных от представления? Вот короткое видео о том, как это сделать #react ✍️ @React_lib