class Display extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.color}</p>
        <p>{this.props.num}</p>
        <p>{this.props.size}</p>
      </div>
    );
  }
}

class Label extends React.Component {
  render() {
    return (
      <Display color={this.props.color}
               num={this.props.num}
               size={this.props.size}/>
    );
  }
}

class Shirt extends React.Component {
  render() {
    return (
      <div>
        <Label color={this.props.color}
               num={this.props.num}
               size={this.props.size}/>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <Shirt color="jasnoniebieski" num="3,14" size="średni" />
  </div>,
  document.querySelector("#container")
);

---

ReactDOM.render(
  <div>
    <Shirt color="jasnoniebieski" num="3,14" size="średni" />
  </div>,
  document.querySelector("#container")
);
---

class Shirt extends React.Component {
  render() {
    return (
      <div>
        <Label color={this.props.color}
               num={this.props.num}
               size={this.props.size} />
      </div>
    );
  }
}

---

class Label extends React.Component {
  render() {
    return (
      <Display color={this.props.color}
               num={this.props.num}
               size={this.props.size} />
    );
  }
}
---

class Display extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.color}</p>
        <p>{this.props.num}</p>
        <p>{this.props.size}</p>
      </div>
    );
  }
}
---

var items = ["1", "2", "3"];

function printStuff(a, b, c) {
  console.log("Wynik: " + a + " " + b + " " + c);
}
---

printStuff(items[0], items[1], items[2]);
---

printStuff(...items);
---

var items = ["1", "2", "3"];

function printStuff(a, b, c) {
  console.log("Printing: " + a + " " + b + " " + c);
}

// Z użyciem operatora rozciągania:
printStuff(...items);

// Bez użycia operatora rozciągania:
printStuff(items[0], items[1], items[2]);

---

var props = {
  color: "jasnoniebieski",
  num: "3,14",
  size: "średni"
};
---

<Display color={this.props.color}
         num={this.props.num}
         size={this.props.size}/>
---

<Display {...this.props} />
---

class Display extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.color}</p>
        <p>{this.props.num}</p>
        <p>{this.props.size}</p>
      </div>
    );
  }
}

class Label extends React.Component {
  render() {
    return (
      <Display {...this.props} />
    );
  }
}

class Shirt extends React.Component {
  render() {
    return (
      <div>
        <Label {...this.props} />
      </div>
    );
  }
}
---

