如何顯示的是在一個陣營的JavaScript文件，或通過陣營

我不亦樂乎試過幾件事情，並看到它的工作進行解釋，而一個文件conceptionaly這裏How to call and form a React.js function from HTML所有我從這個文件生成我的HTML得到的是如何顯示的是在一個陣營的JavaScript文件，或通過陣營

<!DOCTYPE html> 
<html> 

<head> 


    <meta charset="UTF-8"> 
    <meta name="description" content="BonApp"> 
    <meta name="keywords" content="HTML,CSS,JavaScript"> 
    <!-- <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> --> 
    <link href="index.css" type="text/css" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'> 
    <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script> 
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" /> 
    <link rel="stylesheet" type="text/css" href="slick.css" /> 
    <link rel="stylesheet" type="text/css" href="slick-theme.css" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-with-addons.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script> 
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script> 
    <script src="https://scontent.xx.fbcdn.net/t39.3284-6/13591530_1796350410598576_924751100_n.js"></script> 
    <script src="https://scontent.xx.fbcdn.net/t39.3284-6/13591520_511026312439094_2118166596_n.js"></script> 

    <title>BonApp</title> 
</head> 

<body> 
    <div id="nav"></div> 
    <div id="Gallery"></div> 
    <div id="whatsnew"></div> 
    <div id="advertiseApp"></div> 
    <div id="events"></div> 
    <div id="footer"></div> 
</body> 

<script type="text/javascript"> 
    $('.autoplay').slick({ 
     slidesToShow: 2 
     , slidesToScroll: 1 
     , autoplay: true 
     , autoplaySpeed: 2000 
    , }); 
</script> 

</html>

這正是我放入它的意思，這意味着它不是從JavaScript文件調用的（這與前面提到的堆棧溢出消息中提到的相同）我希望答案在以下範圍內：「我有錯誤版本的巴別「。

所有幫助表示讚賞！

編輯：這裏是JS代碼的副本只是爲了確保。

