<!doctype html>
<html lang="en">
  <head>
    <title>Aplikacja React</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

---

import React from 'react';
const App = () => <h1>Witaj, React</h1>
export default App

---

class App extends React.Component {
  render(){
    return <h1>Witaj, świecie</h1>
  }
}

---

render(){
    return (
      <div>
        <h1>Witaj, świecie</h1>
        <p>React rządzi</p>
      </div>
      )
}

---

class Greet extends React.Component {
  render(){
      return <h1>Witaj, {this.props.name}</h1>
  }
}

---

class Greet extends React.Component {
    constructor(props) { super(props);
    this.state = { greeting: "to jest domyślny tekst powitania" }
    }
  render(){
      return <h1>{this.state.greeting}, {this.props.name} </h1>
  }
}

---

class Greet extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      greeting: "to jest domyślny tekst powitania"
    }
  }
updateGreeting(event){ this.setState({ greeting:
  event.target.value, }) }
  render(){
      return (
      <div>
        <input type="text" onChange={this.updateGreeting.bind(this)}/>
        <h1>{this.state.greeting}, {this.props.name} </h1>
      </div>
      )
    }
}

---

render(){
    return (
      <div>
      <Widget update={this.updateGreeting.bind(this)} />
      <Widget update={this.updateGreeting.bind(this)} />
      <Widget update={this.updateGreeting.bind(this)} />
      <h1>{this.state.greeting}, {this.props.name} </h1>
      </div>
    )
  }
}
const Widget = (props) => <input type="text" onChange={props.update}/>

---

