워드프레스 사용자 정의 HTML에 React(JSX)작성하기

내가 작성한 React UI 관련 글에는 구현된 리액트 코드가 있는데, 워드프레스 포스팅에서도 JSX를 추가할 수 있다. 바벨을 사용하면 가능하다. 앞으로도 많이 사용할 거 같아서 글로 정리를 한다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clsx@2.1.1/dist/clsx.min.js"></script>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>

<div id="root"></div>
  

<script type="text/babel">
// 이곳에 코드를 작성
const { useState } = React

function App() {
  const [count, setCount] = useState(0)

  return <div>
     <h2>Hello React!</h2>
     <button onClick={() => setCount(prev => ++prev)} >++ {count}</button>
</div>
}

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

위 코드를 사용자 정의 HTML에 추가해 보겠다.