SyntaxError: Cannot use import statement outside a module in javascript

January 18, 2023

I’m starting to learn React from zero, locally without set properly all dependencies, the first thing that I did was to use CDNs in my html file, but now I want to know how can I set my machine to import React and ReactDOM and also how can I link CSS to the file.

when I try to run the .js file I got this:

SyntaxError: Cannot use import statement outside a module

When I was using the CDNs links *ReactDOM.render* was working properly

js file

import { React } from 'react'
import { ReactDOM } from 'react-dom'

function FirstComponent(){
    return (<div>
        <Header />
        <Body1 />
        <Footer />    
    </div>)
}

html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="index.js" type="text/babel"></script>
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    
</body>
</html>

my point is, how could I run a js file with JSX and ReactDOM.render without using CDNs link in html file