We Keep Coding

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?

problem with compiling a react app for the first time

I am a beginner in react js, I have a problem with compiling a react app, can someone show me the problem, please
index.js:
import React from 'React'
import ReactDOM from 'react-dom';
import Myinfo from 'Myinfo.js';
ReactDOM.render(<Myinfo />, document.getElementById('root'));
Myinfo:
import React from "react";
function Myinfo() {
return (
<div >
<p>jjlkjkkkjkkj</p>
<p>jjlkjkkkjkkj</p>
<p>jjlkjkkkjkkj</p>
<p>jjlkjkkkjkkj</p>
</div>
);
}
export default Myinfo;
Here is the file structure of the project.
C:
-react js:
-reactjs:
-src:
-Myinfo.js
-index.js

Since Myinfo.js is in the same directory as your react app then try this
import Myinfo from './Myinfo.js';

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'.

React: Cannot Find module './WebpackMissingModule'

I'm currently giving my first steps on React and I'm having some issues when trying to export components.
My current index.js file is as following:
import React from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';
const API_KEY = '...';
//Create a new component. It should output some html
const App = function(){
return <div>
<SearchBar />
</div>;
}
ReactDOM.render(<App />, document.querySelector('.container'));
And my search_bar.js file:
import React from 'react';
const SearchBar = function(){
return <input />;
};
export default SearchBar;
My current file structure may be seen in the following image:
The problem is that I'm not being able to import the SearchBar element. I'm having the error that can be seen on the image:
Cannot Find module './WebpackMissingModule'
Any idea on what may be causing this issue?

I was baffled by this too, but refreshing the browser fixed for me.