mehdi-farsi/index.html

## index.html
<!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>

## jsbin.boqulusofu.css
#spacer{
  margin: 100px 0 20px 0;
  width: 300px;
  height: 5px;
  background-color: #DDD;
}

## jsbin.boqulusofu.js
//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'));
	<!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>