cristianPerez/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello world react</title>
  <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://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel">

    class Principal extends React.Component {

      constructor() {
        super();
        this.state = {
          number : 0
        };
      }

      addNumber () {

        this.setState({ number: this.state.number + 1 });

      }

      subNumber () {

        if(this.state.number>0){

          this.setState({ number: this.state.number - 1 });

        }

      }

      render () {
        return (
          <div>
            <h1>{this.props.title}</h1>
            <SecondComponent />
            <h2> { this.state.number } </h2>
            <AddNumber funAdd={this.addNumber.bind(this)}/>
            <SubNumber funSub={this.subNumber.bind(this)}/>
          </div>
        );
      }

    }

    class AddNumber extends React.Component {

      render() {
        return (
          <div>
            <button onClick={this.props.funAdd} >Add</button>
          </div>
        );
      }

    }

    class SubNumber extends React.Component {

      render() {
        return (
          <div>
            <button onClick={this.props.funSub} >Sub</button>
          </div>
        );
      }

    }

    class SecondComponent extends React.Component {

      constructor() {
        super();
        this.state = {
          name: 'Here type your name'
        }

      }

      changeName(event) {
        this.setState({
          name: event.target.value
        })
        console.log(event.target.value);
      }

      render () {
        return (
          <div>
            <h4>Hi { this.state.name }</h4>
            <input placeholder="type here" onChange={ this.changeName.bind(this) }/>
            <h2>Text from another component</h2>
          </div>

        );
      }
    }

    ReactDOM.render(
      <Principal title={'Hello from component'} />,
      document.getElementById('app')
    );

  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8" />
	<title>Hello world react</title>
	<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://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
	</head>

	<body>
	<div id="app"></div>

	<script type="text/babel">

	class Principal extends React.Component {

	constructor() {
	super();
	this.state = {
	number : 0
	};
	}

	addNumber () {

	this.setState({ number: this.state.number + 1 });

	}

	subNumber () {

	if(this.state.number>0){

	this.setState({ number: this.state.number - 1 });

	}

	}

	render () {
	return (
	<div>
	<h1>{this.props.title}</h1>
	<SecondComponent />
	<h2> { this.state.number } </h2>
	<AddNumber funAdd={this.addNumber.bind(this)}/>
	<SubNumber funSub={this.subNumber.bind(this)}/>
	</div>
	);
	}

	}

	class AddNumber extends React.Component {

	render() {
	return (
	<div>
	<button onClick={this.props.funAdd} >Add</button>
	</div>
	);
	}

	}

	class SubNumber extends React.Component {

	render() {
	return (
	<div>
	<button onClick={this.props.funSub} >Sub</button>
	</div>
	);
	}

	}

	class SecondComponent extends React.Component {

	constructor() {
	super();
	this.state = {
	name: 'Here type your name'
	}

	}

	changeName(event) {
	this.setState({
	name: event.target.value
	})
	console.log(event.target.value);
	}

	render () {
	return (
	<div>
	<h4>Hi { this.state.name }</h4>
	<input placeholder="type here" onChange={ this.changeName.bind(this) }/>
	<h2>Text from another component</h2>
	</div>

	);
	}
	}

	ReactDOM.render(
	<Principal title={'Hello from component'} />,
	document.getElementById('app')
	);

	</script>
	</body>

	</html>