ButterCMS React Blog Engine

https://buttercms.com/react-blog-engine/

You’ve got better things to do than build another blog

Add Butter to your React app and get back to more interesting problems.

ButterCMS is an API-based React blog engine that integrates seamlessly with new and existing React apps. Add ButterCMS to your React app in minutes using our Node.js API client. Use ButterCMS with React to enable dynamic content in your apps for blogs, pages, and more.

Install

Run this in your commandline:

npm install buttercms --save

Butter can also be loaded using a CDN:

<script src="https://cdnjs.buttercms.com/buttercms-1.1.5.min.js"></script>

Or if you’re using Yarn:

yarn add buttercms

The Javscript SDK source code is available on Github.

Starter Project

ButterCMS is designed to be easy to integrate into your existing React project. If you are starting from scratch, check out this React Starter that you can use to instantly launch a React site that’s fully integrated with ButterCMS.

https://github.com/ButterCMS/buttercms-react

Quickstart

We will use create-react-app, the most popular tool to bootstrap React projects.

First, we will have to install Node.js. You can install it from the official website. Once installed, you will be able to access npm from the command line. Use npm to install create-react-app:

npm i -g create-react-app

Create a new application wil the command:

create-react-app my_application_folder_name

Once the project is created, we will see some files in the src folder, which are bootstrap files to display an example application. You can go ahead and delete all the file inside the src folder, since we will be making our own.

Within the project directory, install the react-router-dom and buttercms libraries:

npm i react-router-dom buttercms

Creating the ButterCMS client

Create a file src/butter-client.js that will hold the ButterCMS client that we will use in the application:

import Butter from 'buttercms'
const butter = Butter('f148a1e8d384482bf3e5aa9e2b3a7af5dc62c734')
export default butter

Then run:

butter.post.list({page: 1, page_size: 10}).then(function(response) {
  console.log(response)
})

This API request fetches our blog posts. Your account comes with one example post which you’ll see in the response. If you get a response it means you’re now able to connect to our API.