symfony — ReactJS с серверными шаблонами PHP?

Я только начал изучать ReactJS и пытался выяснить, как — если — я мог бы использовать его с моими существующими шаблонами, созданными на стороне сервера приложением Symfony2.

Идея состоит в том, чтобы использовать ReactJS для обновления частей представления (виджеты — или с технической точки зрения, «частичные шаблоны» Symfony2), например, для обновления счетчика комментариев или для добавления новых новостей в начало списка новостей и удалить самый нижний.

Конечно, я мог бы использовать только Ajax-вызов к серверу, получить весь шаблон списка из Symfony2 / Twig и обновить / заменить его в DOM на jQuery или что угодно:

    <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-like боты, а второй список просто для того, чтобы проинформировать ReactJS о структуре моего списка-компонента. Конечно, в действительности я бы создал этот список динамически, например:

<li>{ newsContent }</li>

В любом случае, создание одного и того же списка дважды кажется мне очень плохой идеей. Так что я думаю, может ли ReactJS, возможно, прочитать мой DOM и автоматически каким-то образом выяснить, что HTML UL элемент состоит из элементов LI, и построить свой виртуальный DOM? И тогда я мог бы просто вызвать метод JS React для этого?

Или, возможно, я мог бы сделать что-то вроде:

1. Получить новый элемент новостей (один LI) с сервера
2. Получить из DOM страницы текущий список новостей (UL с детьми LI)
3. Удалить самый нижний вручную
4. Объединить оба и передать его как новую строку, связывающую HTML с ReactJS?

Итак, подведем итог: ReactJS может создать Virtual DOM, считывая мой текущий DOM?

Или ReactJS может отображать непосредственно из строки (вместо JSX), как со всем UL + все элементы LI?

Или, что еще проще, это возможность конвертировать строку с HTML-разметкой в ​​элемент ReactJS (тогда я мог бы просто получить новый шаблон с сервера и передать его в метод рендеринга React)?

ОБНОВИТЬ:

До сих пор я узнал, что есть такой инструмент, как Babel, который компилирует JSX в Javascript, что очень помогло бы в моем случае. Но как, черт возьми, я собираюсь получить простую .js копию Вавилона? Я вижу, что существуют только пакеты типа npm (Node.JS?). Есть ли возможность просто включить его как обычную библиотеку файлов JS?