React

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

react-tracking: декларативное отслеживание для приложений на React https://blog.logrocket.com/react-tracking-declarative-tracking-react-apps/ ✍️ @React_lib

Собираем React приложение при помощи Vite https://blog.openreplay.com/building-a-react-application-with-vite ✍️ @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, которых следует избегать Вот некоторые из антипаттернов, наиболее часто встречающихся в приложениях React, и способы их устранения. Эти антипаттерны превратят ваш исходный код в кошмар для работы, если вы не научитесь распознавать и предотвращать их на ранних стадиях. ✍️ @React_lib

⚛️ 🚀react-static – фреймворк для создания статических сайтов react-static – простой в настройке генератор статических сайтов на React. Можно выделить следующие преимущества фреймворка: - Независимость от данных. Все данные, необходимые для рендеринга сайта, заранее собираются в конфиг-файле. Источник данных может быть любой, хоть GraphQL или REST API. В компонентах доступ к данным происходит через хук или пропсы. - Поддержка SPA. При загрузке статической страницы сайта загружается минимальный бандл для React. Помимо JS бандла загружаются остальные статические страницы и данные, а потом помещаются в кэш браузера. Благодаря такому подходу дальнейшие переходы по ссылкам будут происходить мгновенно, без перезагрузки страницы. https://github.com/react-static/react-static ✍️ @React_lib

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

Подробный рассказ о принципах работы библиотеки styled-components https://www.joshwcomeau.com/react/demystifying-styled-components/ ✍️ @React_lib

Критический путь рендеринга https://indepth.dev/posts/1498/101-javascript-critical-rendering-path ✍️ @React_lib

Найди ошибку в React-компоненте: Функциональное Карри В этом выпуске «Найди ошибку» у нас есть простой React компонент-переключатель, который переключается между активным и неактивным состояниями при нажатии. Однако он не работает как ожидается. Найдите ошибку. ✍️ @React_lib

React JS сайт с нуля - установка и настройка React и Bootstrap - Адаптивное меню с bootstrap - Роутинг сайта, переход по страницам - делаем слайдер Bootstrap - верстка табы адаптивно - форма обратной связи - верстка компоненты Bootstrap - верстка сайта блог посты - как загрузить сайт React JS на хостинг ✍️ @React_lib

Шпаргалка по React.js https://devhints.io/react ✍️ @React_lib

Cтилизация React приложения Если ты новичок в React, тебе может быть интересно, почему существует так много разных руководств, которые учат различным способам стилизации React приложения. По правде говоря, мы всё еще пытаемся понять, как лучше поступить. Далее ✍️ @React_lib

Библиотека SWR для получения данных. Библиотека представляет из себя набор хуков, основной из которых это useSWR. Помимо получения данных, есть возможность изменения данных. Изменение данных также возможно по стратегии SWR - сначала локально, потом отправляем запрос на сервер. SWR происходит от stale-while-revalidate, это стратегия кэширования ресурсов, в котором сначала возвращаются данные из кэша, а потом происходит запрос на получение свежих данных. Преимущество такой стратегии кэширования заключается в увеличении видимой производительности сайта, пользователям приходится меньше ждать и видеть спиннеры загрузки. Особенности библиотеки: поддержка стратегии SWR, автоматическая ревалидация кэша, поддержка API Suspense. Авторами библиотеки являются разработчики Next.js. https://swr.vercel.app/ ✍️ @React_lib

Кастомный React рендерер Когда React рендерит приложение и обновляет DOM, то используется React DOM. При рендере приложения на сервере используется модуль react-dom/server. Для мобильных приложений для рендера используется модуль react-native.  Таким образом, для каждого окружения используется свой рендерер, хотя модуль react используется везде один.  Модуль react предоставляет API для определения компонентов, а реализация находится в “рендерерах”. Для связи хуков с реализацией используется объект “диспатчер”. При вызове useState, вызов перенаправляется текущему диспатчеру рендерера. Об этом есть подробная статья в блоге Дэна Абрамова. Для разработки своего рендерера необходимо описать объект “host config”, в котором описаны методы реализации API React. Выглядит так: const HostConfig = { createInstance(type, props) { // e.g. DOM renderer returns a DOM node }, // ... supportsMutation: true, // it works by mutating nodes appendChild(parent, child) { // e.g. DOM renderer would call .appendChild() here }, // ... }; https://github.com/facebook/react/blob/main/packages/react-reconciler/README.md ✍️ @React_lib

Организация react-компонентов с помощью dot-notation и почему я часто прибегаю именно к этому способу Компонентный подход является основополагающим при создании приложений с помощью react. Компоненты - это главные строительные блоки, которые в своей композиции помогают реализовать сложные системы. В основе каждого компонента, в идеале, всегда лежит какой-то обособленный набор функционала, своего рода микро-решение микро-задачи. Далее ✍️ @React_lib

Хуки react-router Используя библиотеку react-router для получения текущего состояния роутера и выполнения навигации, можно использовать кастомные хуки, которые входят в react-router-dom: - useHistory. Возвращает объект history, который позволяет изменить состояние роутера. Например, можно перенаправить пользователя на другой URL, либо вернуться на предыдущую страницу.  - useLocation. Возвращает объект location, представляющий текущий URL. Этот хук аналогичен useState, который возвращает новый объект location при смене текущего URL. - useParams. Хук для доступа к параметрам URL, который установлен в роуте. - useRouteMatch. Этот хук пытается сопоставить текущий URL таким же образом, как и <Route>. Может использоваться взамен компонента <Route>, если необходимо отрендерить что-то при заданном URL. - useQuery. Хук не входит в список стандартных, но его можно реализовать используя useLocation. https://reactrouter.com/web/api/Hooks ✍️ @React_lib

Распространенные ошибки при использовании React Testing Library. https://te.legra.ph/Rasprostranennye-oshibki-pri-ispolzovanii-React-Testing-Library-06-29 ✍️ @React_lib

Руководство - шпаргалка по рендерингу React Когда происходит повторный рендеринг компонента react? Что может вызвать повторный рендеринг, и как предотвратить ненужный рендеринг? Вот краткая шпаргалка, к которой вы можете обратиться каждый раз, когда будете задавать себе эти вопросы. https://alexsidorenko.com/blog/react-render-cheat-sheet/ ✍️ @React_lib

Error Boundaries в React: препарируем лягушку Представим, что у нас есть приложение на React, в котором можно читать и писать отзывы. Пользователь открыл список отзывов, пролистал его, нажал кнопку «Написать отзыв». Форма написания отзыва открывается в попапе, над списком. Пользователь начинает вводить текст, свой e-mail. Вдруг валидация почты срабатывает с ошибкой, которую разработчики забыли обработать. Результат — белый экран. React просто не смог ничего отрендерить из-за этой ошибки в каком-то попапе. Далее ✍️ @React_lib