CODEWITHSUNDEEP
javascripthtmlreactjs
Dicky Ho
Dicky Ho

Reputation: 45

Unable to run the Hello World example of ReactJS

I am a newbie of ReactJS and is learning it through a Hello World example as shown below:

abc.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <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> 
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script src="abc.js"/>
  </body>
</html>

abc.js

const element = <h1>Hello, world</h1>;
ReactDOM.render(
   element, 
   document.getElementById('root')
);

I expect Hello, world should be shown, but instead, an empty page is rendered. I have already put the abc.html and abc.js in the same folder. Did I miss anything or do anything wrong?

Upvotes: 0

Views: 97

Answers (3)

Mahesh More
Mahesh More

Reputation: 855

I have just copy pasted your code and it's working fine. Just one correction where you don't need to add your abc.js file in html file like you have done in your code.

<script src="abc.js"/>

Can you please verify what is your entry point because by default index.js/index.tsx file is your entry point in react. Please try something below and it should work properly.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <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> 
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

const element = <h1>Hello, world</h1>;
ReactDOM.render(
   element, 
   document.getElementById('root')
);

Upvotes: 1

wmp224
wmp224

Reputation: 447

What you have seems to work - I just copy and pasted into a codepen. It's possible that your browser is blocking the react script or something

Maybe try it in a different browser?

Upvotes: 0

Pablo
Pablo

Reputation: 6058

When using the Babel in-browser compiler you must include your code inline and set the script tag type to text/babel:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <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> 
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const element = <h1>Hello, world</h1>;
      ReactDOM.render(
        element, 
        document.getElementById('root')
      );
    </script>
  </body>
</html>

Upvotes: 0

Related Questions