Add React in One Minute script to Spring Boot controller

Question

At Add React to a Website there's simple instructions to add a React component into a web page. This works fine run directly as a single page.

However, if the same page is "hosted" in a spring boot app, with a single route per this answer

@Controller
public class HomeController {
  @GetMapping("/**")
  public String react() {
      return "index.html";
  }
}

the text renders but not the react component.

The error in the console is Uncaught SyntaxError: Unexpected token '<'

If I try a direct route mapping

@GetMapping("/test")
public String react() {
    return "index.html";
}

Again the react component doesn't display

It's a GET http://localhost:8082/like_button.js net::ERR_ABORTED 404 error

Is the problem that to run a react script in spring boot you have to install separate React app dependencies?

/* UPDATE */

It's something to do with the JSX and Babel per this answer. If I add to the index.html

<script src="https://unpkg.com/@babel/standalone/babel.min.js"> </script>

<!-- Load our React component. -->
<script type="text/babel" src="like_button.js"></script>

there's no longer an Uncaught SyntaxError: Unexpected token '<' error. The error is now:

Uncaught SyntaxError: /http:/localhost:8082/like_button.js: Unexpected token (11:5)

`http://localhost:8082/like_button.js` is this js available from that URL? Put it in the public folder of spring boot app, first it should be available at that location — ACV, Apr 23 '22 at 12:43
can you show your like_button.js source? Looks like you're trying to use JSX (which requires further configurations)? — ACV, Apr 23 '22 at 13:37
The like_button.js is [here](https://gist.githubusercontent.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js) and then from the tutorial it adds the `const domContainer = document.querySelector('#like_button_container');` `ReactDOM.render(e(LikeButton), domContainer);` — rupweb, Apr 23 '22 at 13:57
There is no < character in there, no JSX indeed, so why is console showing error about < character — ACV, Apr 23 '22 at 13:59
It comes from step 3 [here](https://reactjs.org/docs/add-react-to-a-website.html#add-react-in-one-minute) — rupweb, Apr 23 '22 at 14:00
The `like_button.js` react component was clearly received at browser per the 200 status but produces the `<` character error in that case, but the same `like_button.js` works fine on its own (not in spring boot app) — rupweb, Apr 23 '22 at 14:32

Add React in One Minute script to Spring Boot controller

0 Answers0