Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
 
#spacer{
  margin: 100px 0 20px 0;
  width: 300px;
  height: 5px;
  background-color: #DDD;
}
 
//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'));
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers