loading...
ITNEXT

Setting up a news letter with React and mailchimp

tallangroberg profile image Tallan Groberg Updated on ・3 min read

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.

Alt Text

Alt Text

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.

Alt Text

At the bottom click on the signup form.

Alt Text

click begin.

Alt Text

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.

Alt Text

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

Alt Text

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!!

Posted on by:

tallangroberg profile

Tallan Groberg

@tallangroberg

I love to write, I love all things tech I recently published a novel.

ITNEXT

ITNEXT is a platform for software developers, engineers, IT architects, system engineers and IT enthousiasts to share knowledge, connect and connect.

Discussion

markdown guide
 

hello I wanted to ask that since this is the mailchimp component
Subscribe
,
Do I directly put this in app.js? And if I do then I red squiggly lines under the code, so what is " Subscribe" exactly like just a piece of text, a message? i tried putting a semicolon after it and it resolves the squiggly lines issue but its still an error

 

Sorry for the late response,

Where I wrote subscribe is intended to be seen as text to the user saying indicating what the box is for.

Best practice is to put this in an HTML tag.

This was an oversight on my part because it didn’t cause my machine to crash.

 
 

I hope I’m not to late to answer your question.

This is an nmp package that gives you a little more control over the form But does the same subscription functionality.

npmjs.com/package/react-mailchimp-...

React-mail-chimp-form is more declarative meaning you have to write more code but you can style it and get more Info from your users.

I didn’t use it in my tutorial Because I try and show examples that are as simple as possible but you could replace what you did in this tutorial with the new npm package very easily by following what is in the link at the top.