CODEWITHSUNDEEP
javascriptreactjs
Alena Chuyankova
Alena Chuyankova

Reputation: 77

React Connection

I'm taking an online free course about React and I'm having problems right after the beginning. It's not connecting, nothing is rendering but I'm copying everything word by word. I would be very thankful if you could tell me what is wrong.

<html>
    <head>
        <link rel="stylesheet" href="css.css">
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js" type="text/babel"></script>
    </body>
</html>

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

Upvotes: 0

Views: 35

Answers (1)

Taghi Khavari
Taghi Khavari

Reputation: 6582

This is not an optimal way to work and learn react, you should use packages such as create-react-app or next-js for that matter, but if you want to get it this way, here is what you need to do:

<html>
  <head>
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel" data-presets="es2015,react">
      ReactDOM.render(
        <h1>Hello, everyone!</h1>,
        document.getElementById("root")
      );
    </script>
  </body>
</html>

Upvotes: 1

Related Questions