Calling a .js file (react) from index.html

Question

Im having difficulty to call my js script from my index.html file. I'm guessing it's because I am not calling it like I should but I can't find the solution online.

Basically I have a index.html file

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
    </head>

    <body>
      <div id="root"></div>
        <h1>html</h1>
        <script src="script.js"></script>
        </body>
 </html>

And also a script.js file in the same folder

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(

    <h1>This is my script</h1>

);

My goal here is to run my js file which will then run my entire react app. Thanks a lot for any help you can give me.

(New to React, trying to run my app locally without having to use node.js)

If it can help, the error shown is: "Uncaught SyntaxError: Unexpected token import" — petithomme
– petithomme, Commented May 8, 2017 at 16:43
No I dumbed down the code to try to isolate the error I was having. The entire app is gonna use react-redux. — petithomme
– petithomme, Commented May 8, 2017 at 17:09

speckledcarp · Accepted Answer · 2017-05-08 16:54:54Z

3

I think you just need to use the Babel transpiler to translate from ES6 to a version of javascript your browser understands. That's the standard way of using ES6 features in the browser.

Many projects use Babel as part of their build pipeline, although you can also do the translation at runtime. The official React documentation uses Babel Standalone in their "Hello world" examples.

edited May 8, 2017 at 16:54

answered May 8, 2017 at 16:49

speckledcarp

6,4154 gold badges24 silver badges24 bronze badges

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

3 Comments

petithomme Over a year ago

Yeah I saw a solution that used babel earlier but it didn't work on my first try so I moved on. You're saying I need to install (npm install --save-dev babel-preset-env), then use it in my script code and it should work on all browsers?

speckledcarp Over a year ago

I'm not sure about that particular library (I usually use Webpack). I added a link to the in-browser version that the official React docs use in their examples. (It compiles at runtime, so it's too slow for production code).

petithomme Over a year ago

I'll give it a shot. I'll comment back with my result !

Stanislav Mayorov · Accepted Answer · 2017-05-08 16:45:59Z

2

Browsers don't support import feature.

I don't think it's posible to develop a modern app without node. If it's posible it won't be easier.

answered May 8, 2017 at 16:45

Stanislav Mayorov

4,4945 gold badges27 silver badges47 bronze badges

9 Comments

speckledcarp Over a year ago

This is only partially correct. See my answer for more details.

Stanislav Mayorov Over a year ago

@speckledcarp yeah. that's true. It was me who set first vote to your answer, but it's terrible idea to write react app in one file without node and other features.

petithomme Over a year ago

That's true, but it's the only way I've found of running my app locally (client-side only) without having to start a server or anything. If you guys have any other idea on how to do that, I'm always open to hearing them !

speckledcarp Over a year ago

@petithomme - Stanislav brings up a good point. How come you only want it to execute client side?

Stanislav Mayorov Over a year ago

@petithomme node js is used only for development then you get compiled static files!

|

Collectives™ on Stack Overflow

Calling a .js file (react) from index.html

2 Answers 2

3 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related