React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

CSS

.todo-done {
  text-decoration: line-through;
}

Babel + JSX

//=============================
// THE API BACK-END PROJECT
//=============================

// GET /user-details
const userDetailsParsedResponseBody = {
  givenName: 'John',
  surname: 'Doe'
};

// GET /todo
const todoParsedResponseBody = {
	list: [{
    text: 'Go to shop',
    isDone: true
  }, {
    text: 'Buy some clothes',
    isDone: false
  }, {
    text: 'Buy food',
    isDone: true
  }]
};


//=============================
// THE CLIENT FRONT-END PROJECT
//=============================

class TodoPage extends React.Component {
  render() {
  	const userDetails = this.props.userDetails;
    return <section>
      <h1>{userDetails.givenName + ' ' + userDetails.surname}</h1>
      <ul>
        {this.props.todoList.map((item) => {
          return <li className={item.isDone ? 'todo-done' : ''}>
            {item.text}
          </li>
        })}
      </ul>
    </section>;
  }
}

ReactDOM.render(
  <TodoPage
    userDetails={userDetailsParsedResponseBody}
    todoList={todoParsedResponseBody.list}
   />,
  document.getElementById('container')
);