React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Fagner Brack

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>

Babel + JSX

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

// GET /todo-list-page
const todoListPageResponseBody = {
  h1: 'John Doe',
  ul: [{
    text: 'Go to shop',
    striked: true
  }, {
    text: 'Buy some clothes',
    striked: false
  }, {
    text: 'Buy food',
    striked: false
  }]
};

//=============================
// THE CLIENT FRONT-END PROJECT
//=============================
class TodoPage extends React.Component {
  render() {
    return (
      <section>
        <h1>{this.props.page.h1}</h1>
        <ul>
          {
            this.props.page.ul.map((li) => {
              return (
                <li>
                  { li.striked ? <strike>{li.text}</strike> : li.text }
                </li>
              )
            })
          }
        </ul>
      </section>
    );
  }
}

ReactDOM.render(
  <TodoPage page={todoListPageResponseBody} />,
  document.getElementById('container')
);