About this guide
This development guide walks you through everything you need to do to build a high-quality React app integrated with Mailchimp and Bulma. Check out the tasks below to get started. To save time, you can also use our boilerplate, which gives you a complete React codebase with all of these tasks done for you. Okay, let's dive in!
Tasks
Setup your React app
Setup a React app usingnpx create-react-app
and routing using React Router. There are many ways you can structure your app, but a common setup is to have anApp
component that defines top-level routes, with each route component imported from the/pages
directory. The rest of your components should be located in your/components
directory. You can then run your app locally with thenpm run start
command.Setup a Node (Express.js) server
This stack requires server logic, so we'll be setting up a Node (Express.js) server that we can query from our React front-end. We suggest defining your Express.js routes in a file located at/api/index.js
and then creating a file for each route handler in the/api
directory. Next make sure all requests to/api/*
get routed to your Express server port by defining a proxy in yourpackage.json
. Lastly, run your server with thenode api
command in a new terminal window.Build your Mailchimp subscription form
Create an Express.js route at/api/newsletter
that receives the user's email address and adds it to your Mailchimp list using themailchimp-api-v3
library. Then create a newsletter subscribe form using Bulma elements and have it submit the email value to/api/newsletter
. Make sure you properly validate inputs, display any errors returned by Mailchimp, and to display a confirmation message once the email has been added.Ensure Bulma link elements hook into React Router
Make all Bulma link elements hook into React Router by using theLink
component fromreact-router-dom
.Create a persistent layout
Add any components that you'd like displayed across all pages (such asNavbar
andFooter
) to yourApp
component. If you need multiple persistent layouts you can instead have each page define its own layout. In that case, create multiple layout components (such asLandingPageLayout
andAdminLayout
) and wrap the contents of each page.Build out the rest of your UI using Bulma elements and composing them into high-level page sections, such as Finish your app UI with Bulma
HeroSection
andAccountSettings
. Use SASS stylesheets for styling your components and overriding default element styles. You can scope each stylesheet to a single component using BEM syntax or CSS Modules.You should find our library of pre-built Bulma components to be helpful.
Get the code
You can get the code for this guide with our React, Mailchimp, and Bulma Boilerplate. You'll get a complete React codebase with Mailchimp and Bulma integration, all the tasks listed above done for you, and a responsive multi-page template. It should save you about two weeks of development time.
127 downloads today