Setting up a news letter with React and mailchimp

In this tutorial, we are going to leverage mailchimp’s API to set up a sign up for a news letter.

If you follow any of my other tutorials, you will find this one to be my easiest yet. This is because mailchimp is designed for Marketers, not developers. Because of that fact, it is extremely friendly to set up.

Who is this tutorial for?

Everyone that is trying to set up a mailing list within a react application.

What does this tutorial teach?

We strive for simplicity, so to make sure that this tutorial isn't wasting anyone's time. Visit this site to see exactly what it does and sign up for my news-letter

Prerequisites

1. create-react-app installed globally

2. mail chimp account

3. basic knowledge of react and javascript.

4. npm installed globally so that we can install packages.

First thing we need to do is make a new react app. we can do this on the command line.

This is what it looks like on mac.

create-react-app news-letter

cd into that folder and open it with the text editor of your choice. i will be using vs code.

In the src folder, open the App.js and delete the react boiler plate. inside the return statement.

return (
    <div>
      //blank
    </div>
  );

Now that we have a blank canvas to work with,

Let's install a few packages.

npm i dotenv react-mailchimp-subscribe

dotenv is for environment wide variables, so that you don't push your mailchimp url to git hub.

react-mailchimp-subscribe

This is so that we can use mailchimp's subscribe component to capture emails for us.

Next, if you are using vs code, right-click the src folder to make a .env file to keep our url private.

In the .env file, lets add the environment wide variable for our url.

These variables have to start with REACT_APP in screaming snake case in order to work.

REACT_APP_MAILCHIMP_URL='url goes here'

Now lets add mailchimp subscribe to the App.js

Used almost all from the docs.

import "react-mailchimp-subscribe" in the App.js at the top.

import MailchimpSubscribe from "react-mailchimp-subscribe"

Now add the mailchimp component.

Subscribe
<MailchimpSubscribe url={process.env.REACT_APP_MAILCHIMP_URL} />

We need our url, to do this, go to mailchimps site.

You will have to make an account and this can be a long process.

Once everything is set up and you have a mailchimp dashboard, we can finish the tutorial.

Now that you have a mailchimp dashboard, we should make our first email.

Click the create-button in the top right corner.

At the bottom click on the signup form.

click begin.

we have to find the action url in the copy and paste for the embedded form.

press cmd + f or on windows crl + f and type action into the field.

In the mess of HTML elements is the action url on the form, copy everything inside the quotations.

Go back to the .env file and paste the action url in the quotations for the variable.

REACT_APP_MAILCHIMP_URL='https://https://codeharp.us19.list-manage.com/subscribe/post?u=ca'sdo;dea'sdfha;lkajsd;lfkajs;dlfkja;slkfja;lj;'

Now when you enter an email into your input field in your react app. It will add that email to your email list.

Be sure to restart your server and put the .env file in the root of your directory and not the src folder.

finished website

I hope you found this helpful.

This was really hard to slowly poke around and figure out but now that it is in this tutorial, It should save you a lot of time!

Please Like and follow if you found this helpful.

Comment if you have questions or feed back.

May you have Happy dev days ahead!!