如何显示React JavaScript文件中的内容,或者更确切地说是要由React解释的文件
How to display what is in a React JavaScript file, or rather a file to be interpreted by React
我尝试了几件事,并在这里概念性地看到了它的工作原理如何从HTML中调用和形成React.js函数我从这个文件生成的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" /> 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"> </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代码,必须由客户端的浏览器请求。这意味着在HTML文档中放置一个<script>
标记来加载文件,类似于以下内容:
<script src="https://example.com/my-react-code.js"></script>
如果没有这一点,您的代码就只是坐在服务器上无所事事。
但首先还有另一个步骤:正如@Vijay在评论中指出的那样,您的代码需要进行转换。这是什么意思?好吧,看看你的代码:它是用EcmaScript 2015编写的,这是Javascript的一种最新方言,浏览器不太支持它。为了确保你的代码在大多数浏览器上都能工作,你需要将它从新方言翻译成浏览器能够执行的东西。这被称为传输。巴贝尔是一个可以做到这一点的软件包;还有其他人。如果您决定使用Babel,请查看设置页面,其中详细说明了如何在各种不同的环境中使用Babel。
编辑
如何使用Babel来转换您的代码是一个大问题。我将举一个非常的简单例子。
因此,假设您将上面给出的代码保存在一个名为src/my-react-code.js
的文件中,并且您希望将其转换为一个称为dist/my-react-code.js
的新文件。想象一下,您已经使用npm install --save-dev babel-cli
在本地安装了Babel。要传输源文件,请执行以下操作:
./node_modules/.bin/babel src -d dist
这将获取您的源文件,对其进行转换(即将其从新的ES2015语法转换为旧的Javascript语法),并将结果保存在dist/my-react-code.js
中。
然而,这将不起作用,因为只有这个问题中的信息&答复你还需要一些东西:
您的源文件需要导入React包,顶部有一行类似import React from 'react';
的代码;可能还有其他包也需要导入。
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的命令行用法记录在https://babeljs.io/docs/setup/.从顶部的按钮中选择您的环境—我选择了第一个,CLI。
一旦你成功地进行了转换,看看原始源代码和最终代码之间的区别——你会发现Babel添加了很多样板代码,基本上重写了大多数使用"旧"Javascript的浏览器中不可用的功能。
如上所述,有很多方法可以配置Babel。我给出了最简单的,但也是最麻烦的。每次更改源代码时,都需要重新传输,以便服务器将其发送到客户端。有很多工具可以将所有的Javascript捆绑在一起(browserfy、webpack等),自动化构建过程(grunt、gump等),测试代码(mocha、jest等)。你应该花一些时间想象一下你理想的工作流程和环境是什么,看看是否可以使用这些工具将其组合在一起。
- React.js如何从js文件中获取数组
- 如何使用webpack将全局JS文件包含到我的React项目中
- 通过调用React中的jsx文件设置Highcharts piechhartDefaults
- 我的React应用程序的根文件夹与React Router冲突
- 在另一个文件夹中显示React组件
- 如何覆盖伊斯坦布尔的React jsx文件
- 使用react webpack文件加载器提供静态pdf
- 使用Realm React Native查找Realm文件的路径,以便与Realm Browser一起使用
- 如何使用其他文件中的react组件
- 如何使用react和gump动态加载脚本文件
- 在react native中通过PUT方法上载文件
- 如何将 React 组件正确存储在单独的文件中并导入 React
- 如何通过 React 按其键返回对象内容(JSON 文件)
- 如何将 react js 组件拆分为多个文件
- React-Native 使用 XHR 将图像文件发送到 API 后端
- 如何在 react.js 中使用 refs 从文件类型的 html 输入表单中获取文件数据
- 如何在 Vim 中添加 React JSX 作为 JavaScript 文件类型并启用 eslinting、自动完成
- Node.js具有express和react,fs.readdir可以'找不到文件
- 我怎么能用gullow破解React的捆绑文件呢
- 为什么添加<脚本>标签在运行时不加载javascript文件?(react.js)