Правильный способ импортировать современный React в тему WordPress?

Question

Как правильно импортировать React JS в теме WordPress?

Означает ли это, как включить живой Apache живой сервер и NodeJS локальный?

Должны ли обе стороны быть отдельными или они могут быть в одной? Как должна выглядеть структура папок?

Я не хочу импортировать CDN React. Я хочу иметь мощную среду, которую может предложить create-react-app. Как реагирующий маршрутизатор, как Redux и вся современная экосистема React. Это возможно?

Спасибо, о /

Answer 1

Если вы хотите использовать современную интерфейсную среду на основе реагирования вместе с бэк-офисом WordPress, с которым знакомо большинство редакторов контента, я рекомендую использовать Gatsby Js с gatsby-source-wordpress плагин.

Однако вы можете просто использовать встроенную реакцию на странице html. Вам нужен root div, где реакция обрабатывает DOM, в то время как вне этого div вы можете использовать все, что захотите. Если вам нужно более одного элемента управления, управляемого с помощью реакции, на одной странице, это немного сложнее.

const App = () => {
  const [checked, setChecked] = React.useState(false)

  return (
    <div>
      <input
        type="checkbox"
        onClick={() => setChecked(!checked)}
        checked={checked}
      />
      <span>Hello in {checked ? 'react' : 'wordpress'} world</span>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div>This is the non-react part of the page</div>
<div id="root"></div>