#Contentful x React でWebページ作成
ContentfulというHeadless CMSを使って、簡単にwebサイトが管理できるかやって見ました。
ググって組み合わせが少なそうな、Reactを選択して試して見ました。
##やること
- Contentful上で管理された、コンテンツをReactで作った簡易のWebページに表示すること
- (Viewがあれば) BlogのPaginationの管理を行う
###Contentful上でのプロジェクト作成
ここは、すでに色々なサイトで記載されているので、そちらをご参考にしてください。
参考
https://note.mu/kenhasuda/n/n8c64a658dcfe
ここで、やりたいこととしては、以下2つです
- アカウントを作る
- サンプルコンテンツを作る(要は、contentful上にデータを置くこと)
###ReactでContentfulを参照するコードを作成する
まず、SDKをインストールします
npm install contentful
次にAPIを参照するためのconfigの設定をします
//spaceおよびaccessTokenは各自のアカウントを使ってください
config={
space:'******',
accessToken:'********'
}
次に、Contentfulへ参照するAPIを使うコードを書きます。
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です。下のソースだと、(1)のところですね。
ここでは、titleのみを表示させるので返値.itmes.fields.titleなので、(2)のようになります
Mapの回し方については、割愛します。
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 //(1)
})
})
}
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にのせてる
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の管理の仕方は、次回以降・・・