Получи случайную криптовалюту за регистрацию!

Заметки про React

Логотип телеграм канала @ru_react_notes — Заметки про React З
Логотип телеграм канала @ru_react_notes — Заметки про React
Адрес канала: @ru_react_notes
Категории: Технологии
Язык: Русский
Количество подписчиков: 1.62K
Описание канала:

Короткие заметки про React.js, TypeScript и все что с ним связано
Контакт: @rimlin

Рейтинги и Отзывы

2.00

2 отзыва

Оценить канал ru_react_notes и оставить отзыв — могут только зарегестрированные пользователи. Все отзывы проходят модерацию.

5 звезд

0

4 звезд

0

3 звезд

1

2 звезд

0

1 звезд

1


Последние сообщения 7

2022-03-21 11:40:04 Как проектировалось мидлвар подписки для Redux Toolkit

В Redux Toolkit 1.8 вышло новое API createListenerMiddleware для подписки на отправку экшенов или изменения стейта. Это API должно стать более простой альтернативой использования вместо более популярных saga или observable.

// Create the middleware instance and methods
const listenerMiddleware = createListenerMiddleware()

// Add one or more listener entries that look for specific actions.
// They may contain any sync or async logic, similar to thunks.
listenerMiddleware.startListening({
actionCreator: todoAdded,
effect: async (action, listenerApi) => {
// Run whatever additional side-effect-y logic you want here
console.log('Todo added: ', action.payload.text)

// Can cancel other running instances
listenerApi.cancelActiveListeners()

// Run async logic
const data = await fetchData()

// Pause until action dispatched or state changed
if (await listenerApi.condition(matchSomeAction)) {
// Use the listener API methods to dispatch, get state,
// unsubscribe the listener, start child tasks, and more
listenerApi.dispatch(todoAdded('Buy pet food'))
listenerApi.unsubscribe()
}
},
})

В своем блоге один из разработчиков Redux Toolkit, Марк Эриксон, рассказал об истории данного API и этапах его разработки. Разработка данной фичи была начата 2.5 года назад и потребовала много итераций, чтобы определить, какие варианты использования он должен охватывать, как должен выглядеть общедоступный API и как реализовать функциональность.

В основе у Redux есть несколько основных библиотек для работы с сайд эффектами:
- Thunks: отправить экшен, получить (dispatch, getState) в аргументах и выполнить любую логику внутри функции.
- Sagas: напишите функцию генератор, которая на экшен вызывает сайд эффект функцию.
- Observables: напишите RxJs пайплайн, который на экшен вызывает сайд эффект функцию.

По умолчанию в Redux Toolkit был выбран Thunks, как самый простой вариант работы с сайд эффектами. При разработке API createListenerMiddleware команда Redux Toolkit хотела отделить экшены и сайд эффекты, т.е. смотрела в сторону redux-saga. Однако по сложности пользовательского API была цель сделать его близким к redux-thunk.

https://blog.isquaredsoftware.com/2022/03/designing-rtk-listener-middleware/
1.0K viewsIlmir Shaikhutdinov, 08:40
Открыть/Комментировать
2022-03-16 11:30:39
Структура проекта React от Джошуа Комо

В React нет единого подхода к организации структуры проекта, поэтому у многих начинающих разработчиков возникает вопрос, как правильно? Один из советов Дэна Абрамова – “перемещайте файлы, пока не почувствуете, что это правильно”.

Джошуа Комо поделился своей структурой проекта, которую он использует на всех своих проектах. Основные особенности этой структуры:
- Использование абсолютного импорта.
- Название файла по имени компонента.
- Хранение файлов в папках по функциям, а не по фичам.
- Хранение хуков, констант и хелперов для компонента в отдельных файлах рядом.

https://www.joshwcomeau.com/react/file-structure/
1.3K viewsIlmir Shaikhutdinov, 08:30
Открыть/Комментировать
2022-03-14 11:10:02 История React

На канале uidotdev вышло видео об истории React, о том как он возник в 2013 году и стал тем, чем является сейчас.



