React Drilldown: How to Create an Interactive Component

What is a drilldown and how does it work in javascript

If you’re a designer adding drilldown functionality to your pages, you’ll probably want to use one of the libraries available. There are many JavaScript libraries which have been created for this purpose. Some are built on top of other JavaScript libraries, so it’s a matter of choosing the one that will work best for your situation. This article explains the basics of a drilldown and the process of creating it.
What is a Drilldown?
A drilldown is a feature in which, when the user hovers their mouse over an element on your page, they are shown an alternative view on the same page – usually with additional information related to their original spot on the page. The alternative view can be a separate page or it can be part of the original page (if you scroll down to see it as well). The element which triggers the extra information is called a drilldown trigger.
Basic Drilldown

Creating an interactive drilldown using React

As an alternative to a library, you can do the same thing using React.js and JSX. This is something I created for a demo, but it isn’t particularly well-tested code so I’m not putting it up on GitHub. If you’re curious, you can view the codepen to see what it looks like: https://codepen.io/chrismcintyre/pen/BKpGHY
##
Introduction to React and JSX [to create the app]
1. Create a file called helloworld.js and include:
2. Create another file called index.js, in which includes helloworld, and import it: (in the browser console) helloworld = require(“helloworld”); (in nodejs console) var helloworld = require(“helloworld”); and then export the main component as index.jsx: var Example = React.createClass({ render: function() { return ( React.createElement(“h1”, {}, “Hello World”) ); } }); module.exports = Example;
3. Then, in the browser, create an index.html file with the following: