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