1.1K viewsIlmir Shaikhutdinov, 08:10
Открыть/Комментировать
2022-03-09 10:45:04 Доступен React 18 RC

Версия React 18 стала доступна в качестве релиз-кандидата. Чтобы установить, нужно использовать @rc тег:

npm install react@rc react-dom@rc
// или
yarn add react@rc react-dom@rc


В React 18 появится новое API для библиотек. Для поддержки конкурентного рендеринга сторонними библиотеками было добавлено следующее API:
- useId – хук для генерации уникального id на клиенте и сервере, поддерживающего гидратацию. Подробнее.
- useSyncExternalStore – хук для работы с внешними хранилищами, позволяющий производить параллельное чтение из источника и синхронную запись. Подробнее.
- useInsertionEffect – хук для вставки стилей в процессе рендера, предназначен для CSS-in-JS библиотек. Подробнее.

Новые изменения в строгом режиме (strict mode). В будущем React планирует поддерживать пользовательский UI, в котором части интерфейса можно будет удалить с сохранением стейта, чтобы потом их можно было восстановить. Например, переключение табов на странице, когда при смене таба нужный компонент будет отображаться сразу с восстановленным состоянием.

Для поддержки такого UI сценария React добавляет новую проверку в development режиме в strict mode. Эта новая проверка будет автоматически демонтировать и повторно монтировать каждый компонент всякий раз, когда компонент монтируется в первый раз, восстанавливая предыдущее состояние при втором монтировании.

Также в React 18 прекращается поддержка браузера Internet Explorer.

https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
1.3K viewsIlmir Shaikhutdinov, 07:45
Открыть/Комментировать
2022-02-22 22:05:04 Релиз версии Next.js 12.1

Произошел релиз Next.js 12.1 с одной из самых востребованных фич – Incremental Static Regeneration (ISR). ISR позволяет создавать и обновлять статические страницы сайта после сборки проекта. Обновление статической страницы возможно двумя способами. Обновить статическую страницу можно автоматически, спустя заданное количество секунд после последней генерации страницы:

export async function getStaticProps() {
return {
// Next.js will attempt to re-generate the page:
// - When a request comes in
// - At most once every 10 seconds
revalidate: 10, // In seconds
}
}

Также возможно ручное обновление страницы. Например, такое пригодится для интернет-магазинов, при изменении цены товара на странице:

// pages/api/revalidate.js
export default async function handler(req, res) {
// Check for secret to confirm this is a valid request
if (req.query.secret !== process.env.MY_SECRET_TOKEN) {
return res.status(401).json({ message: 'Invalid token' })
}

try {
await res.unstable_revalidate('/path-to-revalidate')
return res.json({ revalidated: true })
} catch (err) {
// If there was an error, Next.js will continue
// to show the last successfully generated page
return res.status(500).send('Error revalidating')
}
}


Другие изменения в новой версии:
- Улучшена поддержка SWC. Некоторые Babel плагины были портированы на Rust. Включена поддержка styled-components, relay.
- Автоматическая конфигурация Jest.
- Более быстрая минификация, используя SWC. В 7 раз быстрее чем Terser.
- Оптимизация изображений. API по работе с изображениями поддерживает паттерн ISR.
- Работа в сторону поддержки React 18, серверных компонентов и потокового SSR. Была обновлена документация для тех, кто хочет попробовать эти фичи.

https://nextjs.org/blog/next-12-1
1.2K viewsIlmir Shaikhutdinov, 19:05
Открыть/Комментировать
2022-02-21 11:50:03 Griffel – новый CSS-in-JS от Microsoft

Microsoft презентовал свою CSS-in-JS библиотеку для стилизации React приложений. Основные фичи:
- возможность компиляции CSS во время сборки и в runtime
- типизация стилей через csstype
- использование Atomic CSS для переиспользования стилей и предотвращения проблем со специфичностью CSS.

Пример использования:

import { makeStyles } from '@griffel/react';

const useClasses = makeStyles({
button: { color: 'red' },
icon: { paddingLeft: '5px' },
});

function Component() {
const classes = useClasses();

return (


);
}

