title: How to pass server data into React component
body: <p>I'm just learning React, and while I understand many of the basics there is one concept I haven't seen anyone cover: how do I take information loaded via the server-side language (e.g. PHP) and use it when loading up the React view?</p>
  
  <p>I would have expected that I'd just have the <code>RenderDom</code> call in my php view, such as:</p>
  
  <pre><code>// In the pre-compiled JSX file
  var Greeting = React.createClass({
      render: function() {
          &lt;div&gt;
              &lt;h1&gt;Hello, { this.props.username }&lt;/h1&gt;
          &lt;/div&gt;
      }
  });
  
  // In my PHP view
  &lt;script type="text/jsx"&gt;
      ReactDOM.render( &lt;Greeting username="&lt;?php echo $username; ?&gt;"/&gt;, document.body );
  &lt;/script&gt;
  </code></pre>
  
  <p>But that doesn't work; nothing is displayed. I'm thinking that's because the <code>text/jsx</code> script area doesn't get executed...but of course if I remove that there's a syntax error.</p>
  
  <p>Soo...I'm just wondering, what's the typical method for taking data loaded up from the DB and passing it into a React component?</p>