Uncaught ReferenceError: React is not defined

1

Whats wrong here?

image
image1421Ă—597 55.1 KB

2

Hi!

You don’t have to import React because you’re using unpkg so React and ReactDOM are already available for you :wink:

I’d also place both scripts from unpkg inside a head tag.

3

same error persist even without import statement

4

Did you save the file and reloaded the website?
Also try ctrl + F5 it clears the cache memory.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script>
      const root = document.getElementById("root");
      const element = React.createElement("h1", {
        children: "Hello world"
      });

      ReactDOM.render(element, root);
    </script>
  </body>
</html>

This code works for me perfectly fine.

If it still doesn’t work for you, here is a codesandbox that you can compare your code to.

5

yes, I am running in incognito,
my code works fine with production cdn,
when i change it to development version it gives this error.

Why does the production version doesn’t have this error?

image
image1384Ă—271 21.8 KB

6

I just noticed “browse” in your links. I think you have the wrong link, try using these ones:

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
1 Like
7

Hey there,

nice to meet you.

Please provide us a project on codesandbox with your current code, so that we can have a look at it and test stuff out.

Please do not post screenshots/images of your code or errors, instead paste it here using the “preformatted text” tool in the editor ( </> ).

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

If you need some help, let us know :slightly_smiling_face:

1 Like
8

yes it worked, thanks :slight_smile:

What is the difference between both the url(commented and uncommented) below? Is that version difference causing issue?

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>

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

  <!-- <script src="https://unpkg.com/browse/react@16.13.1/umd/react.development.js"></script>

  <script src="https://unpkg.com/browse/react-dom@16.13.1/umd/react-dom.development.js"></script> -->
9

Thanks!. I will use “preformatted text” from my next post.

1 Like