React

Как мы создали GPT-агента 🤖, который генерирует полнофункциональные веб-приложения на React и Node.js Мы создали GPT Web App Generator, который позволяет кратко описать веб-приложение, которое вы хотите создать, и в считанные минуты прямо перед вами будет сгенерирована полностековая кодовая база, написанная на React, Node.js, Prisma и Wasp, которую можно загрузить и запустить локально! Мы начали этот проект в качестве эксперимента, чтобы проверить, насколько хорошо мы можем использовать GPT для генерации полнофункциональных веб-приложений на Wasp, фреймворке JS для веб-приложений с открытым исходным кодом, который мы разрабатываем. С момента запуска мы сгенерировали более 3000 приложений всего за пару дней! https://dev.to/wasp/how-we-built-a-gpt-code-agent-that-generates-full-stack-web-apps-in-react-nodejs-explained-simply-4f9 ✍️ @React_lib

🟡Тест по React JS от OTUS — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 👉🏻ПРОЙТИ ТЕСТ https://vk.cc/cugpkJ Курс доступен в рассрочку. 💣 Пройдете тест и получите: ✔️ Живое общение с экспертами ✔️ Лучшие открытые уроки прошлых наборов курса ✔️ Продвинутые темы и практика на «боевых» задачах уровня Middle+ ✔️ Скидку на прохождение онлайн курса «React.js Developer» Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

⚛️ Prop drilling в React затрудняет отладку и сопровождение кода Иногда быстрое решение заключается в переосмыслении композиции ваших компонентов ✍️ @React_lib

UseMemo overdose Недавно меня спросили, когда следует использовать хук useMemo, и этот вопрос заставил меня задуматься и поразмыслить. Постепенно я понял, что у меня появилась привычка использовать хук useMemo практически для всего, и я не мог объяснить, почему я это делаю. И особенно меня встревожило то, что после разговора с другим фронтенд-инженером я понял, что не только я так делаю. Это означает, что разработчики склонны чрезмерно использовать хук useMemo и даже не могут адекватно объяснить, почему они это делают. В этом посте мы узнаем, когда стоит использовать хук useMemo, а когда нет. https://edvins.io/usememo-overdose ✍️ @React_lib

⚛️ Совет по React 💡 Как типизировать динамические компоненты (например, таблицы) с использованием TypeScript ✍️ @React_lib

⚛️ Совет по React 💡 Напишите более качественное и безопасное условие с использованием сопоставления шаблонов ✍️ @React_lib

С чего JS-разработчику начать изучение React? С бесплатного практического урока «Typescript и React. Типизация основных строительных блоков приложения» от OTUS. На вебинаре: - углубимся в typescript; - разберёмся с типами для React; - поймем, зачем нужны дженерики и как описывать компоненты React на typescript; - изучим enums, interfaces, functions, classes, keyof, typeof, union an as и многое другое. Занятие пройдёт 29 января в 20:00 мск и будет приурочено к старту курса «React.js Developer». Программа доступна в рассрочку! Пройдите короткое тестирование прямо сейчас, чтобы принять участие в открытом уроке и получить запись: https://vk.cc/cu7jzr Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

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

Любимая задачка на знание React Всем привет! Меня зовут Олег и я fullstack-программист в компании Тензор. Опыт в разработке, без малого, 20 лет (как-то раз батя спаял на кухне ZX Spectrum и все заверте..., сам не понял как так вышло). В данный момент являюсь тимлидом собственной команды разработчиков, которая периодически нуждается в пополнении толковыми программистами. Как и многие руководители, я активно принимаю участие в подборе сотрудников для себя и помогаю на собесах коллегам соседних отделов. Наша команда занимается разработкой веб-приложения на React. Соответственно, мне важно найти программистов уверенно владеющих основами (!) этого фреймворка. Есть много способов проверки компетенций на собеседовании, один из любимых - задача по написанию hook для загрузки данных. Если вы тоже в вечном поиске классных фронтендеров или сами часто проходите собесы - велком в эту статью :) https://habr.com/ru/companies/tensor/articles/779718/ ✍️ @React_lib

⚛️ Я просмотрел бесчисленное количество PRs, и я вижу эту ошибку в React снова и снова. ❌ Объект ref не уведомляет об изменении значения ref в useEffect. ✅ Вместо этого используйте функцию обратного вызова ref, чтобы всегда получать последнее значение ref. ✍️ @React_lib

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