Skip to content

Instantly share code, notes, and snippets.

@appwebtech

appwebtech/10_react_state_part_2.html

Last active March 27, 2019 12:18
Show Gist options
  • Save appwebtech/57b5a5ff223f69b49d8a7c2f4eb57957 to your computer and use it in GitHub Desktop.
Save appwebtech/57b5a5ff223f69b49d8a7c2f4eb57957 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
10_react_state_part_2.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">
// Splitting out button functionality to it's own component
//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';
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?")
)
)
}
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">// Splitting out button functionality to it's own component
//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';
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>
</div>
)
}
}
</script></body>
</html>
Raw
jsbin.paluhaxigi.js
// Splitting out button functionality to it's own component
//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';
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?")
)
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment