Reputation: 95

React in HTML Uncaught SyntaxError: Unexpected token '<'

I'm trying to work React into my HTML page which I'm trying to create dynamic cards from bootstrap, but I keep getting Here's what I have so far

service.html

<head>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="services-load"></div>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

  <script type="module" src="rjs.js"></script>
</body>

rjs.js

const e = React.createElement;
import Card from "./services/Cards";

const domContainer = document.querySelector('#services-load');
ReactDOM.render(e(<Card />), domContainer);

Cards.js

import Card from "./CardUI";
import img1 from "../assets/imgs/services/botox.jpg";
import img2 from "../assets/imgs/services/lipo.jpg";
import img3 from "../assets/imgs/services/prp.jpg";

const Card = props => {
  return (
    <div className="container aesthetic-body">
      <div className="row">
        <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <Card imgsrc={img1}/>
        </div>
        <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <Card imgsrc={img2}/>
        </div>
        <div className="col-lg-4 col-md-4 col-sm-4 col-xs-4">
          <Card imgsrc={img3}/>
        </div>
      </div>
    </div>
  );
}

export default Card;

CardUI.js

const Card = props => {
  return (
    <div className="card">
        <a href="">
          <div className="card-header">BOTOX / FILLERS</div>
          <img className="card-img-top" src={props.imgsrc} alt={"Card image cap"}/>
        </a>
      </div>
  );
}

export default Card;

Update: Here's My file structure

Upvotes: 0

Answers (3)

tmhao2005

Reputation: 17474

In order to work with import, you need to add a plugin for transforming transform-es2015-modules-umd by specify the plugins on <script />.

Let's imagine you have a following structure:

public
 - foo.js
 - index.js
 - index.html

foo.js exports an simple component like this:

export default () => <div>Foo</div>;

index.js is all about importing and boostrap:

import Foo from "foo";

ReactDOM.render(<Foo />, document.getElementById("root"));

Finally, register modules in index.html:

<script
  data-plugins="transform-es2015-modules-umd"
  type="text/babel"
  src="./foo.js"
></script>
<script
  data-plugins="transform-es2015-modules-umd"
  type="text/babel"
  src="./index.js"
></script>
</body>

Here is full code in index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script
      src="https://unpkg.com/react@16/umd/react.production.min.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
      crossorigin
    ></script>

    <title>React App</title>
  </head>

  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-es2015-modules-umd"
      type="text/babel"
      src="./foo.js"
    ></script>
    <script
      data-plugins="transform-es2015-modules-umd"
      type="text/babel"
      src="./index.js"
    ></script>
  </body>
</html>

Also the codesanbox link: https://codesandbox.io/s/quizzical-bird-vwn5t?file=/public/index.js

Upvotes: 1