React Components Not Rendering

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:


<!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> 
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div> 
<script src="index.js"></script> 


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


import React from "React";
import RandomQuote from "./RandomQuote";

function App() { 
return ( 
<RandomQuote /> 
</div> ); }

export default App;
//this is in my App.js file


import React from "react";
function RandomQuote() { 
return <div>This is the random quote</div>; 
export default RandomQuote;
//this is in my RandomQuote.js file

How are you running your program? Are you just double clicking the index.html file to run it in your browser?

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

Also, minor, but what’s this for?

function Main() { 
return ( <> <App /> </>   ); 
export default Main; 

Why not just render(<App />, ...... (or just render(<RandomQuote>, ..... for that matter, but I guess you’ll want to add more stuff)

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.

1 Like

I’m dragging it to the browser. The ‘link’ is file:///C:/Users/eader/OneDrive/Documents/projects/freecodecamprandomnumber/public/index.html

Yeah, it’s needs to be run via a web server. Check out my previous comment.

Thank you so much! It actually worked! I’ve spent easily 15 hours on this minute problem that I was extremely frustrated. Thanks!

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)

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.