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

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

667 @ru_react_notes
Открыть

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

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

    React Labs: над чем мы работали – март 2023 В постах React Labs команда React пишет об исследовательских проектах и текущих разработках, которые могут попасть в релиз. С момента последнего релиза произошли большие изменения: - Серверные компоненты. Достигли соглашения по использованию директивы "use client" для обозначения только клиентских компонентов. Сделали async / await как основной способ получения данных в серверных компонентах, и хук use для клиентских компонентов. Сейчас ведется разработка того, как отправлять данные с клиента на сервер – Server Action. - Asset Loading. Ведется разработка интеграции Suspense и загрузки ресурсов: стилей, шрифтов и изображений. Команда React хочет, чтобы эта фича работала без рефакторинга существующих компонентов. В качестве оптимизации предоставят возможность ручной загрузки ресурсов напрямую из компонента. - Метаданные документа. Появилась возможность использовать теги <title>, <meta> и <link> внутри компонента, и они будут установлены внутри тега <head>. Это решает проблему поточного серверного рендера. - React Optimizing Compiler. Команда React продолжает делать компилятор React Forget. Основная цель компилятора в том, чтобы компонент ре-рендерился только когда изменится значение пропа. Сейчас React ре-рендерит компонент, когда изменится ссылка на объект. С React Forget компонент будет ре-рендерится при изменении семантического значения. - Offscreen Rendering. Эта фича позволяет рендерить компоненты в фоновом режиме без дополнительных затрат на производительность. Похожа на CSS свойство content-visiblity. Большинство разработчиков не будет напрямую работать с offscreen API, а будут взаимодействовать через существующие роутеры и UI библиотеки. Transition Tracing. Это API позволит определять, когда хук useTransition становится медленнее, и выяснить, почему это происходит. react.dev/blog/20…rch-2023
    React Labs: What We've Been Working On – March 2023 – React

    The library for web and native user interfaces

    react.dev

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

    Мультиязык в Next.js с помощью серверных компонентов Ян Аманн рассказал, как сделать мультиязычный сайт с помощью next-intl и серверных компонентов в Next.js. При создании мультиязычного сайта на React приходится грузить в браузер дополнительный код в виде библиотеки для управления мультиязычностью, а также JSON файлы с переводами. С помощью серверных компонентов можно избавиться от лишних килобайтов на клиенте, отрендерив компоненты с нужным языком на сервере. Стоит учитывать, что в серверных компонентах нельзя использовать хуки, например, useState и useEffect. В этом случае одним из вариантов хранения состояния на странице может стать URL search params. www.smashingmagazine.com/2023/03…mponents
    Internationalization In Next.js 13 With React Server Components — Smashing Magazine

    Based on an example of a multilingual app that displays street photography images from Unsplash, Jan Amann explores next-intl to implement all internationalization needs in React Server Components and shares a technique for introducing interactivity with a minimalistic client-side footprint.

    Smashing Magazine

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

    Ленивая загрузка роутов в React Routes В React Router 6.4 была представлена концепция “Data Router”, основное внимание которого уделяется разделению получения данных и рендеринга для исключения “водопадов” загрузки данных. В React Router 6.9 появилась возможность ленивой загрузки роутов с компонентом и функцией получения данных. Пример: 
    // app.jsx
import Layout, { getUser } from `./layout`;
import Home from `./home`;

const routes = [{
  path: '/',
  loader: () => getUser(),
  element: <Layout />,
  children: [{
    index: true,
    element: <Home />,
  }, {
    path: 'projects',
    lazy: () => import("./projects"), // 💤 Lazy load!
    children: [{
      path: ':projectId',
      lazy: () => import("./project"), // 💤 Lazy load!
    }],
  }],
}]

// projects.jsx
export function loader = () => { ... }; 
export function Component() { ... } 

// project.jsx
export function loader = () => { ... }; 
export function Component() { ... }
    Обратите внимание на наименование экспортируемых переменных: loader и Component. React Router может загружать lazy роуты параллельно. При переходе по URL /projects/123 будут параллельно загружены роуты и выполнены loader функции, после чего будет отрендерен компонент. https://remix.run/blog/lazy-loading-routes
    Lazy Loading Routes in React Router 6.4+

    Decoupling data-fetching from rendering introduces some complexities if you want to lazily load your route components. Check out how the newly introduced `route.lazy()` method helps solve this to keep your app bundles small and your UX snappy!

    remix.run

  • Реклама

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

    Что такое Vite и почему вы должны использовать его вместо CRA Очень долгое время по умолчанию способом создания проекта на React был Create React App. Один из минусов CRA – время сборки проекта в dev в режиме. При увеличении кодовой базы проекта пропорционально увеличивается время сборки. Связано это с тем, что при изменении файла происходит пересборка всего билда. Vite работает гораздо быстрее. Вместо пересборки всего билда, Vite работает по другому. Зависимости приложения, которые редко меняются, упаковываются в один бандл. А исходный код приложения не упаковывается в бандл, а распространяется через нативный ESM. Для production сборки используется бандлинг через Rollup. luketheweb.dev/blog/wh…eact-app
    What is Vite and Why Should You Use It Instead of Create React App?

    Vite is the new kid on the block. Creat React App has lost its crown! Find out why you should be using Vite over Create React App in 2023.

    Luke the Web Dev

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

    Красивые эффекты с WebGL Render Targets Максим Хекель сделал руководство по созданию оптических иллюзий и эффектов переходов с помощью WebGL Render Targets. blog.maximeheckel.com/posts/b…-targets

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

    Библиотека для анимаций AutoAnimate AutoAnimate – это одна из наиболее простых библиотек для анимаций, которая запускается одной командой: 
    import { useAutoAnimate } from '@formkit/auto-animate/react'

function MyList () {
  const [animationParent] = useAutoAnimate()
  return (
    <ul ref={animationParent}>
      {/* 🪄 Magic animations for your list */}
    </ul>
  )
}
    Библиотека подходит для простых анимаций и анимирует как сам элемент, на который навешен реф, так и прямые дочерние элементы. Анимация запускается, когда происходит одно из событий: - Дочерний элемент добавлен в DOM. - Дочерний элемент удален из DOM. - Дочерний элемент перемещен в DOM. AutoAnimate поддерживает кастомизацию анимации: можно самому определить функцию, которая будет возвращать KeyframeEffect. https://auto-animate.formkit.com/
    AutoAnimate - Add motion to your apps with a single line of code

    A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app. Use it with React, Solid, Vue, Svelte, or any other JavaScript application.

    Formkit

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

    Релиз TypeScript 5.0 Вышла стабильная версия TypeScript 5.0. Авторы обещают, что у большинства разработчиков обновление пройдет гладко. После RC есть небольшие изменения, основное из них – минимальная поддерживаемая версия Node.js 12.20. Кроме изменений, описанных в RC, есть другие изменения: Улучшение enum Теперь все enum будут enum перечислениями: каждый элемент enum будет иметь уникальный тип. Если в TypeScript 4.9.5 такой код работает: 
    enum E {
    Foo = 10,
    Bar = 20,
}

function takeValue(e: E) {}

takeValue(E.Foo); 
takeValue(123);
    То в TypeScript 5.0 вызов функции takeValue(123) будет выбрасывать ошибку, т.к. 123 не равен ни одному типу E. Поддержка export type * 
    // models/vehicles.ts
export class Spaceship {
  // ...
}

// models/index.ts
export type * as vehicles from "./vehicles";

