[Example #1] Fetch and Display Data

by redneckz

HTML

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>
<script src="https://unpkg.com/@redneckz/react-rxjs@0.0.4/dist/index.min.js"></script>

CSS

.post__title {
    font-size: large;
    font-weight: bold;
}

Babel + JSX

const { from } = rxjs;
const { map } = rxjs.operators;
const { reactive } = ReactRxjs;

const Posts = reactive(
  () => from(fetchPosts()).pipe(
    map(posts => ({ posts }))
  )
)(
  ({ posts = [] }) => (
    <section>
      {posts.map(({ id, title, body }) => (
        <Post key={id} title={title}>{body}</Post>
      ))}
    </section>
  )
);

function Post({ title, children }) {
  return (
    <article>
      <header className="post__title">{title}</header>
      <p>{children}</p>
    </article>
  );
}

async function fetchPosts() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  return response.json();
}

ReactDOM.render(<Posts />, document.body);