I just started out learning react. I don't want to use node npx create-react-app method so created a minimal react using react and babel CDNs. It works completely fine but when I try to split code into different JS files, it throws error.
When all three components are are in index.js, it works fine. When I move into other file and import, it shows error. I searched online, got that import/export are not supported directly in browsers but can't really get how to solve it.
Some suggest using requireJS. I dont know to use that.
In react website, it's given to include babel dynamic import plugin, I tried that too but didn't work.
If I use type= "module" in script tag then it throws error: " Unexpected token '<'"
I am using React 18.
I have included the snippets. Spent a lot of time on it. Any advice is appreciated. Thanks
HTML
<!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">
<title>A Minimal React App</title>
<link rel="stylesheet" href="index.css">
<!-- <script src="https://cdn.jsdelivr.net/npm/@babel/plugin-syntax-dynamic-import@7.8.3/lib/index.min.js"></script> -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
<script src="index.js" type="text/babel"></script>
<script src="Header.js" type="text/babel"></script>
</body>
</html>index.js File
import Header from 'Header';
const root= ReactDOM.createRoot(
document.getElementById("root"));
root.render(<Page/>);
function Page() {
return(
<div>
<Header/>
<MainContent/>
<Footer/>
</div>
)
}
function Footer() {
return(
<footer className='footer'>
<small>Footer using React 18; createRoot API</small>
</footer>
)
}
function MainContent() {
return(
<div>
<h1>Minimal React-App using React CDNs</h1>
<ol className="sa">
............
</ol>
</div>
)
}Header JS file
function Header() {
return(
<header>
<nav className='nav'>
<img className='logo' src="download.png"></img>
</nav>
</header>
)
};
export default Header;I have attached the error screenshot.