Обложка канала

Заметки про React. Страница 14

667 @ru_react_notes
Открыть

Короткие и полезные заметки про React

  • Заметки про React

    Краткое знакомство с Elm для React разработчиков Elm – это язык, разработанный для создания интерфейсов приложения, предлагающий альтернативу JS библиотекам, таким как React. Под капотом Elm, как и в React, используется виртуальный DOM, а также оба используют декларативный стиль для описания UI. Основное отличие между ними в том, что React – это JavaScript библиотека, а Elm – функциональный язык, разработанный с нуля для декларативного создания веб-интерфейсов. Одной из особенностей Elm является мощная типизация, которая позволяет отловить и предупредить о граничных случаях. В результате строгой типизации, при работе приложения практически отсутствуют ошибки в рантайме. Пример счетчика на Elm: type Msg = Increment | Decrement init = { count = 0 } update msg model = case msg of Increment -> { model | count = model.count + 1 } Decrement -> { model | count = model.count - 1 } view model = div [] [ button [ onClick Decrement ] [ text "-" ] , text (String.fromInt model.count) , button [ onClick Increment ] [ text "+" ] ] blog.theodo.com/2021/10…act-devs
    A Quick Intro to Elm for React Developers

    An introduction to the Elm functional programming language for frontend web developers familiar with React, JavaScript and TypeScript

    Theodo

  • Заметки про React

    Фасад при использовании UI библиотеки Кайл Шевлин делится архитектурным приемом при использовании сторонних UI библиотек: для каждого UI компонента из библиотеки создать компонент-фасад и использовать его в проекте. Например: 
    import React from 'react'
import { Button as ChakraButton } from '@chakra-ui/react'

export default function Button(props) {
  return <ChakraButton {...props} />
}
    Само собой, такой вариант использования UI библиотеки не подходит всем проектам. Иногда, в больших и долгоживущих проектах, бывают изменения в дизайне UI компонента. В этом случае, вариант с использованием фасада облегчает работу над этими изменениями, сведя все изменения в одном компоненте. При использовании фасада также можно: - Легко изменить UI библиотеку. Так как привязка к UI библиотеке только в определенных компонентах, то сделать это гораздо проще, чем без использования фасада. - Добавить или ограничить пропсы UI компонентов. - Переименовать или переназначить пропсы UI компонентов. kyleshevlin.com/how-I-w…-library
    How I Would Use a UI Library

    UI Libraries are great for having a solid design system to build from. Here's a small architectural decision I would do to make them even nicer to work with.

    Kyleshevlin

  • Заметки про React

    Вышел React Router v6 В React Router v6 добавлены новые фичи, улучшена поддержка с последними версиями React. Также новая версия содержит несколько критических изменений по сравнению с пятой версией. В React Router v6 активно используются хуки, поэтому для работы требуется версия React 16.8 и выше. - Вместо <Switch> используйте <Routes>. Внутри <Routes> все роуты и ссылки <Link to> будут относительными. Этот подход упростит работу с вложенными роутами, не нужно будет использовать match.url. - Используется элемент вместо компонента в роутах <Route>. Для рендера можно передать любой элемент в проп element. Вложенные роуты задаются в children. 
    function App() {
 return (
   <BrowserRouter>
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="users" element={<Users />}>
         <Route path="me" element={<OwnUserProfile />} />
         <Route path=":id" element={<UserProfile />} />
       </Route>
     </Routes>
   </BrowserRouter>
 );
}
 
function Users() {
 return (
   <div>
     <nav>
       <Link to="me">My Profile</Link>
     </nav>
 
     <Outlet />
   </div>
 );
}
    - Добавлен компонент <Outlet>. Позволяет отображать вложенный UI при рендере дочерних роутов. Также в <Route> добавлен проп index, который работает в связке с <Outlet>. Если родительский роут соответствует текущему URL браузера, то будет отрендерен <Route index>, если он есть среди дочерних роутов. - Изменения в <Route path>. Были оставлены только два типа плейсхолдера: :id и * в конце пути. Была удалена поддержка RegExp в пути. Чувствительность к регистру пути переехала в <Routes caseSensitive>. - Изменилось поведение <Link to>. Если путь в to не начинается с /, то он будет рендерить ссылку, относительную роуту, в котором был отрендерен. Использование в <Link to> .. удаляет сегмент родительского роута, а не URL. 
    <Routes>
 <Route path="users">
   <Route
     path=":id/messages"
     element={
       // Ссылка ведет в /users
       <Link to=".." />
     }
   />
 </Route>
