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

gkhan205 / react-reusable-form-component

React Reusable Form Component (#codewithghazi)

React Reusable Form Component

No.	Component	Tutorial Status	Video Link
1.	Input Field	Published	https://www.youtube.com/watch?v=HIFxC7Gkgfo
2.	Button	Published	https://www.youtube.com/watch?v=8HyXbw3T0P8
3.	Dropdown	Published	https://www.youtube.com/watch?v=bnhamYM3Ubo
4.	TextArea	Published	https://www.youtube.com/watch?v=cyNV3XKX2Bk
5.	Checkbox	Published	https://www.youtube.com/watch?v=YI003o3xNfU

Please watch complete tutorial playlist

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

View on GitHub

Comments

[Ruben]

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?

[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}>
    Login
</button>

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. :)