Skip to content

Instantly share code, notes, and snippets.

@myles
Created January 26, 2017 16:41
Show Gist options
  • Save myles/86491847f97aa6b1b75b32bdfd230391 to your computer and use it in GitHub Desktop.
Save myles/86491847f97aa6b1b75b32bdfd230391 to your computer and use it in GitHub Desktop.
Playing around with WordPress REST API and React
import WordPress from 'wpcom';
import { css } from 'glamor'
import React from 'react';
let PostStyle = css({
borderBottomColor: '#ccc',
borderBottomStyle: 'solid',
borderBottomWidth: '1px',
margin: '1em 0',
padding: '1em 0'
})
let PostTitleStyle = css({
fontWeight: 'normal',
fontSize: '1.5em',
padding: '0',
margin: '0'
})
let PostContentStyle = css({
maxWidth: '600px',
margin: '0 auto',
overflowX: 'scroll',
padding: '0',
margin: '0'
})
let Post = props =>
<div className={PostStyle}>
<h1 className={PostTitleStyle}>{props.post.title}</h1>
<div className={PostContentStyle} dangerouslySetInnerHTML={{__html: props.post.content}}></div>
</div>
let AppStyle = css({
maxWidth: '700px',
margin: '0 auto'
})
class App extends React.Component {
state = {
posts: []
}
async getPosts() {
let wp = WordPress();
let site = await wp.site('en.blog.wordpress.com');
let post_list = await site.postsList({number: 5});
this.setState({ posts: post_list.posts });
}
constructor(props) {
super(props);
this.getPosts();
}
render() {
console.log(this.state.posts);
return (
<div className={AppStyle}>
{this.state.posts.map(post => <Post post={post} />)}
</div>
);
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment