React

React Suspense в трех различных архитектурах React Suspense прошел странный путь: в течение многих лет он мало использовался и считался малопригодным, просто причудливым способом отображения состояния загрузки. Однако с недавним выходом React 18 Suspense предоставляет целый набор новых преимуществ, которые заслуживают того, чтобы взглянуть на них еще раз. К сожалению, эти преимущества могут варьироваться от неинтересных до эзотерических и существенно зависят от архитектуры вашего приложения. Давайте рассмотрим три наиболее распространенные на сегодняшний день архитектуры рендеринга и то, какую роль в них может сыграть React Suspense. Client-side rendering: Показывайте фаллбэк во время загрузки React.lazy; декларативно обрабатывайте состояния загрузки/ошибок при получении данных с помощью suspense-совместимого фреймворка. Server-side rendering: Все вышеперечисленное + серверные компоненты, обернутые в <Suspense />, выборочно гидрируются на клиенте. Server components: Все вышеперечисленное + асинхронные серверные компоненты, обернутые в <Suspense />, передаются клиенту поэтапно: сначала это fallback, затем - финальный контент. А теперь более глубокое погружение! https://elanmed.dev/blog/suspense-in-different-architectures ✍️ @React_lib

Используйте createStateContext для совместного использования хука useState Несмотря на то, что многие превозносят UseContext в React как решение для управления состоянием, на самом деле он не имеет никакого отношения к управлению состоянием. React Context - это инъекция зависимостей. Вы предоставляете значение компоненту-обертке, а затем любой последующий компонент может использовать это значение через хук useContext. import React, { useContext } from "react" export function createStateContext<T>() { const StateContext = React.createContext< | undefined | Readonly<[T, React.Dispatch<React.SetStateAction<T>>]> >(undefined) function useStateContext() { const tuple = useContext(StateContext) if (tuple === undefined) { throw new Error( `use${StateContext.displayName} must be used within a ${StateContext.displayName}Provider`, ) } return tuple } return [StateContext, useStateContext] as const } https://www.jacobparis.com/content/use-state-context ✍️ @React_lib

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

Что такое react-afc react-afc - библиотека для более простого (чем в простом react) уменьшения количества ненужных ререндеров дочерних компонентов. Задачи и применение В обычном react функциональный компонент вызывается каждый раз когда изменяется его состояние или пропсы, что вызывает повторное создание всех callback'ов и переменных. Так как передаваемые данные из предыдущего и текущего рендера не равны, это порождает ререндер дочерних компонентов. https://habr.com/ru/articles/784326/ ✍️ @React_lib

Построение системы дизайна с помощью веб-компонентов React Что, если бы вы могли создать универсальную систему дизайна с помощью React и использовать ее в любом веб-приложении или фреймворке? Мы добились этого, скомпилировав React в веб-компоненты. Вот как это делается. https://www.voorhoede.nl/en/blog/building-design-system-react-web-components/ ✍️ @React_lib

Ответы в блоге: Мой опыт перехода пакетов на ESM Последние 8 с лишним лет экосистема JS медленно переходила к использованию ES-модулей ("ESM") в качестве стандартного подхода для публикации и использования JS-кода. Подобно переходу Python 2->3, это было невероятно сложно и болезненно. Как разработчик пакетов, я хочу быть уверен, что мои библиотеки максимально совместимы и пригодны для использования в самом широком спектре сред, которые я могу поддерживать. К сожалению, это также означает, что мне пришлось познакомиться с нюансами и особенностями поведения множества различных инструментов сборки и сред выполнения. В начале этого года я начал работать над тем, чтобы обновить форматирование пакетов для библиотек семейства Redux, чтобы обеспечить им "полную совместимость с ESM". Кажется, я наконец-то придумал набор конфигураций, которые, похоже, работают достаточно хорошо, но это было нелегко. https://blog.isquaredsoftware.com/2023/08/esm-modernization-lessons/ ✍️ @React_lib

❌ Избегайте смешивания бизнес-логики с компонентами React. Вместо этого создавайте слои абстракции, которые взаимодействуют с ними. ✍️ @React_lib

Девять порочных практик React. Разбираем частые ошибки Слово React регулярно слышат разработчики во всем мире. С момента своего создания эта библиотека стала невероятно популярной. Одно из главных преимуществ React в том, что она крайне вариативна в использовании, и это при определенных подходах делает ее довольно мощной и простой в освоении. Однако излишняя гибкость также является минусом: нередко программисты выбирают порочные практики и неверные методы работы с React. Rus https://habr.com/ru/companies/ncloudtech/articles/685400/ Eng https://cult.honeypot.io/reads/bad-react-habits-to-kick/ ✍️ @React_lib

🔥Тест по JavaScript от OTUS 🔥 Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на курсе - «JavaScript Developer. Professional» 👉 ПРОЙТИ ТЕСТ https://vk.cc/ctkpay 💣 Пройдете тест и получите: ✔️ Живое общение с экспертами JavaScript-сообщества ✔️Получите видео-курс по Git в подарок ✔️ Лучшие открытые уроки прошлых наборов курса ✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+ ✔️ Скидку на прохождение онлайн курса «JavaScript Developer. Professional» 🎄Курс стартует 25 декабря и вы можете попасть в группу по новогодней скидке 20% Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Как загрузить файл в React Если вы что-то создаете с помощью React, то рано или поздно столкнетесь с проблемой загрузки файлов. Не волнуйтесь, написать логику загрузки файлов в React очень просто, и в этом посте мы покажем вам, как именно это сделать. Мы рассмотрим загрузку одного файла, загрузку нескольких файлов, а также посмотрим, как можно использовать стороннюю библиотеку, которая сделает всю работу за вас. Но сначала давайте рассмотрим загрузку одного файла в React с помощью fetch. https://pragmaticpineapple.com/how-to-upload-file-in-react/ ✍️ @React_lib

