class Card extends React.Component {
  render() {
    var cardStyle = {
      height: 200,
      width: 150,
      padding: 0,
      backgroundColor: "#FFF",
      boxShadow: "0px 0px 5px #666"
    };

    return (
      <div style={cardStyle}>
        <Square color={this.props.color} />
        <Label color={this.props.color} />
      </div>
    );
  }
}
---

class Card extends React.Component {
  render() {
    var cardStyle = {
      height: 200,
      width: 150,
      padding: 0,
      backgroundColor: "#FFF",
      boxShadow: "0px 0px 5px #666"
    };

    return React.createElement(
      "div",
      { style: cardStyle },
      React.createElement(Square, { color: this.props.color }),
      React.createElement(Label, { color: this.props.color })
    );
  }
}
---
class Stuff extends React.Component {
  render() {
    return (
      <h1>Nudna, statyczna treść!</h1>
    );
  }
};

---

class Stuff extends React.Component {
  render() {
    return (
      <h1>Nudna {Math.random() * 100} treść!</h1>
    );
  }
}

---

class Stuff extends React.Component {
  render() {
    return (
      [
        <p>Zwracana</p>,
        <p>lista</p>,
        <p>różnych rzeczy!</p>
      ]
    );
  }
}
---

class Stuff extends React.Component {
  render() {
    return (
      [
        <p key="1">Zwracana</p>,
        <p key="2">lista</p>,
        <p key="3">różnych rzeczy!</p>
      ]
    );
  }
}
---

class Stuff extends React.Component {
  render() {
    return (
      <React.Fragment>
        <p>Zwracana</p>
        <p>lista</p>
        <p>różnych rzeczy!</p>
      </React.Fragment>
    );
  }
}
---

class Stuff extends React.Component {
  render() {
    return (
      <>
        <p>Zwracana</p>
        <p>lista</p>
        <p>różnych rzeczy!</p>
      </>
    );
  }
}
---

class Letter extends React.Component {
  render() {
    var letterStyle = {
      padding: 10,
      margin: 10,
      backgroundColor: this.props.bgcolor,
      color: "#333",
      display: "inline-block",
      fontFamily: "monospace",
      fontSize: "32",
      textAlign: "center"
    };

    return (
      <div style={letterStyle}>
        {this.props.children}
      </div>
    );
  }
}
---


