Use the New Profiler in React Developer Tools to Generate Flame Charts and Interactions

The above video is hosted on egghead.io.

React version 16.5.0 has been released and one of the features that it supports is the new Profiler in the React Developer Tools. In the above video and following blog post, we will update an existing app to βš› React 16.5.0 and show off various features of the new Profiler. The tool can record a lot of information from your React App, but you can also add interaction tracking to help track user generated events.

Read More »

Inspect and Style an Element in DevTools that Normally Disappears when Inactive

The above video is hosted on egghead.io.

It’s handy to inspect an element in your browser’s DevTools when you need to experiment or tweak it’s styles, however, it can be very tricky to try and inspect an element if it only shows up when it’s being hovered or if it disappears when it loses focus. Thankfully, there is a handy little trick using setTimeout and debugger that makes inspecting such elements much easier.

Read More »

Adding Storybook Style Guide to a Create React App

In this post (and the above 6 minute embedded video) we’ll look at how to add the Storybook style guide to a React web app boostrapped by create-react-app.

Read More »

Detect and Refactor JavaScript Copy-Paste Code

In this post (and the above 5 minute embedded video) we’ll look at how to detect copy and pasted code inside of your web application using two different node command-line tools.

Read More »

Debugging a Create React App with VS Code

In this post (and the above 4 minute embedded video) we’ll look at how to configure Visual Studio Code to debug React Components and Jest Unit Tests inside a web application that was created by create-react-app.

Read More »