Hello-World туториал на React/Django/RabbitMQ/Websockets.

Однажды в поисках примера на React/Django я нашел на Хабре одну интересную статью. Она показалась мне полезной, и я решил дополнить пример из статьи новыми возможностями. В этом сиквеле мы добавим в веб-проект со списком студентов поддержку авторизации и real-time уведомлений на сокетах, улучшим систему Docker-сборки, оптимизируем модель очередей на RabbitMQ и немного пригладим косметику. В результате получим удобный базовый шаблон, с которого вы сможете начинать свои проекты.

Читать далее https://habr.com/ru/articles/761526

Next.js 13.5

Next.js 13.5 повышает производительность и надежность локальной разработки https://nextjs.org/blog/next-13-5

Пишем продвинутый планировщик с использованием React, Nest и NX. Часть 4: пользовательский интерфейс

Друзья, всем привет! Меня зовут Игорь Карелин, я frontend-разработчик в компании Домклик. Как вы помните из предыдущих частей (1, 2, 3), у нас уже есть функциональность для работы с планировщиком в бэкенде. Теперь нашей задачей будет создать удобный и интуитивно понятный пользовательский интерфейс, чтобы пользователи могли легко взаимодействовать с задачами.

Читать далее https://habr.com/ru/companies/domclick/articles/762514

Лучшие практики для защиты вашего приложения ReactJS

В этой статье рассматриваются основные передовые методы обеспечения безопасности Reactjs для улучшения приложений Reactjs. Реализуя эти меры безопасности, вы можете обеспечить целостность и защиту вашего приложения и его пользователей. Давайте рассмотрим ключевые стратегии эффективной защиты вашего приложения Reactjs. https://www.turing.com/kb/reactjs-security-best-practices

React 18: что поменялось.

React — одна из самых популярных JavaScript-библиотек для создания пользовательских интерфейсов. В её новой версии произошли значительные изменения, и сейчас я расскажу про самые важные.

React 18 теперь умеет существенно лучше работать с приложениями, содержащими большие данные. С помощью концепции виртуального DOM и нового инструмента — параллельного рендеринга — React эффективно обновляет только необходимые компоненты при изменениях, и это даёт молниеносную скорость прорисовки.

Появились такие новые возможности, как приостановка (Suspense), потоковый серверный рендеринг и автоматическое пакетирование. Это позволяет одномоментно обновлять все изменения состояний, произошедшие во время выполнения асинхронной операции. Читать дальше →https://habr.com/ru/companies/T1Holding/articles/763822

Spring Boot и React в Harmony

Разрабатывайте понятные и удобные в обслуживании бизнес-приложения на основе Spring Boot и React и делайте это быстрее с помощью платформы Hilla. https://dzone.com/articles/spring-boot-react-harmony-with-hilla

Учебное пособие по полнофункциональному проекту — создание приложения «Заметки» с использованием React и Node.js

В этом уроке мы собираемся создать полнофункциональное приложение для заметок, используя React, Node.js и PostgreSQL. https://www.freecodecamp.org/news/full-stack-project-tutorial-create-a-notes-app-using-react-and-node-js/

Методы жизненного цикла React и хуки – руководство для начинающих

Методы жизненного цикла уже много лет являются фундаментальной частью React. Но с появлением хуков подход React к управлению состоянием и побочными эффектами в функциональных компонентах стал более интуитивным и гибким. https://www.freecodecamp.org/news/react-lifecycle-methods-and-hooks-for-beginners

Изучение компонентов сервера React и действий сервера с помощью Next.js

Серверные компоненты React (RSC) — это компоненты, которые предназначены для запуска непосредственно на сервере и динамического создания HTML, который затем отправляется клиенту. https://www.antstack.com/blog/exploring-react-server-components-and-server-actions-with-next-js/

Полнофункциональный конструктор WebPageForm, NextJs, Typescript (React), Dnd-Kit, PostgreSQL, Prisma

https://itnext.io/full-stack-webpageform-builder-nextjs-typescript-react-dnd-kit-postgresql-prisma-1c2c30061180

Создание масштабируемых и модульных веб-приложений с помощью React, Micro Frontend и Webpack Modul Federation

https://medium.com/simform-engineering/building-scalable-and-modular-web-applications-with-react-micro-frontends-and-webpack-modul-ca3c6b9b3b23

Самый быстрый способ разработки полнофункциональных веб-приложений с помощью React и Node.js.

https://github.com/wasp-lang/wasp

Как использовать URL-адреса для управления состоянием в React

В течение многих лет URL-адреса были синонимом веб-навигации. Но ситуация меняется, особенно с появлением одностраничных приложений. Во вселенной React URL-адреса играют ключевую роль в управлении состоянием.

Эта статья проведет вас через преобразующий путь URL-адресов в качестве менеджеров состояния в контексте приложений React. https://www.freecodecamp.org/news/how-to-use-urls-for-state-management-in-react

Оптимизация внешнего интерфейса: мой путь к ускорению загрузки тяжелого внешнего интерфейса

Недавно к нам обратился клиент с жалобой на то, что наш продукт медленно загружается в регионах, где преобладают старые мобильные устройства и медленный интернет. В результате пользователи предпочитают переключиться на наших конкурентов. В этой статье я расскажу, как мне удалось сократить время загрузки приложения, реализовав такие методы, как импорт и рендеринг при видимости, прокси изображений, умелую работу с изображениями SVG и другие методы. Надеюсь, вы тоже найдете что-нибудь полезное для своего приложения. https://hackernoon.com/front-end-optimization-my-journey-to-accelerate-load-times-in-heavy-front-end

✨ 8 компонентов, чтобы стать мастером React 🧙‍ 🧙‍ 🪄 🪄 🪄 🪄

Я собрал компоненты React, которые вы можете использовать для создания идеального веб-сайта.

Каждый из них имеет уникальный вариант использования!

https://dev.to/github20k/8-components-to-become-a-react-master-2ee4

📍SOLID в React: хорошее, плохое и потрясающее

Давайте поговорим о принципах SOLID с точки зрения приложения React.
https://itnext.io/solid-in-react-the-good-the-bad-and-the-awesome-79d6cc518d1f

📍Как избежать поломки вашего приложения React в рабочей среде

https://www.freecodecamp.org/news/how-to-avoid-breaking-your-react-app-in-production/?ref=dailydev

Создайте чат-бота с искусственным интеллектом с помощью стека MERN

Чат-боты используются повсюду. А чат-бот с искусственным интеллектом — отличный проект, который поможет изучить стек MERN. https://www.freecodecamp.org/news/build-an-ai-chatbot-with-the-mern-stack