// main.ts
import { vehicles } from "./models";
    Улучшение поддержки JSDoc Добавлена поддержка @satisfies и @overload в документации JSDoc. devblogs.microsoft.com/typescr…ript-5-0
    Заметки про React

    Релиз TypeScript 5.0 Beta На днях вышел релиз мажорной версии TypeScript 5.0 Beta. В этом релизе много новых фич. Кратко о некоторых фичах релиза: Новый стандарт декораторов В TS уже были декораторы, и они были доступны под флагом. В версии 5.0 декораторы будут доступны без флага, а те декораторы, которые были доступны под флагом, объявлены как легаси. Пример использования новых декораторов: function loggedMethod( target: (this: This, ...args: Args) => Return, context: ClassMethodDecoratorContext Return> ) { const methodName = String(context.name); function replacementMethod(this: This, ...args: Args): Return { console.log(`LOG: Entering method '${methodName}'.`) const result = target.call(this, ...args); console.log(`LOG: Exiting method '${methodName}'.`) return result; } return replacementMethod; } class Person { // --snip-- @bound @loggedMethod greet() { …

    Telegram

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

    Там новая документация реакта наконец-то релизнулась. Вместе с новым адресом. Старый теперь тоже перенаправляет сюда https://react.dev/

    The library for web and native user interfaces

    react.dev

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

    dnd-kit – drag&drop библиотека для React Легковесная, модульная и расширяемая библиотека для перетаскиваний в React. Основные фичи: - Возможность кастомизации алгоритма обнаружения коллизий, рендер оверлея во время переноса и многое другое. - Поддержка нескольких методов ввода: клавиатура, мышь, touch, pointer. - Для работы с React предоставляет два хука: useDraggable и useDroppable. - 0 внешних зависимостей и модульная: ядро библиотеки весит 10Кб. - Возможность кастомизации анимаций, переходов, стилей и т.д. - Пресеты: есть готовый пресет @dnd-kit/sortable для создания сортируемых блоков. Библиотека не использует HTML5 Drag and drop API из-за ограничений в API. В этом API не поддерживаются сенсорные устройства и нет возможности детальной кастомизации поведения. Главный недостаток отказа от HTML5 Drag and drop API в том, что вы не сможете перетаскивать файлы с рабочего стола компьютера или между окнами. https://docs.dndkit.com/
    Overview

    @dnd-kit – A lightweight, modular, performant, accessible and extensible drag & drop toolkit for React.

    Dndkit

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

    Эффективный HOC HOC – концепция пришедшая из функционального программирования. Это функция, которая принимает компонент и возвращает его с дополнительной логикой. Хотя эта концепция предоставляет безграничное множество вариантов использования, для практичности нужно ограничиться только добавлением дополнительной логики или компонента обертки. В HOC нужно избегать неожиданного поведения: никаких изменений компонента и его пропсов. Слава Князев в своем блоге написал туториал по HOC. В нем он описал, что можно и нельзя делать с помощью HOC. Пример HOC логирования: 
    const withPropsLogger = (Component) => (
  (props) => {
    console.log(props);
    return <Component {...props}/>
  };
);
    https://www.bbss.dev/posts/effective-hocs/
    Effective Higher-Order Components

    Before the introduction of contexts and hooks in React v16.8, Higher-Order Components (or HOCs for short) were a common sight. Today, it is an under-used pattern. While the concept presents infinite possibilities, practical applications should be limited to transparently adding wrappers or logic.

    Building Better Software Slower

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

    Почему вы должны использовать React фреймворк При создании проекта на React, используйте фреймворк, например, Next.js, Gatsby или Remix. Ли Робинсон объяснил, почему это нужно делать: - Меньше времени на подключение инструментов, больше времени на создание продукта. - Более легкая адаптация и обучение новых разработчиков. - Гибкость для различных стратегий рендеринга (браузерная или серверная). - Меньше “велосипедов” в проекте. - Есть готовые инструменты для деплоя проекта. https://leerob.io/blog/react-frameworks
    Why You Should Use a React Framework

    And spend more time writing React code.

    leerob.io

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

    Читаем исходный код – Chakra UI Chakra UI – популярная UI библиотека для React. Она модульная и поддерживает кастомизацию компонентов. Алекс Кондов изучил исходный код библиотеки и поделился интересными абстракциями, которые он нашел. Будет полезно изучить код тем, кто занимается разработкой UI библиотеки. Пример создания контекста: 
    export const [ButtonGroupProvider, useButtonGroup] =
  createContext<ButtonGroupContext>({
    strict: false,
    name: 'ButtonGroupContext',
  })

export function createContext<T>(options: CreateContextOptions<T> = {}) {
  // ...
  const Context = createReactContext<T | undefined>(undefined)
  // ...

  function useContext() {
    const context = useReactContext(Context)

    if (!context && strict) {
      const error = new Error(
        errorMessage ?? getErrorMessage(hookName, providerName),
      )
      // ...
      throw error
    }

    return context
  }

  return [Context.Provider, useContext, Context] as CreateContextReturn<T>
}
    https://alexkondov.com/reading-code-chakra-ui/
    Reading Code - Chakra UI

    I spent over a year as a principal engineer in one of News UK’s platform teams where we were building libraries and tooling for the other engineers in the…

    Alexkondov

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

    Evolu – хуки для local-first разработки Библиотека для создания local-first приложений. Поддерживает синхронизацию со сквозным шифрованием с использованием CRDT. Для локального хранения данных использует SQLite WASM. Особенности: - Типизированная схема данных. - Реактивные запросы. - Работа в режиме реального времени: синхронизация при восстановление сети. - Вместо SQL запросов используется типобезопасный query builder. Описание схемы и создание хуков: 
    import * as S from "@effect/schema";
import * as E from "evolu";

const TodoId = E.id("Todo");
type TodoId = S.Infer<typeof TodoId>;

const TodoTable = S.struct({
  id: TodoId,
  title: E.NonEmptyString1000,
  isCompleted: E.SqliteBoolean,
});
type TodoTable = S.Infer<typeof TodoTable>;

const Database = S.struct({
  todo: TodoTable,
});

const { useQuery, useMutation, useOwner, useOwnerActions, useEvoluError } =
  E.createHooks(Database);
    Выполнение запросов: 
    const { rows } = useQuery((db) =>
  db
    .selectFrom("todo")
    .select(["id", "title"])
    .orderBy("updatedAt"),
  // (row) => row
  ({ title, ...rest }) => title && { title, ...rest }
);
    https://github.com/evoluhq/evolu
    GitHub - evoluhq/evolu: React Hooks library for local-first apps with end-to-end encrypted backup and sync using SQLite and CRDT

    React Hooks library for local-first apps with end-to-end encrypted backup and sync using SQLite and CRDT - GitHub - evoluhq/evolu: React Hooks library for local-first apps with end-to-end encrypted...

    GitHub

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

    Понимание серверных компонентов в React 18 и Next.js 13 Серверные компоненты – это новая концепция, представленная в React 18 и была реализована в Next.js 13 в папке /app. Серверные компоненты позволяют рендерить компоненты на сервере и уменьшить объем JS отправляемого клиенту. Все компоненты Next.js в папке /app по умолчанию являются серверными компонентами. Чтобы сделать компонент клиентским, нужно добавить директиву ’use client’; в начало файла. Используйте серверные компоненты, если: - Нужно сделать запрос из API. - Используется чувствительная информация: токены, ключи API и т.д. - Нужен прямой доступ к серверу. - У компонента есть много зависимостей, что ведет к сильному увеличению клиентского бандла. programmingwithmosh.com/react/u…xt-js-13
    Understanding Server Components in React 18 and Next.js 13 - Programming with Mosh

    With the release of Next.js 13, they have a new /app directory that has newer approaches to data rendering, fetching, and also uses the latest React Server Components. Note that the /app folder in Next.js 13 is still in Beta. What is Rendering? Rendering converts the code that you write into user interfaces that the user interacts with. …

    Programming with Mosh

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

    Релиз Next.js 13.2 Состоялся релиз минорной версии Next.js 13.2. В новой версии основные изменения касаются работы приложения внутри папки app. Часть изменений: - Встроенная поддержка SEO через Мета-теги Экспорт переменной metadata или функции generateMetadata() позволяет установить Мета-теги для страницы. Можно использовать как в компонентах страниц, так и в layout: 
    // app/layout.tsx

import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Home',
  description: 'Welcome to Next.js',
};
    - Кастомный обработчик API роутов Одними из недостающих фич папки app были API роуты из папки pages/api. В версии 13.2 добавлена фича API роутов в папку app, которая позволяет принимать и обрабатывать запросы, используя fetch Request и Response. Обработчики объявляются в файле route.ts и экспортируются под именем HTTP метода. 
    // app/items/route.ts

