score:1

Accepted answer

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

score:0

you can't write html on js file. you need to switch to jsx ( javascript xml ) file format.

rename your files to cards.js => cards.jsx and cardui.js => cardui.jsx

score:0

i think you need a babel transpiler to translate the jsx syntax.

https://babeljs.io/

for react : https://babeljs.io/docs/en/babel-preset-react


Related Query

More Query from same tag