如何将工作 HTML、CSS、Javascript 代码从 Codepen 传输到 Visual Studio 代码和浏览器

Question

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).我的代码在 codepen 上工作，但不在那里使用 Visual Studio Code 创建我的文件（它们是： Quote.html 、 Quote.css 、 Quote.js都在同一个文件夹中）。

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.当我在浏览器中打开我的html文件时，我得到一个绿屏，所以css文件链接正确，但js文件没有。

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.根据我在 Stackoverflow 上阅读的内容，我按照我的理解正确地将js文件放入脚本中，但是我做的事情是错误的。 I一世

HTML file code: HTML文件代码：

    <!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: Javascript文件代码：

    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这是应显示内容的 Codepen 链接： https ://codepen.io/EOJA/pen/MRNoBq

Answer 1

Looking at you code, your project directory should be like this for it to work:看看你的代码，你的项目目录应该是这样的：

Project_Folder
| index.html
| Quote.css
| Quote.js

Edit : After looking into this matter for a while, i found this to help.编辑：在研究这个问题一段时间后，我发现这有帮助。

 <!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"> <style> body { background-color: green; color: white; } #quote-box { margin-top: 80px; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script> </head> <body> <div id="app"></div> <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> <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 type='text/babel'> // !! IMPORTANT README: // You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 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: "JK 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: "JK 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" href="http://twitter.com/intent/tweet" 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")); </script> </body> </html>

Answer 2

Not a React expert, but I believe you are missing Babel.不是 React 专家，但我相信你错过了 Babel。

In case here, I was able to get example to work by inlining your Javascript, and including Babel as another script source.在这种情况下，我能够通过内联您的 Javascript 并将 Babel 作为另一个脚本源来获取示例。

<!-- Bottom of index.html -->   
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
... Your JS code
<script>

Reference: Why does React require Babel and Webpack to work?参考：为什么 React 需要 Babel 和 Webpack 才能工作？

Edit:编辑：

You can avoid inlining your Javascript by referencing Quote.js as so:您可以通过引用 Quote.js 来避免内联您的 Javascript，如下所示：

<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?参考：如何搭建本地测试服务器？

如何将工作 HTML、CSS、Javascript 代码从 Codepen 传输到 Visual Studio 代码和浏览器

问题描述

2 个解决方案

解决方案1
0 已采纳 2019-05-03 02:18:44

解决方案2
0 2019-05-03 02:52:19

如何将工作 HTML、CSS、Javascript 代码从 Codepen 传输到 Visual Studio 代码和浏览器

问题描述

2 个解决方案

解决方案1 0 已采纳 2019-05-03 02:18:44

解决方案2 0 2019-05-03 02:52:19

解决方案1
0 已采纳 2019-05-03 02:18:44

解决方案2
0 2019-05-03 02:52:19