How to transfer working html, css, javascript code from codepen to Visual Studio Code and browser : 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;
}

// js 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