CODEWITHSUNDEEP
javascripthtmlnode.jsreactjs
user14497686
user14497686

Reputation:

Error caused by rewriting the default React Javascript file

What I want to do

Following the create a new React app commands, I am trying to change the screen that is displayed in the browser when the following is executed.

I have already executed the following command and confirmed that it works, but I want to edit the HTML and Javascript files to show only Hello World!.

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

Prerequisite

In the procedure Creating a new React app, the contents of index.js are as follows.

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();

Error

It seems to be running, but nothing is displayed in the browser as white screen with nothing has shown.

What needs to be modified to display Hello World!? Screen Shot

$ npm start
Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

Code

The public and src folders under the my-app folder were deleted, leaving only public/index.html and src/index.js, and the rest were deleted.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./src/index.js" type="text/jsx"></script>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

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

Dev Env

Upvotes: 0

Views: 100

Answers (1)

Unmitigated
Unmitigated

Reputation: 89139

ReactDOM.render is no longer supported in React 18; use ReactDOM.createRoot instead.

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

Upvotes: 0

Related Questions