Create React App

Create React App — это инструмент, который упрощает создание приложений React без необходимости иметь дело со сложными настройками.

Установка:

npx create-react-app my-app
cd my-app
npm start

Сайт: https://create-react-app.dev

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

Storybook

Storybook - это инструмент с открытым исходным кодом для разработки компонентов пользовательского интерфейса изолированно для React, Vue, Angular и других. Это делает создание потрясающих пользовательских интерфейсов организованным и эффективным.

Установка: npx sb init

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

Содержание:

#документация - ссылка на документацию
#tutorial - руководства
#tools - инструменты для автоматизации
#lib - пакеты
#ui - стили, компоненты
#store - управление состоянием
#conf - конференции
#video - видео уроки, обзоры

#react #hook #jsx #errors
#redux #storybook
#typescript #news
#ru #en

Поддержать развитие канала https://qiwi.me/react_it

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 #документация

Jotai, новая библиотека гранулярного управления состоянием для React

Пол Хеншель недавно выпустил jōtai, новую библиотеку управления состоянием для React. Jōtai заявляет о минималистичном API (три функции), готовности TypeScript и совместимости с React Suspense и Concurrent Mode.

[Статья]: bit.ly/3cwob47
[Документация]: jotai.surge.sh
[Исходники]: github.com/pmndrs/jotai

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

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

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

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

Создание приложений на React с помощью Storybook

В этой статье вы узнаете, как создавать и тестировать компоненты React по отдельности с помощью Storybook. Вы также узнаете, как использовать надстройку кнопок для изменения данных непосредственно из storybook.

[Статья]: bit.ly/30d7uWt

~~~~~~~~~
#storybook #tools #tutorial
@react_it

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

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

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

How to Use React-Router to create an SPA

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

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

How to use React Router and real time user monitoring in React apps

React часто используется для создания одностраничных приложений (SPA). SPA обычно имеют несколько просмотров страниц, поэтому при переходе от просмотра одной страницы к другой перезагрузка всей страницы утомительна и неэффективна. Чтобы работать должным образом, SPA должен при необходимости отображать различные части представления вместо перезагрузки всей страницы.

Маршрутизация становится очевидной при переходе с одной страницы на другую в приложении SPA. Маршрутизацию можно разделить на две категории: статическую и динамическую. SPA следуют динамическому подходу. В этом руководстве мы обсудим популярную библиотеку маршрутизации, используемую с приложениями React, известную как React Router. После настройки наших маршрутов мы также собираемся обсудить, как настроить мониторинг производительности с помощью Sematext в приложениях React с библиотекой React Router.

~~~~~~~~~
🇺🇸 #tutorial #router #monitoring #tools #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

Шпаргалка по командам git

На сайте можно почитать про команды и скопировать нужную нажатием одной кнопки

[Сайт]: https://gitsheet.wtf/

~~~~~~~~~~
#tools #git #en
@react_it

Почему я выбрал Next.js, а не Gatsby, Gridsome или Nuxt?

Мы, выбирая фреймворк для нового веб-проекта, обычно склонны останавливаться на инструментах, с которыми знакомы, не обращая внимания на то, насколько хорошо они подходят для этого проекта. Я же пробую поступать с точностью до наоборот. Всякий раз, когда у меня возникает такая возможность, я испытываю новые технологии. Что я узнал после таких экспериментов? Почему я, в итоге, считаю своим стандартным инструментом для создания статических сайтов (static site generator, SSG) Next.js?

~~~~~~~~~~
🇷🇺 #tutorial #next #framework #tools #ru
@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

Must-Have Weapons in Your React Armory

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

~~~~~~~~~~
🇺🇸 #tutorial #tools #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

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