Awesome React Коллекция удивительных вещей, связанных с экосистемой React React General Resources React Tutorials React Development Tools React Frameworks React Component Libraries React State Management and Data Fetching React Styling React Routing React Libraries React Testing React Awesome Components React Components Sandboxes React Forms React Tables and Grids React Maps React Charts React Renderers React Internationalization React Graphics and Animations React Integration React Real Apps React Native General Resources React Native Navigation React Native Awesome Components React Native Libraries https://github.com/enaqx/awesome-react ✍️ @React_lib

TypeScript Handbook для React Developers – Создаем безопасное приложение Todo К концу этого урока вы будете хорошо разбираться в TypeScript и будете готовы разрабатывать безопасные приложения React. Итак, без лишних слов приступим! https://www.freecodecamp.org/news/typescript-tutorial-for-react-developers/ ✍️ @React_lib

❓Как разработчику на JavaScript оптимизировать некоторые задачи? Узнайте на бесплатном открытом уроке «Построение графических приложений с применением библиотеки Konva.js» от OTUS. На вебинаре: - научимся использовать konva; - разработаем небольшое приложение; - разберём отличия в разработке приложений на основе vdom и без него; - научимся сочетать оба подхода к разработке фронта. Занятие пройдёт 11 декабря в 20:00 мск и будет приурочено к старту курса «JavaScript Developer. Professional». После урока вы сможете продолжить обучение в рассрочку на специальных условиях. Для бесплатного участия пройдите короткое тестирование прямо сейчас: https://vk.cc/ct1UXB Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Infinite scroll (бесконечный скролл) +Virtualization (виртуализация) на примере ReactJS+ RTK Query На сегодняшний день любое уважающее себя предприятие, будь то магазин строительных товаров или компания по предоставлению услуг в сфере бизнеса, все они стремятся «выложить» свои товары и услуги в интернет. Это и понятно – мы живем в век бурно развивающихся технологий и доступ в интернет имеет более 65% населения мира (около 5.3 млрд. человек), а к 2025 году это число увеличится до 6.54 млрд. (внушительно, не правда ли?). Так, о чем я, всех их нужно обслуживать, всем им нужно предлагать услуги, товары и т.д. Как говорится: «На вкус и цвет – товарища нет» и правда сколько людей – столько мнений, а в нашем случае товаров и услуг. На фоне этого возникает резонный вопрос: «А как все это отобразить у меня на сайте, чтобы пользователь не ждал до следующего года загрузки страницы сайта, когда к тому времени успеют появиться еще товары, которые необходимо будет подгрузить?». При такой картине мира и самых оптимистичных прогнозах о темпах появления новых вещей, мы имеем неосторожность войти в некую рекурсию. https://habr.com/ru/articles/764626/ ✍️ @React_lib

Все хуки и концепты React в одной статье В первую очередь React это JS библиотека, а не полноценный фреймворк, так что для создания полноценного веб приложения тебе нужно знать много дополнительных вещей, чтобы использовать их вместе с React. В этой статье пойдет речь о React концептах, хуках и, конечно 😊 , хороших практиках. Мы используем React для создания переиспользуемых компонентов, которые могут логично использоваться для создания UI. Создание компонентов в React также просто, как и создание функций 🤩 . Для примера 👇🏻, ниже показан простой react компонент, в который мы отправляем данные как аргумент, который можно легко указать внутри функции. function Component(props){ return <h1>{props.text}</h1> } https://habr.com/ru/articles/660573/ original https://dev.to/nyctonio/all-react-hooks-and-concepts-in-a-single-post-1daf ✍️ @React_lib

Использование спрайтовых иконок svg в React Существует множество способов использовать svg-иконки в приложениях React. Самый интуитивный, но и самый худший - это писать код svg непосредственно в компоненте в виде JSX. Я не буду вдаваться во все причины, так как другие люди уже проделали большую работу по объяснению этого, но в целом это неэффективно и значительно увеличивает размер вашего пакета. https://www.jacobparis.com/content/svg-icons ✍️ @React_lib

🎯 Тест по Node JS от OTUS 🚀 Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на углубленном курсе - Node JS Developer от OTUS Курс рассчитан на frontend-разработчиков или backend-разработчиков со знанием Javascript 🔥 РЕЗУЛЬТАТ ПРОХОЖДЕНИЯ КУРСА Разработка серверных приложений любой сложности на Node.js с использованием Express, TypeScript, GraphQl, Apollo и Nest.js Время прохождения теста ограниченно 30 минут 👉 ПРОЙТИ ТЕСТ Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Частично управляемые компоненты: Декларативный паттерн проектирования в React В React принято различать Controlled и Uncontrolled компоненты. Но реальный мир не такой уж черно-белый... Вкратце: Uncontrolled компоненты управляют изменениями внутри себя, внутренне. Controlled компоненты управляют своими изменениями извне, изнутри. Недавно я стал автором React-компонента с древовидным представлением под названием react-arborist. После работы над таким сложным компонентом я почувствовал отсутствие необходимой концепции в нашем React-сообществе. https://www.jameskerr.blog/posts/partially-controlled-react-components/ ✍️ @React_lib

Понимание компонентов React Server Изучите основы React Server Components, чтобы лучше понять, зачем (и когда) их внедрять. https://vercel.com/blog/understanding-react-server-components ✍️ @React_lib