Reactjs code is not rendering HTML component properly-CodePudding

I am new to React and would like to ask why the following code in vs code wont render the h1 component in my html page?

When I run the html page, it just shows empty page. Anyone know what is happening?

Code as follows:

My index.html code as follows:

<!DOCTYPE html>
<html lang="en">
<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://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
</head>
<body>
    <div id="root"></div>
    <script src="index.js" type="text/babel"></script>
</body>
</html>

My index.js code as follows:

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

Whenever I run the html file, it just shows blank page rather than "Hello, everyone!". Does anyone know what is going on here?

CodePudding user response：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App /> 
  </React.StrictMode>,
  document.getElementById('root')
);

React uses JSX to render all the components. This means in simple terms, it collects all the components and converts them into an HTML page.

React renders each component as a tree. So it is not advisable to add all your code to a single component. As in your case, you tried to print Hello Everyone! on the render function without specifying the HTML tag.

App.js

import React from "react";

function App() {
  return (
    <div>
        <h1>Hello Everyone</h1> 
    </div>
);
}

export default App;

If you're wondering how I'm importing App.js and CSS files, It is called path specifying for the files. If the files are present are on the same folder then use ./filename.extension(css/js)

What is React.StrictMode?

It renders all the child components in strict mode.
This prevents certain actions being taken and throws errors/warnings if there are any
Most importantly it does a lot of checking which will be really helpful to correct all the possible errors.

You should not open the HTML page to see changes instead use any package managers to run the react code. For Example:

npm start or yarn start

All the best!