React

Красивые и поражающие воображение эффекты с WebGL Render Targets Поскольку я постоянно работаю над оттачиванием навыков создания красивых и интерактивных 3D-проектов в Интернете, я постоянно знакомлюсь с новыми инструментами и техниками, от разнообразных сцен React Three Fiber до великолепных шейдерных материалов. Однако есть один инструмент Three.js, который часто является общим знаменателем для всех этих увлекательных проектов, с которым я постоянно сталкиваюсь: Render Targets. https://blog.maximeheckel.com/posts/beautiful-and-mind-bending-effects-with-webgl-render-targets/ ✍️ @React_lib

Создавайте свои CRUD-приложения на основе React без ограничений refine - это фреймворк на основе React для быстрой ✨ разработки веб-приложений. Он устраняет повторяющиеся задачи, требуемые операциями CRUD, и предоставляет стандартные решения для критически важных частей, таких как аутентификация, контроль доступа, маршрутизация, сеть, управление состоянием и i18n. https://github.com/refinedev/refine ✍️ @React_lib

Как использовать инструменты React Dev - с примерами кода и видео Когда вы работаете над проектом React, одним из самых простых способов отладки кода является использование React Dev Tools. React Dev Tools - это расширение, созданное командой React. Оно позволяет разработчикам отлаживать свой код внутри своих инструментов разработчика. После добавления расширения вы получите 2 новые вкладки в DevTools под названием Components и Profiler соответственно. https://www.freecodecamp.org/news/how-to-use-react-dev-tools/ ✍️ @React_lib

🟡Тест по React JS от OTUS — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Нативная интеграция. Информация о продукте www.otus.ru

React: разработка реального приложения с помощью React Query Если вам когда-либо приходилось разрабатывать React-приложение, в котором используются асинхронные данные (а это практически любое приложение), вы наверняка знаете, насколько утомительным может быть обработка различных состояний (загрузка, ошибка и т.д.), распределение состояния между компонентами, обращающимися к одной и той же конечной точке API и обеспечение согласованности состояния в компонентах. Rus https://habr.com/ru/companies/timeweb/articles/702876/ Eng https://www.smashingmagazine.com/2022/01/building-real-app-react-query/ ✍️ @React_lib

Я слишком остро реагирую? Или React слишком остро реагирует? Когда я только начинал заниматься веб-разработкой, это было в основном с Python/Django. Все рендерилось на стороне сервера, и я ни разу не задумывался о "производительности рендеринга". Спустя 10 лет, когда компьютеры стали по крайней мере в два раза быстрее, производительность рендеринга стала более важной проблемой, чем когда-либо. Одностраничные приложения (SPA) и фронтенд-библиотеки, такие как React, поощряют и позволяют создавать высокодинамичные веб-страницы. К сожалению, по моему опыту, рекомендуемый по умолчанию способ написания кода React на самом деле не очень хорошо поддерживает высокодинамичные страницы. В этой заметке я рассмотрю проблемы, возникающие со стандартным кодом React, рекомендуемые варианты улучшения производительности React и, наконец, приведу примеры на ванильном JS. https://devtails.xyz/@adam/am-i-overreacting-or-is-react-over-reacting ✍️ @React_lib

Микросервисы — популярный способ создания и поддержки современных веб-сервисов. Развиваетесь в веб-разработке? Узнайте, как создавать микросервисы при помощи NodeJS и GRPC 18 мая в 20:00 состоится вебинар «NodeJS + Microservices». За 1,5 часа вы узнаете, как создавать микросервисы с использованием протокола gRPC. На занятии мы разберем: — Плюсы и минусы микросервисного подхода — Как мигрировать монолит на микросервисы — Решение на базе NodeJS + протокола GRPC. В результате у вас будет база для создания своего микросервиса на NodeJS. Открытый урок бесплатный и состоится в рамках онлайн-курса «Node.js Developer» в OTUS. Продолжить обучение вы сможете уже на курсе, на него действуют разные способы оплаты. Для участия пройдите вступительный тест https://otus.pw/v3rQ/ Нативная интеграция. Информация о продукте www.otus.ru

