javascript - 如何显示 React JavaScript 文件中的内容，或者更确切地说是要由 React 解释的文件

标签 javascript html css reactjs

我 hive 尝试了几件事，并看到它在概念上在这里工作 How to call and form a React.js function from HTML我从这个文件生成的 HTML 中得到的只是 

<!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 文件调用，(这与前面提到的堆栈溢出消息中提到的相同)我希望答案落在以下范围内:“我有错误的 Babel 版本”。

感谢所有帮助!!!

编辑:这里是 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:

react 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"));

最佳答案

为了让客户端的浏览器执行您的 javascript 代码，它必须由客户端的浏览器请求。这意味着将 <script>在您的 HTML 文档中标记以加载文件，如下所示:

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

没有它，您的代码就只是坐在您的服务器上什么都不做。

但首先还有一个步骤:正如@Vijay 在评论中指出的那样，您的代码需要进行转译。这意味着什么？好吧，看看你的代码:它是用 EcmaScript 2015 编写的，这是一种最新的 Javascript 方言，浏览器不支持它。为了确保您的代码适用于大多数浏览器，您需要将其从新方言翻译成浏览器能够执行的内容。这称为转译。 Babel是一个可以做到这一点的包；还有其他人。如果你决定使用 Babel，请查看 setup page其中详细说明了如何在各种不同的环境中使用 Babel。

编辑

如何使用 Babel 来转译你的代码是一个大问题。我将举一个非常的简短示例。

假设您将上面给出的代码保存在一个名为 src/my-react-code.js 的文件中并且您想将其转换为名为 dist/my-react-code.js 的新文件.想象一下你已经在本地安装了 Babel npm install --save-dev babel-cli .要转译源文件，请执行以下操作:

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

这将获取您的源文件，对其进行转换(即将其从新的 ES2015 语法转换为旧的 Javascript 语法)，并将结果保存在 dist/my-react-code.js 中。 .

但是，仅根据此问答中的信息，这将不起作用。您还需要一些东西:

您的源文件需要使用类似 import React from 'react'; 的行导入 React 包在顶部;可能还需要导入其他包。

Babel 可以通过多种不同的方式进行配置。你需要包含一些额外的 Babel 插件。在我的脑海中，我认为你需要做 npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-0 .这些包告诉 Babel 期望什么样的源代码——在你的例子中，它是嵌入了 React 组件的 ES2015 代码(stage-0 包包括一组包，它们是 ES2015 标准的特定部分)。您还需要创建一个 .babelrc配置文件包含:

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

这会告诉 Babel 使用哪些插件。

Babel 的命令行用法记录在 https://babeljs.io/docs/setup/ .从顶部的按钮选择您的环境 - 我选择了第一个，CLI。

一旦你成功转译，看看原始源代码和最终代码之间的区别 - 你会看到 Babel 添加了很多样板代码，基本上重写了大多数浏览器不可用的功能使用“旧”Javascript。

如前所述，配置 Babel 的方式有很多种。我给出了最简单的，但也是最繁琐的。每次更改源代码时，都需要重新编译它以便服务器将其发送到客户端。有很多工具可以将所有 Javascript 捆绑在一起(browserify、webpack 等)、自动化构建过程(grunt、gulp 等)、测试代码(mocha、jest 等)。您应该花一些时间想象一下您理想的工作流程和环境是什么，看看您是否可以使用这些工具将它们组合在一起。

关于javascript - 如何显示 React JavaScript 文件中的内容，或者更确切地说是要由 React 解释的文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38649564/

上一篇：html - 希望删除空白空间(使用 HTML)

下一篇：html - 如何在 css 的 flexbox 中保持 img 的纵横比？

相关文章：

javascript - 文本转二进制 JS

javascript - 如何在 Mapbox GL JS 上的 setHtml 内设置事件？

html - CSS 导航 Bootstrap 问题

javascript - Bootstrap 菜单消失 onclick onmobile/& header image 不会调整大小

html - 需要帮助解决未知问题？

html - 创建 header css - 浏览器与 IE 和 Chrome 的兼容性问题。

javascript - 根据子属性设置 json 属性

javascript - 原型(prototype)和 async.forEach 的范围问题

javascript - Node.js:setInterval 的替代品，更适合游戏循环

html - 如何在div中间显示图片？

©2024 IT工具网  联系我们