How to render block’s React component in frontend

  • I’m creating a block that displays the amount of time until some event in the future occurs. I have it built and working in Edit.js. It requires useRef() and useEffect() to call the function every second to then calculate the remaining time and re-render the component.

    How do I get this component on the frontend? Is there a better way then having to rebuild the countdown logic in render.php?

    I tried using createRoot along with the countdown component in view.js, inserting only after DOM load:

    document.addEventListener( ‘DOMContentLoaded’, () => {
    const domNode = document.getElementById( ‘my-countdown’ );
    const root = createRoot( domNode );
    root.render(<MY_Countdown /> );
    } );

    But this approach doesn’t recognize domNode as being a DOM element. I can verify that view.js is loaded, and that the event listener triggers on DOMContentLoaded, but continue getting: Target container is not a DOM element.

Viewing 1 replies (of 1 total)

  • It seems like you’re trying to use React components in the frontend of your WordPress site, which is a bit tricky because WordPress primarily uses PHP for rendering its templates. However, you can still integrate React components into your WordPress site with some additional setup.

    Here’s a suggested approach:

    1. React Component: Keep your countdown component (MY_Countdown) as a React component. This component will handle the logic for calculating the remaining time and rendering the countdown.
    2. JavaScript File: Place your React component and any necessary setup (such as createRoot) in a JavaScript file. Make sure to enqueue this JavaScript file properly in your WordPress theme or plugin.
    3. Element Targeting: Instead of targeting a specific DOM element with createRoot, you can render the React component directly into a container element in your WordPress template. For example, in your WordPress template file (render.php or any other PHP file), you can include a container element where you want the countdown to appear:
       <div id="my-countdown"></div>
    1. JavaScript Initialization: In your JavaScript file, use ReactDOM.render to render the React component into the container element:
       import ReactDOM from 'react-dom';
   import MY_Countdown from './MY_Countdown'; // Import your countdown component

   document.addEventListener('DOMContentLoaded', () => {
       const domNode = document.getElementById('my-countdown');
       ReactDOM.render(<MY_Countdown />, domNode);
   });

    Make sure the path to your countdown component (MY_Countdown) is correct.

    1. Enqueue JavaScript: Enqueue your JavaScript file in your WordPress theme or plugin. You can do this using wp_enqueue_script in your theme’s functions.php file or in your plugin file.
       function enqueue_my_scripts() {
       wp_enqueue_script('my-countdown-script', 'path/to/your/js/file.js', array('react', 'react-dom'), null, true);
   }
   add_action('wp_enqueue_scripts', 'enqueue_my_scripts');

    Replace 'path/to/your/js/file.js' with the path to your JavaScript file.

    With this setup, your React countdown component should render correctly on the frontend of your WordPress site without the need to rebuild the countdown logic in PHP. Make sure all your dependencies are correctly enqueued, and the paths to your JavaScript files are accurate.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.