appwebtech/12_react_state_part_4.html

## 12_react_state_part_4.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>

<script id="jsbin-javascript">
// SEE TREE FOR COMPONENTS (THEIR LOCATION IS INTUITIVE FROM timer.js)

app
└── js
    ├── app.js
    └── components
        ├── Button.js
        ├── Layout.js
        ├── Timer
        │ ├── TimerButton.js
        │ └── TimerHeader.js
        └── Timer.js


// app.js
import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';

// The convenient way to use React Classes.
class App extends React.Component {


	render() {
		return (
		React.createElement("div", null,
			React.createElement(Layout, null)
		)
		)
	}
}


ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);


//Button.js
import React from 'react';

export default class Button extends React.Component {
  constructor(){
    super()
  }

  render(){
    return (
      React.createElement("button", {onClick: this.props.changeName}, this.props.firstName)
    )
  }
}


// Layout.js
import React from 'react';

import Button from './Button';

import Timer from './Timer';

export default class Layout extends React.Component {
  constructor() {
    super();          // To get context in terms of our class
    this.state = {
      firstName: 'Joe',
    }
  }

  changeName() {
    this.setState({
      firstName: 'Foo',
      lastName: 'Bar'
    })
  }

  // Similar to passing a prop as it has access to child component which calls the prop

  render() {
    return (
      React.createElement("div", null,
        React.createElement("h1", null, "Just some React code..."),
        React.createElement("h3", null, "Just switched to the Atom text editor"),
        React.createElement("h1", null, this.state.firstName),
        React.createElement(Button, {firstName: this.state.firstName, changeName: this.changeName.bind(this)}),
        React.createElement("p", null, "Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?"),
        React.createElement(Timer, null),
        React.createElement(Timer, null),
        React.createElement(Timer, null)
      )
   )
  }
}


// Timer.js
import React from 'react';
import { TimerHeader } from './Timer/TimerHeader';
import TimerButton from './Timer/TimerButton';

export default class Timer extends React.Component {
  constructor() {
    super()
    this.state = {
      time: 0
    }
    this.handleClick = this.handleClick.bind(this)
  }

// componentDidMount is a React built in method
// I'll use it to invoke the buttons upon mounting instead of clicking them.
  componentDidMount() {
    this.timer = setInterval(
      () => this.startTimer(),
      1000)
  }

  startTimer() {
    this.setState(prevState => ({
      time: prevState.time += 1
    }))
  }

  handleClick() {
    clearInterval(this.timer)
  }

  render() {
    return(
      React.createElement("div", null,
      React.createElement(TimerHeader, {time: this.state.time}),
      React.createElement(TimerButton, {handleClick: this.handleClick, time: this.state.time})
      )
    )
  }

}


// TimerButton.js
import React from 'react';

export default class TimerButton extends React.Component {
  constructor() {
    super()
  }

// The flexibility of React still marvels me way beyond using HTML in JS.
// I'll use the ternery operator to change the button in different time intervals

  render() {
    return (
      React.createElement("button", {onClick: this.props.handleClick}, this.props.time > 5 ? 'Timer over 5 secs' : 'Timer under 5 secs')
    )
  }
}


// TimerHeader.js
import React from 'react';

export const TimerHeader = ((props) =>
  React.createElement("h3", null, "I've been jogging for ", props.time, " seconds")
)
</script>


<script id="jsbin-source-javascript" type="text/javascript">// SEE TREE FOR COMPONENTS (THEIR LOCATION IS INTUITIVE FROM timer.js)


// app.js
import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';

// The convenient way to use React Classes.
class App extends React.Component {


	render() {
		return (
		<div>
			<Layout />
		</div>
		)
	}
}


ReactDOM.render(
	<App/>,
	document.getElementById('app')
	);


//Button.js
import React from 'react';

export default class Button extends React.Component {
  constructor(){
    super()
  }

  render(){
    return (
      <button onClick={this.props.changeName}>{this.props.firstName}</button>
    )
  }
}


// Layout.js
import React from 'react';

import Button from './Button';

import Timer from './Timer';

