5
以下に投稿するすべてのコード用にReact.jsファイルを作成しましたが、htmlから呼び出す方法については、フェア情報の量、その結果、私は何をすべきか正確には分かりませんが、私は数日間にわたって数回試しましたが、私は多くのことを試みましたが、JavaScriptをどのように呼び出すかを理解することができませんでした。 HTMLについては、私はこの問題について深く感謝したいと思います。私は数日間しか作業していないので、私はHTMLについてかなり新しいことに注意してください。結果として、私の知識はすべてを網羅しているわけではありません。私のコードのどの部分が間違っているかを教えてくれるだけでなく、皆様からすぐにお聞きしたいと思います！HTMLからReact.js関数を呼び出してフォームを作成する方法
EDIT：明確にするために、このJavaScript関数をHTMLから呼び出す方法を学ぶだけで、他の情報も非常に高く評価されます。
EDIT 2：私はこの問題に真剣に取り組んでいますが、私が読んでいても、私は一般的な概念の周りに私の頭を包むことができないようです。あなたはReactDOMを使用してコンポーネントをレンダリングする必要が
index.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 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>
I don't know what to do here.
</body>
<script type="text/javascript">
$('.autoplay').slick({
slidesToShow: 2
, slidesToScroll: 1
, autoplay: true
, autoplaySpeed: 2000
, });
</script>
</html>
index.js
require("babel-core").transform("code", options);
var NavBar = React.createClass({
render: function() {
return (
{/* Navigation */}
<div id="nav" 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 (
{/* Picture Gallery */}
<div id="Gallery">
<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 (
{/* What's New */}
<div id="whatsnew" 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 (
{/* Bon 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() {
return (
{/* iOS App */}
<div id="advertiseApp">
<h2>
<span />
</h2>
</div>
);
}
});
ReactDOM.render(<iOS />, document.getElementById("advertiseApp"));
var Footer = React.createClass({
render: function() {
return (
{/* Footer */}
<div id="footer">
<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"));
は、なぜあなたはHTMLから呼び出す必要がありますか？ – gcampbell
私はそれがどのように行われたと仮定したのですが、私は月曜日にJavaScript、HTML、CSSのみを取り上げたと言いました。 –
JavaScriptをHTMLに混ぜるのではなく、自分のファイル内のJavaScriptをすべてkelpすると、うまくいく傾向があります。 （そして、 'require（" babel-core "）。transform（" code "、options）'は文字列 "code"を変換するだけです） – gcampbell