Question posted in 
My code works on codepen but not outside of there using Visual Studio Code to create my files (which are: Quote.html, Quote.css, Quote.js all in the same folder).
When I open my html file in a browser I get a green screen, so the css file links correctly but the js file does not.
According to what I have read on Stackoverflow I am putting in the js file in the script correctly as I understand it, but something I am doing is wrong. I
HTML file code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Quote.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"></script>
<script src="Quote.js" type="text/javascript"></script>
</body>
</html>
//css file code:
body {background-color: green; color: white;}
#quote-box {
margin-top: 80px;
}
Javascript file code:
const quotes = [
{
quote: "Don't cry because it's over, smile because it happened.",
author: "Dr. Seuss"
},
{
quote: "You only live once, but if you do it right, once is enough.",
author: "Mae West"
},
{
quote: "Be yourself; everyone else is already taken.",
author: "Oscar Wilde"
},
{
quote:
"Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.",
author: "Albert Einstein"
},
{ quote: "So many books, so little time.", author: "Frank Zappa" },
{
quote: "A room without books is like a body without a soul.",
author: "Marcus Tullius Cicero"
},
{
quote:
"If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.",
author: "J.K. Rowling"
}
];
class Presentational extends React.Component {
constructor(props) {
super(props);
this.state = {
quote: "If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.", author: "J.K. Rowling"
}
this.newQuote = this.newQuote.bind(this);
this.sendTweet = this.sendTweet.bind(this);
}
newQuote() {
const randNumber = Math.floor(Math.random() * quotes.length);
this.setState({quote: quotes[randNumber].quote, author: quotes[randNumber].author})
}
sendTweet = () => {
const url = "twitter.com";
const text = this.state.quote.concat(" - ").concat(this.state.author);
window.open('http://twitter.com/share?url='+encodeURIComponent(url)+'&text='+encodeURIComponent(text), '', 'left=0,top=0,width=550,height=450,personalbar=0,toolbar=0,scrollbars=0,resizable=0');
}
render() {
return (
<div id="quote-box" class="container">
<div class="row">
<h1 class="col-md-3"></h1>
<h1 class="text-center col-md-6">Random Quotes:</h1>
<h1 class="col-md-3"></h1>
</div>
<div class="row">
<p class="col-md-3"></p>
<blockquote class="col-md-6">
<p id="text"><i class="fa fa-quote-left"></i> {this.state.quote} <i class="fa fa-quote-right"></i></p>
<cite id="author">-- {this.state.author}</cite>
</blockquote>
<p class="col-md-3"></p>
</div>
<div class="row">
<p class="col-md-3"></p>
<button id="new-quote" class="btn btn-default col-md-1" onClick={this.newQuote}>New Quote</button>
<p class="col-md-3"></p>
<a id="tweet-quote" onClick={this.sendTweet} class="text-right"><button class="btn btn-default col-md-2">Tweet Quote <i class="fa fa-twitter"></i></button></a>
<p class="col-md-3"></p>
</div>
</div>
);
}
};
ReactDOM.render(<Presentational />, document.getElementById("app"));
This is the Codepen link to what should be displayed: https://codepen.io/EOJA/pen/MRNoBq
2
Answers
Looking at you code, your project directory should be like this for it to work:
Edit: After looking into this matter for a while, i found this to help.
Not a React expert, but I believe you are missing Babel.
In case here, I was able to get example to work by inlining your Javascript, and including Babel as another script source.
Reference: Why does React require Babel and Webpack to work?
Edit:
You can avoid inlining your Javascript by referencing Quote.js as so:
<script type='text/babel' src='Quote.js'></script>and then spinning up local server and calling file that way.
Reference: How do you set up a local testing server?