In any application, not just Javascript based ones, user input is one of the foundational pieces for user interaction with the application, the server, and with others across the web. In order to capture user input, you need forms. In this episode, we’ll explore the box form support provided by React with the basic HTML form elements like input, textarea and select, as well as libraries that have been developed to enhance form creation, as well as to perform validation. LinksEpisode PageTwitter Owl CreekTwitter Thomas HintzYouTubeResourceshttps://reactjs.org/docs/forms.htmlhttps://reactjs.org/docs/uncontrolled-components.htmlhttps://react-hook-form.com/https://github.com/tannerlinsley/react-formhttps://formik.org/Show NotesHTML + CSS as a basis for creating websitesJavascript leads to enabling more user input and interactivity optionsGathering user input without forms is possible, but forms make things simplerWhat are forms?Forms are the typical method we user input required to interact with an ecosystemHighly opinionatedMany ways to do themSecurity, validation, accessibility etc.Lots to consider, what is the best way to do this in React?Working with What We Have in React and Javascript/HTMLControlled vs UncontrolledValidationpreventing server side hackingensuring validity of datachecking each field on submissionregexWhere vanilla react forms fail?large swathes of setStates or managing a large state objectmultiple types of validation, shared validationlots of vanilla code to cover existing and potentially future casesyou end up just creating your own form framework, so why not use an existing one?Form FrameworksWhat are some options? Why do they exist?React Hook FormsFormikRecommended by React TeamReact FormsPart of the Tan Stack (React Query Family)React Hook FormsControlledFormControlled Components abstractionRestricted to using Form State for Component state??Validation FrameworksvalidatorYup for ValidationSupport the show

Ver todos los episodios