title: What is the difference between class variables and function variables in react
body: <p>I am using props in react. And found this </p>
  
  <pre><code>var App = React.createClass({
  
  
          render: function(){
              var t = this.props.txt;
              return(&lt;div&gt;
                      &lt;h1&gt; {t}&lt;/h1&gt;
  
                  &lt;/div&gt;);
  
          },
  
      });
  
      React.render(&lt;App txt="hi"/&gt;, document.body);
  </code></pre>
  
  <p>This works fine, as variable t is inside the render function. But when placed t outside the render function like this</p>
  
  <pre><code>var App = React.createClass({
  // position of t is shifted here
      var t = this.props.txt;
          render: function(){
  
              return(&lt;div&gt;
                      &lt;h1&gt; {t}&lt;/h1&gt;
  
                  &lt;/div&gt;);
  
          },
  
      });
  
      React.render(&lt;App txt="hi"/&gt;, document.body); 
  </code></pre>
  
  <p>This does not work. Since I am invoking App directly in React.render not the function render, I expect that App should have props available. What am I missing?</p>