3

I am creating Spring boot application and i want my frontend to be with React. The problem comes from the fact that i cannot find a way to properly integrate the react component in my jsp page.

Here is the declaration of the component:

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

I want to point out that my jsp page is inside WEB-INF directory and i can successfully redirect to it via a controller, but my import of the component does not work and does not throw an error!

I tried to import it by the element id:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Intellij is trash</title>
</head>
<body>
ala bala

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

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</body>
</html>

Am i doing something wrong or missed some configuration?

Thanks in advance for your help!

Alex Vulchev
  • 201
  • 1
  • 2
  • 15
  • Anyway, your JSP file does not import the JavaScript with the React app. – Jozef Chocholacek Nov 21 '19 at 14:06
  • @JozefChocholacek i thought if there is a visual representation it would be more helpful. I am new to react how should i import the JavaScript with the React? – Alex Vulchev Nov 21 '19 at 14:10
  • Ehm, ehm, what about reading [the tutorial](https://reactjs.org/docs/add-react-to-a-website.html)? Just instead the `like_button.js` use the file name where your `ReactDOM.render(, document.getElementById('root'));` is. – Jozef Chocholacek Nov 21 '19 at 14:44

1 Answers1

3

After importing the React and ReactDOM scripts, import another script where you have written your component App. Assuming it is in App.js, 

<script src="App.js"></script>

Now you need to render the component in the div with id="root". I will use babel to compile but you can do without it too. So after the import write: 

<script type="text/babel">
ReactDOM.render(<App />, document.getElementById('root'));
</script>

Conclusion: Basically you need to import 4 files in this order: React, ReactDOM, Babel and your component.js files. Then you need to render the component in the div for it to work.

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="App.js"></script>

<script type="text/babel">
    ReactDOM.render(<App />, document.getElementById('root'));
</script>
PiNaKa30
  • 608
  • 7
  • 20
  • 1
    i tried this way and the react dev tools seem to detect that there is react in the page, but it does not display it. in the console i have 2 errors: Uncaught SyntaxError: Cannot use import statement outside a module Inline Babel script:2 Uncaught ReferenceError: App is not defined I tried fixing the first one with the module if i insert the type: but then i get another error - Uncaught SyntaxError: Unexpected token '<' on the jsx in the App.js file – Alex Vulchev Nov 22 '19 at 11:26
  • 1
    Just remove the import statements and export default statements from the file to correct the first error. 2nd error can probably be corrected by giving – PiNaKa30 Nov 22 '19 at 11:32
  • i am new to React how do i export default statements (My app.js has export default App) - Could the problem be coming from the fact that my Spring application is on port 8080 and react is on 3000? And on the second problem the script has type="text/babel" already - can i just remove it, you said it was not mandatory – Alex Vulchev Nov 22 '19 at 11:42
  • I don't understand what you are trying to explain. Can you post a screenshot of your code and errors? That might be helpful – PiNaKa30 Nov 23 '19 at 03:43
  • Did you eventually fix the problem? Are you running your frontend on a separate port and the spring on a separate port? – user3126529 Jul 23 '20 at 21:58