I have developed several web applications(using HTML,CSS and js) that are responsive, interactive, and visually appealing. In addition, I have recently started learning React, and I am confident in my ability to apply my existing web development skills to build dynamic and scalable applications with this framework.
Moving forward with refactoring existing forms to use the React Hook Form library as well as Zod schema validations project idea , the main objectives of the project are -
Refactor existing vanilla React forms to use React Hook Form and Zod for schema validations.
Improve form performance and user experience by using uncontrolled components and minimal re- renders.
Simplify form development and reduce the amount of boilerplate code required.
Provide a flexible and powerful way to define and enforce schema validations for form inputs.
Why Refactor Existing Vanilla React Forms with React Hook Form and Zod?
1. Improved performance: React Hook Form uses uncontrolled components and minimal re-renders, which can lead to improved performance and faster form submissions.
2. Simplified code: React Hook Form simplifies the code required to implement forms, reducing the amount of boilerplate code that developers need to write and maintain.
3. Enhanced validation: Zod provides a powerful and flexible way to define and enforce schema validations for form inputs, helping to prevent invalid data from being submitted.
4. Reusability: React Hook Form components can be easily reused across multiple forms and applications, reducing duplication of effort and promoting consistency in the user interface.
5. Easier testing: React Hook Form makes it easier to write unit tests for form components, allowing developers to more easily ensure that their code is working as expected.
6. Better user experience: React Hook Form provides several built-in features that can enhance the user experience of forms, such as automatic focus on invalid fields and support for input masking and formatting.
I have gone through the dev3 server tracing all the listed forms targetted for Migration to RHF,
and a sample RHF demo of one of the forms
For the forms!!
I cant seem to locate the Visit Notes Form ?? [resolved]
Patient Registration form is the heaviest lift due to Formik
Identified existing form components that will need replacing for RHF
Looking into how schema validations using Zod integrate into form components.
I am also interested in the O3: Migrate vanilla React forms to RHF.
I understood from the project that they are lots of forms written in vanilla React which requires refactoring using React hook forms and Zod schema validation for performance optimization, reducing boiler plate code for easy debugging and ensuring strict validation values from form input.
I have gone through dev3 and traced that the below listed form requires refactoring to RHF
i. Patient registration
ii. Patient list
v. Form builder
I have been able to find my way to navigate to the forms on O3, I don’t mind setting up a call @lumuchris256@njiddasalifu@kdaud@jayasanka for walkthrough and brainstorm about the project and as well testing out different function and props on codesandbox before implementing on O3.
How I was able to navigate my way to the repositories
Fork the repository you want to work on and clone the repository then following the readMe instruction run the app locally by yarn install and yarn start if you want to run all module or for a particular module example yarn start --sources 'packages/esm-patient-forms-app.
if you are still confused, we can set up a call
@juliet I would recommend the first command be just yarn , no dependency version changes are usually required to the lock and json file in order to run a package , spin with plain yarn instead of yarn install
I have gone through dev3 and traced that the below listed form requires refactoring to RHF i. Patient registration ii. Patient list iii. Cohort-builder iv. Appointment v. Form builder vi. Dispensing
these from ii to vi ain’t the actual targeted forms for refactoring (check the initial post about the project on talk)
I have already implemented a couple of the actual forms in sandboxes as well and still implementing ,
I would say that is a good approach
Can we pick patient registration and start the RHF migration?
From last Monday’s call @dennis advised we dont start migrating the forms into the codebase as yet (gsoc actual work) but work on current issues to familiarize with how components , props ,validation and current hooks are used in 3.x in relation , plus work on fine tuning proposals for now
@lumuchris256 Please can you drop link to the codesandbox and list of other forms for migration, I didn’t see the list in the previous post…I can only see patient registration
should I convert patient registration on sandbox