I’m wanting the text from my Random Quote Component to show up on my browser. Nothing’s changed since the last time. I’ve put my ‘main’ component in a index.js file and have imported everything that’s necessary. I’ve been stuck on just simply rendering a component for 15 hours now, nothing is working.
When I look at the console, it says the following. I’m not sure what files it’s referring to (it doesn’t show any file):
GET file:///C:/Users/eader/OneDrive/Documents/projects/freecodecamprandomnumber/public/index.js net::ERR_FILE_NOT_FOUND` `%PUBLIC_URL%/favicon.ico:1 `
`GET file:///C:/Users/eader/OneDrive/Documents/projects/freecodecamprandomnumber/public/%PUBLIC_URL%/favicon.ico net::ERR_FILE_NOT_FOUND
Here’s my code:
HTML:
<!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>
<script src="index.js"></script>
</body>
</html>
Index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
function Main() {
return ( <> <App /> </> );
}
export default Main;
ReactDOM.render(<Main />, document.getElementById("root"));//this is in my index.js file
App.js
import React from "React";
import RandomQuote from "./RandomQuote";
function App() {
return (
<div>
<RandomQuote />
</div> ); }
export default App;
//this is in my App.js file
RandomQuote.js
import React from "react";
function RandomQuote() {
return <div>This is the random quote</div>;
}
export default RandomQuote;
//this is in my RandomQuote.js file
You’ll always get that warning if you haven’t got a favicon, the browser will always try to get one and if there isn’t one, that’s what it says. You can ignore it or add a favicon (there are a million and one favicon generators if you Google), but don’t worry about it.
Without seeing how you have this set up, it’s very difficult to tell what’s wrong; the code should render fine afaics. If you’re just doing what @colinthornton says then it won’t, but I’d expect you to get syntax errors if that was the case
The reason I pointed that out is because the error’s showing that it’s trying to find the icons via the file protocol.
@ErcDz (I’m assuming you made this project via create-react-app, if not, then ignore this ) You need to run your project using node. If you use your command line and go to the project directory with cd, then you can run the development server via the npm start command. It’s all explained here: GitHub - facebook/create-react-app: Set up a modern web app by running one command.
Ahha, skim read the error as seen it so much, and it just didn’t click at all (apologies @ErcDz re info on the error , the error most often isn’t important but in this case was)