var NavBar = React.createClass({ 
    render: function() { 
    return (
     /* NavBar */ 
     <div className="dark_bg_color"> 
     <img src="logo.png" /> 
     <div className="table_center"> 
      <div> 
      <ul> 
       <li>daily specials</li> 
       <li>gift gallery</li> 
       <li>events</li> 
       <li><i className="fa fa-search" />&nbsp;search</li> 
      </ul> 
      </div> 
     </div> 
     <div className="right_nav"> 
      <div className="table_center"> 
      <div> 
       <button type="button">Sign Up</button> 
       <button type="button">Log In</button> 
       <div className="vertical-line">&nbsp;</div> 
       <button type="button">Cart</button> 
      </div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(<NavBar />, document.getElementById('nav')); 

var Gallery = React.createClass({ 
    render: function() { 
    return (
     /* Gallery */ 
     <div > 
     <div align="middle"> 
      <div id="head"> 
      <img id="pic" align="middle" max-width="100%" src="title_pic.png" /> 
      <div align="left" className="big"> 
       <div> 
       <span>Dine with the Best</span> 
       <div className="words"> 
        <span>BonApp connects you with limited-time, exclusive meals and events offered by the city’s best chefs.<br /><br /><br /><button type="button">JOIN BONAPP</button></span> 
       </div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(<Gallery />, document.getElementById("Gallery")); 

var WhatsNew = React.createClass({ 
    render: function() { 
    return (
     <div className="dark_bg_color"> 
     <h2 style={{marginBottom: 30}}> 
      <span>What's New</span> 
     </h2> 
     <div className="autoplay"> 
      <img src="whatsnew0.png" /> 
      <img src="whatsnew1.png" /> 
      <img src="whatsnew0.png" /> 
     </div> 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(<WhatsNew />, document.getElementById("whatsnew")); 

var BonEvents = React.createClass({ 
    render: function() { 
    return (
     /* Events */ 
     <div id="events" className="dark_bg_color"> 
     <div className="box"> 
      <div className="box-text"> 
      <div className="horizontal-line" /> 
      <div><div className="horizontal-line" /><p>LES BON CADEAUX</p></div> 
      <div className="horizontal-line" /> 
      </div> 
     </div> 
     <h2> 
      <span>Bon Events</span> 
     </h2> 
     <div> 
     </div> 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(<BonEvents />, document.getElementById("events")); 

var IOS = React.createClass({ 
    render: function() { 
    /* IOS */ 
    return (
     <div > 
     <h2> 
      <span /> 
     </h2> 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(<IOS />, document.getElementById("advertiseApp")); 

var Footer = React.createClass({ 
    render: function() { 
    return (
     /* Footer */ 
     <div> 
     <div className="footer_center"> 
      <div> 
      <ul> 
       <li>ABOUT</li> 
       <li>PRESS</li> 
       <li>CONTACT</li> 
       <li>SUPPORT</li> 
       <li>BONAPP FOR RESTAURANTEURS</li> 
      </ul> 
      </div> 
     </div> 
     <div className="legal_center"> 
      <div> 
      <ul> 
       <li>Copyright © 2016 BonApp Dining Inc.</li> 
       <li>Privacy Policy</li> 
       <li>Legal</li> 
      </ul> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
}); 
ReactDOM.render(<Footer />, document.getElementById("footer"));

編輯2：

陣營CLI輸出：

"use strict"; 

var NavBar = React.createClass({ 
    displayName: "NavBar", 

    render: function render() { 
    return(
     /* NavBar */ 
     React.createElement(
     "div", 
     { className: "dark_bg_color" }, 
     React.createElement("img", { src: "logo.png" }), 
     React.createElement(
      "div", 
      { className: "table_center" }, 
      React.createElement(
      "div", 
      null, 
      React.createElement(
       "ul", 
       null, 
       React.createElement(
       "li", 
       null, 
       "daily specials" 
      ), 
       React.createElement(
       "li", 
       null, 
       "gift gallery" 
      ), 
       React.createElement(
       "li", 
       null, 
       "events" 
      ), 
       React.createElement(
       "li", 
       null, 
       React.createElement("i", { className: "fa fa-search" }), 
       " search" 
      ) 
      ) 
     ) 
     ), 
     React.createElement(
      "div", 
      { className: "right_nav" }, 
      React.createElement(
      "div", 
      { className: "table_center" }, 
      React.createElement(
       "div", 
       null, 
       React.createElement(
       "button", 
       { type: "button" }, 
       "Sign Up" 
      ), 
       React.createElement(
       "button", 
       { type: "button" }, 
       "Log In" 
      ), 
       React.createElement(
       "div", 
       { className: "vertical-line" }, 
       " " 
      ), 
       React.createElement(
       "button", 
       { type: "button" }, 
       "Cart" 
      ) 
      ) 
     ) 
     ) 
    ) 
    ); 
    } 
}); 
ReactDOM.render(React.createElement(NavBar, null), document.getElementById('nav')); 

var Gallery = React.createClass({ 
    displayName: "Gallery", 

    render: function render() { 
    return(
     /* Gallery */ 
     React.createElement(
     "div", 
     null, 
     React.createElement(
      "div", 
      { align: "middle" }, 
      React.createElement(
      "div", 
      { id: "head" }, 
      React.createElement("img", { id: "pic", align: "middle", "max-width": "100%", src: "title_pic.png" }), 
      React.createElement(
       "div", 
       { align: "left", className: "big" }, 
       React.createElement(
       "div", 
       null, 
       React.createElement(
        "span", 
        null, 
        "Dine with the Best" 
       ), 
       React.createElement(
        "div", 
        { className: "words" }, 
        React.createElement(
        "span", 
        null, 
        "BonApp connects you with limited-time, exclusive meals and events offered by the city’s best chefs.", 
        React.createElement("br", null), 
        React.createElement("br", null), 
        React.createElement("br", null), 
        React.createElement(
         "button", 
         { type: "button" }, 
         "JOIN BONAPP" 
        ) 
       ) 
       ) 
      ) 
      ) 
     ) 
     ) 
    ) 
    ); 
    } 
}); 
ReactDOM.render(React.createElement(Gallery, null), document.getElementById("Gallery")); 

var WhatsNew = React.createClass({ 
    displayName: "WhatsNew", 

    render: function render() { 
    return React.createElement(
     "div", 
     { className: "dark_bg_color" }, 
     React.createElement(
     "h2", 
     { style: { marginBottom: 30 } }, 
     React.createElement(
      "span", 
      null, 
      "What's New" 
     ) 
    ), 
     React.createElement(
     "div", 
     { className: "autoplay" }, 
     React.createElement("img", { src: "whatsnew0.png" }), 
     React.createElement("img", { src: "whatsnew1.png" }), 
     React.createElement("img", { src: "whatsnew0.png" }) 
    ) 
    ); 
    } 
}); 
ReactDOM.render(React.createElement(WhatsNew, null), document.getElementById("whatsnew")); 

var BonEvents = React.createClass({ 
    displayName: "BonEvents", 

    render: function render() { 
    return(
     /* Events */ 
     React.createElement(
     "div", 
     { id: "events", className: "dark_bg_color" }, 
     React.createElement(
      "div", 
      { className: "box" }, 
      React.createElement(
      "div", 
      { className: "box-text" }, 
      React.createElement("div", { className: "horizontal-line" }), 
      React.createElement(
       "div", 
       null, 
       React.createElement("div", { className: "horizontal-line" }), 
       React.createElement(
       "p", 
       null, 
       "LES BON CADEAUX" 
      ) 
      ), 
      React.createElement("div", { className: "horizontal-line" }) 
     ) 
     ), 
     React.createElement(
      "h2", 
      null, 
      React.createElement(
      "span", 
      null, 
      "Bon Events" 
     ) 
     ), 
     React.createElement("div", null) 
    ) 
    ); 
    } 
}); 
ReactDOM.render(React.createElement(BonEvents, null), document.getElementById("events")); 

var IOS = React.createClass({ 
    displayName: "IOS", 

    render: function render() { 
    /* IOS */ 
    return React.createElement(
     "div", 
     null, 
     React.createElement(
     "h2", 
     null, 
     React.createElement("span", null) 
    ) 
    ); 
    } 
}); 
ReactDOM.render(React.createElement(IOS, null), document.getElementById("advertiseApp")); 

var Footer = React.createClass({ 
    displayName: "Footer", 

    render: function render() { 
    return(
     /* Footer */ 
     React.createElement(
     "div", 
     null, 
     React.createElement(
      "div", 
      { className: "footer_center" }, 
      React.createElement(
      "div", 
      null, 
      React.createElement(
       "ul", 
       null, 
       React.createElement(
       "li", 
       null, 
       "ABOUT" 
      ), 
       React.createElement(
       "li", 
       null, 
       "PRESS" 
      ), 
       React.createElement(
       "li", 
       null, 
       "CONTACT" 
      ), 
       React.createElement(
       "li", 
       null, 
       "SUPPORT" 
      ), 
       React.createElement(
       "li", 
       null, 
       "BONAPP FOR RESTAURANTEURS" 
      ) 
      ) 
     ) 
     ), 
     React.createElement(
      "div", 
      { className: "legal_center" }, 
      React.createElement(
      "div", 
      null, 
      React.createElement(
       "ul", 
       null, 
       React.createElement(
       "li", 
       null, 
       "Copyright © 2016 BonApp Dining Inc." 
      ), 
       React.createElement(
       "li", 
       null, 
       "Privacy Policy" 
      ), 
       React.createElement(
       "li", 
       null, 
       "Legal" 
      ) 
      ) 
     ) 
     ) 
    ) 
    ); 
    } 
}); 
ReactDOM.render(React.createElement(Footer, null), document.getElementById("footer"));

來源

2016-07-29 Jake Orben

也許我只是沒有看到它，但在HTML標記中，你包括上面列出的Javascript代碼？ – Kryten

不，它保存在它自己的單獨的js文件中 –

應該將反應文件轉換幷包含在腳本標記中。 – vijayst

爲了使客戶的瀏覽器中執行JavaScript代碼，它必須由客戶端瀏覽器請求。這意味着把一個<script>標記HTML文檔中加載文件，是這樣的：

<script src="https://example.com/my-react-code.js"></script>

不這樣做，你的代碼只是坐在您的服務器上無所作爲。

但還有一個第一步：正如@Vijay在評論中指出的，你的代碼需要被轉發。那是什麼意思？那麼，看看你的代碼：它是用EcmaScript 2015編寫的，它是近期瀏覽器不支持的Javascript方言。爲了確保您的代碼可以在大多數瀏覽器上運行，您需要將它從新的方言轉換爲瀏覽器可以執行的內容。這被稱爲運輸。 Babel是一個可以做到這一點的軟件包;還有其他的。如果您決定使用Babel，請查看setup page，其中提供了有關如何在各種不同環境中使用Babel的詳細說明。

編輯

如何使用通天transpile你的代碼是一個大問題。我會給出一個非常簡單的例子。

想象一下，您已將上面給出的代碼保存在一個名爲src/my-react-code.js的文件中，並且您想將其轉換爲名爲dist/my-react-code.js的新文件。想象一下，你已經用npm install --save-dev babel-cli在本地安裝了Babel。爲了transpile源文件，這樣做：

./node_modules/.bin/babel src -d dist

這將會把你的源文件，transpile它，並將結果保存在dist/my-react-code.js（即它的新ES2015語法老JavaScript語法翻譯）。

但是，這將無法正常工作給這個問題的信息&答案。還有一些你需要的東西：

你的源文件需要導入React包，在頂部有一行如import React from 'react';;可能還有其他需要導入的軟件包。

Babel可以用許多不同的方式進行配置。你需要包含一些額外的Babel插件。關閉我的頭頂，我想你需要做npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-0。這些軟件包告訴Babel需要什麼類型的源代碼 - 在你的情況下，ES2015代碼中嵌入了React組件（第0階段軟件包包括一組作爲ES2015標準特定部分的軟件包）。您還需要創建一個包含.babelrc配置文件：

{ 
    "presets": ["es2015", "react", "stage-0"] 
}

這告訴巴貝爾要使用的插件。

Babel的命令行使用記錄在https://babeljs.io/docs/setup/。從頂部的按鈕中選擇您的環境 - 我選擇了第一個CLI。

一旦你成功的翻譯，看看原始源代碼和最終代碼之間的區別 - 你會發現Babel添加了很多樣板代碼，基本上重寫了大多數不可用的功能使用「舊」Javascript的瀏覽器。

如上所述，配置Babel的方法有很多種。我給出了最簡單，但也是最麻煩的。每當您更改源代碼時，您都需要重新編譯它，以便您的服務器將其發送給客戶端。有很多工具可以將所有Javascript綁定在一起（browserify，webpack等），自動化構建過程（咕嚕咕嚕，吞嚥等），測試你的代碼（摩卡，笑話等）。你應該花一些時間想象你的理想工作流程和環境是什麼，看看你是否可以使用這些工具把它們放在一起。

來源

2016-07-29 04:10:41 Kryten

你介意給一個小例子，因爲當我使用babel的時候，我通過npm來安裝它，並且關於如何使用編譯器的安裝頁面上的唯一註釋是require（「babel-core」）。transform（「代碼「，選項）;'，這顯然是JavaScript，這是否意味着我必須在某處使用腳本標記，如果是，在哪裏？我對這些相對簡單的問題表示歉意，但是，我對網絡開發和閱讀障礙有所瞭解，因此，挑選新的語言和格式可能很困難。 –

我也想注意，在這個例子中：http://stackoverflow.com/questions/38414139/how-to-call-and-form-a-react-js-function-from-html/38526630#38526630有可能在不同的文件中顯示這些數據，而不是使用Babel或我可以檢測到的任何其他編譯器。 –

關於[其他答案]（http://stackoverflow.com/a/38526630/2008384）：該代碼正在SO的網頁上下文中運行。我不是這樣的開發者，所以我不知道他們的Javascript是如何工作的。我懷疑他們正在加載Babel polyfill，這是一個可以「即時」運輸代碼的軟件包。我會編輯答案，在Babel上包含一些*非常簡短的註釋。 – Kryten

如何顯示的是在一個陣營的JavaScript文件，或通過陣營

回答

相關問題