title: ReactJS difference between stateful and stateless
body: <p>I am trying to understand the exact difference between React's stateful and stateless components. Ok, stateless components just do something, but remember nothing, while stateful components may do the same, but they remember stuff within <code>this.state</code>. That's the theory.</p>
  
  <p>But now, checking on how to show this using code, I have a little trouble making the difference. Am I right with the following two examples? The only difference really is the definition of the <code>getInitialState</code> function.</p>
  
  <p>Example of a stateless component:</p>
  
  <pre><code>var React = require('react');
  
  var Header = React.createClass({
      render: function() {
          return(
              &lt;img src={'mypicture.png'} /&gt;
          );
      }
  });
  
  module.exports = Header;
  </code></pre>
  
  <p>Example of a stateful component:</p>
  
  <pre><code>var React = require('react');
  
  var Header = React.createClass({
  
      getInitialState: function() {
          return {
              someVariable: "I remember something"
          };
      },
  
      render: function() {
          return(
              &lt;img src={'mypicture.png'} /&gt;
          );
      }
  });
  
  module.exports = Header;
  </code></pre>