How to call and form a React.js function from HTML
Question
I have created a React.js file for all of my code which I will post below, how would I go about calling this from the html however, it contains a fair amount of information, as a result, I am unsure exactly what to do, I have tried several times over the course of several days, I have tried many things, however, I have been unable to figure out out how to call the JavaScript from HTML, I would deeply appreciate some help in this matter, I should note that I am fairly new to HTML, as in I have only been working with it for several days, as a result, my knowledge is not all encompassing, any help would be appreciated, suggestions as well as telling me which fragments of my code are wrong, I hope to hear from everybody soon!
EDIT: To clarify, I am only looking to learn how to call this JavaScript function from HTML, any other information would be greatly appreciated though.
EDIT 2: I am seriously having trouble with this, no matter how much I read, I appear to be unable to wrap my head around the general concepts.
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"));
2 answers
solution1
3 ACCPTED 2016-07-22 12:37:05
I have fixed several problems with the posted code:
- React style comments are not allowed outside of a JSX tag, you should use normal JS comments. (eg remove the {}).
- You should remove all the id attributes in React components. This ids should go in the container elements in the HTML code. In any case, it is always a good idea to change ids for classes in order to allow using several times the same component.
- Components must start with an uppercase letter to differentiate them from HTML tags. Therefore, I have renamed iOS to IOS.
- I have also changed the URL of the React libraries as stackoverflow doesn't allow executing scripts from the fb.me domain.
In order to include the components into your HTML code you have to transpile your JSX code into regular JS. In order to do so, you have several options: Webpack, Browserify, Babel, even in-browser conversion. Depending on the size and complexity of your application, some methods are more suitable than others. I would recommend you to start with the simplest one and then change it for more powerful tools, like webpack, when you are confident with the React part. Learning and configuring these tools can be rather frustrating, so I would avoid them until the need comes.
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"));
<!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>
solution2
0 2016-07-21 05:56:10
You need to render your component with ReactDOM. As it says on the blog
"When you're in React's world you are just building components that fit into other components. Everything is a component. Unfortunately not everything around you is built using React. At the root of your tree you still have to write some plumbing code to connect the outer world into React."
In React you don't call the component from the html, you insert it into the DOM from your script file.
So, for your example, you might include
<div id ="app"></div>
into the html.
Then, in index.js use ReactDOM (don't forget to include the library) to render youur component to the DOM. I'll use jsx since it looks like you are.
ReactDOM.render(<NewComponent />, document.getElementById('app'));
One of the better articles I've found outlining the React workflow including setting up Babel, Webpack, hot reloading, and a basic application structure is here
Now, you've got a lot of Components all assigned to declared variables of the same name so you will also need to fix that.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.