При написании стилей поддерживаются псевдоклассы, псевдоэлементы и at-правила. Также в Griffel есть API для создания глобальных стилей, которые не привязаны к компоненту – makeStaticStyles.

https://github.com/microsoft/griffel

Очень интересно наблюдать, как появляются новые CSS-in-JS библиотеки, особенно от таких крупных компаний. Еще в 2019 году Facebook рассказал о своей CSS-in-JS библиотеке – Stylex. Правда она еще до сих пор не появилась на гитхабе.
966 viewsIlmir Shaikhutdinov, edited  08:50
Открыть/Комментировать
2022-02-20 13:15:06 Создаем свой React с рендером и useState за 30 минут

Создать свой React не так сложно, как вам может показаться. По крайней мере минимальную версию, которая будет только рендерить JSX. Основная работа заключается в компиляции JSX и рендере элементов.

В React используется синтаксис JSX. Для компиляции JSX в JavaScript можно выбрать TypeScript или babel. При компиляции выражение

React, what are you?

превратится в React.createElement("h1", null, "React, what are you?").

Функция createElement принимает три параметра: тег, атрибуты и содержимое. В качестве содержимого могут быть другие вложенные элементы. Функция createElement возвращает объект React элемента, рендер которого происходит в ReactDOM.render. ReactDOM.render рекурсивно рендерит всех наследников переданного элемента и добавляет атрибуты к DOM элементу.

https://habr.com/ru/post/652487/
926 viewsIlmir Shaikhutdinov, 10:15
Открыть/Комментировать
2022-02-16 13:25:03 CSS анимации используя React

CSS анимации предоставляют декларативное API для анимации DOM элементов. Нужно всего лишь указать параметры анимации и определить keyframes, описывающие поведение в заданных точках. Тем не менее, в приложениях, где используется много анимаций, будет сложно поддерживать большое количество анимаций, написанных в CSS.

В техническом блоге BBC рассказали про декларативный подход к использованию CSS анимаций в React через компоненты-анимации. Такой подход позволяет через композицию объединить несколько анимаций.









С одной из проблем, с которой столкнулись авторы, является определение нужных переходов, в каждом из которых нужно запускать свою анимацию. Для решения данной проблемы используется библиотека по работе с конечными автоматами xstate.

https://medium.com/bbc-design-engineering/css-animations-as-a-dom-based-animations-framework-d6ef582c033a
1.1K viewsIlmir Shaikhutdinov, 10:25
Открыть/Комментировать
2021-12-17 15:30:16 Опасности гидратации в React

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

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

Джошуа Комо предлагает в компонентах с динамическими данными ничего не возвращать при первом рендере и вызывать повторный ререндер в хуке useEffect. В процессе гидратации и серверного рендеринга используется только первый рендер компонента. Хук useEffect вызывается после монтирования компонента, а это уже произойдет после гидратации компонента. Это решение помогает избежать мерцания при гидратации, а также предотвращает от багов в верстке.

function Navigation() {
const [hasMounted, setHasMounted] = React.useState(false);

React.useEffect(() => {
setHasMounted(true);
}, []);

if (!hasMounted) {
return null;
}

const user = getUser();

...
}


https://www.joshwcomeau.com/react/the-perils-of-rehydration/
358 viewsIlmir Shaikhutdinov, 12:30
Открыть/Комментировать
2021-12-15 18:30:16 Релиз Create React App 5

Вышла новая мажорная версия библиотеки create-react-app. Основные изменения:

- webpack 5
- Jest 27
- PostCSS 8
- ESLint 8
- Улучшения fast refresh
- Поддержка Tailwind

Для миграции нужно просто установить новую версию react-scripts. Если будут ошибки, то нужно удалить node_modules и переустановить модули.

Как и любой мажорный релиз, новый react-scripts содержит критические изменения. Например, была удалена поддержка Node.js 10 и 12 версии. В остальном, обещают что критические изменения не будут аффектить каждого пользователя.

https://github.com/facebook/create-react-app/releases/tag/v5.0.0
589 viewsIlmir Shaikhutdinov, 15:30
Открыть/Комментировать