ppraksa/liftingup.phtml

## liftingup.phtml
<!DOCTYPE html>
<html lang="5">
  <head>
    <meta charset="UTF-8">
    <title>Pierwszy komponent w React.js</title>
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone/babel.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
  </head>

  <body>
  <div id="app"></div>
  <script type="text/babel">

    class Parent extends React.Component {
      constructor() {
        super();
        this.state = {
          inputValue: 0
        };
        this.updateInput = this.updateInput.bind(this);
        this.inceraseValue = this.inceraseValue.bind(this);
        this.deceraseValue = this.deceraseValue.bind(this)
      }
      render() {
        return (
          <div>
            <Child onInceraseValue={this.inceraseValue} onDeceraseValue={this.deceraseValue} onChangeInput={this.updateInput} inputValue={this.state.inputValue} />
          </div>
        )
      }
      updateInput(event) {
        this.setState({
          inputValue: event.target.value
        })
      }
      inceraseValue() {
        this.setState({
          inputValue: Number(this.state.inputValue) + 1
        })
      }
      deceraseValue() {
        this.setState({
          inputValue: Number(this.state.inputValue) - 1
        })
      }
    }

    class Child extends React.Component {
      constructor(props) {
        super(props);
        this.updateInput = this.updateInput.bind(this);
        this.inceraseValue = this.inceraseValue.bind(this);
        this.deceraseValue = this.deceraseValue.bind(this);
      }
      render() {
        return (
            <div className="ui input">
              <span onClick={this.deceraseValue}>-</span>

              <input id="name" onChange={this.updateInput} value={this.props.inputValue} type="text" placeholder=""/>

              <span onClick={this.inceraseValue}>+</span>
            </div>
        )
      }
      inceraseValue() {
        this.props.onInceraseValue();
      }
      deceraseValue() {
        this.props.onDeceraseValue();
      }
      updateInput(event) {
        this.props.onChangeInput(event);
      }
    }

    const App = () => {
      return(
        <div>
          <Parent />
        </div>
      );
    };

    ReactDOM.render(<App/>, document.querySelector('#app'));
  </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="5">
	<head>
	<meta charset="UTF-8">
	<title>Pierwszy komponent w React.js</title>
	<script src="https://unpkg.com/react/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
	<script src="https://unpkg.com/babel-standalone/babel.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
	</head>

	<body>
	<div id="app"></div>
	<script type="text/babel">

	class Parent extends React.Component {
	constructor() {
	super();
	this.state = {
	inputValue: 0
	};
	this.updateInput = this.updateInput.bind(this);
	this.inceraseValue = this.inceraseValue.bind(this);
	this.deceraseValue = this.deceraseValue.bind(this)
	}
	render() {
	return (
	<div>
	<Child onInceraseValue={this.inceraseValue} onDeceraseValue={this.deceraseValue} onChangeInput={this.updateInput} inputValue={this.state.inputValue} />
	</div>
	)
	}
	updateInput(event) {
	this.setState({
	inputValue: event.target.value
	})
	}
	inceraseValue() {
	this.setState({
	inputValue: Number(this.state.inputValue) + 1
	})
	}
	deceraseValue() {
	this.setState({
	inputValue: Number(this.state.inputValue) - 1
	})
	}
	}

	class Child extends React.Component {
	constructor(props) {
	super(props);
	this.updateInput = this.updateInput.bind(this);
	this.inceraseValue = this.inceraseValue.bind(this);
	this.deceraseValue = this.deceraseValue.bind(this);
	}
	render() {
	return (
	<div className="ui input">
	<span onClick={this.deceraseValue}>-</span>

	<input id="name" onChange={this.updateInput} value={this.props.inputValue} type="text" placeholder=""/>

	<span onClick={this.inceraseValue}>+</span>
	</div>
	)
	}
	inceraseValue() {
	this.props.onInceraseValue();
	}
	deceraseValue() {
	this.props.onDeceraseValue();
	}
	updateInput(event) {
	this.props.onChangeInput(event);
	}
	}

	const App = () => {
	return(
	<div>
	<Parent />
	</div>
	);
	};

	ReactDOM.render(<App/>, document.querySelector('#app'));
	</script>
	</body>
	</html>