ReactJS与服务器端PHP模板？

我们的想法是使用ReactJS来更新视图的一部分(小部件 – 或者从技术点,Symfony2“部分模板”),例如更新评论的计数器,或者将新消息添加到新闻列表的顶部,删除最底部的一个.

我当然可以只使用对服务器的Ajax调用,从Symfony2 / Twig获取列表的整个模板,并通过jQuery或其他任何东西在DOM中刷新/替换它：

<ul id="list">
        <li>1 news</li>
        <li>2 news</li>
        <li>3 news</li>
        <li><strong>4</strong> OLD news - to be removed</li>
    </ul>

当新的新闻出现时,它看起来像这样：

<ul id="list">
        <li><strong>0</strong> NEW news</li>
        <li>1 news</li>
        <li>2 news</li>
        <li>3 news</li>
    </ul>

(即在底部删除“4”并在列表顶部添加“0”).

这是我想要实现的“小部件”的一个示例,或者更确切地说 – 因为它们已经作为Twig(PHP模板引擎)模板存在 – 为这些模板添加了一些客户端JS动态,可以将其视为小部件一种方式.

但是如何使用ReactJS呢？

至于我到目前为止的结论,似乎我需要在我的PHP Twig模板中做这样的事情：

<div id="content">
    <ul id="list">
        <li>1 news</li>
        <li>2 news</li>
        <li>3 news</li>
        <li>4 news</li>
    </ul>
</div>

React.render(
    <ul id="list">
        <li>1 news</li>
        <li>2 news</li>
        <li>3 news</li>
        <li>4 news</li>
    </ul>,document.getElementById('list')
  );

生成相同的列表两次.这是因为第一个列表适用于非JS用户类似Google的机器人,第二个列表只是为了通知ReactJS我的列表组件的结构是什么.当然,实际上我会动态创建这个列表,如：

<li>{ newsContent }</li>

无论如何,两次创建相同的列表对我来说似乎是一个非常糟糕的主意.所以我在想ReactJS是否能够读取我的DOM,并自动弄清楚HTML UL元素是否由LI元素组成,并构建其虚拟DOM？然后我可以为它调用JS React方法？

或许我可以这样做：

>从服务器获取新的News元素(单个LI)
>从页面的DOM获取当前的新闻列表(UL与LI子女)
>手动删除最底部的一个
>合并两者,并将其作为包含HTML的新字符串传递给ReactJS？

总而言之,ReactJS是否能够构建Virtual DOM读取我当前的DOM？

或者,ReactJS是否能够直接从字符串(而不是JSX)渲染,就像整个UL所有LI元素一样？

或者甚至更简单,是否可以将带有HTML标记的字符串转换为ReactJS元素(然后我可以从服务器获取整个新模板并将其传递给React的render方法)？

更新：

到目前为止我学到了像Babel这样的工具将JSX编译成Javascript,这对我的情况非常有帮助.但是,我怎么能得到一个简单的.js副本的巴别塔？我看到只有一种npm(Node.JS？)包.是否可以像普通的JS文件一样包含它？