Не подключается js файл в html

Question

Не судите строго если проблема глупая.

Выучил основы JavaScript и продолжаю путь изучая React. Я почти всегда использую отдельно html и отдельно js файлы. Начав учить React, в туториале всегда js пишется в html файле, и нет инструкций как добавить js файл с Reactом в html.

Из базы js я знаю что подключается посредством добавления тега <script src="index.js"></script>. Узнал, что чтобы добавить React непосредственно в html, надо в head добавить скрипты с реактом, и написать <script type="text/babel". Скрипт вписанный в html файле работает нормально, однако если я пишу скрипт в js файле и добавляю его в html файл, но ни в какую не работает. Не могу продвинуться в изучении React потому что не могу понять как это исправить.

Вариант (рабочий):

index.html:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <title>React Application</title>
    </head>
    <body>
        <div id="root"></div>

        <script type="text/babel">
            const Func = () => {
                return <h1>Hello React</h1>;
            }

            ReactDOM.render(<Func />, document.getElementById("root"));
        </script>
    </body>
</html>

================================================================

Вариант с js файлом (не рабочий):

index.html:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <title>React Application</title>
    </head>
    <body>
        <div id="root"></div>

        <script src="script.js"> </script>
    </body>
</html>

script.js:

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

const Func = () => {
    return <h1>Hello react</h1>;
}

ReactDOM.render(<Func />, document.getElementById("root"));

Уточнение: читал что может быть из-за стрелочных функций, однако если это и может быть проблемой, у меня не работает ни такой формат функции, ни с словом function

Answer 1

У вас в JS скрипте используется JSX, поэтому в теге скрипт, нужно ставить type="text/babel". Это нужно потому что вы компилируете JSX уже во время работы страницы, и бабелю нужно знать что именно компилять.
React и ReactDOM у вас прилетают через скрипты в хеде и доступны в глобальной области видимости, импорты не нужны тут.
Отметили в комментариях, что желательно поставить defer на теги со скриптами, чтобы быть увереным, что к моменту выполнения script.js React и ReactDOM будут доступны.
Подозреваю, что при всём этом не взлетит, будет cross-origin ошибка. В папке с этими файлами запустите npx serve, запустится сервер, в консоли будет адрес с вашим приложением. Чтобы заработало нужно чтоб на системе была nodejs и npm.

Так должен выглядеть index.html

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
        <title>React Application</title>
    </head>
    <body>
        <div id="root"></div>

        <script type="text/babel" src="script.js"> </script>
    </body>
</html>

Так script.js

const Func = () => {
    return <h1>Hello react</h1>;
}

ReactDOM.render(<Func />, document.getElementById("root"));

БЛОГ НА HUSL

Не подключается js файл в html

Ответы (1 шт):