Критический путь рендеринга


https://indepth.dev/posts/1498/101-javascript-critical-rendering-path

✍️ @React_lib

Подробный рассказ о принципах работы библиотеки styled-components

https://www.joshwcomeau.com/react/demystifying-styled-components/

✍️ @React_lib

Учимся верстать на React за 5 минут

Эта статья для тех, кто уже знает CSS/HTML, немного JavaScript, хочет попробовать свои силы в React, но не знает, с чего начать. А начать можно как раз с верстки.

✍️ @React_lib

⚛️ 🚀react-static – фреймворк для создания статических сайтов


react-static – простой в настройке генератор статических сайтов на React. Можно выделить следующие преимущества фреймворка:

- Независимость от данных. Все данные, необходимые для рендеринга сайта, заранее собираются в конфиг-файле. Источник данных может быть любой, хоть GraphQL или REST API. В компонентах доступ к данным происходит через хук или пропсы.

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

https://github.com/react-static/react-static

✍️ @React_lib

Антипаттерны React, которых следует избегать

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

✍️ @React_lib

useId для генерации уникальных ID

В React 18 появится новый хук для генерации уникальных id. Этот хук можно использовать для связки названия и инпута:

function Checkbox() {
const id = useId();
return (
<>
<label htmlFor={id}>Do you like React?</label>
<input type="checkbox" name="react" id={id} />
</>
);
);


Проблема, которую решает хук useId, связана с новым подходом серверного рендеринга в React. Раньше для генерации уникальных id использовался простой счетчик. В новой версии React, при использовании конкурентного рендеринга, HTML может передаваться в произвольном порядке.

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


00101 00010001011010101
╰──┬──╯ ╰────────┬────────╯
Fork 5 of 20 id родителя


Это позволяет быть уверенным, что каждый вызов useId будет возвращать уникальный id. Если в компоненте несколько лейблов и инпутов, то можно добавить локальные префиксы, что гарантирует уникальность id глобально:

function NameFields() {
const id = useId();
return (
<div>
<label htmlFor={id + '-firstName'}>First Name</label>
<div>
<input id={id + '-firstName'} type="text" />
</div>
<label htmlFor={id + '-lastName'}>Last Name</label>
<div>
<input id={id + '-lastName'} type="text" />
</div>
</div>
);
}

Хотя так делать не обязательно, если несколько раз вызвать useId в одном компоненте, то каждый из них вернёт свой уникальный id.


https://github.com/reactwg/react-18/discussions/111

✍️ @React_lib

Собираем React приложение при помощи Vite

https://blog.openreplay.com/building-a-react-application-with-vite

✍️ @React_lib

react-tracking: декларативное отслеживание для приложений на React

https://blog.logrocket.com/react-tracking-declarative-tracking-react-apps/

✍️ @React_lib

Как работает React: подробное руководство

В этой статье я покажу вам, с чего начинается React.

Что это означает? Это означает, что мы разработаем мини-версию React, которая сможет выполнять следующий код...

✍️ @React_lib

Лучший способ решить prop drilling в React приложениях

https://blog.logrocket.com/solving-prop-drilling-react-apps/

✍️ @React_lib

Сравнение инструментов для оптимизации перфоманса в React

https://blog.logrocket.com/comparing-tools-optimizing-performance-react/

✍️ @React_lib

Sapling – это расширение для просмотра иерархии компонентов проекта в сайдбаре VS Code.

Каждый узел в такой иерархии – компонент React. У каждого узла есть несколько иконок:
- Список пропсов, которые отображаются при наведении.
- Переход в файл компонента.
- Индикатор подключения к Redux.

Для работы расширения используется @babel/parser для создания AST и VS Code Extension API для интеграции в VS Code. Для отображения используется React.

✍️ @React_lib

React или React Native: что лучше подойдет для веб-разработчика и почему

React - это фреймворк, разработанный компанией Facebook изначально для поддержки собственных сервисов, но ставший впоследствии самым популярным JavaScript-фреймворком для сторонних разработчиков. Чуть позже - в 2015 году, появились первые версии фреймворка React Native. Он изначально был предназначен для мобильной разработки и, в основном применяется в ней. Однако, так как в последние время большинство сайтов и приложений открывается через мобильные устройства, многие веб-разработчики начинают переходить на React Native, так как он предоставляет больше возможностей для оптимизации конечного продукта. Далее

✍️ @React_lib

React Social Login with Passport.js | React oAuth w/ Google, Facebook, Github

0:00 Introduction
0:47 Designing a React App
28:07 React Router Dom v6 Tutorial
39:18 React Passport.js Tutorial
46:00 React Google Login Authentication
01:07:35 React Github Login Authentication
01:11:00 React Facebook Login Authentication
01:14:00 Outro

✍️ @React_lib

React.useEffect Hook – основные проблемы и способы их решения

В статье, в процессе создания кастомного хука, разбираются возможные проблемы при работе с хуком useEffect.

✍️ @React_lib

Предотвращаем рендеры компонента с react-freeze

Библиотека использует механизм работы Suspense. Компонент оборачивается в Suspense и обертку Suspender. Когда нужно “заморозить” компонент, то в Suspender выбрасывается исключение Promise , который перехватывает Suspense. При получении промиса-исключения, Suspense ставит компонент в режим ожидания, предотвращая лишний рендер и изменение состояния.

Статья https://blog.swmansion.com/experimenting-with-react-freeze-71da578e2fa6

Github https://github.com/software-mansion-labs/react-freeze

✍️ @React_lib

useEffect(), Http-запросы и прерывание

Отправка Http-запроса с помощью useEffect() может быть сложнее, чем вы думаете - или вы думали о прерывании запросов и предотвращении условий гонки?

Состояние гонки описывает ситуацию, когда поведение системы зависит от определенной последовательности событий, но их порядок неуправляем. Одним из примеров является многопоточность, когда несколько потоков пытаются изменить общие данные. Аналогичная проблема может возникнуть с асинхронностью в JavaScript.

✍️ @React_lib

Техническое погружение в react-three-fiber

В этой статье вы узнаете о том, как работают React и JSX для создания нашего собственного react-three-fiber. Мы рассмотрим и используем те же методы для создания одного и того же API шаг за шагом.

✍️ @React_lib

Typescript в react как, зачем и нужен ли?

✍️ @React_lib

🛡️ ⚛️ Простая, масштабируемая и мощная архитектура для создания готовых к работе приложений React.

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

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

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

https://github.com/alan2207/bulletproof-react

✍️ @React_lib

Как создать автоматический слайдер с помощью React

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


✍️ @React_lib