DEV Community

Leo Kalshteyn
Leo Kalshteyn

Posted on

React and Reactotron

Reactotron is a useful app for inspecting React and React Native apps. It is especially useful for viewing application states, API requests & responses, and performing performance benchmarks. It does require Node version 4+. There is also Redux plugin for Reactotron for apps that use the former.

Some other features:

  • subscribe to parts of your application state
  • display messages similar to console.log
  • track global errors with source-mapped stack traces including saga stack traces
  • dispatch actions
  • hot swap your app's state using Redux or mobx-state-tree
  • track your sagas
  • show image overlay in React Native
  • track your Async Storage in React Native

Installation

Install as a dev dependancy

npm i --save-dev reactotron-react-js
Enter fullscreen mode Exit fullscreen mode

For initializing, create a config file in src/ReactotronConfig.js and put:

import Reactotron from 'reactotron-react-js'

Reactotron
  .configure() // we can use plugins here -- more on this later
  .connect() // let's connect!
Enter fullscreen mode Exit fullscreen mode

Import the config file in src/index.js

import './ReactotronConfig'
Enter fullscreen mode Exit fullscreen mode

Refresh your web page or start it with npm start and you should see something like this:

Alt Text

Now for a Hello World example:

In src/App.js, import Reactotoron at the top and log message in the render function's first line:

import Reactotron from 'reactotron-react-js'

Reactotron.log('hello rendering world')
Enter fullscreen mode Exit fullscreen mode

Now on Reactotron you should see:
Alt Text

Now you have a basic setup of Reactotron. There are many more things you can do like monitoring state with Redux and watching network requests which I will potentially make a future blog about.

References

Discussion (0)