Javascript 在非React网站中使用React

我有一个项目，服务器使用

Twig

模板引擎渲染所有视图。因此，我将所有脚本都写在

.twig

模板中

例如，这是我的

侧边按钮。细枝
模板：

  <div class="aside-buttons">
    <a href="#">Home</a>
    <a href="#">Twiter</a>
    <a href="#">FB</a>
    <a href="#">Youtube</a>
  </div>

  <script type="text/javascript">
    $(document).ready(function() {
      $.each($('.aside-buttons a'), function() {
        this.onclick = function(e) {
          e.preventDefault();
          console.log(this.text);
        }
      });
    });
  </script>


$（文档）.ready（函数（）{
$.each（$（'.a'），function（）{
this.onclick=函数（e）{
e、 预防默认值（）；
console.log（this.text）；
}
});
});

是否有可能使用
React
创建此简单示例
搁置按钮
模板并使其在另一个
小树枝
模板文件中工作？提前谢谢你

PS：我在使用
React
创建整个
client
部分的项目中使用了
React
，我注意到在
React
中编写复杂的
client
组件非常方便。
是的，这里有一些应该做您想做的事情


const el=document.getElementById（“侧边按钮”）；
常量clickHandler=e=>{
e、 预防默认值（）；
console.log（e.target.innerText）；
};
常量按钮=（）=>(
家
啁啾
食品饮料
YouTube
);
ReactDOM.render（，el）；
/*如果您不想编译JSX，也可以使用它
常量按钮=（）=>React.createElement(
反应，碎片，
无效的
React.createElement(
“按钮”，
{onClick:clickHandler}，
“家”
),
React.createElement(
“按钮”，
{onClick:clickHandler}，
“推特”
),
React.createElement(
“按钮”，
{onClick:clickHandler}，
“FB”
),
React.createElement(
“按钮”，
{onClick:clickHandler}，
“YouTube”
)
);
*/
您可以将模板和逻辑导出为React组件，但您必须依靠React.DOM将这些组件呈现在您想要的HTML点的一部分。@Rikin，
将您的模板和逻辑导出为React组件
我不太明白如何做到这一点……我喜欢Vue.JS的一点是，您可以在您想要的Web部件上逐步采用它。