CODEWITHSUNDEEP
javascriptreactjs
erysvh
erysvh

Reputation: 19

Cant import React

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>

script.js file:

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.

Upvotes: 0

Views: 181

Answers (2)

ThanosK
ThanosK

Reputation: 51

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.

Upvotes: 1

Julian Kleine
Julian Kleine

Reputation: 1547

You need to spin up a server running on localhost, that can serve the files. Right now a GET request to your localhost does not work, because there is no server running that hosts the files. You only opened the file with your browser.

Check out create react app to get started with a good setup.

If you want to manually serve files. Check out the serve package. You can quickly test this by running

npx serve folder-name

Upvotes: 2

Related Questions