Simple React Snippet Not Working

Question

Hi There I am new to react, I am trying to run this trivial snippet but it's not working:

   

 <head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
    </head>

    <body>
      <div id="app_root"></div>
      
  <script type="text/babel">
        var Hello = React.createClass({ 
                   render: function() { 
                      return(
                      <div>Hello World!</div>
                     ); 
             } 
       }); 
        ReactDOM.render(<Hello />, document.getElementById("app_root"));
      </script>
    </body>

console do not show any error messages and I do not get any output after running the script

Try removing type="text/babel"

ninesalt
– ninesalt

2018-01-05 18:40:44 +00:00
Commented Jan 5, 2018 at 18:40 — ninesalt
– ninesalt, Commented Jan 5, 2018 at 18:40

bmceldowney · Accepted Answer · 2018-01-05 21:30:17Z

As alluded to in the other answers, it's because JSX needs babel. In your case it is simply a matter of including babel and not just the browser-polyfill:

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
</head>

<body>
    <div id="app_root"></div>
      
    <script type="text/babel">
        var Hello = React.createClass({ 
            render: function() { 
                return(
                    <div>Hello World!</div>
                ); 
            } 
       }); 

       ReactDOM.render(<Hello />, document.getElementById("app_root"));
    </script>
</body>

Andreas Rau · Accepted Answer · 2018-01-05 19:10:49Z

If you do not want to use JSX, Babel ... you have to replace the JSX definition <Hello /> by React.createElement(Hello, null, null)

I did not test the following code but in my eyes this should be correct:

   

 <head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser-polyfill.min.js"></script>
    </head>

    <body>
      <div id="app_root"></div>
      
  <script>
        var Hello = React.createClass({ 
                   render: function() { 
                   return React.createElement('div', null, `Hello World`);
             } 
       }); 
        ReactDOM.render(React.createElement(Hello, null, null), 
                        document.getElementById("app_root"));
      </script>
    </body>

Sergey Sklyar · Accepted Answer · 2018-01-05 19:44:47Z

Codepen version works fine: https://codepen.io/svitch/pen/ypPLwN

That means your problem is Babel script. I agree with @bmceldowney - polyfill version is not enough, just include the regular version from cdnjs.

Also you can write simple "Hello World" without Babel:

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.2.0/react-dom.min.js"></script>
</head>
<body>
  <div id="app_root"></div>
  <script>
    var element = React.createElement(
        'div',
        null,
        'Hello World'
    )

    ReactDOM.render(
      element,
      document.getElementById('app_root')
    );
  </script>
</body>
</html>

Collectives™ on Stack Overflow

Simple React Snippet Not Working

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related