To write a reusable component like this, we create the component as a custom React class. This class essentially returns the markup to be rendered by ReactDOM.render, but gives us more power to manipulate our template. Like AngularJS directive, custom React classes are extensions of the DOM, allowing us to create new DOM tags. For example, we can create a Carousel element. Note that custom React classes always begin with an uppercase letter:
<Carousel></Carousel>
Before we do anything, let's analyze the component we have and understand which values we want to make mutable. In the root element, the id and data-interval values need to be changeable. The component also needs to allow the images and caption to be set. ...
