title: ReactJS with server side PHP templates?
body: <p>I just started learning about ReactJS and trying to figure out how - if - I could use it with my existing templates genarated at the server side by Symfony2 app.</p>
  
  <p>The idea is to use ReactJS for updating parts of view (widgets - or from technical point, Symfony2 "partial templates"), for example to update a counter of comments, or to add a new news to the top of the list of news and remove the most bottom one.</p>
  
  <p>I could of course use just an Ajax call to the server, get the whole template of the list from Symfony2 / Twig, and refresh / replace it in DOM by jQuery or whatever:</p>
  
  <pre><code>    &lt;ul id="list"&gt;
          &lt;li&gt;1 news&lt;/li&gt;
          &lt;li&gt;2 news&lt;/li&gt;
          &lt;li&gt;3 news&lt;/li&gt;
          &lt;li&gt;&lt;strong&gt;4&lt;/strong&gt; OLD news - to be removed&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>which, when new news entry appeared, would look like this:</p>
  
  <pre><code>    &lt;ul id="list"&gt;
          &lt;li&gt;&lt;strong&gt;0&lt;/strong&gt; NEW news&lt;/li&gt;
          &lt;li&gt;1 news&lt;/li&gt;
          &lt;li&gt;2 news&lt;/li&gt;
          &lt;li&gt;3 news&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>(i.e. removed "4" at the bottom and added "0" at the top of the list).</p>
  
  <p>This is one of examples of "widgets" I want to implement, or rather - because they're already there as Twig (PHP templating engine) templates - add some client-side JS dynamic to these templates, which can be considered as widgets in a way.</p>
  
  <p>But how to make it using ReactJS?</p>
  
  <p>As I concluded so far, it seems that I need do something like this in my PHP Twig template:</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;ul id="list"&gt;
          &lt;li&gt;1 news&lt;/li&gt;
          &lt;li&gt;2 news&lt;/li&gt;
          &lt;li&gt;3 news&lt;/li&gt;
          &lt;li&gt;4 news&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  React.render(
      &lt;ul id="list"&gt;
          &lt;li&gt;1 news&lt;/li&gt;
          &lt;li&gt;2 news&lt;/li&gt;
          &lt;li&gt;3 news&lt;/li&gt;
          &lt;li&gt;4 news&lt;/li&gt;
      &lt;/ul&gt;,
      document.getElementById('list')
    );
  </code></pre>
  
  <p>The same list is generated twice. This is because the first list is for non-JS users + google-like bots, and the second list is just to inform ReactJS what is the structure of my list-component. Of course, in reality I would create this list dynamically, like:</p>
  
  <pre><code>&lt;li&gt;{ newsContent }&lt;/li&gt;
  </code></pre>
  
  <p>Anyway, creating the same list twice seems like a very bad idea to me. So I'm thinking if ReactJS is able, perhaps, to read my DOM, and figure out automatically somehow that HTML UL element consists of LI elements, and build its virtual DOM? And then I could just call a JS React method for it?</p>
  
  <p>Or perhaps I could do something like:</p>
  
  <ol>
  <li>Get the new News element (a single LI) from the server</li>
  <li>Get from the page's DOM the current list of News (UL with LI children)</li>
  <li>Remove the most bottom one manually</li>
  <li>Merge both, and pass it as a new string containg HTML to ReactJS ?</li>
  </ol>
  
  <p><strong>So to sum it up, is ReactJS able to build Virtual DOM reading my current DOM?</strong></p>
  
  <p><strong>Or, is ReactJS able to render directly from a string (instead JSX), like with the whole UL + all LI elements?</strong></p>
  
  <p><strong>Or even more simple, is it a possibility to convert a string with HTML markup into a ReactJS element (then I could just get the whole new template from the server and pass it to the React's render method)?</strong></p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p><strong>I learnt so far that there's a tool like Babel which compiles JSX into Javascript, which would be of very help in my case. But, how the heck am I going to get a simple .js copy of a Babel? What I see that there are are only kind of npm (Node.JS?) packages. Is there possible to just include it like a normal JS file lib?</strong></p>