React

Что такое строгий режим в React? Здравствуйте, разработчики React, вы наверняка слышали о строгом режиме. Но что же это такое? Если говорить кратко, то React.StrictMode - это полезный компонент для выделения потенциальных проблем в приложении. Как и <Fragment>, <StrictMode> не отображает никаких дополнительных элементов DOM. В этой статье мы подробно рассмотрим, что такое строгий режим, как он работает и почему его стоит использовать в своих приложениях. https://dev.to/codeofrelevancy/what-is-strict-mode-in-react-3p5b ✍️ @React_lib

Докеризация полнофункциональных приложений React Для разработчика создание локальных сред разработки может потребовать времени и усилий. Возьмем для примера приложение React. Создание приложения становится еще более сложным, когда требуется бэкенд и база данных для предоставления данных приложению. Использование таких инфраструктур, как Docker и контейнеры, дает разработчику преимущество для быстрой настройки и развертывания приложений. https://blog.openreplay.com/dockerize-full-stack-react-apps/ ✍️ @React_lib

Распространенные ошибки новичков при работе с React Пару лет назад я преподавал React в местном учебном центре программирования и заметил, что есть несколько вещей, которые постоянно застают студентов врасплох. Люди постоянно попадали в одни и те же ямы! В этом уроке мы рассмотрим 9 наиболее распространенных проблем. Вы узнаете, как их обойти и, надеюсь, избежать многих разочарований. Чтобы сохранить легкость и непринужденность, мы не будем слишком углубляться в причины этих проблем. Это скорее краткая справка. https://www.joshwcomeau.com/react/common-beginner-mistakes/ ✍️ @React_lib

Как обрабатывать ошибки в React: полное руководство Мы все хотим, чтобы наши приложения были стабильными, работали идеально и удовлетворяли всем возможным требованиям, не так ли? Но печальная реальность такова, что все мы люди (по крайней мере, я так считаю), все мы совершаем ошибки, и не существует такого понятия, как код без ошибок. Как бы мы ни были внимательны и сколько бы автоматизированных тестов ни написали, всегда найдется ситуация, когда что-то пойдет не так. Главное, когда речь идет о пользовательском опыте, предугадать этот ужас, локализовать его, насколько это возможно, и бороться с ним изящным способом до тех пор, пока он не будет действительно исправлен. https://adevnadia.medium.com/how-to-handle-errors-in-react-full-guide-bd02634ff523 ✍️ @React_lib

Создание приложения для комментирования в реальном времени с помощью Socket.io и React В этом руководстве мы рассмотрим, как построить систему комментирования в реальном времени с помощью React, Node.js и Socket.io. Мы покажем, как формировать список комментариев, получаемых из API, создавать новые комментарии и транслировать комментарии в режиме реального времени подключенным пользователям с помощью Socket.io. https://cjbell.hashnode.dev/building-a-real-time-commenting-app-with-socketio-and-react ✍️ @React_lib

Создание микрофронтендов на React. 3 простых шага. Для разработки микрофронтендов на React настоятельно рекомендуется использовать инструменты компонентно-ориентированной разработки, такие как bit. https://blog.bitsrc.io/build-microfrontend-in-react-in-3-easy-steps-74790fd0c9fb ✍️ @React_lib

7 инструментов для ускорения разработки на React React - это универсальная и гибкая библиотека разработки, с помощью которой можно создавать все: от массивных одностраничных приложений до компактных плагинов. Однако создание проекта React с нуля может оказаться сложной задачей, связанной с бесконечными доработками и настройками. Поэтому для ускорения разработки на React необходимо иметь в своем арсенале лучшие инструменты. https://dev.to/devland/7-tools-and-frameworks-for-faster-development-in-react-5b18 ✍️ @React_lib

React, Visualized Интерактивное руководство по основным концепциям React Для того чтобы по-настоящему оценить React, необходимо понять исторический контекст его создания. От jQuery до Backbone и AngularJS - каждая эпоха по-своему вдохновляла React. https://react.gg/visualized ✍️ @React_lib

Изучение React 18 с инструментарием Redux - полный курс для начинающих 00:00:00 Setup 0:30:33 Folder Structure 0:42:58 First Component 0:53:25 Extensions and settings.json 1:06:09 JSX 1:20:21 Nest Components 1:26:35 Booklist 1:36:57 CSS 1:47:31 Images 1:55:31 JSX - CSS 2:02:17 JSX - Javascript 2:08:44 Props 2:18:33 Props - Somewhat Dynamic Setup 2:23:00 Access Props - Multiple Approaches 2:27:44 Children Prop 2:35:12 Simple List 2:43:48 Proper List 2:51:12 Key Prop 2:57:20 Props - Options 3:02:56 Events 3:21:51 Form Submission 3:25:35 Mind Grenade 3:28:55 Component Feature 3:34:00 React Data Flow 3:39:42 Challenge 3:48:51 ES6 Modules 3:58:40 Local Images (src folder) 4:04:25 More Challenges 4:13:20 Deployment 4:18:43 useState Hook 5:48:19 useEffect Hook 6:19:29 Multiple Returns 7:28:02 Folder Structure 8:27:07 Forms 9:27:53 useRef Hook 9:50:10 Custom Hooks 10:06:20 Context API 10:43:01 useReducer Hook 11:26:39 Performance 12:11:45 Redux Toolkit https://www.youtube.com/watch?v=2-crBg6wpp0 ✍️ @React_lib

