In this tutorial we'll be building a Newsletter signup form component in React using the React Formik library and a backend service based on a Netlify function and the MailChimp API.
Project code: [ Ссылка ]
React Project: Newsletter Signup form (using Formik, Netlify Functions & MailChimp)
——————————————————————————
00:00 Introduction
00:43 Project Overview
02:10 Creating the signup form component
03:31 Setting up Formik
04:44 Creating the form using Formik’s components
05:58 Adding the inputs
07:53 Basic Form styling
09:51 Getting form values
11:11 Adding labels to inputs
15:00 Form Validation with Formik and Yup
20:09 Getting validation state / disabling the button
21:55 Storing contact details in MailChimp
29:18 Running the API
29:45 Sending signup requests from the front-end
34:01 Resetting the form
36:29 Wrap-up
— Follow Me —
Twitter: [ Ссылка ]
Facebook: [ Ссылка ]
Blog: [ Ссылка ]
— Thanks! —
So in this React tutorial we'll be taking a look at the Formik forms library for React and seeing how you can use it to create and manage forms quickly and easily within your React projects.
We'll start off by getting the Formik library setup and then creating some simple inputs that the user can enter data into and we'll see how Formik handles all of the state management and form submission for us automatically.
Once we've got a basic form setup with Formik, we'll add a custom React label component and then wire up some validation to the form. We'll do this using the Yup library with our React form and you'll see it's really simple to create a Yup schema and then apply this to the Formik form. In fact, Yup and Formik work really well together.
With our validation in place we'll finish up the tutorial by creating a Netlify function to handle our form submission which will essentially pass this data to the email service provider MailChimp. We'll use the MailChimp API with React to submit the user's details they enter into the form to the MailChimp service. I'll take you through how to find your own MailChimp list ID and also MailChimp API token and successfully add contacts.
So I hope you enjoy this React Project tutorial from Junior Developer Central!
#react #formik #netlify #mailchimp Channel Handle @codebubb
