20 Top React Developer Tools for 2020
1. Eslint Config XO React
ESLint shareable config for React to be used with eslint-config-xo.
2. React Hooks Async
JavaScript promises are not abortable/cancelable. However, DOM provides AbortController which can be used for aborting promises in general.
This is a library to provide an easy way to handle abortable async functions with React Hooks API.
It comes with a collection of custom hooks that can be used as is. More custom hooks can be developed based on core hooks.
3. useDebug
Custom hook to debug useEffect.
4. Remote Redux Devtools
Use Redux DevTools remotely for React Native, hybrid, desktop and server side Redux apps.
5. React Split Testing
Wrap components in <Variant /> and nest in <Experiment />. A variant is chosen randomly and saved to local storage.
6. Spearmint
Spearmint helps developers easily create functional React tests without writing any code. It dynamically converts user inputs into executable Jest test code by using DOM query selectors provided by the react-testing-library.
spearmint is currently under development! We just finished our MVP and are looking for beta testers. Please open a new issue with details to report a bug. Adding support to mock API requests, context and redux support are on the roadmap.
7. React Hot Loader
Tweak React components in real time.
8. Starter React Flux
A simple and clean starter kit to develop a React project that supports Progressive Web App (PWA) features.
This tool doesn’t contain any blackbox npm scripts and libraries only for starter-kit. It’s completely the same as the React project from scratch. You can learn fundamental mechanisms of a React and Flux project.
9. React Command Palette
An accessible browser compatible javascript command palette.
10. Reinspect
Connect React state hooks (useState and useReducer) to redux dev tools.
11. Redux Devtools Filterable log Monitor
Filterable tree view monitor for Redux DevTools.
Actions are collapsed by default but they can be expanded by clicking on the action type. Strings and regular expressions can be used to filter actions by type as well as to filter the state tree by nodes or values.
12. Why did you update
Why-did-you-update is a function that monkey patches React and notifies you in the console when potentially unnecessary re-renders occur.
13. React Blessed
A React custom renderer for the blessed library.
This renderer should currently be considered as experimental, is subject to change and will only work with React’s latest version (16.x.x, using Fiber).
14. Jet
Jet lets you bring your React Native JS code into NodeJS and test it mock free and native testing code free. Perfect for React Native module developers who want to fully test their packages end-to-end and setup continuous integration services.
Jet extends upon wix/detox and by default the Mocha testing framework.
15. React Proto
React-Proto is a React application prototyping tool for developers and designers.
React-Proto allows the user to visualize/setup their application architecture upfront and eject this architecture as application files either into a previous project or a new create-react-app project or a starter template from any repository.Proto
16. Enzyme
Enzyme is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components’ output.
Enzyme’s API is meant to be intuitive and flexible by mimicking jQuery’s API for DOM manipulation and traversal.
17. React Scenes
React Scenes is a simple way to create/test your react components inside your app.
18. React Performance Devtool
React Performance Devtool is a browser extension for inspecting the performance of React Components. It statistically examines the performance of React components based on the measures which are collected by React using window.performance API.
19. Testcafe
A Node.js tool to automate end-to-end web testing.
Write tests in JS or TypeScript, run them and view results.
Features
- Stable tests and no manual timeouts
- Rapid test development tool
- Latest JS and TypeScript support
- Detects JS errors in your code
- Concurrent tests launch
- PageObject pattern support
20. React Cosmos
React Cosmos ✭ Dev tool for creating reusable React components
A dev tool for building scalable, high-quality user interfaces
#reactjs #javascript
