React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Fagner Brack February 23, 2018

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

// GET /cart
const parsedCartPageResponse = {
  itemsOnCart: [{ name: "Book A" }, { name: "Book B" }]
};

// Front-End
class CartPage extends React.Component {
  constructor(props) {
    super(props); // need this?
    this.state = this.props.response;
  }
  render() {
    return (
      <ul>{
        this.state.itemsOnCart.map((item) => (
          <li>{ item.name }</li>
        ))
      }</ul>
    );
  }
}

ReactDOM.render(
  <CartPage response={parsedCartPageResponse} />,
  document.getElementById('container')
);