Hello World in React.JS does not work!

Asked

Viewed 247 times

-1

I’m trying to print a "Hello World!" on React.JS

Look at my code, it just doesn’t work:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="library/react.production.min.js"></script>
    <script src="library/react-dom.production.min.js"></script>
    <script src="library/babel.min.js"></script>
</head>
<body>

    <div id="root"></div>


    <script type="text/babel">

        var React    = require('react');
        var ReactDOM = require('react-dom');


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

    </script>

</body>
</html>

I’ve tried several times, it never works! What’s wrong there!?!?

javascript react

  • React.js is actually in that library folder?

  • Pull the CDN files, if it works it is pq the path there of the files are wrong.

  • No, no! The way is right. The . js files are stored in the library yes. Not even by CDN this React thing doesn’t work! I’ve tried so too!

1 answer

0

I think the mistake is in Babel, it is a pre-processor of javascript, I don’t believe you can use it via cdn, it must be configured internally, in the snippet of jsfiddle it is possible to enable the Babel, see working...

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

<script type="text/babel">

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

</script>

Browser other questions tagged javascript react

You are not signed in. Login or sign up in order to post.