I am learning React and am stuck with the problem that the components I make, their functions don’t show any output, though there’s no error message but still I get a blank screen. But when I try to return plain text in app.js, it works fine. Here’s my code:
**Index.js **
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
App.js
import home from "./pages/home/home";
function App() {
return (<home/>)
}
export default App;
Home.js (Component)
import home from "./pages/home/home";
function App() {
return (<home/>)
}
export default App;
Kindly help me in resolving the issue
I tried to change the export by writing it with the function itself, re-run the project, reload the site a few times, but still no output.
2
Answers
In React, the component names always start with a capital Letter. If its all lowercase, like
<home/>
in your case, it will be treated as semantic HTML element and there’s no element calledhome
in html. Change it as followsReact components should be named with a capital letter. In your code, you are using home in lowercase, which might be the cause of your problem.