Building a Blog with React and Contentful

The React Blog Series: Part Two -------------------------------

![](https://hackernoon.com/hn-images/1*CwkZf1DkMliObkYnv-8xQg.jpeg)

This article is part two in a weekly series on building a blog with React and is an extension of the code created in part one.

#### **The React Blog Series**

[**Part One:** Building a website with React and Bulma](https://medium.com/front-end-hacking/building-a-website-with-react-and-bulma-d655214bff2a) **Part Two:** Building a Blog with React and Contentful [**Part Three:** Import your Medium Feed into React](https://medium.com/@aaron.klaser/import-your-medium-feed-into-react-ceadbaf785c7) [**Part Four:** Adding a Redux to a React Blog](https://medium.com/@aaron.klaser/adding-redux-to-a-react-blog-97f5fea606c2) [**Part Five:** Replacing Redux Thunks with Redux Sagas](https://hackernoon.com/replacing-redux-thunks-with-redux-sagas-4aa306854925) **Part Six:** (_In Progress_) Writing Unit Test for a React Blog with Redux Sagas

This will go over the basics of setting up Contentful and displaying its data as a blog feed in our React application.

> This does **not** include Redux… yet ;)

### Contentful

#### Sign up for Contentful

Click here to [Sign Up Here](https://www.contentful.com/sign-up/)

When you start poking around Contentful, you might get a strange failure feeling, daja vue perhaps, or is it just that it looks exactly like the Wordpress Admin?

**Contentful** is very clean, easy to navigate, and it looks and feels _a lot_ like Wordpress. As much as hate to admit, I love it and thats an amazing thing because I _loth Wordpress_. To be fair, I don’t hate Wordpress for its UX, I hate it because its slow and built on what looks like hacked together PHP, and lets face it, no one actually likes PHP. Not even the creator of PHP.

#### The Concept

**Contentful** is content management as a service (CaaS), this replaces the need to have to connect your site to that terrible MySQL database hosted on some crappy Apachy Server, where you have to install phpMyAdmin and spend hours trying to figure out cPanel.

#### The Data

There are two parts to your data, the structure and the data. It’s basically a really nice web form the converts to simple json. You have to first set up your form the in **_Content Model_**, then you can hop over to **_Content_** and fill out your forms, each form becomes an item in the models array of data sent via rest end points.

#### Let start by making a Blog Model

Add in three fields: Title, Path, and Content

![](https://hackernoon.com/hn-images/1*dve-ROdX2dh05r3JvMmIdA.png)

The JSON preview will look like this

![](https://hackernoon.com/hn-images/1*LHh569ElP5Vqe2zY8bZvmQ.png)

Now let’s create a Blog post for the app to pull and display on our Blog page.

Go to Content, and Click Add Blog in the top corner and fill out the form.

![](https://hackernoon.com/hn-images/1*TMF1xgESel_skoa58hqjDQ.png)

Now you have your first blog post!

### Get Api Token

You will need a **Space Id** and access token to retrieve your data. Go to the **APIs** tab and click **Add Api Key.**

Name it what ever you want and save.

![](https://hackernoon.com/hn-images/1*lpFSVNj3KfZfVz8f4NnX9g.png)

### Set Up Contentful in React

npm install contentful

Let’s just see if we can connect and get our data.

On `src/index.js` let’s import Contentful, set up a simple client and then getEntries. Now let’s console log what we get, with any luck we should be see our test blog post. This is temporary.

import React from 'react'; import ReactDOM from 'react-dom' import registerServiceWorker from './registerServiceWorker' import { BrowserRouter as Router } from 'react-router-dom' **import \* as contentful from 'contentful'** import App from './App' import './index.css'

**var client = contentful.createClient({ space: 'qu10m4oq2u62', accessToken: 'f4a9f68de290d53552b107eb503f3a073bc4c632f5bdd50efacc61498a0c592a' })**

**client.getEntries().then(entries => { entries.items.forEach(entry => { if(entry.fields) { console.log(entry.fields) } }) })**

ReactDOM.render(( ), document.getElementById('root')) registerServiceWorker()

Run your app and open your console. You should see a little clean object full our data.

![](https://hackernoon.com/hn-images/1*lUUs01bR903AX0nKOGA5ng.png)

Isn’t that amazing. It was like, the simplest thing to set up ever!

But now let’s do it right… well, as much as we can without Redux :P

### Setting Up Your Blog Page

Copy all of your Contentful stuff and delete it from your index.

Head over to your `Blog.js` and change it from a dumb component to a smart React.Component class.

Then, we will need to include state with an empty post array.

Paste in your Contentful createClient object.

Next, using the **React** lifecycle hook **componentDidMount**, we need to call a **fetchPosts** function which will call a **setPosts** function

import React from 'react' import \* as contentful from 'contentful'

class Blog extends React.Component {

state = { posts: \[\] }

client = contentful.createClient({ space: 'qu10m4oq2u62', accessToken: 'f4a9f68de290d53552b107eb503f3a073bc4c632f5bdd50efacc61498a0c592a' })

componentDidMount() { this.fetchPosts().then(this.setPosts); }

fetchPosts = () => this.client.getEntries()

setPosts = response => { this.setState({ posts: response.items }) }

render() { return ( This is the Blog Page

) } }

export default Blog

If you plug a console log in the **fetchPosts** function you will see we are getting our data back from **Contentful**.

Now that we are getting data and we are doing it the React way (w/o Redux), let’s update the render function to display the data. We will move these to their own pretty component later, but for now let’s stick it in some pre tags.

render() { return ( This is the Blog Page

{ this.state.posts.map(({fields}, i) => {JSON.stringify(fields, null, 2)} )} ) }

Yay!!!

### Adding New Blog Posts

Head back over to **Contentful** and click **Content > Add Blog**, then fill out the information. You know the drill.

![](https://hackernoon.com/hn-images/1*lpnwgEbCKxibdPq5jdzJQA.png)

Click **Publish** and head get back over to your app, refresh the browser and _BLAMMO_!! There’s your second post.

![](https://hackernoon.com/hn-images/1*U9tjrm62lOjvbgCkkxmdvA.png)

### Styling the Blog Feed

We need to set up a Blog Item component. Our Blog page will contain a list of Blog Items which make up “**_the feed_**”.

[Remember we are using fractal file structures](https://medium.com/front-end-hacking/building-a-website-with-react-and-bulma-d655214bff2a) and `BlogItem.js` will be a child of `Blog.js`. Since `Blog.js` is in the **app** folder, we will create a folder called **_blog_** in the **app** folder, then create our `BlogItem.js` in our newly created **blog** folder.

If you’re keeping score, and following [**Fractal File Structures**](https://medium.com/front-end-hacking/building-a-website-with-react-and-bulma-d655214bff2a) correctly, our current file structure should look something like this.

![](https://hackernoon.com/hn-images/1*y0AytRP9bSnUiGOI4dN4Rw.png)

#### Create BlogItem Component

In `BlogItem.js`, create as simple component with **Bulma** box. We’ll pass in props which for now will be a spread of the fields from Contentful.

import React from 'react'

const BlogItem = (props) => ( {props.title} {props.content}

)

export default BlogItem

Now, back in **Blog.js** we need update our posts map in render to return our **BlogItem** component and spread the fields as properties.

render() { return ( This is the Blog Page

{ this.state.posts.map(({fields}, i) => ** ** )} ) }

Refresh and there you go. But… that kind of looks _terrible_.

#### Style Blog Page

Let’s replace ` This is the Blog Page

` with a **Bulma Hero** for our page header. Since we will probably do this on the top of most of our pages, lets create this as a global reusable component.

In our app folder, create a new folder named components. By our fractal logic this implies that these components will all exist as children of the App.

> **_Spoiler alert_**: If you haven’t figured it out yet, `App.js` and it’s folder of children (`app`), will contain all our presentation logic. For now, every we do will be a child of **App**. [Later when we refactor to use **Redux**](https://medium.com/@aaron.klaser/adding-redux-to-a-react-blog-97f5fea606c2), **App** will get a sibling named `Store.js` and its folder of children (`store`) and it will contain all of our **data services** and **state**.

In the **components** folder create two files, `PageHeader.js` and `PageContent.js`

**PageHeader** will be a component for our Bulma Hero. We will not be including the subtitle content. This way we can do css styling or include links and pass it as a children prop.

import React from 'react'

const PageHeader = (props) => ( {props.title} {props.children} )

export default PageHeader

And in our `Blog.js` replace ` This is the Blog Page

` with

Your standard JavaScript programming blog, albeit, probably not very good, but I will at least try to keep it entertaining. This blog is a chronological mix of random posts on Angular, React, Functional Programming, and my project walkthroughs .

**PageContent** will be a styled component to confine our page to a max width and add padding and what have you.

import styled from 'styled-components'

const PageContent = styled.div\` margin: 0 auto; max-width: 960px; padding: 1.5rem; \` export default PageContent

Ahh… now that’s much better.

### Better More Realistic Blog Posts

Back in Contentful, let’s add some fields to our Blog Content Model

We are going to add three new fields:

* **icon:** Set appearance as **single line** * **status**: Valid as only values “IN\_PROGRESS” and not required. Set appearance as **Dropdown** * **date**: Set appearance as **date only**

![](https://hackernoon.com/hn-images/1*TKU27POFIvRbc9H0fDOQyA.png)

Now hop over to your First and Second blog post and fill in some data.

Icon can be a url link to an icon or base64 as long is it can normally go into a **src** attribute.

> _Content should set as_ **_Markdown_** _so when you fill your page content it can be styled with_ **_Markdown_**_!_

![](https://hackernoon.com/hn-images/1*MjF3NBXuUmOHvwl0ic6gkw.png)

Do something like this for both posts, **save**, then refresh your. It probably going to look terrible…

_YUP!_

### Rendering Markdown

So lets start by addressing the elephant in the room. We need make react render the markdown as html and it needs to look… pretty.

npm install react-markdown

In the `BlogItem.js`, replace content with the react-markdown.

import React from 'react' **import \* as Markdown from 'react-markdown'**

const BlogItem = (props) => ( {props.title} ** ** )

export default BlogItem

BOOM!

Much better, but I would remove the H1 titles from the **Markdown** in **Contentful** and rename your **Contentful** blog posts with what the H1 title was. You will see why when we add the Icon and stuff in next.

#### Adding the Icon

This is just simple **Bulma**. Open your `BlogItem.js` and we are going to steal the **box media** example from **Bulma’s** website.

import React from 'react' import { Link } from 'react-router-dom' import \* as Markdown from 'react-markdown' import moment from 'moment'

const BlogItem = (props) => ( {props.title} Read More

{moment(props.date).calendar(null, { sameDay: '\[Today\]', lastDay: '\[Yesterday\]', lastWeek: '\[Last\] dddd', sameElse: 'MMM Do YYYY' })}

)

export default BlogItem

Yeah, so thats it but it’s kind of busy, and to be fair I think there is some overlap with the full page blog post

### Create A BlogPost page and clean up BlogItem

Hmm… If you remember correctly in our last article, Routing works off a static ` ` component. But we don’t want to have to hard code our every single blog post, that kind of defeats the purpose of using Contentful as CMS.

Luckily for us, **react-router-dom** has planned ahead and allows us to have path params. In `Router.js` add new route

** **

> **_Important:_** _This one took me a hot minute to figure our but you_ **_CAN_** **_NOT_** _include a_ **_dash_** _(-) in the parameter name. I originally had_ `_:blog-post_` _and couldn’t figure out why it looked like it was working but it_ **_wasn’t_**_._