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>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="container"></div>

CSS

.active {
  background: red;
}

.price_red {
  color: red;
}

Babel + JSX

class Cart extends React.Component {
  onClick = (e) => {
    this.props.onDelete(+e.target.dataset.index);
  }

  render() {
    const items = this.props.items;
    const price = items.reduce((acc, n) => acc + n.price, 0);

    return(
      <aside className="cart">
        <div className="wrapper">
          <div className="priceOutput">
            <span className={price < 2000 ? 'price' : 'price_red'}>
              {price ? `${price}$` : 'Add item to cart'}
            </span>
            <hr/>
            <div className="cart_history">
              <ul>{items.map((n, i) =>
                <li key={n.id} className="item">
                  {n.title}
                  <button onClick={this.onClick} data-index={i}>DEL</button>
                </li>)}
              </ul>
            </div>
            <button className="btn_submit">Submit</button>
          </div>
        </div>
      </aside>            
    );
  }
}

class Items extends React.Component {
  state = {
    items: []
  }

  handleDelete = (index) => {
    this.setState({
      items: this.state.items.filter((n, i) => i !== index)
    });
  }

  handleCartPriceChange = (item) => {
    this.setState({
      items: [
        ...this.state.items,
        {
          ...item,
          id: 1 + Math.max(0, ...this.state.items.map(n => n.id))
        }
      ]
    });
  }

  render(){
    return(
      <div className="wrap">
        <Cart onDelete={this.handleDelete} items={this.state.items} />
        <section className="shop">
          <div className="wrap_container">
          {this.props.items.map(item =>
            <Item
              key={item.id}
              data={item}
              onCartPriceChange={this.handleCartPriceChange}
            />
          )}</div>
        </section>
      </div>
    );
  }
}

class Item extends React.Component {
  state = {
    btn_children: 'ADD'
  }

  onHover = (e) => {
    this.setState({
      btn_children: e.type === 'mouseover' ?...