React

Server Components Гайд по серверным компонентам https://servercomponents.dev/ ✍️ @React_lib

❌ Избегайте prop-drilling компонентов в React. ✅ Вместо этого используйте композицию ✍️ @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

Делаем авторизацию через facebook https://github.com/keppelen/react-facebook-login ✍️ @React_lib

⚛️ В React рендеринг больших списков или таблиц может снижать производительность Как это исправить? Виртуализация! Процесс рендеринга только части большого набора данных (достаточно, чтобы заполнить область просмотра). ✅ Значительно улучшает время рендеринга. ✅ Снижается потребление памяти. ✍️ @React_lib

Ускорить таблицу на React в 1 000 раз, изменив лишь одну строку JP Camara, главный инженер Wealthbox, в своём блоге поделился интересным опытом ускорения TanStack Table — новой версии React-библиотеки для создания функциональных таблиц — аж до 10 мс. https://habr.com/ru/companies/netologyru/articles/750246/ original https://jpcamara.com/2023/03/07/making-tanstack-table.html ✍️ @React_lib

Инструмент, который нужен тестировщику на React.js Изучите его на бесплатном практическом уроке «React Testing Library» от OTUS, где мы: 1. Применим на практике подход к разработке компонентов на React.js через тестирование 2. Освоим написание модульных тестов для компонентов, контроль корректности обработки событий и документирование технического решения 3. Научимся упрощать рефакторинг, сокращать количество ошибок на проде и упрощать командную работу 4. Разберём использование react testing library и jest 5. Получим навык описания тестовых сценариев и автоматизации тестирования Занятие пройдёт 14 февраля в 20:00 мск и будет приурочено к старту курса «React.js Developer». Доступна рассрочка на обучение! Пройдите короткое тестирование прямо сейчас, чтобы занять место на открытом уроке и получить запись: https://vk.cc/cusYcX Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Создание UI-компонентов React на продвинутом уровне React  —  хорошая библиотека. Так давайте сделаем ее еще лучше, создавая многоразовые компоненты на высокопрофессиональном уровне. Для использования этого руководства достаточно базовых знаний о React, TypeScript и Tailwind CSS. В качестве примера поработаем с button, но принципы, которым будем следовать здесь, применимы к любому HTML-тегу. const Button = ({children, className}) => { return ( <button className={className}>{children}</button> ) } Приведенный выше код работает, но что, если понадобится ввести ARIA (accessible rich internet application attribute  —  доступные полнофункциональные интернет-приложения), ссылки или любые другие свойства обычного тега button? https://medium.com/@emmanuelalozie69/build-react-ui-components-like-a-senior-developer-21c7b22408d2 ✍️ @React_lib

Создание компонента тоста В начале этого года я создал библиотеку Toast для React под названием Sonner. В этой статье я расскажу вам о некоторых уроках и ошибках, которые я совершил при ее создании. https://emilkowal.ski/ui/building-a-toast-component ✍️ @React_lib

Как мы создали 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