DEV Community

Cover image for Learn how to create reusable components in reactjs.
Ghazi Khan
Ghazi Khan

Posted on • Updated on

Learn how to create reusable components in reactjs.

Creating reusable component is very essential and important part for an application to be consistent with Layout, Validations, Tests and to avoid any redundancy in application. It helps in less code and faster development with tested piece of code.

Do watch this video to get an idea of how to create a reusable component in React for Form Inputs and reuse it in different parts of the application.

Watch full tutorial here

GitHub logo gkhan205 / react-reusable-form-component

React Reusable Form Component (#codewithghazi)

React Reusable Form Component

No. Component Tutorial Status Video Link
1. Input Field Published
2. Button Published
3. Dropdown Published
4. TextArea Published
5. Checkbox Published

Please watch complete tutorial playlist

This project is made by Ghazi Khan for Youtube Channel CodeWithGhazi.

Top comments (2)

rleija_ profile image
Ruben • Edited

All you did was put a React wrapper around the HTML button element and called a reusable component.

All the props Button accepts are already accepted by native button HTML. Just reuse button and add css if you want to make it different. Thoughts?

gkhan205 profile image
Ghazi Khan

Hi Ruben, I'm glad you viewed the video and shared your thought on that.

Yes, I have created a wrapper above the native html button with my predefined class/styling to make the button consistent in overall application which can be tested. I missed one prop there for disabling button when some condition requires it.

My thought process in making this component was to create a button component which should match the design system of my application and I don't need to use HTML native button where ever I need button to be displayed in application rather to keep a short code to be used in application and that one liner component will handle the consistency of design system in application with less code.

For example this code is much more simpler to use in overall application

  <Button value='Login' onClick={this.handleClick} />

rather than this

<button class="app-button" onClick={this.handleClick}>

This is my thought process in making button component as separate component to be used in app. I would love to hear from all so that we can make a good solution which can help many of us. :)