# JS or JSX for test React module?

**URL:** https://discourse.roots.io/t/js-or-jsx-for-test-react-module/30030
**Category:** sage
**Tags:** sage11
**Created:** 2025-11-03T12:47:13Z
**Posts:** 2

## Post 1 by @the_lar — 2025-11-03T12:47:13Z

Just trying to create my first React module and test a simple ‘Hello World’.

I’ve simply created a new page called “React Test” and added a custom HTML block with a `<div id=”app”></div>` container. I’m using Sage9 style routing to load a script for this new page:

```
import { createRoot } from "@wordpress/element";
import Test from "../react/test.js";
export default {
  init() {
    console.log('hello from react test');
    const domNode = document.getElementById("app");
    console.log(domNode);
    const root = createRoot(domNode);
    root.render(<Test />);
  },
  finalize() {
  }
}
```

This is my React module `test.js` -

```
import { useState} from '@wordpress/element';
function Test() {
  return (
    <>
      <p>Hello World</p>
    </>
  );
}
export default Test;
```

But I am getting the following error:

```
12:42:14 PM [vite] (client) Pre-transform error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.
  Plugin: vite:import-analysis
  File: /Users/kevinpriceward/Sites/mtswheelsolutions/public_html/app/themes/mtswheelsolutions/resources/js/react/test.js:5:25
  3 | return (
  4 | <>
  5 | <p>Hello World</p>
     | ^
  6 | </>
  7 | );
```

So I tried saving `test.js` as `test.jsx` and whilst error no longer shows, the module doesn’t load at all and I don’t get the console log “hello from react test” - what am I doing wrong?

---

## Post 2 by @the_lar — 2025-11-06T15:06:46Z

Just coming back to this after doing more digging and finding this thread on how to integrate React and Sage11 - [How to add React support in Sage 11](https://discourse.roots.io/t/how-to-add-react-support-in-sage-11/29557) . I couldn’t get `@wordpress/element` to work, but after carrying out the steps in this guide, I’m getting somewhere.

I have a few questions, if anyone has the time to fill in a some gaps for me, I’d appreciate it…

During the setup process I installed `@vitejs/plugin-react`, `react` and `react-dom` - so my understanding is that this is full fat React, not WordPress’ bundled version of React (`@wordpress/element`) - whats the difference and is this better or worse?

What is `@vitejs/plugin-react` and what does it actually do?

I’m importing it into `vite.config.js` - does this bit: `plugins: [react()]` - actually load the plugin into Vite?

In my `app.blade.php` I’ve added `@viteReactRefresh` above the line that starts with `@vite` - whats that for?

Thank you!