CODEWITHSUNDEEP
javascriptreactjs
HVenom
HVenom

Reputation: 762

Simple React Snippet Not Working

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

Upvotes: 3

Views: 3171

Answers (3)

bmceldowney
bmceldowney

Reputation: 2305

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>

Upvotes: 3

Sergey Sklyar
Sergey Sklyar

Reputation: 1970

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>

Upvotes: 1

Andreas Rau
Andreas Rau

Reputation: 336

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>

Upvotes: 1

Related Questions