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

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!

Import the config file in src/index.js

import './ReactotronConfig'

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

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')

Now on Reactotron you should see:

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

• https://github.com/infinitered/reactotron
• https://www.npmjs.com/package/reactotron
• https://stackshare.io/stackups/linqpad-vs-reactotron