-2
我的問題是非常直截了當的，我將如何去反應javascript的樣式，另外，我將如何添加滾動條，儘可能多的頁面，我有屏幕，並沒有滾動下來的方式。此外，如何在現有代碼上使用另一個js文件，我目前使用Slick作爲圖像滑塊，但是，我無法弄清楚如何合併必要的文件。如何樣式Reactjs腳本
編輯：
目前代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="BonApp">
<meta name="keywords" content="HTML,CSS,JavaScript">
<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>
<script type="text/javascript">
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'));
</script>
<script type="text/javascript">
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"));
</script>
<script type="text/javascript">
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"));
</script>
<script type="text/javascript">
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"));
</script>
<script type="text/javascript">
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"));
</script>
<script type="text/javascript">
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"));
</script>
</html>