Как начать React-проект в 2023 году Здесь я хочу дать краткий обзор стартовых наборов для создания нового проекта на React. Я хочу поразмышлять о преимуществах и недостатках, о необходимом уровне квалификации разработчика и о том, какие возможности каждый стартовый проект может предложить вам как разработчику React. В конце вы узнаете о трех решениях для различных требований. https://www.robinwieruch.de/react-starter/ ✍️ @React_lib

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

Создание конструктора резюме с помощью React, NodeJS и искусственного интеллекта 🚀 В этой статье вы узнаете, как создать конструктор резюме с помощью React, Node.js и OpenAI API. Что может быть лучше, чем искать работу и говорить, что для этого вы создали конструктор резюме с искусственным интеллектом? 🤩 https://dev.to/novu/creating-a-resume-builder-with-react-nodejs-and-ai-4k6l ✍️ @React_lib

React: интересная схема работы с формами В этой статье я хочу рассказать о схеме (назовем ее так) работы с формами в React, которая на сегодняшний день кажется мне наиболее эффективной. Эта схема предполагает использование React Hook Form для обработки форм и Zod для валидации пользовательских данных. Применение данной схемы имеет несколько существенных преимуществ по сравнению с использованием других решений или реализацией необходимого функционала вручную. Главными преимуществами являются минимизация количества шаблонного кода и автоматическое выведение типов (type inference). https://habr.com/ru/companies/timeweb/articles/722108/ ✍️ @React_lib

Анимация View Transitions в React API View Transitions предлагает простой способ перехода любого визуального изменения DOM из одного состояния в другое. Это могут быть как небольшие изменения, например, переключение содержимого, так и более широкие изменения, например, переход с одной страницы на другую. Ниже приведена демонстрация работы API View Transitions в одностраничном приложении (SPA) https://www.patterns.dev/posts/view-transitions ✍️ @React_lib

UI-компоненты для React: топ-10 библиотек и фреймворков https://dev.to/nilanth/10-react-packages-with-1k-ui-components-2bf3 ✍️ @React_lib

Руководство по дополнительным параметрам Reacts Знаете ли вы, что в React API есть несколько необязательных и альтернативных параметров? Скрытые дополнительные параметры, которые обеспечивают "бонусное поведение". Большинство из них предназначены для оптимизации и помогают выжать максимум производительности из вашего приложения React. Хотя эти параметры не являются самыми важными для понимания React, полезно иметь четкое представление обо всех имеющихся в вашем распоряжении инструментах. Итак, давайте подробнее рассмотрим эти скрытые дополнительные возможности. Мы рассмотрим их в порядке убывания распространенности. https://julesblom.com/writing/react-optional-parameters ✍️ @React_lib

Распространенные ошибки новичков при работе с React Пару лет назад я преподавал React в местном учебном центре программирования и заметил, что есть несколько вещей, которые постоянно застают студентов врасплох. Люди постоянно попадали в одни и те же ямы! В этом уроке мы рассмотрим 9 наиболее распространенных проблем. Вы узнаете, как их обойти и, надеюсь, избежать многих разочарований. Чтобы сохранить легкость и непринужденность, мы не будем слишком углубляться в причины этих проблем. Это скорее краткая справка. https://www.joshwcomeau.com/react/common-beginner-mistakes/ ✍️ @React_lib

🤖 Изоморфные React-приложения с React.js , Next.js и TRPC. Фуллстек разработка с SSR никогда не была такой простой и доступной! 🔵14 августа в 20:00 мск открытый урок онлайн курса «React.js Developer» от OTUS. На этом вебинаре мы: - научимся бутстрапить полноценные легко развертываемые приложения с клиентской и серверной частью - на примере разберем настройку сборки, процесс разработки и развертывания приложения - получим удобный набор для старта разработки любого веб-приложения на современном стеке! 🟠Это отличная возможность перенять опыт преподавателя и посмотреть на процесс обучения изнутри. Оплата курса возможна любым удобным для вас способом. ➡️ Для участия в вебинаре зарегистрируйтесь: https://otus.pw/WaPH/ Нативная интеграция. Информация о продукте www.otus.ru

Скажем нет “мерцающему” UI: useLayoutEffect и браузерная отрисовка Как изменять элементы на основе измерений DOM: в чем проблема с useEffect, как ее решает useLayoutEffect, что такое браузерная отрисовка и какую роль здесь играет SSR. https://www.developerway.com/posts/no-more-flickering-ui ✍️ @React_lib