React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

by Fagner Brack February 25, 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

const browserHasItCached = true; // Change this

// GET /cart
const cachedParsedCartPageResponse = {
  itemsOnCart: [{ name: "Book A" }, { name: "Book B" }]
};
const newParsedCartPageResponse = {
  itemsOnCart: [{ name: "Book A", price: 10 }, { name: "Book B", price: 20 }]
};

// 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 } - ${ item.price } USD</li>
        ))
      }</ul>
    );
  }
}

ReactDOM.render(
  <CartPage response={
    browserHasItCached
    ? cachedParsedCartPageResponse
    : newParsedCartPageResponse}
  />,
  document.getElementById('container')
);