React Connection-CodePudding

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"));

CodePudding user response：

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>

CodePudding user response：

Maybe it happens due to the scripts you are running are not getting imported, which is not a good method to start a react project.

To start any react project you’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine. So make sure that you have downloaded &installed both of these things. If not so you can download them from here

Node here
npm here

However, you can follow any of the tutorial to have both of them. After them you can check by using the command node -v for node and npm -v for npm.

After that you can create your first react app on your local machine like this:

To create a project, run:

npx create-react-app my-app
cd my-app
npm start

After that you browser will automatically opens the page on localhost:3000