Как отреагировать на ID с помощью хуков на странице HTML?

Question

Просто изучите все с помощью React. Компоненты класса имеют смысл, но в хуках отсутствует раздел рендеринга.

Если я добавляю React на веб-страницу (НЕ В ПРИЛОЖЕНИЕ CREATE REACT), как я могу сообщить моему хуку, где следует запускать страницу HTML?

I ' Я пытаюсь поместить код в следующее: <script src="react-hooks.js"></script>

Вот мой код подключения:

import React, { useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click Me
            </button>
        </div>
    );
}

Однако, нет места в ловушке, чтобы сказать это где-либо. Я пробовал это:

const rootElement = document.getElementById("hook-section");
ReactDOM.render(<Example />, rootElement);

, но я получаю следующую ошибку:

quote Uncaught SyntaxError: Невозможно использовать оператор импорта вне модуля> quote

Если я обновлю вызов скрипта, включив в него type="module" n, я получу следующее:

quoteДоступ к скрипту в 'file: /// C: /Users...react- hooks. js 'from origin' null 'был заблокирован политикой CORS: Запросы между источниками поддерживаются только для схем протоколов: http, data, chrome, chrome -extension, https. index. html: 44

quoteGET файл: /// C: /Users/.../react-hooks.js net :: ERR_FAILED

Классы все еще работают просто отлично, но не зацепки. Я добавляю js файлы в файл / sr c, который при запуске babel создает еще одну js версию на root.

Я отключил React-документы для этого , https://reactjs.org/docs/add-react-to-a-website.html

Шаг 1: Run npm init -y (if it fails, here’s a fix)

Шаг 2: Run npm install babel-cli@6 babel-preset-react-app@3

npx babel --watch src --out-dir . --presets react-app/prod

Answer 1

ОБНОВЛЕНИЕ

Хорошо, поэтому решение было установить модуль type = в пакете. json, но теперь у вас есть новая проблема, CORS ошибка.

Вы пытаетесь загрузить файл из локальной файловой системы. У вас есть веб-сервер, работающий на вашем локальном компьютере? Если нет, вам нужно настроить сервер basi c локально, чтобы исправить ошибку CORS. В качестве альтернативы вы можете разместить проект на хостинговой платформе, такой как GitHub.

---

Убедитесь, что у вас установлена ​​последняя версия Node. Вы можете обновить свою версию узла с помощью:

nvm install 12.16.1

nvm use 12.16.1

Флаг --experimental-modules больше не требуется. Просто выполните одно из следующих действий:

Добавьте «type»: «module» к ближайшему родительскому пакету. json. При этом все файлы. js и .m js интерпретируются как модули ES.

пакет. json

{
    "type":"module"
}

ИЛИ

Явно именуйте файлы с помощью .m * Расширение 1049 *. Все остальные файлы, такие как. js, будут интерпретироваться как Общие JS, которые используются по умолчанию, если тип не определен в пакете. json.

mv react-hooks.js react-hooks.mjs