Struggling to start hello world in react

Question

It seems that many people struggle to make the initial hello world for React and I can seem to find a solution to my problem. Here is my test.js file:

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

ReactDOM.render(<h1>hello world</h1>, document.getElementById("root"));

and here is my html file:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <p>Hello world should appear below: </p>
        <div id="root"></div>
        <!--React script-->
        <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>
        <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
        <script src="test.js"></script>
    </body>
</html>

I am trying to follow the example given on this video and this the error that I am getting. I've tried adding type="modal", but it did not help. Error message

check this https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import — AchillesVan, Jan 20 '20 at 17:03

score 0 · Accepted Answer · answered Jan 20 '20 at 17:04

For sure there is an error. You are running javascript ES6 in your browser when you do this line <script src="test.js"></script>

Browsers only read javascript ES5.

You miss the webpack compilation step, using babel-loader. It's gonna make a bundle in javascript ES5 ready to be opened by browsers.

Struggling to start hello world in react

1 Answers1