The last two weeks of working on my capstone project has been largely spent reading documentation for React, React-Bootstrap, Formik, and Yup, as well as building several forms that will be filled out by users of our web application. React is a well known commonly used Javascript library for building dynamic, single page websites. React-Bootstrap is a library that integrates bootstrap (html, css, and javascript design templates) with React projects by utilizing React components, allowing the developer to easily integrate the two libraries. Formik is React form library which provides form programming and validation. While one can manually provide form validation functions to Formik forms, it is designed to easily integrate with Yup. Yup is a Javascript schema builder for value parsing and validation.
These libraries are commonly used by javascript/React developers due to their ease of use. That being said, there is a learning curve when using any new technology and it took a surprisingly long time for me to fully understand how to integrate all of the libraries with custom built React components that my team had previously built.
Ultimately, I was indeed able to build two forms (sign up, and log in forms) with all of the aforementioned technologies. These forms are styled in a familiar fashion thanks to React-Bootstrap. They handle user input (state) easily via Formik. They also dynamically provide visual feedback regarding validation when the user enters values into the forms thanks to the integration of Yup and React-Bootstrap. For example, if a user doesn’t provided a valid email address the email field will become highlighted in red stating that the provided email in invalid. The forms also disable the submit button upon submission to eliminate the chance of accidentally submitting a form request twice to our backend.
My next task will be to integrate these forms with our backend which utilizes AWS Cognito. I hope to successfully be able to bth sign up new users and log them in to our final backend service by the end if the week. Onward… to more learning!
