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.
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.
Top comments (2)
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?
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
rather than this
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. :)