Добавьте движение в свои приложения с помощью одной строки кода AutoAnimate - это анимационная утилита с нулевой конфигурацией, которая добавляет плавные переходы в ваше веб-приложение. Вы можете использовать ее с React, Solid, Vue, Svelte или любым другим приложением JavaScript. https://auto-animate.formkit.com/ ✍️ @React_lib

5 небольших и скрытых библиотек React, которые вы уже должны использовать В этой статье я расскажу о небольших и малоизвестных библиотеках, которые я нашел и использую каждый день и которые избавят вас от головной боли. Итак, давайте начнем! https://javascript.plainenglish.io/5-small-and-hidden-react-libraries-you-should-already-be-using-49c8725c492f ✍️ @React_lib

Какие паттерны в React нужно знать JS-разработчику? ✔️Разберем основные паттерны на открытом уроке 16 мая в 20:00 мск в OTUS. Занятие пройдет в рамках онлайн-курса «React.js Developer» в OTUS. На занятии мы также применим несколько часто встречающихся паттернов на практике. Больше навыков работы с React.js вы сможете получить на курсе. Хороший разработчик всегда думает о качестве и удобстве использования кода, особенно при написании библиотек компонентов. Сообщество React разработало несколько классных паттернов, которые помогут создать идеальные компоненты с лучшей контролируемостью и расширяемостью. ✍️Для участия пройдите вступительный тест https://otus.pw/zvzdK/ Курс доступен в рассрочку. Нативная интеграция. Информация о продукте www.otus.ru

A cure for React useState hell? https://dev.to/builderio/a-cure-for-react-usestate-hell-1ldi ✍️ @React_lib

Читаем исходный код – Chakra UI Я провел более года в качестве главного инженера в одной из команд News UK по разработке платформ, где мы создавали библиотеки и инструменты для других инженеров компании. Одним из таких инструментов была фантастическая система проектирования. И хотя я не имел к ней никакого отношения, она заставила меня глубже задуматься о многократно используемых компонентах. https://alexkondov.com/reading-code-chakra-ui/ ✍️ @React_lib

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

Понимание серверных компонентов в React 18 и Next.js 13 С выходом Next.js 13 у них появился новый каталог /app, который имеет более новые подходы к рендерингу, выборке данных, а также использует новейшие компоненты React Server Components. https://programmingwithmosh.com/react/understanding-server-components-in-react-18-and-next-js-13/ ✍️ @React_lib

Реализация слайдера изображений и текста на React.js с вариантами оптимизации В данной статье мы разберем задание, которое может встретиться в рамках собеседования на должность фронтенд-разработчика, а именно реализацию слайдера изображений. https://betterprogramming.pub/implementing-image-and-text-slider-with-react-js-and-optimizations-7a16af998548 ✍️ @React_lib

🟡Тест по React JS от OTUS — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Если вы планируете пополнить свой стек самым популярным JS-фреймворком — React, приходите на открытый урок “TDD + React”. Урок пройдет 27 апреля в 20:00 в рамках онлайн-курса “React.js Developer” https://otus.pw/ZQXe/ Нативная интеграция. Информация о продукте www.otus.ru

Как избежать хитрых ловушек в асинхронных стейт менеджерах В наши дни подход local-first к созданию веб-приложений набирает все большую популярность. Большинство таких баз данных предоставляют асинхронные API, и это существенно влияет на работу наших приложений React. https://evilmartians.com/chronicles/how-to-avoid-tricky-async-state-manager-pitfalls-react ✍️ @React_lib

Как создавать собственные пользовательские React Hooks React Hooks открывают совершенно новый способ написания функциональных компонентов, позволяя нам добавлять возможности, доступные для компонентов класса, например, логику с состоянием. https://blog.logrocket.com/create-your-own-custom-react-hooks/ ✍️ @React_lib