Setting up a news letter with React and mailchimp
Tags: react, mailchimp, newsletter
Published: 2020-04-08 01:48:15

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](https://newsletter-tutorial.surge.sh/)

__Prerequisites__

1. [create-react-app](https://www.npmjs.com/package/create-react-app) installed globally 

2. [mail chimp account](https://login.mailchimp.com/signup/) 

3. basic knowledge of react and javascript. 

4. [npm installed](https://docs.npmjs.com/cli/install) 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. 

```bash
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. 

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

Now that we have a blank canvas to work with, 

Let's install a few packages. 

```bash
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](https://www.npmjs.com/package/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](https://dev-to-uploads.s3.amazonaws.com/i/ef8utd0e3giao5y1cz6j.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a8zr1z94bv411hc5xjhc.png)

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. 

```env
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. 

```javascript
import MailchimpSubscribe from "react-mailchimp-subscribe"
```

Now add the mailchimp component.

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





 We need our url, to do this, go to [mailchimps site.](https://mailchimp.com/) 

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](https://dev-to-uploads.s3.amazonaws.com/i/2pzv0hewj8g052xq5v4q.png)

At the bottom click on the signup form. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/70mf42n65wsjb7qag8q0.png)

click begin. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i813b7yi9joc5og3z12o.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/6ow5ybe1e09fgsuvsmt4.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wt5vwxpbz82amvwg29lc.png)

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

```env
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](https://newsletter-tutorial.surge.sh/)

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