Playing around with WordPress REST API and React

App.js

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;