Использование React на нереагирующем веб-сайте

Question

У меня есть проект, в котором все представления отображаются сервером с использованием Twig шаблонизатора. Поэтому я пишу все свои скрипты внутри .twig шаблонов.

Например, это мой aside-buttons.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>

Есть ли возможность использовать React для создания, например, этого простого aside-buttons шаблон и заставить его работать в другом .twig файле шаблона? Заранее спасибо!

PS: я использовал React в проектах, где вся деталь client была создана с использованием React, и я заметил, что написание сложных client компонентов в React очень удобно.

Answer 1

Да, вот что должно делать то, что вы хотите.

const el = document.getElementById("aside-buttons");

const clickHandler = e => {
  e.preventDefault();
  console.log(e.target.innerText);
};

const Buttons = () => (
  <React.Fragment>
    <button onClick={clickHandler}>Home</button>
    <button onClick={clickHandler}>Twitter</button>
    <button onClick={clickHandler}>FB</button>
    <button onClick={clickHandler}>YouTube</button>
  </React.Fragment>
);

ReactDOM.render(<Buttons />, el);

/* You can also use this if you don't want to compile JSX

const Buttons = () => React.createElement(
  React.Fragment,
  null,
  React.createElement(
    "button",
    { onClick: clickHandler },
    "Home"
  ),
  React.createElement(
    "button",
    { onClick: clickHandler },
    "Twitter"
  ),
  React.createElement(
    "button",
    { onClick: clickHandler },
    "FB"
  ),
  React.createElement(
    "button",
    { onClick: clickHandler },
    "YouTube"
  )
);

*/

И ваш шаблон должен просто иметь это:

<div id="aside-buttons"></div>