Why is there a difference in the Index.js of the current react vs the previous tutorials?

Question

I'm new to read.js, I was currently learning REACT, currently I see in the tutorials in the index.js the following declaration:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
  <React.StrictMode>
    <Routes />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

But checking the index.js from the Visual Studio Code, I have the following:

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

reportWebVitals();

What accounts for this difference? Does it correspond to a previous version? and how to go back to the previous version, since all the tutorials that currently appear, there is the coding of the first code of the index.js

I am referring specifically to the declaration of document.getElementById('root'), which is located in different ways.

I appreciate your attention, thank you in advance.

Answer 1

reportWebVitals is a function that collects data on your app's performance. Not strictly necessary, so if you want to delete the function call and the import, you can. For the other new imports, App.js should stay, and index.css is just a new stylesheet. You can decide if you want to use it or do the styling another way. More info on Web Vitals: https://create-react-app.dev/docs/measuring-performance/