export default class Layout extends React.Component {
  constructor() {
    super();          // To get context in terms of our class
    this.state = {
      firstName: 'Joe',
    }
  }

  changeName() {
    this.setState({
      firstName: 'Foo',
      lastName: 'Bar'
    })
  }

  // Similar to passing a prop as it has access to child component which calls the prop

  render() {
    return (
      <div>
        <h1>Just some React code...</h1>
        <h3>Just switched to the Atom text editor</h3>
        <h1>{this.state.firstName}</h1>
        <Button firstName={this.state.firstName} changeName={this.changeName.bind(this)}/>
        <p>Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?</p>
        <Timer />
        <Timer />
        <Timer />
      </div>
   )
  }
}


// Timer.js
import React from 'react';
import { TimerHeader } from './Timer/TimerHeader';
import TimerButton from './Timer/TimerButton';

export default class Timer extends React.Component {
  constructor() {
    super()
    this.state = {
      time: 0
    }
    this.handleClick = this.handleClick.bind(this)
  }

// componentDidMount is a React built in method
// I'll use it to invoke the buttons upon mounting instead of clicking them.
  componentDidMount() {
    this.timer = setInterval(
      () => this.startTimer(),
      1000)
  }

  startTimer() {
    this.setState(prevState => ({
      time: prevState.time += 1
    }))
  }

  handleClick() {
    clearInterval(this.timer)
  }

  render() {
    return(
      <div>
      <TimerHeader time={this.state.time}/>
      <TimerButton handleClick={this.handleClick} time={this.state.time}/>
      </div>
    )
  }

}


// TimerButton.js
import React from 'react';

export default class TimerButton extends React.Component {
  constructor() {
    super()
  }

// The flexibility of React still marvels me way beyond using HTML in JS.
// I'll use the ternery operator to change the button in different time intervals

  render() {
    return (
      <button onClick={this.props.handleClick}>{this.props.time > 5 ? 'Timer over 5 secs' : 'Timer under 5 secs'}</button>
    )
  }
}


// TimerHeader.js
import React from 'react';

export const TimerHeader = ((props) =>
  <h3>I've been jogging for {props.time} seconds</h3>
)


</script></body>
</html>

## jsbin.paluhaxigi.js
// SEE TREE FOR COMPONENTS (THEIR LOCATION IS INTUITIVE FROM timer.js)


// app.js
import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './components/Layout';

// The convenient way to use React Classes.
class App extends React.Component {


	render() {
		return (
		React.createElement("div", null,
			React.createElement(Layout, null)
		)
		)
	}
}


ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);


//Button.js
import React from 'react';

export default class Button extends React.Component {
  constructor(){
    super()
  }

  render(){
    return (
      React.createElement("button", {onClick: this.props.changeName}, this.props.firstName)
    )
  }
}


// Layout.js
import React from 'react';

import Button from './Button';

import Timer from './Timer';

export default class Layout extends React.Component {
  constructor() {
    super();          // To get context in terms of our class
    this.state = {
      firstName: 'Joe',
    }
  }

  changeName() {
    this.setState({
      firstName: 'Foo',
      lastName: 'Bar'
    })
  }

  // Similar to passing a prop as it has access to child component which calls the prop

  render() {
    return (
      React.createElement("div", null,
        React.createElement("h1", null, "Just some React code..."),
        React.createElement("h3", null, "Just switched to the Atom text editor"),
        React.createElement("h1", null, this.state.firstName),
        React.createElement(Button, {firstName: this.state.firstName, changeName: this.changeName.bind(this)}),
        React.createElement("p", null, "Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?"),
        React.createElement(Timer, null),
        React.createElement(Timer, null),
        React.createElement(Timer, null)
      )
   )
  }
}


// Timer.js
import React from 'react';
import { TimerHeader } from './Timer/TimerHeader';
import TimerButton from './Timer/TimerButton';

export default class Timer extends React.Component {
  constructor() {
    super()
    this.state = {
      time: 0
    }
    this.handleClick = this.handleClick.bind(this)
  }

// componentDidMount is a React built in method
// I'll use it to invoke the buttons upon mounting instead of clicking them.
  componentDidMount() {
    this.timer = setInterval(
      () => this.startTimer(),
      1000)
  }

