Geek Answers Handbook

How to call and form a React.js function from HTML

I created a React.js file for all my code, which I will post below, how would I call it from html, but it contains enough information, as a result I’m not sure what to do, I tried several times for several days, I I tried a lot, but I could not figure out what to call JavaScript from HTML, I would deeply appreciate help in this matter, I should note that I am quite new to HTML, since I worked with it for several days, as a result of my knowledge not everyone covers, any help will be appreciated, suggestions, as well as a ut me some fragments of my code is wrong, I hope to hear from all soon!

EDIT: To clarify, I just want to know how to call this JavaScript function from HTML, however any other information would be appreciated.

EDIT 2: I have serious problems with this, no matter how much I read, I seem to be unable to wrap my head around 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" />&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 ( {/* 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 New */} <div id="whatsnew" className="dark_bg_color"> <h2 style={{marginBottom: 30}}> <span>What 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"));
+5
source share
2 answers

I fixed several issues with the published code:

  • Style comments are not allowed outside of the JSX tag, you should use regular JS comments. (for example, remove {}).
  • You must remove all id attributes in React components. These identifiers should be displayed in the container elements in the HTML code. In any case, it is always recommended to change identifiers for classes in order to allow the same component to be used several times.
  • Components must begin with an uppercase letter to distinguish them from HTML tags. So I renamed iOS to iOS.
  • I also changed the URL of the React libraries, since stackoverflow does not allow scripts from the fb.me domain to be executed.

To include components in your HTML code, you must translate your JSX code into regular JS. To do this, you have several options: Webpack, Browserify, Babel, even conversion in the browser. Depending on the size and complexity of your application, some methods are more suitable than others. I would advise you to start with the simplest and then change it for more powerful tools like webpack when you are sure about the React part. Learning and tweaking these tools can be pretty frustrating, so I would avoid them until the need arises.

 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 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>
+2
source

You need to make your component using ReactDOM. As the blog says

"When you are in the React world, you just build components that fit into other components. All of this is a component. Unfortunately, not everything around you is built using React. At the root of your tree, you still have to write some plumbers code to connect the external of the world to Response. "

In React, you do not call the component from html, you insert it into the DOM from your script file.

So, for your example, you can enable

 <div id ="app"></div>

in html.

Then in index.js use ReactDOM (don't forget to include the library) to map your component to the DOM. I will use jsx as it looks like you are.

 ReactDOM.render(<NewComponent />, document.getElementById('app'));

One of the best articles I've found describing the React workflow, including setting up Babel, Webpack, hot reloading, and the basic structure of the application, is here

Now you have many components, all assigned to a declared variable with the same name, so you also need to fix this.

0
source

More articles:


All Articles