Updated July 2017: The CodePen now handles focus and blur events in a self-contained manner (no need for a parent or app-level component to track the state) so that keyboard events work better than they did in the original version.
React continues to gain traction as a library for creating user interfaces for the web (and for other platforms). React is great for building UI components at a lower level than what you might get from a framework. Nonetheless, many frameworks remain popular such as Twitter Bootstrap, which provides a lot more ready-made components out of the box.
Some options exist, such as React Bootstrap and Reactstrap. Unfortunately for React Bootstrap, it appears to still be using Bootstrap version 3, so if you want to use version 4 (even though it is alpha) you’re out of luck. Reactstrap is built with version 4 support, but still might be overkill for some particular cases.
It’s not too difficult to take a Bootstrap component and create a React-ready component from it. Here is an example of the dropdown component on CodePen:
The process was to copy the markup from the documentation, use that as the JSX for the React component to render (which will require all the Bootstrap CSS to render properly), then adding an event handler for the button to toggle the dropdown state. I watched the DOM for changes in Chrome DevTools in order to see that the outermost DOM element receives the class “show” when toggled open and the ARIA attributes update to reflect the open state.