-
-
Save mehdi-farsi/755832a07b3eacbd754a to your computer and use it in GitHub Desktop.
JS Bin react - state // source https://jsbin.com/boqulusofu
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 name="description" content="react - state"> | |
| <script src="http://fb.me/react-0.13.1.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| #spacer{ | |
| margin: 100px 0 20px 0; | |
| width: 300px; | |
| height: 5px; | |
| background-color: #DDD; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <ul> | |
| <li>L'état d'un composant, son state, est interne au composant, vous pouvez considérer son état comme étant une données privée, contrairement au propriétés </li> | |
| <li>l'état est accessible via <b>this.state</b></li> <li>Le composant se met à jour automatiquement à chaque modification de son état</li> | |
| <li>On déclenche une modification d'état à l'aide de la méthode <b>this.setState()</b></li> | |
| </ul> | |
| A VOUS ! | |
| <ul> | |
| <li>Créez un composant "Name" qui initialise sont état avec une propriété name grace a <b>getInitialState</b></li> | |
| <li>Utilisez votre composant dans App</li> | |
| <li>Dans 'Name' ajouter un button qui accept un attribut 'onClick' ajouter un handle</li> | |
| <li>dans ce handler utiliser this.setState() pour modifier l'état name</li> | |
| </ul> | |
| <div id="spacer"></div> | |
| <div>v1</div> | |
| <div id="container"></div> | |
| <script id="jsbin-javascript"> | |
| //v1 | |
| "use strict"; | |
| var App = React.createClass({ | |
| displayName: "App", | |
| render: function render() { | |
| return React.createElement(Name, null); | |
| } | |
| }); | |
| var Name = React.createClass({ | |
| displayName: "Name", | |
| getInitialState: function getInitialState() { | |
| return { | |
| name: "Hello World" | |
| }; | |
| }, | |
| render: function render() { | |
| return React.createElement( | |
| "div", | |
| null, | |
| React.createElement( | |
| "button", | |
| { onClick: this.handleClick }, | |
| "OK" | |
| ), | |
| React.createElement( | |
| "p", | |
| null, | |
| this.state.name | |
| ) | |
| ); | |
| }, | |
| handleClick: function handleClick() { | |
| this.setState({ | |
| name: "Hello clicRDV" | |
| }); | |
| } | |
| }); | |
| React.render(React.createElement(App, null), document.getElementById('container')); | |
| </script> | |
| <script id="jsbin-source-html" type="text/html"><!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="react - state"> | |
| <script src="//fb.me/react-0.13.1.js"><\/script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <ul> | |
| <li>L'état d'un composant, son state, est interne au composant, vous pouvez considérer son état comme étant une données privée, contrairement au propriétés </li> | |
| <li>l'état est accessible via <b>this.state</b></li> <li>Le composant se met à jour automatiquement à chaque modification de son état</li> | |
| <li>On déclenche une modification d'état à l'aide de la méthode <b>this.setState()</b></li> | |
| </ul> | |
| A VOUS ! | |
| <ul> | |
| <li>Créez un composant "Name" qui initialise sont état avec une propriété name grace a <b>getInitialState</b></li> | |
| <li>Utilisez votre composant dans App</li> | |
| <li>Dans 'Name' ajouter un button qui accept un attribut 'onClick' ajouter un handle</li> | |
| <li>dans ce handler utiliser this.setState() pour modifier l'état name</li> | |
| </ul> | |
| <div id="spacer"></div> | |
| <div>v1</div> | |
| <div id="container"></div> | |
| </body> | |
| </html></script> | |
| <script id="jsbin-source-css" type="text/css">#spacer{ | |
| margin: 100px 0 20px 0; | |
| width: 300px; | |
| height: 5px; | |
| background-color: #DDD; | |
| }</script> | |
| <script id="jsbin-source-javascript" type="text/javascript">//v1 | |
| var App = React.createClass({ | |
| render: function(){ | |
| return ( | |
| <Name /> | |
| ); | |
| } | |
| }); | |
| var Name = React.createClass({ | |
| getInitialState: function() { | |
| return { | |
| name: "Hello World" | |
| } | |
| }, | |
| render: function() { | |
| return ( | |
| <div> | |
| <button onClick={this.handleClick}>OK</button> | |
| <p>{this.state.name}</p> | |
| </div> | |
| ) | |
| }, | |
| handleClick: function() { | |
| this.setState({ | |
| name: "Hello clicRDV" | |
| }); | |
| } | |
| }); | |
| React.render(<App />, document.getElementById('container'));</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
| #spacer{ | |
| margin: 100px 0 20px 0; | |
| width: 300px; | |
| height: 5px; | |
| background-color: #DDD; | |
| } |
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
| //v1 | |
| "use strict"; | |
| var App = React.createClass({ | |
| displayName: "App", | |
| render: function render() { | |
| return React.createElement(Name, null); | |
| } | |
| }); | |
| var Name = React.createClass({ | |
| displayName: "Name", | |
| getInitialState: function getInitialState() { | |
| return { | |
| name: "Hello World" | |
| }; | |
| }, | |
| render: function render() { | |
| return React.createElement( | |
| "div", | |
| null, | |
| React.createElement( | |
| "button", | |
| { onClick: this.handleClick }, | |
| "OK" | |
| ), | |
| React.createElement( | |
| "p", | |
| null, | |
| this.state.name | |
| ) | |
| ); | |
| }, | |
| handleClick: function handleClick() { | |
| this.setState({ | |
| name: "Hello clicRDV" | |
| }); | |
| } | |
| }); | |
| React.render(React.createElement(App, null), document.getElementById('container')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment