Reusable Components In React

React reusable component is a piece of UI component that can be used multiple times. Buttons, input fields, dropdowns are some examples for reusable components. In this article I will describe briefly how we can create reusable components using react.

To create reusable components, you need a little bit of an idea how react props works, read react official documentation from here. To explain reusable components, I will create a button. To style button I will use react bootstrap.

Example 01

First, create button. js file. Create Button component for your button. Example below,

button.js file

Import created button. js file to app. js file as below and pass parameter values as you want. Example below,

app.js file

Button Preview

Example 02

If you face a situation that the same button needs to add icons we can add a simple condition inside the button. js file. Then we can use the same reusable button component with icons or without icons.

Button.js (after adding condition to props icon)

app.js (adding two buttons with with icon and without icon and different bootstrap classes)

new app.js preview

As you can see we can use the same reusable concept for any component that doesn’t have complex business logic.

That’s it!

I hope this post will helpful for someone to take simple understand about react reusable components.