While developing React applications, you’ll need following tools to boost your productivity in case of isolated component development, application state inspection, automation testing, debugging, etc.
- React DevTools - Available as a built-in extension for Chrome and Firefox browsers. This package enables you to debug a React app elsewhere (e.g. a mobile browser, an embedded webview, Safari, inside an iframe). It works both with React DOM and React Native.
- Storybook - A development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.
- Reactotron - A macOS, Windows, and Linux app for inspecting your React JS and React Native apps. It can view your application state, show API requests & responses, perform quick performance benchmarks, and many more.
- React Styleguidist - A component development environment with hot reloaded dev server and a living style guide that you can share with your team. It lists component propTypes and shows live, editable usage examples based on Markdown files.
- React Cosmos - A dev environment for building scalable, high-quality user interfaces, easy to share component libraries, and helps with automated testing.
- Redux DevTools Extension - The extension provides power-ups for your Redux development workflow. Apart from Redux, it can be used with any other architectures which handle the state.