React

Создание приложения для комментирования в реальном времени с помощью 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

Just React!: Learn React the React Way
Автор: Hari Narayn (2022)

Перед вами идеальный помощник в изучении и разработке приложений React. Эта книга представляет инновационные концепции, и использует реальные примеры, основанные на наиболее рекомендуемых практиках, чтобы помочь вам заложить прочный фундамент. Этот комплексный подход обеспечивает сильный акцент на построении компонентов с помощью React.

Вы начнете с изучения основ веб-технологий, JavaScript нового поколения и того, как React вписывается в эти основы. В последующих главах вы построите приложение React с нуля и узнаете о JSX, компонентах, реквизитах, управлении состоянием, контексте и событиях жизненного цикла. Попутно вы создадите многокомпонентное приложение и увидите, как компоненты взаимодействуют между собой. Также будут рассмотрены вопросы отладки и стилизации приложений React.

✍️ @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, 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

Скажем нет “мерцающему” UI: useLayoutEffect и браузерная отрисовка

Как изменять элементы на основе измерений DOM: в чем проблема с useEffect, как ее решает useLayoutEffect, что такое браузерная отрисовка и какую роль здесь играет SSR.

https://www.developerway.com/posts/no-more-flickering-ui

✍️ @React_lib

Использование React в приложениях Angular

Два сценария требуют использования React в Angular-приложении. Во-первых, в экосистеме React есть компонент, на разработку которого у нас уйдут недели, например, компонент Timeline. Во-вторых, возможно, мы приобрели компанию, использующую React, и нам необходимо интегрировать его в существующее приложение.

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

https://netbasal.com/using-react-in-angular-applications-1bb907ecac91

✍️ @React_lib

Just React!: Learn React the React Way
Автор: Hari Narayn (2022)

Перед вами идеальный помощник в изучении и разработке приложений React. Эта книга представляет инновационные концепции, и использует реальные примеры, основанные на наиболее рекомендуемых практиках, чтобы помочь вам заложить прочный фундамент. Этот комплексный подход обеспечивает сильный акцент на построении компонентов с помощью React.

Вы начнете с изучения основ веб-технологий, JavaScript нового поколения и того, как React вписывается в эти основы. В последующих главах вы построите приложение React с нуля и узнаете о JSX, компонентах, реквизитах, управлении состоянием, контексте и событиях жизненного цикла. Попутно вы создадите многокомпонентное приложение и увидите, как компоненты взаимодействуют между собой. Также будут рассмотрены вопросы отладки и стилизации приложений React.

✍️ @React_lib

React и TypeScript - Быстрый Курс

Исходники на GitHub https://github.com/vladilenm/react-fast-2022

источник

✍️ @React_lib

Библиотеки React

React существует уже достаточно давно. С тех пор вокруг этой компонентной библиотеки сформировалась обширная, но перегруженная экосистема библиотек. Разработчикам, пришедшим с других языков программирования или библиотек/фреймворков, часто бывает сложно разобраться во всех библиотеках для создания веб-приложений на React.

https://www.robinwieruch.de/react-libraries/

✍️ @React_lib

Наиболее распространенные ошибки при использовании React

React - популярная библиотека для построения пользовательских интерфейсов, предлагающая различные возможности, которые помогают разработчикам легко создавать сложные приложения. Однако, как и в случае с любой другой технологией, при использовании React легко допустить ошибки, особенно если вы новичок. В этой статье мы рассмотрим некоторые из наиболее распространенных ошибок, которые допускают разработчики при использовании React, хуков React, управления состоянием и рендеринга компонентов. Поняв эти ошибки и научившись их исправлять, вы сможете повысить производительность, сопровождаемость и общее качество вашего приложения.

https://claritydev.net/blog/the-most-common-mistakes-when-using-react

✍️ @React_lib

Шпаргалка по React.js

React - самая популярная библиотека JavaScript. Это простая, но полезная шпаргалка для энтузиастов React. Обязательно сохраните ее в закладках, чтобы иметь возможность быстро обращаться к ней.

https://devhints.io/react

✍️ @React_lib