Awesome React

Коллекция потрясающих вещей об экосистеме React.

https://github.com/enaqx/awesome-react

#tools #tutorial #lib #github

Create React Content Loader

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

Установка:

 npm i react-content-loader --save
 yarn add react-content-loader

Конструктор | Github

#tools #lib #документация

​​Framer Motion

Кто не любит плавную анимацию? Они делают наши пользовательские интерфейсы более живыми и естественными. Но как только мы пытаемся создать что-то более сложное, чем могут быть достигнуты с помощью базовых переходов и ключевых кадров CSS, это становится утомительным. Так быть не всегда, особенно с современными инструментами и библиотеками, такими как Framer Motion.

Установка: npm install framer-motion

#lib #ui #animation #документация

Создание сложных анимаций в React с помощью Framer Motion

Читать статью

#ui #animation #tutorial #lib

Effector - стейт-менеджер, который активно развивается и поддерживает множество фреймворков. Одни из них React, React Native, Vue, Svelte.

[Документация]: effector.now.sh
[Исходники]: github.com/zerobias/effector

~~~~~~~~~
#store #tools #документация #lib
@react_it

Animate an SVG viewBox with React

В этом посте автор будет анимировать комикс с помощью новой версии Popmotion, которая представляет собой универсальную библиотеку анимации, а также Framer Motion, который построен на основе Popmotion и специфичен для React.

[Popmotion]: popmotion.io
[Framer Motion]: www.framer.com/motion/

~~~~~~~~~
#tutorial #animation #lib #react #en
@react_it

Render, update, and transform Excel spreadsheet data into an array of objects using React.js

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

[Статья]: ramonak.io/react-excel-render-update-api
[Demo]: katerinalupacheva.github.io/react-excel
[Исходники]: github.com/KaterinaLupacheva/react-excel

~~~~~~~~~
🇺🇸 #tutorial #lib #excel #react #en
@react_it

Основы ванильного Javascript, которые нужно знать перед изучением React JS

Jane Tracy рассказала о функциях и добавила полезные ссылки на документацию, которую вы можете использовать, чтобы изучить их на более глубоком уровне. Это синтаксис ES6 или чаще всего синтаксис ES7.

~~~~~~~~~
🇺🇸 #tutorial #js #javascript #tools #lib #react #en
@react_it

Введение в Wouter: альтернативу React Router

Экосистема JavaScript всегда находится в постоянном движении. Несмотря на изменения, сообщество JavaScript стремится решать все возникающие проблемы. Если вы раньше работали с React, вы заметите, что решение для маршрутизации - это библиотека React Router.

Его часто ошибочно называют официальным решением для маршрутизации от Facebook. На самом деле, большинство проектов Facebook даже не используют его. Большинство проектов и вариантов использования веб-приложений вполне могут работать с небольшой и простой библиотекой маршрутизации.

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

[Исходники]: github.com/molefrog/wouter

~~~~~~~~~
🇺🇸 #wouter #router #tutorial #документация #lib #react #en
@react_it

How to Use React-Router to create an SPA

Использование маршрутизации на стороне клиента для создания одностраничного приложения

~~~~~~~~~
🇺🇸 #tutorial #router #tools #lib #url #react #en
@react_it

Visx — коллекция графических примитивов для React-приложений, созданная в Airbnb

🇷🇺[Статья]: habr.com/ru/company/ruvds/blog/521068
🇺🇸[Оригинал]: bit.ly/3cLnN1M

[GitHub]: github.com/airbnb/visx
[Примеры]: airbnb.io/visx

~~~~~~~~~
🇷🇺🇺🇸 #visx #lib #tools #react #ru #en
@react_it

Minimal React: getting started with the frontend library

Minimal React: начало работы с фронтенд-библиотекой. Dr. Axel Rauschmayer в блоге объясняет, как начать работу с React, используя как можно меньше библиотек.

[Статья]: 2ality.com/2020/08/minimal-react.html

~~~~~~~~~
🇺🇸 #tutorial #practice #lib #react #en
@react_it

Search-optimized SPAs with React Helmet

Оптимизированные для поиска SPA с React Helmet

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

[Helmet]: github.com/nfl/react-helmet

~~~~~~~~~~
🇺🇸 #helmet #tutorial #seo #lib #react #en
@react_it

Animating React with React Transition Group

Анимация React с помощью React Transition Group. React Transition Group - еще один инструмент для ускорения разработки за счет пропуска скучного шаблонного кода.

~~~~~~~~~~
🇺🇸 #tutorial #react #tools #lib #en
@react_it

Виджет выбора цвета

Представлен в двух вариантах:

— Vanilla Colorful
— React Colorful

Легковесный, быстрый, написан на TypeScript, хорошо работает на мобильных устройствах и сенсорных экранах.

~~~~~~~~~~
#tools #ui #react #lib
@react_it

Каркасные экраны: реализация в React

Каркасные экраны - один из самых полезных UX-паттернов. Добавляем их в приложение React с помощью библиотеки React Loading Skeleton.

~~~~~~~~~~
🇷🇺 #tutorial #lib #render #react #ru
@react_it

Internationalizing your React app with i18next

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

Как мне быстро и эффективно перевести мое приложение?

К нашему счастью, у таких библиотек, как React, есть чрезвычайно простые альтернативы для реализации этой функции, и сегодня мы познакомимся с одним из них, плагином i18next.

~~~~~~~~~~
🇺🇸 #tutorial #lib #ui #i18n #react #en
@react_it

11 Awesome React Native Component libraries to Use in 2020

11 потрясающих библиотек собственных компонентов React для использования в 2020 году

~~~~~~~~~~
🇺🇸 #tutorial #native #tools #lib #react #en
@react_it

How to change the port of a Next.js application

По умолчанию сервер Next.js работает на порту 3000, что хорошо, но иногда вы хотите запустить сервер на другом порту, возможно потому, что у вас уже есть служба, работающая на нем, или, может быть, это не ваш любимый порт (что в моем случае 8080). Итак, давайте посмотрим, как мы можем это изменить.

[Статья]: blog.umesh.wtf/how-to-change-the-port-of-a-nextjs-application

~~~~~~~~~~
🇺🇸 #tutorial #nextjs #lib #react #en
@react_it

Rockpack

Rockpack позволяет создавать каркас React приложения в стиле create-react-app.

Состоит из модулей для сборки (под капотом вебпак, модули, поддержка разных форматов файлов и прочее), настроенный Jest, Eslint с набором лучших правил и т.д.

Главным отличием от create-react-app это поддержка разных типов приложений:
- Обычное Single Page приложение
- Server-Side Render
- Server-Side Render + Redux + Sagas+ React-Router + структура проекта
- UMD библиотека или React Component
- Nodejs приложение
Обновление и дополнение webpack.config без "eject".
LESS/CSS/SCSS Modules
TS или Babel на выбор.

[GitHub]: github.com/AlexSergey/rockpack

~~~~~~~~~~
🇷🇺 #tools #lib #rockpack #react #ru
@react_it