'React not loading, It also doesn't recognize document commands

Extremely simple HTML and javascript set up for React.js not working. I followed exactly the instructions on the react website but it is not working. I would appreciate if anyone can see any error.

Below is the HTML code:

<!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>Document</title>

</head>

<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

    <!-- Load our React component. -->
    <script src="file1.js"></script>
</body>

</html>

Even the document.getElementById command is not working as shown in the error message on the screenshot below: error

Windows 10 32bit, Visual Studio Code.

javascripthtmlreactjsreact-native


Solution 1:[1]

I hope this finds you well.

You better use any of the NPM react app creating commands, to create your react app. Like npx create-react-app and it will then have the NPM modules that require you to get that root ID you are trying to get using vanilla/backbone js document.getelementbyid while that is not how the root is called. Using the boiler plate that NPM gives you, you can import react and reactdom then to manipulate that single HTML that react renders to the client.

I hope this is the answer to your question.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Borna GB

Related Questions