  startTimer() {
    this.setState(prevState => ({
      time: prevState.time += 1
    }))
  }

  handleClick() {
    clearInterval(this.timer)
  }

  render() {
    return(
      React.createElement("div", null,
      React.createElement(TimerHeader, {time: this.state.time}),
      React.createElement(TimerButton, {handleClick: this.handleClick, time: this.state.time})
      )
    )
  }

}


// TimerButton.js
import React from 'react';

export default class TimerButton extends React.Component {
  constructor() {
    super()
  }

// The flexibility of React still marvels me way beyond using HTML in JS.
// I'll use the ternery operator to change the button in different time intervals

  render() {
    return (
      React.createElement("button", {onClick: this.props.handleClick}, this.props.time > 5 ? 'Timer over 5 secs' : 'Timer under 5 secs')
    )
  }
}


// TimerHeader.js
import React from 'react';

export const TimerHeader = ((props) =>
  React.createElement("h3", null, "I've been jogging for ", props.time, " seconds")
)
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>
	<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
	<script src="https://fb.me/react-dom-15.1.0.js"></script>

	<script id="jsbin-javascript">
	// SEE TREE FOR COMPONENTS (THEIR LOCATION IS INTUITIVE FROM timer.js)

	app
	└── js
	├── app.js
	└── components
	├── Button.js
	├── Layout.js
	├── Timer
	│ ├── TimerButton.js
	│ └── TimerHeader.js
	└── Timer.js


	// app.js
	import React from 'react';
	import ReactDOM from 'react-dom';

	import Layout from './components/Layout';

	// The convenient way to use React Classes.
	class App extends React.Component {


	render() {
	return (
	React.createElement("div", null,
	React.createElement(Layout, null)
	)
	)
	}
	}


	ReactDOM.render(
	React.createElement(App, null),
	document.getElementById('app')
	);


	//Button.js
	import React from 'react';

	export default class Button extends React.Component {
	constructor(){
	super()
	}

	render(){
	return (
	React.createElement("button", {onClick: this.props.changeName}, this.props.firstName)
	)
	}
	}


	// Layout.js
	import React from 'react';

	import Button from './Button';

	import Timer from './Timer';

	export default class Layout extends React.Component {
	constructor() {
	super(); // To get context in terms of our class
	this.state = {
	firstName: 'Joe',
	}
	}

	changeName() {
	this.setState({
	firstName: 'Foo',
	lastName: 'Bar'
	})
	}

	// Similar to passing a prop as it has access to child component which calls the prop

	render() {
	return (
	React.createElement("div", null,
	React.createElement("h1", null, "Just some React code..."),
	React.createElement("h3", null, "Just switched to the Atom text editor"),
	React.createElement("h1", null, this.state.firstName),
	React.createElement(Button, {firstName: this.state.firstName, changeName: this.changeName.bind(this)}),
	React.createElement("p", null, "Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?"),
	React.createElement(Timer, null),
	React.createElement(Timer, null),
	React.createElement(Timer, null)
	)
	)
	}
	}


	// Timer.js
	import React from 'react';
	import { TimerHeader } from './Timer/TimerHeader';
	import TimerButton from './Timer/TimerButton';

	export default class Timer extends React.Component {
	constructor() {
	super()
	this.state = {
	time: 0
	}
	this.handleClick = this.handleClick.bind(this)
	}

	// componentDidMount is a React built in method
	// I'll use it to invoke the buttons upon mounting instead of clicking them.
	componentDidMount() {
	this.timer = setInterval(
	() => this.startTimer(),
	1000)
	}

	startTimer() {
	this.setState(prevState => ({
	time: prevState.time += 1
	}))
	}

	handleClick() {
	clearInterval(this.timer)
	}

	render() {
	return(
	React.createElement("div", null,
	React.createElement(TimerHeader, {time: this.state.time}),
	React.createElement(TimerButton, {handleClick: this.handleClick, time: this.state.time})
	)
	)
	}

	}


	// TimerButton.js
	import React from 'react';

	export default class TimerButton extends React.Component {
	constructor() {
	super()
	}

	// The flexibility of React still marvels me way beyond using HTML in JS.
	// I'll use the ternery operator to change the button in different time intervals

	render() {
	return (
	React.createElement("button", {onClick: this.props.handleClick}, this.props.time > 5 ? 'Timer over 5 secs' : 'Timer under 5 secs')
	)
	}
	}


	// TimerHeader.js
	import React from 'react';

	export const TimerHeader = ((props) =>
	React.createElement("h3", null, "I've been jogging for ", props.time, " seconds")
	)
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">// SEE TREE FOR COMPONENTS (THEIR LOCATION IS INTUITIVE FROM timer.js)



	// app.js
	import React from 'react';
	import ReactDOM from 'react-dom';

	import Layout from './components/Layout';

	// The convenient way to use React Classes.
	class App extends React.Component {


	render() {
	return (
	<div>
	<Layout />
	</div>
	)
	}
	}


	ReactDOM.render(
	<App/>,
	document.getElementById('app')
	);


	//Button.js
	import React from 'react';

	export default class Button extends React.Component {
	constructor(){
	super()
	}

	render(){
	return (
	<button onClick={this.props.changeName}>{this.props.firstName}</button>
	)
	}
	}


	// Layout.js
	import React from 'react';

	import Button from './Button';

	import Timer from './Timer';

	export default class Layout extends React.Component {
	constructor() {
	super(); // To get context in terms of our class
	this.state = {
	firstName: 'Joe',
	}
	}

	changeName() {
	this.setState({
	firstName: 'Foo',
	lastName: 'Bar'
	})
	}

	// Similar to passing a prop as it has access to child component which calls the prop

	render() {
	return (
	<div>
	<h1>Just some React code...</h1>
	<h3>Just switched to the Atom text editor</h3>
	<h1>{this.state.firstName}</h1>
	<Button firstName={this.state.firstName} changeName={this.changeName.bind(this)}/>
	<p>Nam quaerat totam expedita? Officiis cumque. Eros curae, donec magna, senectus nostrum? Fusce dolores! Erat sapiente, venenatis assumenda blanditiis deserunt maiores reiciendis, modi, praesentium morbi? Litora nihil nihil aut vero suspendisse neque vel aperiam. Earum adipiscing! Illo?</p>
	<Timer />
	<Timer />
	<Timer />
	</div>
	)
	}
	}


	// Timer.js
	import React from 'react';
	import { TimerHeader } from './Timer/TimerHeader';
	import TimerButton from './Timer/TimerButton';

	export default class Timer extends React.Component {
	constructor() {
	super()
	this.state = {
	time: 0
	}
	this.handleClick = this.handleClick.bind(this)
	}

	// componentDidMount is a React built in method
	// I'll use it to invoke the buttons upon mounting instead of clicking them.
	componentDidMount() {
	this.timer = setInterval(
	() => this.startTimer(),
	1000)
	}

	startTimer() {
	this.setState(prevState => ({
	time: prevState.time += 1
	}))
	}

	handleClick() {
	clearInterval(this.timer)
	}

	render() {
	return(
	<div>
	<TimerHeader time={this.state.time}/>
	<TimerButton handleClick={this.handleClick} time={this.state.time}/>
	</div>
	)
	}

	}


	// TimerButton.js
	import React from 'react';

	export default class TimerButton extends React.Component {
	constructor() {
	super()
	}

	// The flexibility of React still marvels me way beyond using HTML in JS.
	// I'll use the ternery operator to change the button in different time intervals

	render() {
	return (
	<button onClick={this.props.handleClick}>{this.props.time > 5 ? 'Timer over 5 secs' : 'Timer under 5 secs'}</button>
	)
	}
	}


	// TimerHeader.js
	import React from 'react';

	export const TimerHeader = ((props) =>
	<h3>I've been jogging for {props.time} seconds</h3>
	)



	</script></body>
	</html>