React Development Tools

Sep 05, 2021reacttoolinglists

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.