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!? 
$ 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
- node v18.15.0
- react 18.2.0
