With React 18, a lot of new features and APIs were introduced with breaking changes from the previous versions. I have covered the common bugs and errors that occurred while initializing a React project with version 18. The depreciation of the ReactDOM.render method,

Solved - ReactDOM.render is no longer supported in React 18. Use createRoot instead.
“ReactDOM.render” method which is by default used in create-react-app or other template files is deprecated in React 18. Check out the new implementation of the index.js file.
Solved - ReactDOM.render is no longer supported in React 18. Use createRoot instead.Sharooq Salaudeen

DOM element error in createRoot() method ,

Solved - createRoot() Target container is not a DOM element
This error occurs commonly due to either passing in the wrong “id” to the “document.getElelementById()” method or by calling the React script before the div tag with “id” in the “index.html” file.
Solved - createRoot() Target container is not a DOM elementSharooq Salaudeen

and so many more. Alright, I will now jump straight to what you came here for.

The Index.js

So how should a root index.js file on a React 18 project look like? 

import React from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

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

reportWebVitals();

The above code suffices everything needed for a base React 18 project index file.

If you are using TypeScript, then there is an additional step that needs to be done to avoid the "argument not assignable" error. Read the article for the root index.ts file in the TypeScript based React 18 project.

React 18 - The root index.ts file in a TypeScript project
The boilerplate code for React 18 project’s index.ts file written in TypeScript.
React 18 - The root index.ts file in a TypeScript projectSharooq Salaudeen