React component rendered correctly in codepen/live server but not when opening html directly

1

I finished the Random Quote Machine challenge which I made in Visual Studio Code with the live server extension and after it I uploaded the code to a codepen in order to fulfill the challenge. In both, live server and codepen, works and looks as expected but when I open the index.html from my folder (see both images below) the webpage is displayed without the react component:

image

image
image1211×577 7.7 KB

I’ve read this thread and tried removing the twiter href in the anchor tag but the problem persisted.

Any help (and feedback on the project as well, btw) would be appreciated, sorry if it’s a silly issue.

2

I’m also working on the random quote machine, and I can’t get react to work on it. Very frustrating.

3

Have you managed to make it work in codepen at least? Maybe I could help you w/that

1 Like
4

It wasn’t throwing any errors. The react component just wouldn’t render on the webpage. I created a help post on this that has my code.

//import React from 'react';
//import ReactDom from 'react-dom';
class RandomQuote extends React.component {
  constructor(props){
    super(props);
    /*this.state: {
 
    }*/
  }
  
  render(){
    return (
    <div id = "quote-box">
        <h1>Hey hey!</h1>
    </div>
    );        
    
  }
};
5

And I included the URL for react and react-dom in the pen settings, and Javascript is set to Babel, so I don’t know what’s not working.

I also have

ReactDOM.render should send it to element id “quote”
6

I see. I’ve tried rendering a simple component like that one and evidently the issue lies in something codepen/live server has inherently that our scripts lack.

1 Like
7

I’ve copied and pasted URL from other people’s codepen. The URL for react seems to be different from the one you find when searching for it in the pen setting

This one seems to work:
//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js

but not this one:

https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js

8

Did that work for you?

9

Yes, the version 13 link works. Don’t know why the version 16.8.6 doesn’t work.

10

Great! Sadly neither of those works for my project.

11

This is all a mystery to me as well. The FreeCodeCamp course on React doesn’t teach us how to set up React. I mean what’s the point of learning the rest of the stuff if I’m stuck on step one?

Anyway, I was looking at this codepen:

https://codepen.io/lbain/pen/ENpzBZ

to try and figure how how this person got react to work. For me, I boiled it down to the URL link because the 16.8.8 link doesn’t work in this guy’s codepen either. For you, I’m not sure. Have you tried the URL link I suggested on a simple component?

12

Yes, but it didn’t work either. I’ve figured out that the error has something to do with this because when opening html files in the browser I’m getting the “Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///C:/Users/Lucas/Desktop/show/script.js. (Reason: CORS request not http)” error.

13

So your browser is enforcing CORS (Cross Origin Resource Sharing) and preventing you from loading your .js file.

CORS is basically a system that says any requests for files and/or data from another origin requires permission from that origin before allowing you to use it. These permissions are usually passed in the HTTP request headers.

Your browser is telling you that one of the policies in CORS is that it won’t load resources that come from file:/// urls which is why it isn’t working from the folder view. This is a common problem faced with single page applications.

14

Thanks man! Is there anyway this could be solved if I were to setup a real webpage with my project folder?

15

Yep, A simple webserver like express.js (or whatever you’re comfortable using) will send the necessary CORS headers your browser is looking for.

16

And is this learned in FreeCodeCamp or should I look for external sources?

17

I’m still relatively new here, so I don’t know any of the specific courses.
Here is a link to the documenation:

This gets it installed in your project:
https://expressjs.com/en/starter/installing.html

This is a simple starter project:
https://expressjs.com/en/starter/hello-world.html

Hopefully someone else can come along and suggest a course that will teach you the in’s and out’s of working with express but this should get you started.