We Keep Coding

React Not Displaying HTML

I just started using react and I'm following a MERN tutorial on YouTube
I've not been having issues seen any issues except the fact that I can't see the HTML code when start npm
App.js
import React from "react";
const App = () => {
return(
<div>
<h1>App</h1>
</div>
);
}
export default App;
This is the index.js
import React from "react";
import ReactDOM from "react";
import App from "./App";
ReactDOM.render(<App />, document.getElementById('root'));

Unable to render simple react component

Following this beginner React tutorial
https://www.youtube.com/watch?v=Ke90Tje7VS0&ab_channel=ProgrammingwithMosh
Have installed React and Babel and have React working on http://localhost:3000/ (default screen)
But when I try to change the default render to a Counter it does not render, my code seem to be identical to the tutorial, any help appreciated.
No errors showing on debug console.
Have two files index.js and counter.jsx
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import "./index.css";
import App from "./App"
import registerServiceWorker from "./registerServiceWorker";
import 'bootstrap/dist/css/bootstrap.css';
import Counter from './components/counter';
ReactDom.render(<Counter />, document.getElementById("root"));
registerServiceWorker();
counter.jsx
import React, { Component } from 'react';
class Counter extends Component {
render() {
return <h1>Hello World</h1>;
}
}
export default Counter;

Create-react-app is running in dev build but blank screen in production build

I don't understand why this is happening! All good in local dev while I was working on the application. but after production build shows just a blank screen.
my App.js file
import React from "react";
import "react-perfect-scrollbar/dist/css/styles.css"
import "react-toastify/dist/ReactToastify.css"
import "react-image-lightbox/style.css"
import "bootstrap/dist/css/bootstrap.min.css"
import "react-modern-calendar-datepicker/lib/DatePicker.css";
import "./App.css"
import Routes from "./routes";
import {ToastContainer} from "react-toastify";
const App = () => {
return (
<>
<ToastContainer autoClose={3000}/>
<Routes/>
</>
);
};
export default App;
Here is my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById("root"));
In my package.json:
"homepage": "."
Can anyone help how can I fix this?

Error: Target container is not a DOM element. - with out of the box app

I am just starting to learn React. I used Create-React to generate a basic app.
App.js
import React from 'react';
const App = () => {
return (<div>Hi There!</div>);
};
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
console.log(document.getElementById("root"));
ReactDOM.render((<App/> , document.getElementById('root')));
I get an error
Error: Target container is not a DOM element.
Code Link : https://github.com/rberger247/ReactApp/blob/master/client/src/components/App.js

You need correct ReactDOM.render like this
ReactDOM.render(<App/> , document.getElementById('root'));

React Props not working, complete beginner

I'm following tutorial carefully, but I just can't pass props to function component and extract data from props object.
I think it's export-import error, but I would really appreciate nudge in the right direction.
I'm using create-react-app
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
const Greeting = (props) => <h1>Hello {props.name}</h1>;
export default Greeting;
It only prints out Hello in H1 tag, and just leaves out the rest of it.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
const element = <Greeting name="irakli" />;
ReactDOM.render(element, document.getElementById('root'));
serviceWorker.unregister();

In My index.js:
Instead of import App from './App'; replace with import Greeting from './App';

Instead of Greeting you should change to App because you are importing it as App. So
const element = <App name="John" />

in App.js use 'export default App'.