React app is showing a blank page when I run it on localhost.
This is my code for app.js
import React from 'react';
import {Footer, Blog, Possibility, Features, WhatGPT3, Header} from './containers';
import {Navbar, Brand, CTA} from './components';
const App = () => {
return (
<div className="App">
<div className="gradient_bg">
<Navbar />
<Header />
</div>
<Brand />
<WhatGPT3 />
<Features />
<Possibility />
<CTA />
<Blog />
<Footer />
</div>
)
}
export default App
this is my code for index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
and this is my index.html file code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Help me out please.
The output should’ve been a very simple output like this
but its showing a blank page,no errors.
2
Answers
There may be some conflicts in the imports you are doing can you check for the errors in the developer tool
What are you returning in these components? If there are no errors on the developer tools too, your return statements may be empty in these components.