Last active
March 27, 2019 10:25
-
-
Save appwebtech/ccd47608e89173ff1467c2f64551a060 to your computer and use it in GitHub Desktop.
JS Bin// source https://jsbin.com/paluhaxigi
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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"> | |
| // REACT STATE | |
| // ONLY 1 COMPONENT INJECTED IN app.js WHICH MIMICS A PROP | |
| // 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') | |
| ); | |
| // Layout.js | |
| import React from 'react'; | |
| export default class Layout extends React.Component { | |
| constructor() { | |
| super(); // To get context in terms of our class | |
| this.state = { | |
| fullNames: 'Joe Doe' | |
| } | |
| } | |
| changeName() { | |
| this.setState({ | |
| fullNames: 'Foo 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.fullNames), | |
| React.createElement("button", {onClick: this.changeName.bind(this)}, "Change me!"), | |
| 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">// REACT STATE | |
| // ONLY 1 COMPONENT INJECTED IN app.js WHICH MIMICS A PROP | |
| // 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') | |
| ); | |
| // Layout.js | |
| import React from 'react'; | |
| export default class Layout extends React.Component { | |
| constructor() { | |
| super(); // To get context in terms of our class | |
| this.state = { | |
| fullNames: 'Joe Doe' | |
| } | |
| } | |
| changeName() { | |
| this.setState({ | |
| fullNames: 'Foo 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.fullNames}</h1> | |
| <button onClick={this.changeName.bind(this)}>Change me!</button> | |
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // REACT STATE | |
| // ONLY 1 COMPONENT INJECTED IN app.js WHICH MIMICS A PROP | |
| // 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') | |
| ); | |
| // Layout.js | |
| import React from 'react'; | |
| export default class Layout extends React.Component { | |
| constructor() { | |
| super(); // To get context in terms of our class | |
| this.state = { | |
| fullNames: 'Joe Doe' | |
| } | |
| } | |
| changeName() { | |
| this.setState({ | |
| fullNames: 'Foo 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.fullNames), | |
| React.createElement("button", {onClick: this.changeName.bind(this)}, "Change me!"), | |
| 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