What are re-usable components?

A re-usable component is generally a collection of HTML, CSS, and JavaScript that you can write once and use again and again throughout your code. Re-usable components are a great shortcut for developers to reduce the amount of code they have to write and to make their code easier to maintain over time. Using components can also allow developers to isolate code for one part of their application from code for another part of the application. This helps keep things like the styling (CSS) for one part of the application from causing the part of another application to look wrong.

Most JavaScript UI frameworks and libraries include functionality for writing re-usable components and building templates out of re-usable components.

How do you use re-usable components?

Consider a feed of messages like you might find on Twitter or another social media website. That feed interface is likely composed of layers of individual components located inside of each other that make up all of the functionality of the interface. An individual message, for example, would be a component. Inside of the message component, you could have a component for the user’s icon, another component for the user’s information, and a component for the content of the message. The feed itself could also be a larger component with functionality for retrieving the most up-to-date messages. The feed component can create a message component for each retrieved message using the developer’s previously defined component template for messages.