React component in JS file -- ReactDOM to be used in script in HTML file

Question

How to import a component in a script in HTML file?
What are the modifications to be done to make the following work?
And should the Babel libraries be added to the HTML file? (Webpack and React are already installed)

In car.js

class Car extends React.Component {
   render() { return (<p>nice car</p>) }}

In page.html

...
<script type="text/babel">
   import Car from "static/car.js"      //<---------????????

   ReactDOM.render(<Car />, document.querySelector("#root"));
</script>

Mohammad Ali Rony · Accepted Answer · 2021-03-08 13:29:40Z

2

do not need to import Car from "static/car.js" it will works in JS file.

for HTML need refarance like <script type="text/babel" src="static/car.js"></script>

<script src="static/car.js" type="text/babel"></script>
<script type="text/babel">
  ReactDOM.render(<Car />, document.querySelector("#root"));
</script>

edited Mar 8, 2021 at 13:29

answered Mar 8, 2021 at 12:16

Mohammad Ali Rony

4,9413 gold badges23 silver badges36 bronze badges

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

2 Comments

The S. Over a year ago

It doesn't work. it gives errors: react is not defined, Unexpected token '<' , Car is not defined.

Mohammad Ali Rony Over a year ago

@Silver please add ` type="text/babel"` in script tag

Collectives™ on Stack Overflow

React component in JS file -- ReactDOM to be used in script in HTML file

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related