Contentful x React でWebページ作成

ContentfulというHeadless CMSを使って、簡単にwebサイトが管理できるかやって見ました。
ググって組み合わせが少なそうな、Reactを選択して試して見ました。

やること

Contentful上で管理された、コンテンツをReactで作った簡易のWebページに表示すること
(Viewがあれば）　BlogのPaginationの管理を行う

Contentful上でのプロジェクト作成

ここは、すでに色々なサイトで記載されているので、そちらをご参考にしてください。
参考
https://note.mu/kenhasuda/n/n8c64a658dcfe

ここで、やりたいこととしては、以下２つです

アカウントを作る
サンプルコンテンツを作る（要は、contentful上にデータを置くこと）

ReactでContentfulを参照するコードを作成する

まず、SDKをインストールします

npm install contentful

次にAPIを参照するためのconfigの設定をします

config.js

//spaceおよびaccessTokenは各自のアカウントを使ってください
config={
   space:'******',
   accessToken:'********'
}

次に、Contentfulへ参照するAPIを使うコードを書きます。

Contentful.js

import React, { Component } from 'react';
import * as contentful from 'contentful';
import config from config.js

const Contentful=(skip,data)=>{
   var client = contentful.createClient(config);

       //contentfulのAPIを使ってデータを参照する
   return new Promise(function(resolve,reject){
       client.getEntries({
           order: 'sys.createdAt',
           'content_type': data,
           //1ページあたりのコンテンツ数
           'limit':2,
       }).then((entries) => {
           console.log(entries);
           resolve(entries)
         })
   })
}
export default Contentful

これでOK。次に、実際にContentful.jsを実行さたあと、返ってくるログを見ると。

includes: {Asset: Array(2)}
items: (2) [{…}, {…}]
limit: 2
skip: 0
sys: {type: "Array"}
total: 5
stringifySafe: ƒ value()
toPlainObject: ƒ value()
__proto__: Object

細かい内容は、ログを見てもらえればApp.js側で表示する場合、返値.itemsで値をとればOKです。下のソースだと、(１)のところですね。
ここでは、titleのみを表示させるので返値.itmes.fields.titleなので、(2)のようになります
Mapの回し方については、割愛します。

Body.js


import React, { Component } from 'react';
import Contentful from './Contentful'

class  BodyHome extends React.Component{
   constructor(props){
       super(props)
       this.state={
           arraryData:[],
       }
   }
   componentDidMount(){
       Contentful().then((resolveData)=>{
           console.log(resolveData);
           this.setState({
               arraryData:resolveData.items  //(１)         
 })
       })
   }
  render(){
const MapList =()=>(
       <div>{this.state.arraryData.map((arrays)=><li key={arrays.fields.title}}>{arrays.fields.title}</li>)}</div>)  //(2)
  return(
      <MapList/>
     )
   }
 }
export default BodyHome

最後にこのソースをApp.jsにのせてる

App.js


import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import BodyHome from './pages/BodyHome';

class App extends Component {
  render() {
    return (
      <div className="App">
          <BodyHome/>
      </div>
    );
  }
}
export default App;

これReact側は完了。実行すると

npm start

下図のようにlocalhostで表示されたので、一旦やりたいことは完了。

軽くドキュメントを読むと、Netlifyと相性が良いっぽいので、次はNetlifyを使ったCI系をやるかも。。。
Paginationの管理の仕方は、次回以降・・・