Developer Tools

CodePen - codepen.io

1. Create an account
2. Create a new pen
3. Click settings once the pen is open, make sure you are on the JS tab
4. Set the JavaScript Processor to Babel
5. In the search field below type react
   1. select react in the options that come up
   2. select react-dom in the options that come up

You're ready to go.

React DevTools 

The React Devtools extension for Chrome and Firefox lets you inspect a React component tree with your browser’s developer tools.

The React DevTools let you check the props and the state of your React components.

After installing React DevTools, you can right-click on any element on the page, click “Inspect” to open the developer tools, and the React tab will appear as the last tab to the right.

However, note there are a few extra steps to get it working with CodePen:

1. Log in or register and confirm your email (required to prevent spam).
2. Click the “Fork” button.
3. Click “Change View” and then choose “Debug mode”.
4. In the new tab that opens, the devtools should now have a React tab.