How to import react component in jsp page Spring boot

Question

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!

Anyway, your JSP file does not import the JavaScript with the React app. — Jozef Chocholacek
– Jozef Chocholacek, Commented Nov 21, 2019 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
– Alex Vulchev, Commented Nov 21, 2019 at 14:10
Ehm, ehm, what about reading the tutorial? Just instead the like_button.js use the file name where your ReactDOM.render(<App />, document.getElementById('root')); is. — Jozef Chocholacek
– Jozef Chocholacek, Commented Nov 21, 2019 at 14:44

PiNaKa30 · Accepted Answer · 2019-11-22 06:43:59Z

4

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/[email protected]/babel.min.js"></script>
<script src="App.js"></script>

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

answered Nov 22, 2019 at 6:43

PiNaKa30

6498 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Alex Vulchev Over a year ago

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: <script type="module" src="../../front-to-the-end/src/App.js"></script> but then i get another error - Uncaught SyntaxError: Unexpected token '<' on the jsx in the App.js file

PiNaKa30 Over a year ago

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 <script type="text/babel">. Try these and report back

Alex Vulchev Over a year ago

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

PiNaKa30 Over a year ago

I don't understand what you are trying to explain. Can you post a screenshot of your code and errors? That might be helpful

user3126529 Over a year ago

Did you eventually fix the problem? Are you running your frontend on a separate port and the spring on a separate port?

Collectives™ on Stack Overflow

How to import react component in jsp page Spring boot

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related