JavaScript

I started learning about React and I have problem with importing the library.

index.html:

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

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

script.js file:

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

ReactDOM.render(<h1> Hello World </h1>, document.getElementById("Root"))

JavaScript
 
import React from "react";
import ReactDOM from "react-dom";
​
ReactDOM.render(<h1> Hello World </h1>, document.getElementById("Root"))
​

Error I get when im opening the index file:

Cannot GET /ReactDOM%20%5E&%20JSX/index.html

I imported those 2 scripts from React site.

Answer

I noticed that the id on <div id="root"></div> is lowercase but in your JS script you’re selecting document.getElementById("Root") an uppercase id. document.getElementById is case sensitive, so your code will probably not render correctly.

Cant import React

Advertisement

Answer