React: Unexpected token '<'
При попытке запустить реакт-приложение выскакивает в консоли ошибка Unexpected token '<'. Вот package.json:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"}
Сервер:
const http = require('http');
const fs = require('fs');
const HOST = "localhost";
const PORT = 3000;
let server = http.createServer((req, res) => {
let stream;
switch (req.url) {
case '/':
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
stream = fs.createReadStream('../pages/index.html').pipe(res);
break;
case '/index.js':
res.writeHead(200, { 'Content-Type': 'application/javascript'});
stream = fs.createReadStream('../pages/index.js').pipe(res);
break;
default:
res.end("Page not found. Error 404.");
}})
server.listen(PORT, HOST, () => {
console.log(`Server started: http://${HOST}:${PORT}`);
})
index.html:
<!DOCTYPE html>
<html lang="ua">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="./index.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
index.js:
import App from "./App.js";
import React from "react";
import ReactDOM from "react-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
И App.js:
function App() {
return (
<div>
<h1>YOOO</h1>
</div>
);
}
export default App;
С проблемой вожусь уже второй день, читал про jsx, babel, но оно или не работает в моей ситуации, или я не правильно устанавливаю. Просто учусь реакту. Скачивал обучающее реакт-приложение, оно запускается как нужно и там же в index.html нет подключения скрипта. Там только пустой код и div root. Как без подключения скрипта там может быть JS код? И как решить мою проблему?
Очень прошу помочь, тк стопит меня этот момент сильно. Я мог бы использовать стандартный старт-проект реакта, но хочу написать собственный, чтобы понять как он работает. Спасибо. Надеюсь на вас...(