16 React tools that are useful to interface developers.

To create user interfaces there are a large number of tools (your KO, do not thank). One of the most effective is React. Probably on Habré there is no need to talk about what it is and why.

Today we decided to publish a selection of cool support elements for developers who use React. Probably, the selection is not exhaustive, but it will allow you to supplement the toolkit. If you use something else that is not in the selection, share in the comments, and we will say thanks together and add cool suggestions to the selection. Warning - there are quite a few gifs under the cut, who have paid traffic - be careful, guys.

So, we rush into the pool with the head, not postponing for later:

React Datasheet

Similar to Excel tool that can be embedded in your applications on React. Allows the use of mathematical formulas (base - math.js). You can add drop-down menus and buttons to table cells.

React Native for Web

Well, this component allows you to add activity indicators, buttons, progress bars (progress bars), switches, and much, much more.

Reactide

Reactide is described as the first specialized IDE tool for developing applications with React. And really - this is a cross-platform desktop application that allows you to quickly render projects without a server configuration, which reduces the complexity of development and saves time.

Storybook

This tool is one of the most powerful and famous. With its help components are collected. Developers refer to it as an interactive user interface development component. It supports React, React-native, Vue and Angular. The tool allows you to view all the components of the project. Included - a large number of additions for the development of documents, components, testing.

React Styleguidist

Styleguidist is an environment for developing components with a dev server (with the possibility of a hot reboot) and excellent documentation. The tool provides an opportunity to look at examples of the use of various components.

Catalog

Well, here we have a tool that allows you to create a free-standing guide for digital products. It makes it possible to combine documentation and assets with relevant components. It should be used when there is a need to show the visual elements of the system.

React Studio

This is a design tool that allows you to get a quality react-project without coding. The application is compatible with Sketch, which will add more joy and pleasure to the developer. If you are not a coder - definitely worth a look.

React Cosmos

Cosmos scans the entire project and divides it into components, allowing you to render them in any combination of props, context, state. This is necessary if the project is already running, but you need to add new functions to the components. In this case, the developer is able to track changes in real time.

ORY Editor

Based on React and Redux mobile content editor. It can be added at any time to the functionality of the developed site. Initially, the tool was created for a large open educational platform from Germany. Well, the Germans are famous for their accuracy, the tool turned out just great.

React Sight

A great visualization tool that allows you to quickly set up everything a developer needs.

Reselect Devtools

And another visualization tool that is used to track caching layers. No problems and worries - everything is displayed in a very clear way.

Redux DevTools Profiler Monitor

A great tool to start and stop the Javascript profile. Created tool based on Redux.

Periscope

Monitor Redux events based on a timeline.

redux-promise-middleware-times

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';
import logTimes from 'redux-promise-middleware-times';
const store = createStore(thunk, promiseMiddleware(), logTimes());

Tiny addon to redux-promise-middleware. It records the time during which a certain event is executed.

React monocle

A powerful visualization tool that shows individual components, their status, Redux status and combines this in a clear outline.

Hygen

A code generator framework that can be used in almost any project to reduce the size of a template. Such a framework is quite a yard for those who work with React and Redux. The number of templates here can be very large, because they are created almost at every stage of work.

In general, we believe that this is not a complete collection can be a good help in the difficult work of the developer interface. Well, to make the work even more effective, you can take a couple of courses Skillbox.