export async function GET() {
  const cookieStore = cookies();
  const token = cookieStore.get('token');

  return new Response('Hello, Next.js!', {
    status: 200,
    headers: { 'Set-Cookie': token=${token} },
  });
}
    - Поддержка MDX в серверных компонентах Главное преимущество в том, что будет отдаваться меньше клиентского кода, т.к. рендер MDX будет происходить на сервере. - Статическая типизация ссылок Адрес href у ссылок Link будет проверяться TypeScript на правильность ввода. Эта фича включается в конфиге и будет работать только в папке app. https://nextjs.org/blog/next-13-2
    Next.js 13.2

    Next.js 13.2 introduces major improvements to the App Router in preparation for stability, including SEO support, Route Handlers, MDX for Server Components, Type-Safe Links, and more.

    nextjs.org

  • Реклама

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

    Как избежать хитрых ловушек в асинхронных стейт менеджерах Иван Буряк и Трэвис Тернер из Злых Марсиан поделились опытом, как избежать хитрых ловушек при работе асинхронными стейт менеджерами в React. Примеры таких стейт менеджеров: Logux, Replicache, RxDB и WatermelonDB. Они позволяют создавать Offline-first сайты, сохраняя данные стейта в локальное хранилище браузера, например, в IndexedDB. Одна из проблем при работе с асинхронными стейт менеджерами в том, что изменения стейта не применяются моментально, и в течение обновления возможно чтение устаревших данных. Хоть лаг между записью и чтением очень маленький, в React он будет заметным. В случаях с контролируемыми инпутами и плавными переходами UI будет работать неправильно. Вариантами решения проблемы могут быть как адаптация компонента к работе с асинхронным стейтом, так и создание промежуточного прокси, который предоставляет синхронный API. Второй способ более сложный и подходит для больших проектов. Первый способ - более простой, но нет универсального подхода, к каждому компоненту нужно придумывать свое решение. evilmartians.com/chronic…ls-react
    How to avoid tricky async state manager pitfalls in React—Martian Chronicles, Evil Martians’ team blog

    Learn how to prevent some tricky problems in React that can arise when using asynchronous state managers and avoid breaking UIs, animations, and destroying UX

    evilmartians.com

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

    useSignal() — это будущее веб-фреймворков Signal — это способ хранения состояния приложения, аналогичный useState() в React. Ключевое различие между Signal и React стейтом в том, что Signal возвращает геттер и сеттер, а React стейт возвращает значение и сеттер. Miško Hevery сделал сравнение Signal и хуков в React. Signal является реактивным, т.е. он должен отслеживать, кто заинтересован в состоянии, и уведомлять подписчиков об изменении состояния. Это достигается с помощью наблюдения за контекстом, в котором вызывается геттер, создающий подписку. useState() возвращает значение состояния, а не геттер. React не важно как используется стейт, он будет ре-рендерить сразу все при изменении состояния. www.builder.io/blog/us…ameworks
    useSignal() is the Future of Web Frameworks

    A signal is a way to store the state of your application, similar to useState() in React. But there are some key differences that give Signals the edge.

    Builder.io

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

    Краткое введение в Tauri Фернандо Дольо рассказывает о создании простого нативного приложения с использованием Tauri и React. В гайде также есть пример взаимодействия React приложения с Tauri через Rust. Tauri – это набор инструментов для создания нативных приложений с использованием JS, альтернатива Electron. Написан на Rust, поэтому для взаимодействия с ОС нужно писать код на Rust. В отличие от Electron не использует Chromium для рендера приложения, а использует нативный WebView операционной системы. Плюс такого подхода в том, что размер приложения минимальный. На сайте написано, что размер приложения может быть меньше 600KB. Минус в том, что у каждой ОС свой WebView, поэтому будет отличаться дизайн нативных UI элементов. blog.bitsrc.io/how-to-…ad43914e
    How To Build Desktop Apps Using React: A Quick Introduction to Tauri

    Meet the new Electron alternative

    Medium