</Routes>
    - Добавлены новые хуки. Если храните роуты в виде объекта и используете react-router-config, то в v6 есть хук useRoutes для рендера роутов в виде объекта. Вместо useHistory используйте useNavigate. Чаще всего будет достаточно переименовать название хука и изменить вызовы history.push или history.replace на navigate. Хук useNavigate полезен тем, что поддерживает React Suspense. Например, если был переход с роута, который еще не был загружен, то происходит замена URL, а не пуш в историю браузера. https://reactrouter.com/docs/en/v6/upgrading/v5
    React Router

    React Router v6 is here. React Router v6 takes the best features from previous versions—and its sister project, Reach Router—in our smallest and most powerful package yet.

    Reactrouter

  • Реклама

  • Заметки про React

    React стейты с фрагментированным стором Teaful – крошечная библиотека для управления состоянием приложения. Её особенность заключается в фрагментированном сторе, который позволяет избежать повторного рендеринга компонентов. С помощью Teaful каждое поле стора можно использовать отдельно, поэтому при обновлении других полей стора, которые не используются, компонент не будет рендерится заново. Под капотом Teaful использует контексты. Для каждого поля стора создается отдельный провайдер и хук-потребитель. 🇬🇧 dev.to/aralroc…ore-18ff 🇷🇺 habr.com/ru/comp…g/591605 https://github.com/teafuljs/teaful
    React state with a fragmented store

    Fragmented store concept and how to apply it with React Context

    DEV Community

  • Заметки про React

    Причины вызова useEffect перед отрисовкой Владимир Клепов разбирается с причинами запуска useEffect перед этапом отрисовки браузера. Причиной такого поведения может стать изменение стейта в useLayoutEffect. В документации React написано, что useEffect вызывается после этапа отрисовки браузера. Чаще всего это так, и это оптимальный случай. Изменение стейта в useLayoutEffect провоцирует новый ререндер. Перед новым ререндером происходит вызов оставшихся / ожидающих вызова useEffect. Дальше происходит стандартный флоу: обновление, вызов useLayoutEffect, отрисовка и вызов useEffect. thoughtspile.github.io/2021/11…t-effect
    useEffect sometimes fires before paint

    useEffect should run after paint to prevent blocking the update. But did you know it’s not really guaranteed to fire after paint? Updating state in useLayoutEffect makes every useEffect from the same

    Vladimir Klepov as a Coder

  • Заметки про React

    Гайд по разработке React приложений Bulletproof React – репозиторий-пример, в котором собраны различные библиотеки и инструменты, которые покрывают большинство аспектов разработки приложения на React. В репозитории есть статьи про настройку проекта, тестирование, стейт менеджеры, перфоманс и т.д. Автор проекта не предлагает использовать репозиторий как шаблон для проектов. Цель проекта показать, как можно решать основные проблемы, возникающие в разработке приложения на React. https://github.com/alan2207/bulletproof-react
    GitHub - alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.

    🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications. - GitHub - alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for...

    GitHub

  • Заметки про React

    Техническое погружение в ​​react-three-fiber Коди Беннетт пишет о технической реализации кастомного React рендерера react-three-fiber.  В статье описан принцип работы кастомного рендерера, а также как реализован HostConfig реконсайлера для Three.js.  Перед прочтением рекомендую ознакомиться с заметкой про устройство кастомных React рендереров – https://t.me/ru_react_notes/29. codyb.co/article…ee-fiber

  • Заметки про React

    React 18 перешел в статус beta В период с версии alpha были добавлены следующие фичи в будущий релиз: - useSyncExternalStore - useId (обзор) - useInsertionEffect По сообщению Andrew Clark, в React 18 больше не будет новых API. Оставшаяся работа заключается в разработке документации и различных улучшениях, например, сообщения об ошибках. github.com/reactwg…ions/112
    useMutableSource → useSyncExternalStore · Discussion #86 · reactwg/react-18

    Since experimental useMutableSource API was added, we’ve made changes to our overall concurrent rendering model that have led us to reconsider its design. Members of this Working Group have also re...

    GitHub