What is the best way to add a react app inside a page

Developer help Installation
1

Hello, :wave: I’m using the latest version of Ghost (hosting on ghost pro so i can only edit theme file). I want to integrate a small react app inside one of my page, or even inside the partials folder in my theme so i can call it with {{> “react-app”}} when I need. For example, this one :

import React, { useState } from 'react';

function App() {
  const [isVisible, setIsVisible] = useState(false);

  const handleButtonClick = () => {
    setIsVisible(!isVisible);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>
        {isVisible ? 'Hide text' : 'Show text'}
      </button>
      {isVisible && <p>This text appears when the button is clicked.</p>}
    </div>
  );
}

export default App;

What is the best way to achieve this ? I tried to search for ressources on the forum but it was for more complicated integrations and did not help me.

Thank you :slight_smile:

2

Here is a solution I found, but I dont know if its optimal, but its working. This is the content of my “react.hbs” file inside partials. Then I just write {{> “react”}} where I want it to appear :

<div id="react-app"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

<script type="text/babel">
  function App() {
    const [isVisible, setIsVisible] = React.useState(false);

    const handleButtonClick = () => {
      setIsVisible(!isVisible);
    };

    return (
      <div>
        <button onClick={handleButtonClick}>
          {isVisible ? 'Hide text' : 'Show text'}
        </button>
        {isVisible && <p>This text appears when the button is clicked.</p>}
      </div>
    );
  }

  const appElement = document.getElementById('react-app');
  ReactDOM.render(<App />, appElement);
</script>
3

I found a better way, replacing import with this

const { useState } = React;

and adding the minified version of react directly inside my theme. Working good. I’m closing the subject.