Skip to content

Instantly share code, notes, and snippets.

@appwebtech

appwebtech/11_react_state_part_3.html

Last active March 27, 2019 12:19
Show Gist options
  • Save appwebtech/8b659d506193bfefc00996790352ef8c to your computer and use it in GitHub Desktop.
Save appwebtech/8b659d506193bfefc00996790352ef8c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
11_react_state_part_3.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">
// Multiple Components for Button
// 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';
export default class Timer extends React.Component {
constructor() {
super()
this.state = {
time: 0
}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
setInterval(() => {
this.setState(prevState => ({
time: prevState.time += 1
}))
}, 1000)
}
render() {
return(
React.createElement("div", null,
React.createElement("h3", null, "I've been running for: ", this.state.time, " seconds."),
React.createElement("button", {onClick: this.handleClick}, "Click to start")
)
)
}
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">// Multiple Components for Button
// 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';
export default class Timer extends React.Component {
constructor() {
super()
this.state = {
time: 0
}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
setInterval(() => {
this.setState(prevState => ({
time: prevState.time += 1
}))
}, 1000)
}
render() {
return(
<div>
<h3>I've been running for: {this.state.time} seconds.</h3>
<button onClick={this.handleClick}>Click to start</button>
</div>
)
}
}
</script></body>
</html>
Raw
jsbin.paluhaxigi.js
// Multiple Components for Button
// 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';
export default class Timer extends React.Component {
constructor() {
super()
this.state = {
time: 0
}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
setInterval(() => {
this.setState(prevState => ({
time: prevState.time += 1
}))
}, 1000)
}
render() {
return(
React.createElement("div", null,
React.createElement("h3", null, "I've been running for: ", this.state.time, " seconds."),
React.createElement("button", {onClick: this.handleClick}, "Click to start")
)
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment