React js Contentful starting

Contentful is headless CMS that you can use for building your content from its ready back-end and fetch your content with RESTFUL-API.

In this tutorial I am going to share with you how to start a simple project on Contentful and React js.

This tutorial assumes that you are already familiar with React and creating React project.

I will explain creating and connecting to Contentful in steps.

But first you need to have a Contentful account, simply go to https://www.contentful.com/sign-up/ and sign up then sign in.

• 4 simple steps for creating content on Contentful

First step: After you sign in go to the navbar to the left and choose to create a new space. This is where your data will be saved. For this tutorial I named the space 'Blog'.

Second step: is to make content type. If you are adding a structure for 'articles' make you content type as 'article'. When add content in next step you will find 'add article' button to add content.

Let's continue making the data model.

After you created your content type you can find 'add field'.

Add field -> text -> short text -> make the title 'post title'
Add field -> text -> long text -> make the title 'post content'
Add field -> text -> short text -> make the title 'post author'

If you are following you get the idea. You can add more fields of you would like to.

On the top NavBar click 'content'. Save and go to content.

Third step: Adding content should be so simple. Just click 'add article' in case you chose your content type as 'article'. Then you are adding content as you would do on WordPress. You can use Lorem ipsum generators like http://lorem-ipsum.perbang.dk/ to generate content for testing.

Last step: is fetching content you created.

You need to get your 'access token' and 'space ID' from Space setting -> API keys

import React, { Component } from "react";
import { render } from "react-dom";
import { createClient } from "contentful";


var client = createClient({
  space: "YOUR_SPACE_ID",
  accessToken:
    "YOUR_ACCESS_TOKEN"
});

class App extends Component {
  constructor() {
    super();
    this.state = {
      article: []
    };
  }

  componentDidMount() {
    client.getEntries().then(({ items }) => {
      this.setState({ articles: items });
    });
  }

  render() {
    return (
      <div>
        Content goes here
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Comments

[Mark Anthony B. Dungo]

But it'll be like your access token will become vulnerable from extraction if you build your single-page React application directly with Contentful.

Is there any way to secure our access tokens without building another backend application and just use Contentful directly as our backend?

[Tarek Hassan]

for that you can use .env files to save your token. I was simplifying the app as best as I can.

[Mark Anthony B. Dungo]

But I guess, the token that's stored on your ".env" file will become visible on your single-page React web application's script because it'll be used to fetch your Contentful space' entries?

Look at this: contentful.github.io/gallery-app-r...
That's the bundle script of: contentful.github.io/gallery-app-r...
On that bundle script, you can easily see the tokens...